Added markdown parsing rules to tag special syntax to be not modified when saved

Added a markdown-it and tiptap extension to tag special, unknown,
markdown syntax which would be escaped by prosemirror-markdown on save.
The tagged part is not touched while saving if they are not modified manually.

Signed-off-by: Ferdinand Thiessen <rpm@fthiessen.de>

3 files changed, 51 insertions, 0 deletions

diff --git a/src/extensions/KeepSyntax.js b/src/extensions/KeepSyntax.js
new file mode 100644
index 000000000..80e64e4fb
--- /dev/null
+++ b/src/extensions/KeepSyntax.js
@@ -0,0 +1,47 @@
+const { Mark } = require('@tiptap/core')
+
+/**
+ * Keep markdown untouched
+ */
+const KeepSyntax = Mark.create({
+	name: 'keep-syntax',
+	parseHTML() {
+		return [
+			{
+				tag: 'span.keep-md',
+			},
+		]
+	},
+	renderHTML() {
+		return ['span', { class: 'keep-md' }, 0]
+	},
+	toMarkdown: {
+		open: '',
+		close: '',
+		mixable: true,
+		escape: false,
+		expelEnclosingWhitespace: true,
+	},
+
+	/**
+	 * Remove mark if there were manual changes
+	 */
+	onUpdate() {
+		const tr = this.editor.state.tr
+
+		this.editor.state.doc.descendants((node, pos, parent, index) => {
+			if (node.marks.findIndex(mark => mark.type.name === this.name) !== -1) {
+				if (node.type.name !== 'text' || node.text.length !== 1) {
+					tr.removeMark(pos, pos + node.nodeSize, this.type)
+				}
+			}
+		})
+		if (tr.docChanged) {
+			tr.setMeta('addToHistory', false)
+			tr.setMeta('preventUpdate', true)
+			this.editor.view.dispatch(tr)
+		}
+	},
+})
+
+export default KeepSyntax
diff --git a/src/extensions/RichText.js b/src/extensions/RichText.js
index bcf566fca..1bc598a16 100644
--- a/src/extensions/RichText.js
+++ b/src/extensions/RichText.js
@@ -34,6 +34,7 @@ import CodeBlock from '@tiptap/extension-code-block'
 import HorizontalRule from '@tiptap/extension-horizontal-rule'
 import Dropcursor from '@tiptap/extension-dropcursor'
 import HardBreak from './HardBreak.js'
+import KeepSyntax from './KeepSyntax.js'
 import Table from './../nodes/Table.js'
 import Image from './../nodes/Image.js'
 import Heading from './../nodes/Heading.js'
@@ -87,6 +88,7 @@ export default Extension.create({
 				inline: true,
 			}),
 			Dropcursor,
+			KeepSyntax,
 		]
 		if (this.options.link !== false) {
 			defaultExtensions.push(Link.configure({
diff --git a/src/extensions/index.js b/src/extensions/index.js
index 1c05250ed..a4707939f 100644
--- a/src/extensions/index.js
+++ b/src/extensions/index.js
@@ -28,6 +28,7 @@ import Collaboration from './Collaboration.js'
 import Markdown from './Markdown.js'
 import PlainText from './PlainText.js'
 import RichText from './RichText.js'
+import KeepSyntax from './KeepSyntax.js'
 
 export {
 	Emoji,
@@ -38,4 +39,5 @@ export {
 	Markdown,
 	PlainText,
 	RichText,
+	KeepSyntax,
 }