Implement strike support by extending the default markdown parser

Signed-off-by: Julius Härtl <jus@bitgrid.net>

css/icons.scss

@@ -34,6 +34,7 @@
 
 @include icon-black-white('bold', 'text', 1);
 @include icon-black-white('italic', 'text', 1);
+@include icon-black-white('strike', 'text', 1);
 @include icon-black-white('underline', 'text', 1);
 @include icon-black-white('link', 'text', 1);
 @include icon-black-white('ol', 'text', 1);

src/EditorFactory.js

@@ -33,9 +33,11 @@ import {
 	Image,
 	History
 } from 'tiptap-extensions'
-import { Strong, Italic } from './marks'
+import { Strong, Italic, Strike } from './marks'
 import MarkdownIt from 'markdown-it'
 
+import { MarkdownSerializer, defaultMarkdownSerializer } from 'prosemirror-markdown'
+
 const createEditor = ({ content, onUpdate, extensions }) => {
 	extensions = extensions || []
 	return new Editor({
@@ -47,6 +49,7 @@ const createEditor = ({ content, onUpdate, extensions }) => {
 			new Code(),
 			new Strong(),
 			new Italic(),
+			new Strike(),
 			new BulletList(),
 			new OrderedList(),
 			new Blockquote(),
@@ -59,7 +62,29 @@ const createEditor = ({ content, onUpdate, extensions }) => {
 	})
 }
 
-const markdownit = MarkdownIt('commonmark', { html: false })
+const markdownit = MarkdownIt({ html: false })
+
+const createMarkdownSerializer = (_nodes, _marks) => {
+	const nodes = Object
+		.entries(_nodes)
+		.filter(([, node]) => node.toMarkdown)
+		.reduce((items, [name, { toMarkdown }]) => ({
+			...items,
+			[name]: toMarkdown
+		}), {})
+
+	const marks = Object
+		.entries(_marks)
+		.filter(([, node]) => node.toMarkdown)
+		.reduce((items, [name, { toMarkdown }]) => ({
+			...items,
+			[name]: toMarkdown
+		}), {})
+	return new MarkdownSerializer(
+		{ ...defaultMarkdownSerializer.nodes, ...nodes },
+		{ ...defaultMarkdownSerializer.marks, ...marks }
+	)
+}
 
 export default createEditor
-export { markdownit, createEditor }
+export { markdownit, createEditor, createMarkdownSerializer }

src/components/EditorWrapper.vue

@@ -42,6 +42,7 @@
 					<div class="menubar">
 						<button class="icon-bold" :class="{ 'is-active': isActive.strong() }" @click="commands.strong" />
 						<button class="icon-italic" :class="{ 'is-active': isActive.em() }" @click="commands.em" />
+						<button class="icon-strike" :class="{ 'is-active': isActive.strike() }" @click="commands.strike" />
 						<button class="icon-code" :class="{ 'is-active': isActive.code() }" @click="commands.code" />
 
 						<button	:class="{ 'is-active': isActive.heading({ level: 1 }) }" @click="commands.heading({ level: 1 })">
@@ -112,9 +113,7 @@ import Vue from 'vue'
 
 import { SyncService, ERROR_TYPE } from './../services/SyncService'
 import { endpointUrl } from './../helpers'
-import { createEditor, markdownit } from './../EditorFactory'
-
-import { defaultMarkdownSerializer } from 'prosemirror-markdown'
+import { createEditor, markdownit, createMarkdownSerializer } from './../EditorFactory'
 
 import { EditorContent, EditorMenuBar, EditorMenuBubble } from 'tiptap'
 import { Collaboration } from 'tiptap-extensions'
@@ -285,7 +284,7 @@ export default {
 				shareToken: this.shareToken,
 				guestName: this.guestName,
 				serialize: (document) => {
-					const markdown = defaultMarkdownSerializer.serialize(document)
+					const markdown = (createMarkdownSerializer(this.tiptap.nodes, this.tiptap.marks)).serialize(document)
 					console.debug('serialized document', { markdown })
 					return markdown
 				}

src/marks/index.js

@@ -20,7 +20,7 @@
  *
  */
 
-import { Bold, Italic as TipTapItalic } from 'tiptap-extensions'
+import { Bold, Italic as TipTapItalic, Strike as TipTapStrike } from 'tiptap-extensions'
 
 /**
  * This file maps prosemirror mark names to tiptap classes,
@@ -43,9 +43,41 @@ class Italic extends TipTapItalic {
 
 }
 
+class Strike extends TipTapStrike {
+
+	get schema() {
+		return {
+			parseDOM: [
+				{
+					tag: 's'
+				},
+				{
+					tag: 'del'
+				},
+				{
+					tag: 'strike'
+				},
+				{
+					style: 'text-decoration',
+					getAttrs: value => value === 'line-through'
+				}
+			],
+			toDOM: () => ['s', 0],
+			toMarkdown: {
+				open: '~~',
+				close: '~~',
+				mixable: true,
+				expelEnclosingWhitespace: true
+			}
+		}
+	}
+
+}
+
 /** Strike is currently unsupported by prosemirror-markdown */
 
 export {
 	Strong,
-	Italic
+	Italic,
+	Strike
 }