Added inline code and clear formatting

diff --git a/TODO b/TODO
index 977e71e570de9693554342535cedc152fe130c47..f93f5c1f1080ce63ac4df998b13d8422f3aa39df 100644 (file)
--- 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 13fef8330dc58b9dd09894164bff5a0ce76ccf0a..1817bd2a9d7ca4f4f731863ac073c67d07ad1c58 100644 (file)
--- 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 fc9edffc1fc521e2e032b01ab96bb6ad235b4820..f6ac99d7e89229c64d5ea05e6cbc554fe19d4336 100644 (file)
--- 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 b834a46e6caffc76c28228d2cb538a3f216688f0..115178bc8489a089f3b2bb4c9567a34e1fb572a3 100644 (file)
--- 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,
     ],
 });