feat: add editor placeholder

Author: WhyNeet

package.json

@@ -31,6 +31,7 @@
     "@tiptap/extension-link": "^2.2.4",
     "@tiptap/extension-list-item": "^2.2.4",
     "@tiptap/extension-paragraph": "^2.2.4",
+    "@tiptap/extension-placeholder": "^2.4.0",
     "@tiptap/extension-strike": "^2.4.0",
     "@tiptap/extension-task-item": "^2.2.4",
     "@tiptap/extension-task-list": "^2.2.4",

pnpm-lock.yaml

@@ -1,36 +1,40 @@
 <script setup lang="ts">
-import {onBeforeUnmount, onMounted, ref} from "vue";
-import {watchDebounced} from "@vueuse/core";
-import {useCalendarStore} from "@/stores/useCalendarStore.ts";
-import {readContent, writeContent} from "@/api/content.ts";
-import {EditorContent, Editor} from "@tiptap/vue-3";
-import {Gapcursor} from "@tiptap/extension-gapcursor";
-import {CharacterCount} from "@tiptap/extension-character-count";
-import {Paragraph} from "@tiptap/extension-paragraph";
-import {TaskList} from "@tiptap/extension-task-list";
-import {TaskItem} from "@tiptap/extension-task-item";
-import {Heading} from "@tiptap/extension-heading";
-import {CodeBlock} from "@tiptap/extension-code-block";
-import {BulletList} from "@tiptap/extension-bullet-list";
-import {ListItem} from "@tiptap/extension-list-item";
-import {Bold} from "@tiptap/extension-bold";
-import {Italic} from "@tiptap/extension-italic";
-import {Link} from "@tiptap/extension-link";
-import {Highlight} from "@tiptap/extension-highlight";
-import {HorizontalRule} from "@tiptap/extension-horizontal-rule";
-import {Strike} from "@tiptap/extension-strike";
-import {Document} from "@tiptap/extension-document";
-import {Text} from "@tiptap/extension-text";
-import {History} from "@tiptap/extension-history";
+import { onBeforeUnmount, onMounted, ref } from "vue";
+import { useI18n } from "vue-i18n";
+import { watchDebounced } from "@vueuse/core";
+import { useCalendarStore } from "@/stores/useCalendarStore.ts";
+import { readContent, writeContent } from "@/api/content.ts";
+import { EditorContent, Editor } from "@tiptap/vue-3";
+import { Gapcursor } from "@tiptap/extension-gapcursor";
+import { CharacterCount } from "@tiptap/extension-character-count";
+import { Paragraph } from "@tiptap/extension-paragraph";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { TaskList } from "@tiptap/extension-task-list";
+import { TaskItem } from "@tiptap/extension-task-item";
+import { Heading } from "@tiptap/extension-heading";
+import { CodeBlock } from "@tiptap/extension-code-block";
+import { BulletList } from "@tiptap/extension-bullet-list";
+import { ListItem } from "@tiptap/extension-list-item";
+import { Bold } from "@tiptap/extension-bold";
+import { Italic } from "@tiptap/extension-italic";
+import { Link } from "@tiptap/extension-link";
+import { Highlight } from "@tiptap/extension-highlight";
+import { HorizontalRule } from "@tiptap/extension-horizontal-rule";
+import { Strike } from "@tiptap/extension-strike";
+import { Document } from "@tiptap/extension-document";
+import { Text } from "@tiptap/extension-text";
+import { History } from "@tiptap/extension-history";
 
-const store = useCalendarStore()
-const editor = ref()
-const content = ref('')
+const { t } = useI18n();
+
+const store = useCalendarStore();
+const editor = ref();
+const content = ref("");
 
 onMounted(async () => {
   editor.value = new Editor({
-    autofocus: 'end',
-    content: await readContent(store.currentDate) as string,
+    autofocus: "end",
+    content: (await readContent(store.currentDate)) as string,
     editable: true,
     extensions: [
       Document,
@@ -49,43 +53,44 @@ onMounted(async () => {
       Strike,
       Link,
       History,
-      /*Image,
       Placeholder.configure({
         includeChildren: true,
         placeholder: ({ node }) => {
-          return {
-            'paragraph': this.$t('commands.type_slash')
-          }[node.type.name] ?? ''
+          return (
+            {
+              paragraph: t("commands.type_slash"),
+            }[node.type.name] ?? ""
+          );
         },
-      }),*/
+      }),
       Gapcursor,
-      CharacterCount
+      CharacterCount,
     ],
-    onUpdate: async ({editor}) => {
-      content.value = editor.getHTML()
-    }
-  })
-})
+    onUpdate: async ({ editor }) => {
+      content.value = editor.getHTML();
+    },
+  });
+});
 
-const focusEditor = () => editor.value.chain().focus().run()
+const focusEditor = () => editor.value.chain().focus().run();
 
 watchDebounced(
   content,
   async () => writeContent(store.currentDate, content.value),
-  {debounce: 500, maxWait: 1500},
-)
+  { debounce: 500, maxWait: 1500 },
+);
 
 // TODO: maybe save before destroy
-onBeforeUnmount(() => console.log('destroying'))
+onBeforeUnmount(() => console.log("destroying"));
 </script>
 
 <template>
   <div
-    class='px-10 mt-5 text-gray-400 dark:text-gray-500 relative flex-grow cursor-text'
-    @click='focusEditor'
+    class="px-10 mt-5 text-gray-400 dark:text-gray-500 relative flex-grow cursor-text"
+    @click="focusEditor"
   >
-    <div class='text-black dark:text-white'>
-      <editor-content class='pb-10' :editor="editor" v-model="content"/>
+    <div class="text-black dark:text-white">
+      <editor-content class="pb-10" :editor="editor" v-model="content" />
     </div>
   </div>
 </template>
@@ -94,4 +99,4 @@ onBeforeUnmount(() => console.log('destroying'))
 .ProseMirror:focus {
   @apply outline-none;
 }
-</style>
+</style>