From 5b916105d3ecc527cb423942f291be1abf779db1 Mon Sep 17 00:00:00 2001
From: ShareVB <sharevb@gmail.com>
Date: Wed, 4 Sep 2024 22:27:10 +0200
Subject: [PATCH] fix: make pasting work

---
 components.d.ts                                 |  4 ++++
 src/tools/paste-as-markdown/index.ts            |  4 ++--
 .../paste-as-markdown/paste-as-markdown.vue     | 17 ++++++++++++++---
 src/ui/c-input-text/c-input-text.vue            |  2 ++
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/components.d.ts b/components.d.ts
index 87e4b229..ddc2c79c 100644
--- a/components.d.ts
+++ b/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']
diff --git a/src/tools/paste-as-markdown/index.ts b/src/tools/paste-as-markdown/index.ts
index 62e9dda1..e9394f04 100644
--- a/src/tools/paste-as-markdown/index.ts
+++ b/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',
-  keywords: ['paste', 'markdown'],
+  description: 'Paste cells/tables and links from clipboard content as Markdown',
+  keywords: ['paste', 'cell', 'table', 'links', 'md', 'markdown'],
   component: () => import('./paste-as-markdown.vue'),
   icon: Markdown,
   createdAt: new Date('2024-07-14'),
diff --git a/src/tools/paste-as-markdown/paste-as-markdown.vue b/src/tools/paste-as-markdown/paste-as-markdown.vue
index e1a1469b..fecdc70e 100644
--- a/src/tools/paste-as-markdown/paste-as-markdown.vue
+++ b/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>
diff --git a/src/ui/c-input-text/c-input-text.vue b/src/ui/c-input-text/c-input-text.vue
index b5f423d2..c49fbf53 100644
--- a/src/ui/c-input-text/c-input-text.vue
+++ b/src/ui/c-input-text/c-input-text.vue
@@ -137,6 +137,8 @@ onMounted(() => {
 
 defineExpose({
   inputWrapperRef,
+  textareaRef,
+  inputRef,
   focus,
   blur,
 });