Better styling of Front Matter + input rule

Added an input rule to add a front matter node if `---` is typed
in the very beginning of the document.
If it is typed somewhere else the default behavior is still
to insert a `hr` node.

Added a border on the left of the front matter, like the callouts
and blockquote, and added a title for the element.

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

a

1 files changed, 32 insertions, 11 deletions

diff --git a/src/nodes/FrontMatter.js b/src/nodes/FrontMatter.js
index d374228d1..1083a7418 100644
--- a/src/nodes/FrontMatter.js
+++ b/src/nodes/FrontMatter.js
@@ -1,15 +1,17 @@
+import { mergeAttributes } from '@tiptap/core'
 import TiptapCodeBlock from '@tiptap/extension-code-block'
 
 const FrontMatter = TiptapCodeBlock.extend({
 	name: 'frontMatter',
-	addAttributes() {
-		return {
-			...this.parent?.(),
-			class: {
-				default: 'frontmatter',
-				rendered: true,
-			},
-		}
+	// FrontMatter are only valid at the begin of a document
+	draggable: false,
+
+	renderHTML({ node, HTMLAttributes }) {
+		return this.parent({
+			node,
+			HTMLAttributes:
+			mergeAttributes(HTMLAttributes, { 'data-title': t('text', 'Front matter'), class: 'frontmatter' }),
+		})
 	},
 	parseHTML: () => {
 		return [
@@ -33,13 +35,32 @@ const FrontMatter = TiptapCodeBlock.extend({
 		state.write('---')
 		state.closeBlock(node)
 	},
-	// FrontMatter are only valid at the begin of a document
-	draggable: false,
+
+	// Allow users to add a FrontMatter, but only at the beginning of the document
+	addInputRules() {
+		return [
+			{
+				find: /^---$/g,
+				handler: ({ state, range, chain }) => {
+					if (range.from === 1) {
+						if (state.doc.resolve(1).parent.type.name === this.name) return false
+						chain()
+							.deleteRange(range)
+							.insertContentAt(0, {
+								type: this.name,
+							})
+						return true
+					}
+					return false
+				},
+			},
+		]
+	},
+
 	// Override rules from Codeblock
 	addCommands() {
 		return {}
 	},
-	addInputRules: () => [],
 	addPasteRules: () => [],
 	addProseMirrorPlugins: () => [],
 })