Add tiptap placeholder extension

package.json

@@ -96,5 +96,8 @@
     "typescript-transform-extensions": "^1.0.1",
     "vite": "^5.4.10",
     "vitest": "^2.1.4"
+  },
+  "dependencies": {
+    "@tiptap/extension-placeholder": "^2.9.1"
   }
 }

src/app.scss

@@ -25,3 +25,11 @@
     @apply text-2xl;
   }
 }
+
+.tiptap p.is-editor-empty:first-child::before {
+  color: #adb5bd;
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+}

src/routes/+page.svelte

@@ -4,14 +4,22 @@
   import StarterKit from '@tiptap/starter-kit';
   import cx from 'clsx';
   import { Editor, EditorContent, createEditor } from '$lib';
+  import Placeholder from '@tiptap/extension-placeholder';
 
   import { SvelteCounterExtension, SvelteEditableExtension } from './_components/SvelteExtension';
 
+  const extensions = [
+    StarterKit,
+    SvelteCounterExtension,
+    SvelteEditableExtension,
+    Placeholder.configure({ placeholder: 'Writwe something...' }),
+  ];
+
   let editor = $state() as Readable<Editor>;
 
   onMount(() => {
     editor = createEditor({
-      extensions: [StarterKit, SvelteCounterExtension, SvelteEditableExtension],
+      extensions,
       content: `
         <p>This is still the text editor you're used to, but enriched with node views.</p>
         <svelte-counter-component count="0"></svelte-counter-component>