@squiz/formatted-text-editor 1.34.1-alpha.4 → 1.34.1-alpha.6

package/lib/EditorToolbar/FloatingToolbar.js

@@ -39,10 +39,12 @@ const react_components_1 = require("@remirror/react-components");
 const createToolbarPositioner_1 = require("../utils/createToolbarPositioner");
 const ImageButton_1 = __importDefault(require("./Tools/Image/ImageButton"));
 const Extensions_1 = require("../Extensions/Extensions");
+const ClearFormattingButton_1 = __importDefault(require("./Tools/ClearFormatting/ClearFormattingButton"));
 const FloatingToolbar = () => {
     const watchedMarks = [Extensions_1.MarkName.Link, Extensions_1.MarkName.AssetLink];
     const extensionNames = (0, hooks_1.useExtensionNames)();
     const positioner = (0, react_1.useMemo)(() => (0, createToolbarPositioner_1.createToolbarPositioner)({ types: watchedMarks }), []);
+    const { clearFormatting } = (0, react_2.useCommands)();
     const active = (0, react_2.useActive)();
     const { data: { marks }, } = (0, react_2.usePositioner)(positioner, []);
     let buttons = [
@@ -63,7 +65,11 @@ const FloatingToolbar = () => {
     }
     else if (!marks?.[Extensions_1.MarkName.Link].isActive && !marks?.[Extensions_1.MarkName.AssetLink].isActive) {
         // if none of the selected text is a link show the option to create a link.
-        buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "link-divider", className: "editor-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
+        buttons.push(react_1.default.createElement(react_components_1.VerticalDivider, { key: "link-divider" }), react_1.default.createElement(LinkButton_1.default, { key: "add-link", inPopover: true }));
+    }
+    // Clear formatting will always be the last button in the toolbar
+    if (extensionNames.clearFormatting && clearFormatting.enabled()) {
+        buttons.push(react_1.default.createElement(ClearFormattingButton_1.default, { key: "clearFormatting" }));
     }
     return (react_1.default.createElement(react_2.FloatingToolbar, { className: "squiz-fte-scope squiz-fte-scope__floating-popover", positioner: positioner }, buttons));
 };

package/lib/EditorToolbar/Toolbar.js

@@ -17,13 +17,14 @@ const hooks_1 = require("../hooks");
 const LinkButton_1 = __importDefault(require("./Tools/Link/LinkButton"));
 const ImageButton_1 = __importDefault(require("./Tools/Image/ImageButton"));
 const RemoveLinkButton_1 = __importDefault(require("./Tools/Link/RemoveLinkButton"));
+const ClearFormattingButton_1 = __importDefault(require("./Tools/ClearFormatting/ClearFormattingButton"));
 const Toolbar = () => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
     return (react_1.default.createElement(react_components_1.Toolbar, { className: "remirror-toolbar editor-toolbar" },
         extensionNames.history && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(UndoButton_1.default, null),
             react_1.default.createElement(RedoButton_1.default, null),
-            react_1.default.createElement(react_components_1.VerticalDivider, { className: "editor-divider" }))),
+            react_1.default.createElement(react_components_1.VerticalDivider, null))),
         extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && react_1.default.createElement(TextTypeDropdown_1.default, null),
         extensionNames.bold && react_1.default.createElement(BoldButton_1.default, null),
         extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, null),
@@ -32,6 +33,7 @@ const Toolbar = () => {
         extensionNames.link && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement(LinkButton_1.default, null),
             react_1.default.createElement(RemoveLinkButton_1.default, null))),
-        extensionNames.image && react_1.default.createElement(ImageButton_1.default, null)));
+        extensionNames.image && react_1.default.createElement(ImageButton_1.default, null),
+        extensionNames.clearFormatting && react_1.default.createElement(ClearFormattingButton_1.default, null)));
 };
 exports.Toolbar = Toolbar;

package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.d.ts

@@ -0,0 +1,2 @@
+declare const ClearFormattingButton: () => JSX.Element;
+export default ClearFormattingButton;

package/lib/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.js

