Added horizonal rule insert

diff --git a/resources/js/editor/commands.js b/resources/js/editor/commands.js
index d77e75026fa3d8afa5cad1018a43a01714a51589..13fef8330dc58b9dd09894164bff5a0ce76ccf0a 100644 (file)
--- a/resources/js/editor/commands.js
+++ b/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
     }
 }
\ No newline at end of file

diff --git a/resources/js/editor/menu/icons.js b/resources/js/editor/menu/icons.js
index d83d9026aadfc223ec96075560252d58eb0e2a17..fc9edffc1fc521e2e032b01ab96bb6ad235b4820 100644 (file)
--- a/resources/js/editor/menu/icons.js
+++ b/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"

diff --git a/resources/js/editor/menu/index.js b/resources/js/editor/menu/index.js
index e2979d493510064e68bda790c28c796b067dcc42..b834a46e6caffc76c28228d2cb538a3f216688f0 100644 (file)
--- a/resources/js/editor/menu/index.js
+++ b/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,
     ],
 });
 

diff --git a/resources/js/editor/menu/menu.js b/resources/js/editor/menu/menu.js
index b292794f82198226bdb1f01b11e8ebf08578efe1..082264e7e18b3ecbf7020ed62dae749d52abbd6c 100644 (file)
--- a/resources/js/editor/menu/menu.js
+++ b/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)

diff --git a/resources/sass/_editor.scss b/resources/sass/_editor.scss
index 1a3ee165d20a1ec3bbf17ab59474a4263aaade9c..463aaedb0c280dafbeaa6591bacd35823cdd3533 100644 (file)
--- a/resources/sass/_editor.scss
+++ b/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: none;
-  margin: 1em 0;
-}
-
-.ProseMirror-example-setup-style hr:after {
-  content: "";
-  display: block;
-  height: 1px;
-  background-color: silver;
-  line-height: 2px;
+  border-top: 3px solid #FFF;
+  border-bottom: 3px solid #FFF;
+  box-sizing: content-box;
 }
 
 .ProseMirror ul, .ProseMirror ol {

diff --git a/resources/views/editor-test.blade.php b/resources/views/editor-test.blade.php
index 1f4a6751eee0327ea0166b7e0c5eff2eeb74af94..df8fd4ad12bcf467e701ca520cc9e14d94fa84a9 100644 (file)
--- a/resources/views/editor-test.blade.php
+++ b/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">