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 <[email protected]>

a

css/prosemirror.scss

@@ -163,6 +163,18 @@ div.ProseMirror {
 		margin-bottom: 1em;
 	}
 
+	pre.frontmatter {
+		margin-bottom: 2em;
+		border-left: 4px solid var(--color-primary-element);
+	}
+
+	pre.frontmatter::before {
+		display: block;
+		content: attr(data-title);
+		color: var(--color-text-maxcontrast);
+		padding-bottom: 0.5em;
+	}
+
 	p code {
 		background-color: var(--color-background-dark);
 		border-radius: var(--border-radius);

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: () => [],
 })