[Stable25] Backport of #3460 - Fix front matter rendering

cypress/README.md

@@ -22,6 +22,7 @@ cy.getContent()
 | `createFolder`       | Create a folder        | `dirName`                           |
 | `shareFileToUser`    | Share a file with user | `userId`, `password`, `path`, `targetUserId`|
 | `openFile`           | Open file in Viewer / Editor | `fileName`, `clickParams`     |
+| `closeFile`          | Close the current file |                                     |
 | `getFile`            | Get file list element of file | `fileName`                   |
 | `deleteFile`         | Remove a file          | `fileName`                          |
 | `reloadFileList`     | Refresh the file list  |                                     |

cypress/e2e/FrontMatter.spec.js

@@ -33,7 +33,10 @@ describe('Front matter support', function() {
 
 	it('Open file with front matter', function() {
 		cy.openFile('frontmatter.md').then(() => {
-			expect(cy.getContent().find('pre.frontmatter').length === 1)
+			cy.getContent().find('pre.frontmatter').should(pre => {
+				expect(pre.length === 1)
+				expect(pre[0].text === 'some: value\nother: 1.2')
+			})
 		})
 	})
 
@@ -59,4 +62,21 @@ describe('Front matter support', function() {
 			cy.getContent().find('hr').should(hr => expect(hr.length === 1))
 		})
 	})
+
+	it('Reopen front matter', function() {
+		cy.openFile('frontmatter.md').then(() => {
+			cy.getContent()
+				.type('{moveToEnd}New line{enter}')
+				.find('pre.frontmatter').should(pre => {
+					expect(pre.length === 1)
+				})
+				.closeFile().then(() => {
+					cy.openFile('frontmatter.md').then(() => {
+						cy.getContent().then(() => {
+							expect(cy.getContent().find('pre.frontmatter').length === 1)
+						})
+					})
+				})
+		})
+	})
 })

cypress/support/commands.js

@@ -269,6 +269,10 @@ Cypress.Commands.add('openFile', (fileName, params = {}) => {
 	cy.get(`.files-fileList tr[data-file="${fileName}"] a.name`).click(params)
 })
 
+Cypress.Commands.add('closeFile', (fileName, params = {}) => {
+	cy.get('#viewer .modal-header button.header-close').click(params)
+})
+
 Cypress.Commands.add('getFile', fileName => {
 	return cy.get(`.files-fileList tr[data-file="${fileName}"]`)
 })

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 = ''

src/tests/markdown.spec.js

@@ -34,7 +34,9 @@ describe('Commonmark', () => {
 
 	// failures because of some additional newline in markdownit
 	const skippedMarkdownTests = [
-		187, 209, 210
+		187, 209, 210,
+		// We interpret these as front matter
+		66, 68
 	];
 
 	const normalize = (str) => {
@@ -188,6 +190,11 @@ describe('Markdown though editor', () => {
 		})
 	})
 
+	test('front matter', () => {
+		expect(markdownThroughEditor('---\nhello: world\n---')).toBe('---\nhello: world\n---')
+		expect(markdownThroughEditor('---\n---')).toBe('---\n---')
+	})
+
 	test('mentions', () => {
 		expect(markdownThroughEditor('@[username](mention://user/id)')).toBe(' @[username](mention://user/id) ')
 	})