Added horizonal rule insert

resources/js/editor/commands.js

@@ -33,6 +33,18 @@ export function setBlockAttr(attrName, attrValue) {
             dispatch(tr);
         }
 
+        return true
+    }
+}
+
+export function insertBlockBefore(blockType) {
+    return function (state, dispatch) {
+        const startPosition = state.selection.$from.before(1);
+
+        if (dispatch) {
+            dispatch(state.tr.insert(startPosition, blockType.create()));
+        }
+
         return true
     }
 }

resources/js/editor/menu/icons.js

@@ -101,6 +101,10 @@ export const icons = {
     width: 24, height: 24,
     path: "M3 21h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18v-2H3v2zm0-4h18V7H3v2zm0-6v2h18V3H3z"
   },
+  horizontal_rule: {
+    width: 24, height: 24,
+    path: "m 4,11 h 16 v 2 H 4 Z"
+  },
 };
 
 const SVG = "http://www.w3.org/2000/svg"

resources/js/editor/menu/index.js

@@ -1,6 +1,6 @@
 import {
     MenuItem, Dropdown, DropdownSubmenu, renderGrouped, joinUpItem, liftItem, selectParentNodeItem,
-    undoItem, redoItem, wrapItem, blockTypeItem, setAttrItem,
+    undoItem, redoItem, wrapItem, blockTypeItem, setAttrItem, insertBlockBeforeItem,
 } from "./menu"
 import {icons} from "./icons";
 import ColorPickerGrid from "./ColorPickerGrid";
@@ -140,6 +140,13 @@ const lists = [
     }),
 ];
 
+const inserts = [
+    insertBlockBeforeItem(schema.nodes.horizontal_rule, {
+        title: "Horizontal Rule",
+        icon: icons.horizontal_rule,
+    }),
+];
+
 const menu = menuBar({
     floating: false,
     content: [
@@ -149,6 +156,7 @@ const menu = menuBar({
         colors,
         alignments,
         lists,
+        inserts,
     ],
 });
 

resources/js/editor/menu/menu.js

@@ -8,7 +8,7 @@
 import crel from "crelt"
 import {lift, joinUp, selectParentNode, wrapIn, setBlockType, toggleMark} from "prosemirror-commands"
 import {undo, redo} from "prosemirror-history"
-import {setBlockAttr} from "../commands";
+import {setBlockAttr, insertBlockBefore} from "../commands";
 
 import {getIcon, icons} from "./icons"
 
@@ -420,6 +420,19 @@ export function setAttrItem(attrName, attrValue, options) {
   return new MenuItem(passedOptions)
 }
 
+export function insertBlockBeforeItem(blockType, options) {
+  const command = insertBlockBefore(blockType);
+  const passedOptions = {
+    run: command,
+    enable(state) { return command(state) },
+    active(state) {
+      return false;
+    }
+  }
+  for (const prop in options) passedOptions[prop] = options[prop]
+  return new MenuItem(passedOptions);
+}
+
 // Work around classList.toggle being broken in IE11
 function setClass(dom, cls, on) {
   if (on) dom.classList.add(cls)

resources/sass/_editor.scss

@@ -259,17 +259,9 @@ img.ProseMirror-separator {
 /* Add space around the hr to make clicking it easier */
 
 .ProseMirror-example-setup-style hr {
-  padding: 2px 10px;
+  border-top: 3px solid #FFF;
-  border: none;
+  border-bottom: 3px solid #FFF;
-  margin: 1em 0;
+  box-sizing: content-box;
-}
-
-.ProseMirror-example-setup-style hr:after {
-  content: "";
-  display: block;
-  height: 1px;
-  background-color: silver;
-  line-height: 2px;
 }
 
 .ProseMirror ul, .ProseMirror ol {

resources/views/editor-test.blade.php

@@ -25,6 +25,9 @@
             </ul>
 
             <p>Lorem ipsum dolor sit amet.</p>
+
+            <hr>
+
             <p class="align-right">Lorem ipsum dolor sit amet.</p>
 
             <p class="callout info">