From a410b11060cfed815854b3806df95a3866712ec2 Mon Sep 17 00:00:00 2001
From: Benjamin VIELLARD <gbicou@gmail.com>
Date: Thu, 6 Apr 2023 17:34:50 +0200
Subject: [PATCH] feat: placeholder

---
 package.json          |  1 +
 pnpm-lock.yaml        | 13 +++++++++++++
 src/interface.ts      | 15 ++++++++++++++-
 src/tiptap-editor.vue | 18 +++++++++++++++++-
 4 files changed, 45 insertions(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 5db3149..bc85e33 100644
--- a/package.json
+++ b/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",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 92bfe59..7861c40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -16,6 +16,9 @@ devDependencies:
   '@tiptap/core':
     specifier: ^2.0.2
     version: 2.0.2(@tiptap/pm@2.0.2)
+  '@tiptap/extension-placeholder':
+    specifier: ^2.0.2
+    version: 2.0.2(@tiptap/core@2.0.2)(@tiptap/pm@2.0.2)
   '@tiptap/extension-underline':
     specifier: ^2.0.2
     version: 2.0.2(@tiptap/core@2.0.2)
@@ -1157,6 +1160,16 @@ packages:
       '@tiptap/core': 2.0.2(@tiptap/pm@2.0.2)
     dev: true
 
+  /@tiptap/extension-placeholder@2.0.2(@tiptap/core@2.0.2)(@tiptap/pm@2.0.2):
+    resolution: {integrity: sha512-5D46ONEN4Hcgn9xwWgY0mSUp9DAM/z74P9vZcdChUXxj96L2ngM/nU92qEby0kGCSGoO3ucxJGf/aL8KhGqIxQ==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0
+      '@tiptap/pm': ^2.0.0
+    dependencies:
+      '@tiptap/core': 2.0.2(@tiptap/pm@2.0.2)
+      '@tiptap/pm': 2.0.2(@tiptap/core@2.0.2)
+    dev: true
+
   /@tiptap/extension-strike@2.0.2(@tiptap/core@2.0.2):
     resolution: {integrity: sha512-v5goRcfORMkHaA4/mQH80mO0IVFJup1sSrSd4lNUwWN68Qy2ckMVRLRgvbk0JjG2kbamFgJ4LmN/3ceZvUj27A==}
     peerDependencies:
diff --git a/src/interface.ts b/src/interface.ts
index 9b3e924..fd0db5b 100644
--- a/src/interface.ts
+++ b/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",
+        },
+      },
+    },
+  ],
 });
diff --git a/src/tiptap-editor.vue b/src/tiptap-editor.vue
index b2abaca..e1d2cc2 100644
--- a/src/tiptap-editor.vue
+++ b/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,