Add placeholder text and help line under Tiptap body editor

blog/templates/blog/widgets/tiptap.html

@@ -16,4 +16,5 @@
     </div>
     <div data-editor class="prose prose-lg max-w-none min-h-[500px]"></div>
   </div>
+  <p class="tiptap-help">Press <kbd>/</kbd> for blocks · Select text for formatting · Type <code>##</code> for heading, <code>&gt;</code> for quote, <code>**bold**</code> for bold</p>
 </div>

package.json

@@ -34,6 +34,7 @@
     "@tiptap/core": "^2.27.2",
     "@tiptap/extension-bubble-menu": "^2.27.2",
     "@tiptap/extension-link": "^2.27.2",
+    "@tiptap/extension-placeholder": "^2.27.2",
     "@tiptap/extension-underline": "^2.27.2",
     "@tiptap/starter-kit": "^2.27.2",
     "@tiptap/suggestion": "^2.27.2",

src/tiptap/index.js

@@ -3,6 +3,7 @@ import StarterKit from "@tiptap/starter-kit";
 import Underline from "@tiptap/extension-underline";
 import Link from "@tiptap/extension-link";
 import BubbleMenu from "@tiptap/extension-bubble-menu";
+import Placeholder from "@tiptap/extension-placeholder";
 import { SlashMenu } from "./slash-menu.js";
 import { smartPasteHandler } from "./paste.js";
 
@@ -37,6 +38,7 @@ function mountEditor(shell) {
       Link.configure({ openOnClick: false, autolink: true, HTMLAttributes: { rel: "noopener noreferrer" } }),
       BubbleMenu.configure({ element: bubble }),
       SlashMenu,
+      Placeholder.configure({ placeholder: "Tell your story…" }),
     ],
     content: textarea.value,
     editorProps: {

static/blog/tiptap.css

@@ -99,3 +99,30 @@
 }
 .slash-menu__item.is-selected,
 .slash-menu__item:hover { background: rgba(0,0,0,0.05); }
+
+/* Placeholder shown in empty editor (Tiptap Placeholder extension renders
+   ::before with data-placeholder content on empty paragraphs). */
+[data-editor] p.is-editor-empty:first-child::before {
+  content: attr(data-placeholder);
+  color: var(--md-sys-color-on-surface-variant, #888);
+  pointer-events: none;
+  float: left;
+  height: 0;
+}
+
+/* Help line under the editor */
+.tiptap-help {
+  margin: 0.75rem 0.25rem 0;
+  font-size: 0.8125rem;
+  color: var(--md-sys-color-on-surface-variant, #666);
+  line-height: 1.5;
+}
+.tiptap-help kbd,
+.tiptap-help code {
+  background: rgba(0, 0, 0, 0.06);
+  padding: 0.05em 0.4em;
+  border-radius: 4px;
+  font-family: ui-monospace, monospace;
+  font-size: 0.875em;
+  color: inherit;
+}