From: Dan Brown <redacted>
Date: Fri, 14 Jan 2022 18:27:37 +0000 (+0000)
Subject: Added inline code and clear formatting
X-Git-Url: http://source.bookstackapp.com/bookstack/commitdiff_plain/c013d7e5497abb25c859c3741e304676a0727a19?ds=inline

Added inline code and clear formatting
---

diff --git a/TODO b/TODO
index 977e71e57..f93f5c1f1 100644
--- a/TODO
+++ b/TODO
@@ -14,10 +14,8 @@
 - Details/Summary
 - Checkbox/TODO list items
 - Code blocks
-- Inline Code
 - Indents
 - Iframe/Media
-- Clear formatting
 - View Code
 - Attachment integration (Drag & drop)
 - Template system integration.
@@ -27,4 +25,6 @@
 - List type changing.
 - Color picker options should have "clear" option.
 - Color picker buttons should be split, with button to re-apply last selected color.
-- Color picker options should change color if different instead of remove.
\ No newline at end of file
+- Color picker options should change color if different instead of remove.
+- Clear formatting, If no selection range, clear the formatting of parent block.
+  - If no marks, clear the block type if text type? 
\ No newline at end of file
diff --git a/resources/js/editor/commands.js b/resources/js/editor/commands.js
index 13fef8330..1817bd2a9 100644
--- a/resources/js/editor/commands.js
+++ b/resources/js/editor/commands.js
@@ -26,7 +26,7 @@ export function setBlockAttr(attrName, attrValue) {
                 const nodeAttrs = Object.assign({}, node.attrs);
                 if (node.attrs[attrName] !== undefined) {
                     nodeAttrs[attrName] = attrValue;
-                    tr.setBlockType(pos, pos+1, node.type, nodeAttrs)
+                    tr.setBlockType(pos, pos + 1, node.type, nodeAttrs)
                 }
             });
 
@@ -47,4 +47,13 @@ export function insertBlockBefore(blockType) {
 
         return true
     }
+}
+
+export function removeMarks() {
+    return function (state, dispatch) {
+        if (dispatch) {
+            dispatch(state.tr.removeMark(state.selection.from, state.selection.to, null));
+        }
+        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 fc9edffc1..f6ac99d7e 100644
--- a/resources/js/editor/menu/icons.js
+++ b/resources/js/editor/menu/icons.js
@@ -105,6 +105,10 @@ export const icons = {
     width: 24, height: 24,
     path: "m 4,11 h 16 v 2 H 4 Z"
   },
+  format_clear: {
+    width: 24, height: 24,
+    path: "M3.27 5L2 6.27l6.97 6.97L6.5 19h3l1.57-3.66L16.73 21 18 19.73 3.55 5.27 3.27 5zM6 5v.18L8.82 8h2.4l-.72 1.68 2.1 2.1L14.21 8H20V5H6z"
+  },
 };
 
 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 b834a46e6..115178bc8 100644
--- a/resources/js/editor/menu/index.js
+++ b/resources/js/editor/menu/index.js
@@ -7,6 +7,7 @@ import ColorPickerGrid from "./ColorPickerGrid";
 import {toggleMark} from "prosemirror-commands";
 import {menuBar} from "./menubar"
 import schema from "../schema";
+import {removeMarks} from "../commands";
 
 
 function cmdItem(cmd, options) {
@@ -83,6 +84,10 @@ const formats = [
         label: "Paragraph",
         attrs: {}
     }),
+    markItem(schema.marks.code, {
+        label: "Inline Code",
+        attrs: {}
+    }),
     new DropdownSubmenu([
         blockTypeItem(schema.nodes.callout, {
             label: "Info Callout",
@@ -147,6 +152,15 @@ const inserts = [
     }),
 ];
 
+const utilities = [
+    new MenuItem({
+        title: 'Clear Formatting',
+        icon: icons.format_clear,
+        run: removeMarks(),
+        enable: state => true,
+    }),
+];
+
 const menu = menuBar({
     floating: false,
     content: [
@@ -157,6 +171,7 @@ const menu = menuBar({
         alignments,
         lists,
         inserts,
+        utilities,
     ],
 });