feat: add support for clear formatting

docs/menu.md

@@ -26,7 +26,7 @@ export class AppComponent implements OnInit, OnDestroy {
     ['link', 'image'],
     ['text_color', 'background_color'],
     ['align_left', 'align_center', 'align_right', 'align_justify'],
-    ['horizontal_rule'],
+    ['horizontal_rule', 'format_clear'],
   ];
   colorPresets = ['red', '#FF0000', 'rgb(255, 0, 0)'];
 

projects/ngx-editor/src/lib/Locals.ts

@@ -22,6 +22,7 @@ export const defaults: Record<string, string> = {
   text_color: 'Text Color',
   background_color: 'Background Color',
   horizontal_rule: 'Horizontal rule',
+  format_clear: 'Clear Formatting',
   insertLink: 'Insert Link',
   removeLink: 'Remove Link',
   insertImage: 'Insert Image',

projects/ngx-editor/src/lib/commands/FormatClear.ts

@@ -0,0 +1,35 @@
+import type { EditorState, Transaction, Command } from 'prosemirror-state';
+
+const SAFE_MARKS = ['link'];
+
+class FormatClear {
+  insert(): Command {
+    return (state: EditorState, dispatch?: (tr: Transaction) => void): boolean => {
+      const { tr } = state;
+      const { ranges, empty } = tr.selection;
+
+      if (empty) {
+        return true;
+      }
+
+      Object.entries(state.schema.marks).forEach(([markType, mark]) => {
+        if (SAFE_MARKS.includes(markType)) {
+          return;
+        }
+
+        ranges.forEach((range) => {
+          tr.removeMark(range.$from.pos, range.$to.pos, mark as any);
+        });
+      });
+
+      dispatch(tr);
+      return true;
+    };
+  }
+
+  canExecute(): boolean {
+    return true;
+  }
+}
+
+export default FormatClear;

projects/ngx-editor/src/lib/commands/index.ts

@@ -7,6 +7,7 @@ import TextAlign from './TextAlign';
 import Link from './Link';
 import Image from './Image';
 import TextColor from './TextColor';
+import FormatClear from './FormatClear';
 
 export const STRONG = new Mark('strong');
 export const EM = new Mark('em');
@@ -15,6 +16,7 @@ export const UNDERLINE = new Mark('u');
 export const STRIKE = new Mark('s');
 export const BLOCKQUOTE = new Blockquote();
 export const HORIZONTAL_RULE = new HorizontalRule();
+export const FORMAT_CLEAR = new FormatClear();
 export const UL = new ListItem(true);
 export const OL = new ListItem(false);
 export const H1 = new Heading(1);

projects/ngx-editor/src/lib/icons/format_clear.ts

@@ -0,0 +1,3 @@
+export default `
+<path d="M0 0h24v24H0z" fill="none"/><path d="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"/>
+`;

projects/ngx-editor/src/lib/icons/index.ts

@@ -18,6 +18,7 @@ import alignJustify from './align_justify';
 import textColor from './text_color';
 import colorFill from './color_fill';
 import horizontalRule from './horizontal_rule';
+import formatClear from './format_clear';
 
 const DEFAULT_ICON_HEIGHT = 20;
 const DEFAULT_ICON_WIDTH = 20;
@@ -42,6 +43,7 @@ const icons: Record<string, any> = {
   text_color: textColor,
   color_fill: colorFill,
   horizontal_rule: horizontalRule,
+  format_clear: formatClear,
 };
 
 class Icon {

projects/ngx-editor/src/lib/modules/menu/MenuCommands.ts

@@ -25,6 +25,7 @@ export const ToggleCommands: Record<string, ToggleCommand> = {
 
 export const InsertCommands: Record<string, InsertCommand> = {
   horizontal_rule: Commands.HORIZONTAL_RULE,
+  format_clear: Commands.FORMAT_CLEAR,
 };
 
 export const Link = Commands.LINK;

projects/ngx-editor/src/lib/modules/menu/menu.component.ts

@@ -17,6 +17,7 @@ export const DEFAULT_TOOLBAR: Toolbar = [
   ['link', 'image'],
   ['text_color', 'background_color'],
   ['align_left', 'align_center', 'align_right', 'align_justify'],
+  ['format_clear'],
 ];
 
 export const TOOLBAR_MINIMAL: Toolbar = [
@@ -89,6 +90,7 @@ export class MenuComponent implements OnInit {
 
   insertCommands: ToolbarItem[] = [
     'horizontal_rule',
+    'format_clear',
   ];
 
   iconContainerClass = ['NgxEditor__MenuItem', 'NgxEditor__MenuItem--Icon'];

projects/ngx-editor/src/lib/types.ts

@@ -25,7 +25,8 @@ export type TBItems = 'bold'
 | 'align_center'
 | 'align_right'
 | 'align_justify'
-| 'horizontal_rule';
+| 'horizontal_rule'
+| 'format_clear';
 
 export type ToolbarDropdown = { heading?: TBHeadingItems[] };
 export type ToolbarCustomMenuItem = (editorView: EditorView) => TCR;