StrikeMark added

examples/Components/Routes/Basic/index.vue

@@ -21,6 +21,14 @@
 						<icon name="italic" />
 					</button>
 
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.strike.active() }"
+						@click="marks.strike.command"
+					>
+						<icon name="strike" />
+					</button>
+
 					<button
 						class="menubar__button"
 						@click="marks.code.command"
@@ -132,6 +140,7 @@ import {
 	CodeMark,
 	ItalicMark,
 	LinkMark,
+	StrikeMark,
 	HistoryExtension,
 } from 'tiptap-extensions'
 
@@ -156,6 +165,7 @@ export default {
 				new CodeMark(),
 				new ItalicMark(),
 				new LinkMark(),
+				new StrikeMark(),
 				new HistoryExtension(),
 			],
 		}

examples/assets/images/icons/strike.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 152 152"><path d="M115.666 19a8 8 0 0 1-8 8H68.324a17.22 17.22 0 0 0-12.256 5.078 17.215 17.215 0 0 0-5.076 12.257c0 6.663 3.892 12.812 9.914 15.664l7.041 3.335H40.993c-3.813-5.492-6-12.096-6-18.998 0-8.904 3.466-17.274 9.762-23.571S59.42 11 68.324 11h39.342a8 8 0 0 1 8 8zm-16.327 96.087c-2.852 6.021-9 9.913-15.663 9.913H44.333a8 8 0 0 0 0 16h39.342c12.814 0 24.639-7.483 30.123-19.064 4.174-8.813 4.131-18.556.69-26.936H95.501c5.36 5.012 7.144 13.107 3.838 20.087zm46.327-35.921c-.01-5.242-4.257-9.489-9.5-9.5H22.154c-5.24 0-9.487 4.248-9.487 9.488v.025c0 5.239 4.248 9.486 9.487 9.486h114.012a9.516 9.516 0 0 0 9.5-9.499z"/></svg>

packages/tiptap-extensions/src/index.js

@@ -14,5 +14,6 @@ export { default as BoldMark } from './marks/Bold'
 export { default as CodeMark } from './marks/Code'
 export { default as ItalicMark } from './marks/Italic'
 export { default as LinkMark } from './marks/Link'
+export { default as StrikeMark } from './marks/Strike'
 
 export { default as HistoryExtension } from './extensions/History'

packages/tiptap-extensions/src/marks/Strike.js

@@ -0,0 +1,47 @@
+import { Mark } from 'tiptap'
+import { toggleMark, markInputRule } from 'tiptap-commands'
+
+export default class StrikeMark extends Mark {
+
+	get name() {
+		return 'strike'
+	}
+
+	get schema() {
+		return {
+			parseDOM: [
+				{
+					tag: 's',
+				},
+				{
+					tag: 'del',
+				},
+				{
+					tag: 'strike',
+				},
+				{
+					style: 'text-decoration',
+					getAttrs: value => value === 'line-through',
+				},
+			],
+			toDOM: () => ['s', 0],
+		}
+	}
+
+	keys({ type }) {
+		return {
+			'Mod-d': toggleMark(type),
+		}
+	}
+
+	command({ type }) {
+		return toggleMark(type)
+	}
+
+	inputRules({ type }) {
+		return [
+			markInputRule(/~([^~]+)~$/, type),
+		]
+	}
+
+}