feat(new tool): Paste as Markdown

Author: sharevb

components.d.ts

@@ -148,6 +148,7 @@ declare module '@vue/runtime-core' {
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
+    PasteAsMarkdown: typeof import('./src/tools/paste-as-markdown/paste-as-markdown.vue')['default']
     PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['default']
     PdfSignatureDetails: typeof import('./src/tools/pdf-signature-checker/components/pdf-signature-details.vue')['default']
     PercentageCalculator: typeof import('./src/tools/percentage-calculator/percentage-calculator.vue')['default']

package.json

@@ -35,6 +35,7 @@
     "release": "node ./scripts/release.mjs"
   },
   "dependencies": {
+    "@github/paste-markdown": "^1.5.3",
     "@it-tools/bip39": "^0.0.4",
     "@it-tools/oggen": "^1.3.0",
     "@sindresorhus/slugify": "^2.2.1",

pnpm-lock.yaml

@@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
 import { tool as safelinkDecoder } from './safelink-decoder';
+import { tool as pasteAsMarkdown } from './paste-as-markdown';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -172,6 +173,7 @@ export const toolsByCategory: ToolCategory[] = [
       textDiff,
       numeronymGenerator,
       asciiTextDrawer,
+      pasteAsMarkdown,
     ],
   },
   {

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { Markdown } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Paste as Markdown',
+  path: '/paste-as-markdown',
+  description: 'Paste clipboard content as Markdown',
+  keywords: ['paste', 'markdown'],
+  component: () => import('./paste-as-markdown.vue'),
+  icon: Markdown,
+  createdAt: new Date('2024-07-14'),
+});

src/tools/paste-as-markdown/index.ts

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { subscribe } from '@github/paste-markdown';
+
+const inputElement = ref<HTMLElement>();
+const markdown = ref('');
+
+// Subscribe the behavior to the textarea.
+onMounted(() => {
+  subscribe(inputElement.value as never);
+});
+</script>
+
+<template>
+  <c-card title="Paste in Markdown" class="paste-zone">
+    <textarea
+      ref="inputElement"
+      rows="10"
+    />
+  </c-card>
+</template>