@@ -0,0 +1,56 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const react_2 = require("@remirror/react");
+const react_components_1 = require("@remirror/react-components");
+const FormatClearRounded_1 = __importDefault(require("@mui/icons-material/FormatClearRounded"));
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const ClearFormattingButton = () => {
+    const { clearFormatting } = (0, react_2.useCommands)();
+    const { selection } = (0, react_2.useEditorState)();
+    // Checks wether we have specific content selected or not
+    const contentSelected = !selection.empty;
+    const handleSelect = () => {
+        if (clearFormatting.enabled()) {
+            clearFormatting();
+        }
+    };
+    const handleShortcut = (0, react_1.useCallback)(() => {
+        handleSelect();
+        // Prevent other key handlers being run
+        return true;
+    }, []);
+    // When Ctrl+\ is pressed clear formatting, only registered in the toolbar button instance to avoid the key press
+    // being double handled.
+    (0, react_2.useKeymap)('Mod-\\', handleShortcut);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_components_1.VerticalDivider, null),
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: false, isActive: false, icon: react_1.default.createElement(FormatClearRounded_1.default, null), label: `${contentSelected ? 'Clear formatting from selection' : 'Clear all formatting'} (cmd+\\)` })));
+};
+exports.default = ClearFormattingButton;

package/lib/EditorToolbar/Tools/TextAlign/TextAlignButtons.js

@@ -11,11 +11,11 @@ const JustifyAlignButton_1 = __importDefault(require("./JustifyAlign/JustifyAlig
 const react_components_1 = require("@remirror/react-components");
 const TextAlignButtons = () => {
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(react_components_1.VerticalDivider, { className: "editor-divider" }),
+        react_1.default.createElement(react_components_1.VerticalDivider, null),
         react_1.default.createElement(LeftAlignButton_1.default, null),
         react_1.default.createElement(CenterAlignButton_1.default, null),
         react_1.default.createElement(RightAlignButton_1.default, null),
         react_1.default.createElement(JustifyAlignButton_1.default, null),
-        react_1.default.createElement(react_components_1.VerticalDivider, { className: "editor-divider" })));
+        react_1.default.createElement(react_components_1.VerticalDivider, null)));
 };
 exports.default = TextAlignButtons;

package/lib/EditorToolbar/Tools/TextType/TextTypeDropdown.js

@@ -35,6 +35,6 @@ const TextTypeDropdown = () => {
             react_1.default.createElement(HeadingButton_1.default, { level: 5 }),
             react_1.default.createElement(HeadingButton_1.default, { level: 6 }),
             react_1.default.createElement(PreformattedButton_1.default, null)),
-        react_1.default.createElement(react_2.VerticalDivider, { className: "editor-divider" })));
+        react_1.default.createElement(react_2.VerticalDivider, null)));
 };
 exports.default = TextTypeDropdown;

package/lib/Extensions/ClearFormattingExtension/ClearFormattingExtension.d.ts

@@ -0,0 +1,5 @@
+import { PlainExtension, CommandFunction } from '@remirror/core';
+export declare class ClearFormattingExtension extends PlainExtension {
+    get name(): "clearFormatting";
+    clearFormatting(): CommandFunction;
+}

package/lib/Extensions/ClearFormattingExtension/ClearFormattingExtension.js

@@ -0,0 +1,63 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClearFormattingExtension = void 0;
+const core_1 = require("@remirror/core");
+const getNodeNamesByGroup_1 = require("../../utils/getNodeNamesByGroup");
+const getMarkNamesByGroup_1 = require("../../utils/getMarkNamesByGroup");
+let ClearFormattingExtension = class ClearFormattingExtension extends core_1.PlainExtension {
+    get name() {
+        return 'clearFormatting';
+    }
+    clearFormatting() {
+        return ({ dispatch, tr, state }) => {
+            const { empty, ranges } = state.selection;
+            const schema = state.schema;
+            const formattingNodes = (0, getNodeNamesByGroup_1.getNodeNamesByGroup)(schema, core_1.ExtensionTag.FormattingNode);
+            const formattingMarks = (0, getMarkNamesByGroup_1.getMarkNamesByGroup)(schema, core_1.ExtensionTag.FormattingMark);
+            let isChanged = false;
+            ranges.forEach(({ $from, $to }) => {
+                // Check if there is a selection or not, if no selection use the doc content size as the range
+                state.doc.nodesBetween(empty ? 0 : $from.pos, empty ? state.doc.content.size : $to.pos, (node, pos) => {
+                    // Clear marks (bold, italic, etc)
+                    node.marks.forEach((mark) => {
+                        if (formattingMarks.includes(mark.type.name)) {
+                            tr.removeMark(pos, pos + node.nodeSize, mark);
+                            isChanged = true;
+                        }
+                    });
+                    // Leave non-foramtting nodes as-is
+                    if (!formattingNodes.includes(node.type.name)) {
+                        return;
+                    }
+                    // Clear node attributes & set to paragraph by default
+                    if (node.type.name === schema.nodes.paragraph.name) {
+                        const { nodeTextAlignment } = node.attrs;
+                        if (nodeTextAlignment && nodeTextAlignment !== 'left') {
+                            tr.setNodeAttribute(pos, 'nodeTextAlignment', null);
+                            isChanged = true;
+                        }
+                    }
+                    else {
+                        tr.setNodeMarkup(pos, schema.nodes.paragraph, null, node.marks);
+                        isChanged = true;
+                    }
+                });
+            });
+            dispatch?.(tr);
+            return isChanged;
+        };
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], ClearFormattingExtension.prototype, "clearFormatting", null);
+ClearFormattingExtension = __decorate([
+    (0, core_1.extension)({})
+], ClearFormattingExtension);
+exports.ClearFormattingExtension = ClearFormattingExtension;

