Add support for editing (not creating) FrontMatter

This adds support for parsing files containing FrontMatter and editing
it as like a code block.

Signed-off-by: Ferdinand Thiessen <[email protected]>

package.json

@@ -79,6 +79,7 @@
 		"@tiptap/vue-2": "^2.0.0-beta.84",
 		"markdown-it": "^13.0.0",
 		"markdown-it-container": "^3.0.0",
+		"markdown-it-front-matter": "^0.2.3",
 		"path-normalize": "^6.0.6",
 		"prosemirror-collab": "^1.3.0",
 		"prosemirror-inputrules": "^1.2.0",

src/components/Editor.vue

@@ -91,6 +91,7 @@ import { extensionHighlight } from '../helpers/mappings.js'
 import { createEditor, serializePlainText, loadSyntaxHighlight } from './../EditorFactory.js'
 import { createMarkdownSerializer } from './../extensions/Markdown.js'
 import markdownit from './../markdownit/index.js'
+import markdownitFrontMatter from 'markdown-it-front-matter'
 
 import { Collaboration, Keymap, UserColor } from './../extensions/index.js'
 import DocumentStatus from './Editor/DocumentStatus.vue'
@@ -458,14 +459,18 @@ export default {
 		},
 
 		onLoaded({ documentSource }) {
-			this.hasConnectionIssue = false
+			let frontMatter = ''
+			const rendered = !this.isRichEditor
+				? `<pre>${escapeHtml(documentSource)}</pre>`
+				: markdownit.use(markdownitFrontMatter, (fm) => {
+					frontMatter = `<pre id="frontmatter"><code>${escapeHtml(fm)}</code></pre>`
+				}).render(documentSource)
 
-			const content = this.isRichEditor
-				? markdownit.render(documentSource)
-				: '<pre>' + escapeHtml(documentSource) + '</pre>'
-			const language = extensionHighlight[this.fileExtension] || this.fileExtension
+			this.hasConnectionIssue = false
+			const content = frontMatter + rendered
+			const language = extensionHighlight[this.fileExtension] || this.fileExtension;
 
-			loadSyntaxHighlight(language)
+			(this.isRichEditor ? Promise.resolve() : loadSyntaxHighlight(language))
 				.then(() => {
 					this.$editor = createEditor({
 						content,

src/extensions/RichText.js

@@ -33,6 +33,7 @@ import Code from '@tiptap/extension-code'
 import CodeBlock from '@tiptap/extension-code-block'
 import HorizontalRule from '@tiptap/extension-horizontal-rule'
 import Dropcursor from '@tiptap/extension-dropcursor'
+import FrontMatter from './../nodes/FrontMatter.js'
 import HardBreak from './HardBreak.js'
 import KeepSyntax from './KeepSyntax.js'
 import Table from './../nodes/Table.js'
@@ -89,6 +90,7 @@ export default Extension.create({
 			}),
 			Dropcursor,
 			KeepSyntax,
+			FrontMatter,
 		]
 		if (this.options.link !== false) {
 			defaultExtensions.push(Link.configure({

src/nodes/FrontMatter.js

@@ -0,0 +1,47 @@
+import TiptapCodeBlock from '@tiptap/extension-code-block'
+
+const FrontMatter = TiptapCodeBlock.extend({
+	name: 'frontMatter',
+	addAttributes() {
+		return {
+			...this.parent?.(),
+			class: {
+				default: 'frontmatter',
+				rendered: true,
+			},
+		}
+	},
+	parseHTML: () => {
+		return [
+			{
+				tag: 'pre[id="frontmatter"]',
+				preserveWhitespace: 'full',
+				priority: 9001,
+				attrs: {
+					language: 'yaml',
+				},
+			},
+		]
+	},
+	toMarkdown: (state, node) => {
+		if (!state.out.match(/^\s*/)) throw Error('FrontMatter must be the first node of the document!')
+		state.write('')
+		state.out = ''
+		state.write('---\n')
+		state.text(node.textContent, false)
+		state.ensureNewLine()
+		state.write('---')
+		state.closeBlock(node)
+	},
+	// FrontMatter are only valid at the begin of a document
+	draggable: false,
+	// Override rules from Codeblock
+	addCommands() {
+		return {}
+	},
+	addInputRules: () => [],
+	addPasteRules: () => [],
+	addProseMirrorPlugins: () => [],
+})
+
+export default FrontMatter