fix: make pasting work

components.d.ts

@@ -138,13 +138,17 @@ declare module '@vue/runtime-core' {
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
+    NInput: typeof import('naive-ui')['NInput']
     NInputNumber: typeof import('naive-ui')['NInputNumber']
     NLabel: typeof import('naive-ui')['NLabel']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
+    NLi: typeof import('naive-ui')['NLi']
     NMenu: typeof import('naive-ui')['NMenu']
+    NP: typeof import('naive-ui')['NP']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
     NSpin: typeof import('naive-ui')['NSpin']
+    NUl: typeof import('naive-ui')['NUl']
     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']

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

@@ -4,8 +4,8 @@ import { defineTool } from '../tool';
 export const tool = defineTool({
   name: 'Paste as Markdown',
   path: '/paste-as-markdown',
-  description: 'Paste clipboard content as Markdown',
+  description: 'Paste cells/tables and links from clipboard content as Markdown',
-  keywords: ['paste', 'markdown'],
+  keywords: ['paste', 'cell', 'table', 'links', 'md', 'markdown'],
   component: () => import('./paste-as-markdown.vue'),
   icon: Markdown,
   createdAt: new Date('2024-07-14'),

src/tools/paste-as-markdown/paste-as-markdown.vue

@@ -1,20 +1,31 @@
 <script setup lang="ts">
 import { subscribe } from '@github/paste-markdown';
+import CInputText from '@/ui/c-input-text/c-input-text.vue';
 
-const inputElement = ref<HTMLElement>();
+const inputElement = ref<typeof CInputText>();
 const markdown = ref('');
 
 // Subscribe the behavior to the textarea.
 onMounted(() => {
-  subscribe(inputElement.value as never);
+  subscribe(inputElement.value?.textareaRef as never);
 });
 </script>
 
 <template>
   <c-card title="Paste in Markdown" class="paste-zone">
-    <textarea
+    <n-ul>
+      <n-li>Paste spreadsheet cells and HTML tables as a Markdown tables.</n-li>
+      <n-li>Paste URLs on selected text as Markdown links.</n-li>
+      <n-li>Paste text containing links as text containing Markdown links.</n-li>
+      <n-li>Paste image URLs as Markdown image links.</n-li>
+    </n-ul>
+    <CInputText
       ref="inputElement"
+      v-model:value="markdown"
+      multiline
+      placeholder="Paste your content here..."
       rows="10"
+      w-full
     />
   </c-card>
 </template>

src/ui/c-input-text/c-input-text.vue

@@ -137,6 +137,8 @@ onMounted(() => {
 
 defineExpose({
   inputWrapperRef,
+  textareaRef,
+  inputRef,
   focus,
   blur,
 });