refactor(front): update MarkdownInputField import path and enhance TextUploadInputTextView component structure for improved readability

front/components/Field/MarkdownInputField.vue

@@ -3,11 +3,11 @@
 </template>
 
 <script setup lang="ts">
-import Tiptap from '@/components/Tiptap.vue'
+import Tiptap from '@/components/Tiptap/Index.vue'
 import type { RuleExpression } from 'vee-validate'
 const props = defineProps<{
     name: string
     rules?: RuleExpression<string>
 }>()
-const { value, } = useField<string>(props.name, props.rules)
+const { value } = useField<string>(props.name, props.rules)
 </script>

front/components/Home/Text/TextUploadInputTextView.vue

@@ -1,74 +1,72 @@
 <script lang="ts" setup>
-import MarkdownInputField from "@/components/Field/MarkdownInputField.vue";
-import FormButton from "@/components/Field/FormButton.vue";
-import Button from "@/components/ui/button/Button.vue";
-import showDrawer from "@/lib/showDrawer";
-import { h } from "vue";
-import TextShareDrawer from "@/components/Drawer/TextShareDrawer.vue";
-import { cx } from "class-variance-authority";
-import PickupShareBtn from "@/components/PickupShareBtn.vue";
-const form = useFormContext();
-const { t } = useI18n();
+import MarkdownInputField from '@/components/Field/MarkdownInputField.vue'
+import FormButton from '@/components/Field/FormButton.vue'
+import Button from '@/components/ui/button/Button.vue'
+import showDrawer from '@/lib/showDrawer'
+import { h } from 'vue'
+import TextShareDrawer from '@/components/Drawer/TextShareDrawer.vue'
+import { cx } from 'class-variance-authority'
+import PickupShareBtn from '@/components/PickupShareBtn.vue'
+const form = useFormContext()
+const { t } = useI18n()
 
 const emit = defineEmits<{
-  (e: "change", key: string): void;
-}>();
+    (e: 'change', key: string): void
+}>()
 
 const handleTextShare = ({ type, config }: { type: string; config: any }) => {
-  form?.setFieldValue("handle_type", type);
-  form?.setFieldValue("config", config);
-  emit("change", "result");
-};
+    form?.setFieldValue('handle_type', type)
+    form?.setFieldValue('config', config)
+    emit('change', 'result')
+}
 </script>
 <template>
-  <div class="gap-5 flex flex-col">
-    <div class="text-xl font-normal">{{ t("text.uploadText") }}</div>
-    <div class="relative">
-      <MarkdownInputField
-        name="text"
-        :placeholder="t('text.uploadTextPlaceholder')"
-        class="max-h-[50vh] min-h-40 overflow-y-auto max-w-full [&>*]:pr-10"
-        rules="required"
-      />
-      <Button
-        variant="ghost"
-        size="icon"
-        :class="
-          cx(
-            'absolute right-2 top-2 hover:bg-black/10 transition-all duration-300',
-            form?.values.text?.length > 0
-              ? 'opacity-100'
-              : 'opacity-0 pointer-events-none',
-          )
-        "
-        @click="
-          () => {
-            form?.setValues({ text: '' });
-          }
-        "
-      >
-        <LucideX />
-      </Button>
+    <div class="gap-5 flex flex-col">
+        <div class="text-xl font-normal">{{ t('text.uploadText') }}</div>
+        <div class="relative">
+            <MarkdownInputField
+                name="text"
+                :placeholder="t('text.uploadTextPlaceholder')"
+                class="max-h-[50vh] min-h-40 overflow-y-auto max-w-full [&>*]:pr-10 flex flex-col"
+                rules="required"
+            />
+            <Button
+                variant="ghost"
+                size="icon"
+                :class="
+                    cx(
+                        'absolute right-2 top-2 hover:bg-black/10 transition-all duration-300',
+                        form?.values.text?.length > 0 ? 'opacity-100' : 'opacity-0 pointer-events-none'
+                    )
+                "
+                @click="
+                    () => {
+                        form?.setValues({ text: '' })
+                    }
+                "
+            >
+                <LucideX />
+            </Button>
+        </div>
+        <div class="flex flex-row gap-3">
+            <FormButton
+                @click="
+                    async (form) => {
+                        const { text } = form?.values || {}
+                        showDrawer({
+                            render: ({ hide }) =>
+                                h(TextShareDrawer, {
+                                    hide,
+                                    text,
+                                    onTextHandle: handleTextShare,
+                                }),
+                        })
+                    }
+                "
+            >
+                <LucideShare class="size-4" />{{ t('btn.submit') }}
+            </FormButton>
+            <PickupShareBtn />
+        </div>
     </div>
-    <div class="flex flex-row gap-3">
-      <FormButton
-        @click="
-          async (form) => {
-            const { text } = form?.values || {};
-            showDrawer({
-              render: ({ hide }) =>
-                h(TextShareDrawer, {
-                  hide,
-                  text,
-                  onTextHandle: handleTextShare,
-                }),
-            });
-          }
-        "
-      >
-        <LucideShare class="size-4" />{{ t("btn.submit") }}
-      </FormButton>
-      <PickupShareBtn />
-    </div>
-  </div>
 </template>

front/components/Tiptap/Index.vue

@@ -3,9 +3,12 @@ import { Editor, EditorContent } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import { Markdown } from 'tiptap-markdown'
 import Placeholder from '@tiptap/extension-placeholder'
+import { cx } from 'class-variance-authority'
+
 const props = defineProps<{
     modelValue?: string
     placeholder?: string
+    class?: string
 }>()
 const emit = defineEmits<{
     (e: 'update:modelValue', value: string): void
@@ -27,14 +30,14 @@ onMounted(() => {
             // CommandsPlugin,
         ],
         onUpdate: () => {
-            emit('update:modelValue', editor.value?.storage?.markdown?.getMarkdown() ?? '')
+            emit('update:modelValue', (editor.value as any)?.storage?.markdown?.getMarkdown() ?? '')
         },
     })
 })
 watch(
     () => props.modelValue,
     (value) => {
-        if (value !== editor.value?.storage?.markdown?.getMarkdown()) {
+        if (value !== (editor.value as any)?.storage?.markdown?.getMarkdown()) {
             editor.value?.commands.setContent(value ?? '')
         }
     }
@@ -45,7 +48,13 @@ onUnmounted(() => {
 </script>
 <template>
     <editor-content
-        :editor="editor"
-        class="prose prose-sm bg-white/50 rounded-md p-2 [&>*]:outline-none prose-p:my-1 prose-headings:my-2 prose-pre:mb-0 prose-blockquote:border-black/50 selection:bg-primary/20"
-    />
+        :editor="editor as any"
+        :class="
+            cx(
+                'prose prose-sm bg-white/50 rounded-md p-2 [&>*]:outline-none prose-p:my-1 prose-headings:my-2 prose-pre:mb-0 prose-blockquote:border-black/50 selection:bg-primary/20 max-w-full',
+                props.class
+            )
+        "
+    >
+    </editor-content>
 </template>