add horizontal rule, fix #170

examples/Components/Routes/Basic/index.vue

@@ -107,6 +107,13 @@
           <icon name="code" />
         </button>
 
+        <button
+          class="menubar__button"
+          @click="commands.horizontal_rule"
+        >
+          <icon name="hr" />
+        </button>
+
         <button
           class="menubar__button"
           @click="commands.undo"
@@ -136,6 +143,7 @@ import {
   CodeBlock,
   HardBreak,
   Heading,
+  HorizontalRule,
   OrderedList,
   BulletList,
   ListItem,
@@ -165,6 +173,7 @@ export default {
           new CodeBlock(),
           new HardBreak(),
           new Heading({ levels: [1, 2, 3] }),
+          new HorizontalRule(),
           new ListItem(),
           new OrderedList(),
           new TodoItem(),

examples/assets/images/icons/hr.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+  <path d="M5,13 C4.44771525,13 4,12.5522847 4,12 C4,11.4477153 4.44771525,11 5,11 L19,11 C19.5522847,11 20,11.4477153 20,12 C20,12.5522847 19.5522847,13 19,13 L5,13 Z"/>
+</svg>

packages/tiptap-extensions/src/index.js

@@ -4,6 +4,7 @@ export { default as CodeBlock } from './nodes/CodeBlock'
 export { default as CodeBlockHighlight } from './nodes/CodeBlockHighlight'
 export { default as HardBreak } from './nodes/HardBreak'
 export { default as Heading } from './nodes/Heading'
+export { default as HorizontalRule } from './nodes/HorizontalRule'
 export { default as Image } from './nodes/Image'
 export { default as ListItem } from './nodes/ListItem'
 export { default as Mention } from './nodes/Mention'

packages/tiptap-extensions/src/nodes/HorizontalRule.js

@@ -0,0 +1,19 @@
+import { Node } from 'tiptap'
+
+export default class HorizontalRule extends Node {
+  get name() {
+    return 'horizontal_rule'
+  }
+
+  get schema() {
+    return {
+      group: 'block',
+      parseDOM: [{ tag: 'hr' }],
+      toDOM: () => ['hr'],
+    }
+  }
+
+  commands({ type }) {
+    return () => (state, dispatch) => dispatch(state.tr.replaceSelectionWith(type.create()))
+  }
+}