feat: add placeholder to headings

package.json

@@ -20,6 +20,7 @@
     "@tiptap/extension-code-block-lowlight": "^2.0.1",
     "@tiptap/extension-highlight": "^2.0.0",
     "@tiptap/extension-link": "2.0.0-beta.220",
+    "@tiptap/extension-placeholder": "^2.0.1",
     "@tiptap/extension-typography": "2.0.0-beta.220",
     "@tiptap/pm": "2.0.0-beta.220",
     "@tiptap/starter-kit": "2.0.0-beta.220",

pnpm-lock.yaml

@@ -28,6 +28,9 @@ dependencies:
   '@tiptap/extension-link':
     specifier: 2.0.0-beta.220
     version: 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
+  '@tiptap/extension-placeholder':
+    specifier: ^2.0.1
+    version: 2.0.1(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220)
   '@tiptap/extension-typography':
     specifier: 2.0.0-beta.220
     version: 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
@@ -858,6 +861,16 @@ packages:
       '@tiptap/core': 2.0.0-beta.220(@tiptap/pm@2.0.0-beta.220)
     dev: false
 
+  /@tiptap/extension-placeholder@2.0.1(@tiptap/core@2.0.0-beta.220)(@tiptap/pm@2.0.0-beta.220):
+    resolution: {integrity: sha512-Jc0SrZw6HQ6Ddxr58SAAw5QPYh2pgjc1OSfrKn7+zBzcZDMFLWWgx9lTRwlR5L5VqTEuWqatJCfDrgjbnE4hLw==}
+    peerDependencies:
+      '@tiptap/core': ^2.0.0
+      '@tiptap/pm': ^2.0.0
+    dependencies:
+      '@tiptap/core': 2.0.0-beta.220(@tiptap/pm@2.0.0-beta.220)
+      '@tiptap/pm': 2.0.0-beta.220(@tiptap/core@2.0.0-beta.220)
+    dev: false
+
   /@tiptap/extension-strike@2.0.0-beta.220(@tiptap/core@2.0.0-beta.220):
     resolution: {integrity: sha512-cIM2ma6mzk08pijOn+KS3ZoHWaUVsVT+OF3m6xewjwJdC0ILg9nApEOhPFrhbeDcxcPmJMlgBl/xeUrEu1HQMg==}
     peerDependencies:

src/components/Tiptap/Editor.vue

@@ -6,6 +6,7 @@ import Link from '@tiptap/extension-link'
 import Highlight from '@tiptap/extension-highlight'
 import { lowlight } from 'lowlight/lib/core'
 import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import Placeholder from '@tiptap/extension-placeholder'
 
 import html from 'highlight.js/lib/languages/xml'
 import css from 'highlight.js/lib/languages/css'
@@ -73,6 +74,23 @@ const editor = useEditor({
         class: 'hljs not-prose',
       },
     }),
+    Placeholder.configure({
+      // Use different placeholders depending on the node type:
+      // placeholder: 'Write something …'
+      placeholder: ({ node }) => {
+        if (node.type.name === 'heading') {
+          switch (node.attrs.level) {
+            case 1:
+              return 'Heading 1'
+            case 2:
+              return 'Heading 2'
+            case 3:
+              return 'Heading 3'
+          }
+        }
+        return 'Can you add some further context?'
+      },
+    }),
   ],
   editable: true,
   autofocus: true,
@@ -88,3 +106,30 @@ const editor = useEditor({
   <BubbleMenu v-if="editor" :editor="editor" />
   <EditorContent :editor="editor" />
 </template>
+
+<style lang="scss">
+/* Basic editor styles */
+.ProseMirror {
+  > * + * {
+    margin-top: 0.75em;
+  }
+}
+
+/* Placeholder (at the top) */
+.ProseMirror p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #adb5bd;
+  pointer-events: none;
+  height: 0;
+}
+
+/* Placeholder (on every new line) */
+.ProseMirror :where(p.is-empty,h1.is-empty,h2.is-empty,h3.is-empty)::before {
+  content: attr(data-placeholder);
+  float: left;
+  color: #adb5bd;
+  pointer-events: none;
+  height: 0;
+}
+</style>