Merge pull request #14 from Chrissi2812/underline_mark

UnderlineMark added

examples/Components/Routes/Basic/index.vue

@@ -29,6 +29,14 @@
 						<icon name="strike" />
 					</button>
 
+					<button
+						class="menubar__button"
+						:class="{ 'is-active': marks.underline.active() }"
+						@click="marks.underline.command"
+					>
+						<icon name="underline" />
+					</button>
+
 					<button
 						class="menubar__button"
 						@click="marks.code.command"
@@ -141,6 +149,7 @@ import {
 	ItalicMark,
 	LinkMark,
 	StrikeMark,
+	UnderlineMark,
 	HistoryExtension,
 } from 'tiptap-extensions'
 
@@ -166,6 +175,7 @@ export default {
 				new ItalicMark(),
 				new LinkMark(),
 				new StrikeMark(),
+				new UnderlineMark(),
 				new HistoryExtension(),
 			],
 		}

examples/assets/images/icons/underline.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-linejoin="round" stroke-miterlimit="1.414"><path fill="none" d="M0 0h24v24H0z"/><clipPath id="a"><path d="M0 0h24v24H0z"/></clipPath><g clip-path="url(#a)"><path d="M12.556 18.667c4.413 0 8-3.587 8-8V1.666A1.667 1.667 0 0 0 18.89 0h-.002a1.669 1.669 0 0 0-1.666 1.666v9.001a4.671 4.671 0 0 1-4.666 4.666 4.671 4.671 0 0 1-4.667-4.666V1.666A1.667 1.667 0 0 0 6.223 0h-.001a1.667 1.667 0 0 0-1.666 1.666v9.001c0 4.413 3.586 8 8 8zm-8.002 2.666c-.353 0-.692.141-.942.39-.249.25-.39.589-.39.942v.003A1.332 1.332 0 0 0 4.554 24h16.003a1.332 1.332 0 0 0 1.332-1.332v-.003a1.332 1.332 0 0 0-1.332-1.332H4.554z" fill-rule="nonzero"/></g></svg>

packages/tiptap-extensions/src/index.js

@@ -15,6 +15,7 @@ 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 UnderlineMark } from './marks/Underline'
 
 export { default as HistoryExtension } from './extensions/History'
 export { default as PlaceholderExtension } from './extensions/Placeholder'

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

@@ -0,0 +1,35 @@
+import { Mark } from 'tiptap'
+import { toggleMark } from 'tiptap-commands'
+
+export default class UnderlineMark extends Mark {
+
+	get name() {
+		return 'underline'
+	}
+
+	get schema() {
+		return {
+			parseDOM: [
+				{
+					tag: 'u',
+				},
+				{
+					style: 'text-decoration',
+					getAttrs: value => value === 'underline',
+				},
+			],
+			toDOM: () => ['u', 0],
+		}
+	}
+
+	keys({ type }) {
+		return {
+			'Mod-u': toggleMark(type),
+		}
+	}
+
+	command({ type }) {
+		return toggleMark(type)
+	}
+
+}