Add support to render and edit FrontMatter

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);

cypress/e2e/FrontMatter.spec.js

@@ -0,0 +1,62 @@
+/**
+ * @copyright Copyright (c) 2022
+ *
+ * @license AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { initUserAndFiles, randHash } from '../utils/index.js'
+
+const randUser = randHash()
+
+describe('Front matter support', function() {
+	before(function() {
+		initUserAndFiles(randUser, 'frontmatter.md', 'empty.md')
+	})
+
+	beforeEach(function() {
+		cy.login(randUser, 'password')
+	})
+
+	it('Open file with front matter', function() {
+		cy.openFile('frontmatter.md').then(() => {
+			expect(cy.getContent().find('pre.frontmatter').length === 1)
+		})
+	})
+
+	it('Add front matter', function() {
+		cy.openFile('empty.md').clearContent().then(() => {
+			cy.getContent()
+				.type('---')
+				.type('test')
+			cy.getContent().find('pre.frontmatter').should(pre => {
+				expect(pre.length === 1)
+				expect(pre[0].text === 'test')
+			})
+		})
+	})
+
+	it('Do not add multiple front matter', function() {
+		cy.openFile('empty.md').clearContent().then(() => {
+			cy.getContent()
+				.type('---test')
+				.type('{downArrow}')
+				.type('---test')
+			cy.getContent().find('pre.frontmatter').should(pre => expect(pre.length === 1))
+			cy.getContent().find('hr').should(hr => expect(hr.length === 1))
+		})
+	})
+})

cypress/fixtures/frontmatter.md

@@ -0,0 +1,6 @@
+---
+some: value
+other: 1.2
+---
+# Heading
+Content

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,71 @@
+import { mergeAttributes } from '@tiptap/core'
+import TiptapCodeBlock from '@tiptap/extension-code-block'
+
+const FrontMatter = TiptapCodeBlock.extend({
+	name: 'frontMatter',
+	// 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 [{
+			tag: 'pre#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!')
+		const text = node.textContent
+		// Make sure the front matter fences are longer than any dash sequence within it
+		const dashes = text.match(/-{3,}/gm)
+		const separator = '-'.repeat(dashes ? dashes.sort().slice(-1)[0].length + 1 : 3)
+
+		state.write('')
+		state.out = ''
+		state.write(`${separator}\n`)
+		state.text(text, false)
+		state.ensureNewLine()
+		state.write(separator)
+		state.closeBlock(node)
+	},
+
+	// 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 {}
+	},
+	addPasteRules: () => [],
+	addProseMirrorPlugins: () => [],
+})
+
+export default FrontMatter

src/tests/markdown.spec.js

@@ -192,4 +192,10 @@ describe('Markdown serializer from html', () => {
 			`<p class="callout warning">!warning!</p>`
 		)).toBe(`::: warn\n!warning!\n\n:::`)
 	})
+
+	test('front matter', () => {
+		expect(markdownThroughEditorHtml('<pre id="frontmatter"><code>some: value</code></pre><h1>Heading</h1>')).toBe('---\nsome: value\n---\n\n# Heading')
+		// Test --- within front matter is allowed
+		expect(markdownThroughEditorHtml('<pre id="frontmatter"><code>---</code></pre><h1>Heading</h1>')).toBe('----\n---\n----\n\n# Heading')
+	})
 })