package/lib/Extensions/Extensions.js

@@ -8,6 +8,7 @@ const LinkExtension_1 = require("./LinkExtension/LinkExtension");
 const ImageExtension_1 = require("./ImageExtension/ImageExtension");
 const CommandsExtension_1 = require("./CommandsExtension/CommandsExtension");
 const AssetImageExtension_1 = require("./ImageExtension/AssetImageExtension");
+const ClearFormattingExtension_1 = require("./ClearFormattingExtension/ClearFormattingExtension");
 var NodeName;
 (function (NodeName) {
     NodeName["Image"] = "image";
@@ -40,6 +41,7 @@ const createExtensions = (context) => {
             new AssetLinkExtension_1.AssetLinkExtension({
                 matrixDomain: context.matrix.matrixDomain,
             }),
+            new ClearFormattingExtension_1.ClearFormattingExtension(),
         ];
     };
 };

package/lib/index.css

@@ -812,12 +812,12 @@
   display: flex;
   justify-items: center;
 }
-.squiz-fte-scope .editor-toolbar > *:not(:first-child, .editor-divider),
-.squiz-fte-scope .squiz-fte-scope__floating-popover > *:not(:first-child, .editor-divider) {
+.squiz-fte-scope .editor-toolbar > *:not(:first-child, .MuiDivider-root),
+.squiz-fte-scope__floating-popover > *:not(:first-child, .MuiDivider-root) {
   margin: 0 0 0 2px;
 }
-.squiz-fte-scope .editor-toolbar .editor-divider,
-.squiz-fte-scope .squiz-fte-scope__floating-popover .editor-divider {
+.squiz-fte-scope .editor-toolbar .MuiDivider-root,
+.squiz-fte-scope__floating-popover .MuiDivider-root {
   margin-top: -0.25rem;
   margin-bottom: -0.25rem;
   margin-left: 0.25rem;
@@ -827,12 +827,12 @@
   height: auto;
 }
 .squiz-fte-scope .editor-toolbar .squiz-fte-btn,
-.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn {
+.squiz-fte-scope__floating-popover .squiz-fte-btn {
   padding: 0.25rem;
   font-weight: 700;
 }
 .squiz-fte-scope .editor-toolbar .squiz-fte-btn ~ .squiz-fte-btn,
-.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
+.squiz-fte-scope__floating-popover .squiz-fte-btn ~ .squiz-fte-btn {
   margin-left: 2px;
 }
 .squiz-fte-scope__floating-popover {
@@ -851,7 +851,7 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
-.squiz-fte-scope .squiz-fte-scope__floating-popover .editor-divider {
+.squiz-fte-scope__floating-popover .MuiDivider-root {
   margin-top: 0px;
   margin-bottom: 0px;
 }
@@ -1042,12 +1042,12 @@
   font-weight: 700;
 }
 .squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button,
-.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button {
+.squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button {
   padding: 0.25rem;
   font-weight: 700;
 }
 .squiz-fte-scope .editor-toolbar .squiz-fte-modal-footer__button ~ .squiz-fte-btn,
-.squiz-fte-scope .squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
+.squiz-fte-scope__floating-popover .squiz-fte-modal-footer__button ~ .squiz-fte-btn {
   margin-left: 2px;
 }
 .squiz-fte-scope .squiz-fte-modal-footer__button {

package/lib/utils/getMarkNamesByGroup.d.ts

@@ -0,0 +1,2 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+export declare const getMarkNamesByGroup: (schema: EditorSchema, group: ExtensionTagType) => string[];

package/lib/utils/getMarkNamesByGroup.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getMarkNamesByGroup = void 0;
+const getMarkNamesByGroup = (schema, group) => {
+    return Object.values(schema.marks)
+        .filter((mark) => mark.spec.group?.includes(group))
+        .map((mark) => mark.name);
+};
+exports.getMarkNamesByGroup = getMarkNamesByGroup;

package/lib/utils/getNodeNamesByGroup.d.ts

@@ -0,0 +1,2 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+export declare const getNodeNamesByGroup: (schema: EditorSchema, group: ExtensionTagType) => string[];

package/lib/utils/getNodeNamesByGroup.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNodeNamesByGroup = void 0;
+const getNodeNamesByGroup = (schema, group) => {
+    return Object.values(schema.nodes)
+        .filter((node) => node.spec.group?.includes(group))
+        .map((node) => node.name);
+};
+exports.getNodeNamesByGroup = getNodeNamesByGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.34.1-alpha.4",
+  "version": "1.34.1-alpha.6",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "scripts": {
@@ -20,8 +20,8 @@
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
     "@remirror/react": "2.0.25",
-    "@squiz/dx-json-schema-lib": "1.34.1-alpha.4",
-    "@squiz/resource-browser": "1.34.1-alpha.4",
+    "@squiz/dx-json-schema-lib": "1.34.1-alpha.6",
+    "@squiz/resource-browser": "1.34.1-alpha.6",
     "clsx": "1.2.1",
     "react-hook-form": "7.43.2",
     "react-image-size": "2.0.0",
@@ -75,5 +75,5 @@
   "volta": {
     "node": "18.15.0"
   },
-  "gitHead": "e36e955c6a306cbefb716f76e6cb986643c44c29"
+  "gitHead": "82f279a64c198e72d7ccfb6296624052bd4ce510"
 }

package/postcss.config.js

@@ -5,7 +5,7 @@ module.exports = {
     require('postcss-nested'),
     require('postcss-prefix-selector')({
       prefix: '.squiz-fte-scope',
-      exclude: ['.squiz-fte-scope__floating-popover'],
+      exclude: [/\.squiz-fte-scope__floating-popover/],
       includeFiles: ['./src/index.scss'],
     }),
   ],

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -5,17 +5,20 @@ import BoldButton from './Tools/Bold/BoldButton';
 import { useExtensionNames } from '../hooks';
 import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
 import LinkButton from './Tools/Link/LinkButton';
-import { FloatingToolbar as RemirrorFloatingToolbar, useActive, usePositioner } from '@remirror/react';
+import { FloatingToolbar as RemirrorFloatingToolbar, useActive, usePositioner, useCommands } from '@remirror/react';
 import { VerticalDivider } from '@remirror/react-components';
 import { createToolbarPositioner, ToolbarPositionerRange } from '../utils/createToolbarPositioner';
 import ImageButton from './Tools/Image/ImageButton';
 import { MarkName } from '../Extensions/Extensions';
 import { ImageExtension } from '../Extensions/ImageExtension/ImageExtension';
+import ClearFormattingButton from './Tools/ClearFormatting/ClearFormattingButton';
+import { ClearFormattingExtension } from '../Extensions/ClearFormattingExtension/ClearFormattingExtension';
 
 export const FloatingToolbar = () => {
   const watchedMarks = [MarkName.Link, MarkName.AssetLink];
   const extensionNames = useExtensionNames();
   const positioner = useMemo(() => createToolbarPositioner({ types: watchedMarks }), []);
+  const { clearFormatting } = useCommands<ClearFormattingExtension>();
   const active = useActive<ImageExtension>();
   const {
     data: { marks },
@@ -38,10 +41,12 @@ export const FloatingToolbar = () => {
     ];
   } else if (!marks?.[MarkName.Link].isActive && !marks?.[MarkName.AssetLink].isActive) {
     // if none of the selected text is a link show the option to create a link.
-    buttons.push(
-      <VerticalDivider key="link-divider" className="editor-divider" />,
-      <LinkButton key="add-link" inPopover={true} />,
-    );
+    buttons.push(<VerticalDivider key="link-divider" />, <LinkButton key="add-link" inPopover={true} />);
+  }
+
+  // Clear formatting will always be the last button in the toolbar
+  if (extensionNames.clearFormatting && clearFormatting.enabled()) {
+    buttons.push(<ClearFormattingButton key="clearFormatting" />);
   }
 
   return (

package/src/EditorToolbar/Toolbar.tsx

@@ -11,6 +11,7 @@ import { useExtensionNames } from '../hooks';
 import LinkButton from './Tools/Link/LinkButton';
 import ImageButton from './Tools/Image/ImageButton';
 import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
+import ClearFormattingButton from './Tools/ClearFormatting/ClearFormattingButton';
 
 export const Toolbar = () => {
   const extensionNames = useExtensionNames();
@@ -21,7 +22,7 @@ export const Toolbar = () => {
         <>
           <UndoButton />
           <RedoButton />
-          <VerticalDivider className="editor-divider" />
+          <VerticalDivider />
         </>
       )}
       {extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && <TextTypeDropdown />}
@@ -36,6 +37,7 @@ export const Toolbar = () => {
         </>
       )}
       {extensionNames.image && <ImageButton />}
+      {extensionNames.clearFormatting && <ClearFormattingButton />}
     </RemirrorToolbar>
   );
 };

package/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithEditor } from '../../../../tests';
+import ClearFormattingButton from './ClearFormattingButton';
+
+describe('Clear formatting button', () => {
+  it('Renders the clear formatting button', async () => {
+    await renderWithEditor(<ClearFormattingButton />, { content: 'Some nonsense content here' });
+    expect(screen.getByRole('button', { name: 'Clear all formatting (cmd+\\)' })).toBeInTheDocument();
+  });
+
+  it('Clears the formatting from editor content after clicking button', async () => {
+    const { getHtmlContent } = await renderWithEditor(<ClearFormattingButton />, {
+      content: '<p>Hello <strong>Mr Bean</strong></p>',
+    });
+
+    const clearFormatting = screen.getByRole('button', { name: 'Clear all formatting (cmd+\\)' });
+    fireEvent.click(clearFormatting);
+
+    expect(getHtmlContent()).toBe('<p style="">Hello Mr Bean</p>');
+  });
+
+  it('Clears the formatting from editor content when shortcut is pressed', async () => {
+    const { getHtmlContent } = await renderWithEditor(<ClearFormattingButton />, {
+      content: '<p>Hello <strong>Mr Bean</strong></p>',
+    });
+
+    const editor = screen.getByRole('textbox'); // Assuming the editor is an input field or textarea
+    fireEvent.keyDown(editor, { key: '\\', code: 'Backslash', ctrlKey: true });
+
+    expect(getHtmlContent()).toBe('<p style="">Hello Mr Bean</p>');
+  });
+});

package/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.tsx

@@ -0,0 +1,45 @@
+import React, { useCallback } from 'react';
+import { useCommands, useEditorState, useKeymap } from '@remirror/react';
+import { VerticalDivider } from '@remirror/react-components';
+import FormatClearRoundedIcon from '@mui/icons-material/FormatClearRounded';
+import { ClearFormattingExtension } from '../../../Extensions/ClearFormattingExtension/ClearFormattingExtension';
+import Button from '../../../ui/Button/Button';
+
+const ClearFormattingButton = () => {
+  const { clearFormatting } = useCommands<ClearFormattingExtension>();
+  const { selection } = useEditorState();
+
+  // Checks wether we have specific content selected or not
+  const contentSelected = !selection.empty;
+
+  const handleSelect = () => {
+    if (clearFormatting.enabled()) {
+      clearFormatting();
+    }
+  };
+
+  const handleShortcut = useCallback(() => {
+    handleSelect();
+    // Prevent other key handlers being run
+    return true;
+  }, []);
+
+  // When Ctrl+\ is pressed clear formatting, only registered in the toolbar button instance to avoid the key press
+  // being double handled.
+  useKeymap('Mod-\\', handleShortcut);
+
+  return (
+    <>
+      <VerticalDivider />
+      <Button
+        handleOnClick={handleSelect}
+        isDisabled={false}
+        isActive={false}
+        icon={<FormatClearRoundedIcon />}
+        label={`${contentSelected ? 'Clear formatting from selection' : 'Clear all formatting'} (cmd+\\)`}
+      />
+    </>
+  );
+};
+
+export default ClearFormattingButton;

package/src/EditorToolbar/Tools/TextAlign/TextAlignButtons.tsx

@@ -8,12 +8,12 @@ import { VerticalDivider } from '@remirror/react-components';
 const TextAlignButtons = () => {
   return (
     <>
-      <VerticalDivider className="editor-divider" />
+      <VerticalDivider />
       <LeftAlignButton />
       <CenterAlignButton />
       <RightAlignButton />
       <JustifyAlignButton />
-      <VerticalDivider className="editor-divider" />
+      <VerticalDivider />
     </>
   );
 };

package/src/EditorToolbar/Tools/TextType/TextTypeDropdown.tsx

@@ -36,7 +36,7 @@ const TextTypeDropdown = () => {
         <HeadingButton level={6} />
         <PreformattedButton />
       </ToolbarDropdown>
-      <VerticalDivider className="editor-divider" />
+      <VerticalDivider />
     </>
   );
 };

package/src/EditorToolbar/_floating-toolbar.scss

@@ -3,7 +3,7 @@
   @extend .editor-toolbar;
   @apply bg-white border-gray-200 p-1 shadow rounded-md border flex;
 
-  .editor-divider {
+  .MuiDivider-root {
     @apply my-0;
   }
 }

package/src/EditorToolbar/_toolbar.scss

@@ -4,11 +4,11 @@
   display: flex;
   justify-items: center;
 
-  > *:not(:first-child, .editor-divider) {
+  > *:not(:first-child, .MuiDivider-root) {
     margin: 0 0 0 2px;
   }
 
-  .editor-divider {
+  .MuiDivider-root {
     @apply -my-1 mx-1 border;
     margin-right: 2px;
     height: auto;

package/src/Extensions/ClearFormattingExtension/ClearFormattingExtension.ts

@@ -0,0 +1,57 @@
+import { command, extension, PlainExtension, CommandFunction, Mark, ExtensionTag } from '@remirror/core';
+import { getNodeNamesByGroup } from '../../utils/getNodeNamesByGroup';
+import { getMarkNamesByGroup } from '../../utils/getMarkNamesByGroup';
+
+@extension({})
+export class ClearFormattingExtension extends PlainExtension {
+  get name() {
+    return 'clearFormatting' as const;
+  }
+
+  @command()
+  clearFormatting(): CommandFunction {
+    return ({ dispatch, tr, state }) => {
+      const { empty, ranges } = state.selection;
+      const schema = state.schema;
+
+      const formattingNodes = getNodeNamesByGroup(schema, ExtensionTag.FormattingNode);
+      const formattingMarks = getMarkNamesByGroup(schema, ExtensionTag.FormattingMark);
+      let isChanged = false;
+
+      ranges.forEach(({ $from, $to }) => {
+        // Check if there is a selection or not, if no selection use the doc content size as the range
+        state.doc.nodesBetween(empty ? 0 : $from.pos, empty ? state.doc.content.size : $to.pos, (node, pos) => {
+          // Clear marks (bold, italic, etc)
+          node.marks.forEach((mark: Mark) => {
+            if (formattingMarks.includes(mark.type.name)) {
+              tr.removeMark(pos, pos + node.nodeSize, mark);
+              isChanged = true;
+            }
+          });
+
+          // Leave non-foramtting nodes as-is
+          if (!formattingNodes.includes(node.type.name)) {
+            return;
+          }
+
+          // Clear node attributes & set to paragraph by default
+          if (node.type.name === schema.nodes.paragraph.name) {
+            const { nodeTextAlignment } = node.attrs;
+
+            if (nodeTextAlignment && nodeTextAlignment !== 'left') {
+              tr.setNodeAttribute(pos, 'nodeTextAlignment', null);
+              isChanged = true;
+            }
+          } else {
+            tr.setNodeMarkup(pos, schema.nodes.paragraph, null, node.marks);
+            isChanged = true;
+          }
+        });
+      });
+
+      dispatch?.(tr);
+
+      return isChanged;
+    };
+  }
+}

package/src/Extensions/Extensions.ts

@@ -15,6 +15,7 @@ import { ImageExtension } from './ImageExtension/ImageExtension';
 import { CommandsExtension } from './CommandsExtension/CommandsExtension';
 import { EditorContextOptions } from '../Editor/EditorContext';
 import { AssetImageExtension } from './ImageExtension/AssetImageExtension';
+import { ClearFormattingExtension } from './ClearFormattingExtension/ClearFormattingExtension';
 
 export enum NodeName {
   Image = 'image',
@@ -48,6 +49,7 @@ export const createExtensions = (context: EditorContextOptions) => {
       new AssetLinkExtension({
         matrixDomain: context.matrix.matrixDomain,
       }),
+      new ClearFormattingExtension(),
     ];
   };
 };

package/src/Extensions/PreformattedExtension/PreformattedExtension.spec.ts

@@ -1,6 +1,6 @@
 import { renderWithEditor } from '../../../tests';
 
-describe('AssetLinkExtension', () => {
+describe('PreformattedExtension', () => {
   it('Parses HTML content with preformatted text', async () => {
     const { getJsonContent } = await renderWithEditor(null, {
       content: `<pre>This is some preformatted text</pre>`,

package/src/utils/getMarkNamesByGroup.spec.ts

@@ -0,0 +1,20 @@
+import { EditorSchema, ExtensionTag } from '@remirror/core';
+import { renderWithEditor } from '../../tests';
+import { getMarkNamesByGroup } from './getMarkNamesByGroup';
+
+describe('getMarkNamesGroup', () => {
+  it('Should return expected extensions with "FormattingMark" tag', async () => {
+    const { editor } = await renderWithEditor(null);
+    const schema: EditorSchema = editor.schema;
+    const formattingMarkNames = getMarkNamesByGroup(schema, ExtensionTag.FormattingMark);
+    const otherMarkNames = Object.values(schema.marks)
+      .map((mark) => mark.name)
+      .filter((mark) => !formattingMarkNames.includes(mark));
+
+    // This tag is used by the clear formatting extension.
+    // Marks in the first array will be transformed to a paragraph when formatting is cleared.
+    // Mark in the second array will be left as-is.
+    expect(formattingMarkNames).toEqual(['bold', 'italic', 'underline']);
+    expect(otherMarkNames).toEqual(['assetLink', 'link']);
+  });
+});

package/src/utils/getMarkNamesByGroup.ts

@@ -0,0 +1,7 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+
+export const getMarkNamesByGroup = (schema: EditorSchema, group: ExtensionTagType): string[] => {
+  return Object.values(schema.marks)
+    .filter((mark) => mark.spec.group?.includes(group))
+    .map((mark) => mark.name);
+};

package/src/utils/getNodeNamesByGroup.spec.ts

@@ -0,0 +1,20 @@
+import { EditorSchema, ExtensionTag } from '@remirror/core';
+import { renderWithEditor } from '../../tests';
+import { getNodeNamesByGroup } from './getNodeNamesByGroup';
+
+describe('getNodeNamesByGroup', () => {
+  it('Should return expected extensions with "FormattingNode" tag', async () => {
+    const { editor } = await renderWithEditor(null);
+    const schema: EditorSchema = editor.schema;
+    const formattingNodeNames = getNodeNamesByGroup(schema, ExtensionTag.FormattingNode);
+    const otherNodeNames = Object.values(schema.nodes)
+      .map((node) => node.name)
+      .filter((node) => !formattingNodeNames.includes(node));
+
+    // This tag is used by the clear formatting extension.
+    // Nodes in the first array will be transformed to a paragraph when formatting is cleared.
+    // Nodes in the second array will be left as-is.
+    expect(formattingNodeNames).toEqual(['paragraph', 'heading', 'preformatted']);
+    expect(otherNodeNames).toEqual(['assetImage', 'doc', 'text', 'image']);
+  });
+});

package/src/utils/getNodeNamesByGroup.ts

@@ -0,0 +1,7 @@
+import { EditorSchema, ExtensionTagType } from '@remirror/core';
+
+export const getNodeNamesByGroup = (schema: EditorSchema, group: ExtensionTagType): string[] => {
+  return Object.values(schema.nodes)
+    .filter((node) => node.spec.group?.includes(group))
+    .map((node) => node.name);
+};