feat: placeholder

package.json

@@ -53,6 +53,7 @@
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@tiptap/core": "^2.0.2",
+    "@tiptap/extension-placeholder": "^2.0.2",
     "@tiptap/extension-underline": "^2.0.2",
     "@tiptap/pm": "^2.0.2",
     "@tiptap/starter-kit": "^2.0.2",

src/interface.ts

@@ -9,6 +9,19 @@ export default defineInterface({
   component: TiptapEditor,
   types: ["json", "text"],
   group: "standard",
-  options: null,
   recommendedDisplays: ["tiptap"],
+  options: [
+    {
+      field: "placeholder",
+      name: "$t:placeholder",
+      type: "string",
+      meta: {
+        width: "full",
+        interface: "system-input-translated-string",
+        options: {
+          placeholder: "$t:enter_a_placeholder",
+        },
+      },
+    },
+  ],
 });

src/tiptap-editor.vue

@@ -309,12 +309,21 @@
     strong {
       font-weight: 700;
     }
+
+    .ProseMirror p.is-editor-empty:first-child::before {
+      color: var(--foreground-subdued);
+      content: attr(data-placeholder);
+      float: left;
+      height: 0;
+      pointer-events: none;
+    }
   }
 }
 </style>
 
 <script setup lang="ts">
 import { Editor, EditorContent, BubbleMenu } from "@tiptap/vue-3";
+import { Placeholder } from "@tiptap/extension-placeholder";
 import { onBeforeUnmount, watch } from "vue";
 import { useI18n } from "vue-i18n";
 import { translateShortcut } from "./utils/translate-shortcut";
@@ -344,14 +353,21 @@ const props = withDefaults(
     value: ValueType | null;
     type: TypeType;
     disabled: boolean;
+    placeholder: string | null;
   }>(),
-  { value: null, disabled: false }
+  { value: null, disabled: false, placeholder: null }
 );
 
 const emit = defineEmits<{
   (e: "input", value: ValueType): void;
 }>();
 
+extensions.push(
+  Placeholder.configure({
+    placeholder: props.placeholder,
+  })
+);
+
 const editor = new Editor({
   editable: !props.disabled,
   content: props.value,