Fix rendering of front matter if editor is reopened

If the editor was loaded before the callback did not
write the front matter content to the correct variable
which resulted in dropping the front matter.

This is fixed by not using the callback but a renderer function.

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

src/components/Editor.vue

@@ -110,7 +110,6 @@ 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'
@@ -496,15 +495,11 @@ export default {
 		},
 
 		onLoaded({ documentSource }) {
-			let frontMatter = ''
-			const rendered = !this.isRichEditor
+			const content = !this.isRichEditor
 				? `<pre>${escapeHtml(documentSource)}</pre>`
-				: markdownit.use(markdownitFrontMatter, (fm) => {
-					frontMatter = `<pre id="frontmatter"><code>${escapeHtml(fm)}</code></pre>`
-				}).render(documentSource)
+				: markdownit.render(documentSource)
 
 			this.hasConnectionIssue = false
-			const content = frontMatter + rendered
 			const language = extensionHighlight[this.fileExtension] || this.fileExtension;
 
 			(this.isRichEditor ? Promise.resolve() : loadSyntaxHighlight(language))

src/markdownit/index.js

@@ -5,19 +5,25 @@ import underline from './underline.js'
 import splitMixedLists from './splitMixedLists.js'
 import callouts from './callouts.js'
 import keepSyntax from './keepSyntax.js'
+import frontMatter from 'markdown-it-front-matter'
 import implicitFigures from 'markdown-it-image-figures'
+import { escapeHtml } from 'markdown-it/lib/common/utils.js'
 
 const markdownit = MarkdownIt('commonmark', { html: false, breaks: false })
 	.enable('strikethrough')
 	.enable('table')
 	.use(taskLists, { enable: true, labelAfter: true })
+	.use(frontMatter, (fm) => {})
 	.use(splitMixedLists)
 	.use(underline)
 	.use(callouts)
 	.use(keepSyntax)
 	.use(markdownitMentions)
 	.use(implicitFigures)
 
+// Render front matter tokens
+markdownit.renderer.rules.front_matter = (tokens, idx, options) => `<pre id="frontmatter"><code>${escapeHtml(tokens[idx].meta)}</code></pre>`
+
 // Issue #3370: To preserve softbreaks within md files we preserve all whitespaces, so we must not introduce additional new lines after a <br> element
 markdownit.renderer.rules.hardbreak = (tokens, idx, options) => (options.xhtmlOut ? '<br />' : '<br>')
 

src/nodes/FrontMatter.js

@@ -28,7 +28,7 @@ const FrontMatter = TiptapCodeBlock.extend({
 		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)
+		const separator = dashes ? (dashes.sort().slice(-1)[0] + '-') : '---'
 
 		state.write('')
 		state.out = ''