@squiz/formatted-text-editor 1.34.1-alpha.1 → 1.34.1-alpha.11

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/Image/ImageButton.js

@@ -38,7 +38,7 @@ const ImageButton = ({ inPopover = false }) => {
     const active = (0, react_2.useActive)();
     const selection = (0, react_2.useCurrentSelection)();
     // if the active selection is not an image, disable the button as it means it will be text
-    const disabled = !selection.empty && !active.image() && !active.assetImage();
+    const disabled = (!selection.empty && !active.image() && !active.assetImage()) || active.codeBlock();
     const handleClick = () => {
         if (!showModal) {
             setShowModal(true);

package/lib/EditorToolbar/Tools/Link/LinkButton.js

@@ -37,7 +37,7 @@ const LinkButton = ({ inPopover = false }) => {
     const { updateLink, updateAssetLink } = (0, react_2.useCommands)();
     const active = (0, react_2.useActive)();
     // If the image tool is active, disable the link tool as they shouldn't work at the same time
-    const disabled = active.image();
+    const disabled = active.image() || active.codeBlock();
     const handleClick = () => {
         if (!showModal) {
             setShowModal(true);

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/CodeBlock/CodeBlockButton.d.ts

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

package/lib/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const react_2 = require("@remirror/react");
+const ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
+const CodeRounded_1 = __importDefault(require("@mui/icons-material/CodeRounded"));
+const CodeBlockButton = () => {
+    const { toggleCodeBlock } = (0, react_2.useCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = toggleCodeBlock.enabled();
+    const handleSelect = () => {
+        if (toggleCodeBlock.enabled()) {
+            toggleCodeBlock();
+        }
+    };
+    return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.codeBlock(), label: "Code block", icon: react_1.default.createElement(CodeRounded_1.default, null) },
+        react_1.default.createElement("p", null, "Code block")));
+};
+exports.default = CodeBlockButton;

package/lib/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
 const ToolbarDropdownButton_1 = __importDefault(require("../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton"));
+const ShortTextRounded_1 = __importDefault(require("@mui/icons-material/ShortTextRounded"));
 const PreformattedButton = () => {
     const { togglePreformatted } = (0, react_2.useCommands)();
     const active = (0, react_2.useActive)();
@@ -15,7 +16,7 @@ const PreformattedButton = () => {
             togglePreformatted();
         }
     };
-    return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.preformatted(), label: "Preformatted" },
-        react_1.default.createElement("pre", null, "Preformatted")));
+    return (react_1.default.createElement(ToolbarDropdownButton_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.preformatted(), label: "Preformatted", icon: react_1.default.createElement(ShortTextRounded_1.default, null) },
+        react_1.default.createElement("p", null, "Preformatted")));
 };
 exports.default = PreformattedButton;

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

@@ -7,6 +7,7 @@ const react_1 = __importDefault(require("react"));
 const HeadingButton_1 = __importDefault(require("./Heading/HeadingButton"));
 const ParagraphButton_1 = __importDefault(require("./Paragraph/ParagraphButton"));
 const PreformattedButton_1 = __importDefault(require("./Preformatted/PreformattedButton"));
+const CodeBlockButton_1 = __importDefault(require("./CodeBlock/CodeBlockButton"));
 const ToolbarDropdown_1 = __importDefault(require("../../../ui/ToolbarDropdown/ToolbarDropdown"));
 const react_2 = require("@remirror/react");
 const TextTypeDropdown = () => {
@@ -16,6 +17,10 @@ const TextTypeDropdown = () => {
         if (active.preformatted()) {
             return 'Preformatted';
         }
+        // Determine if codeblock is active
+        if (active.codeBlock()) {
+            return 'Code block';
+        }
         // Determine if a heading is active
         for (let i = 1; i <= 6; i++) {
             if (active.heading({ level: i })) {
@@ -34,7 +39,8 @@ const TextTypeDropdown = () => {
             react_1.default.createElement(HeadingButton_1.default, { level: 4 }),
             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(PreformattedButton_1.default, null),
+            react_1.default.createElement(CodeBlockButton_1.default, null)),
+        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/CodeBlockExtension/CodeBlockExtension.d.ts

@@ -0,0 +1,5 @@
+import { CodeBlockExtension } from '@remirror/extension-code-block';
+import { NodeViewMethod } from 'remirror';
+export declare class ExtendedCodeBlockExtension extends CodeBlockExtension {
+    createNodeViews(): NodeViewMethod;
+}

package/lib/Extensions/CodeBlockExtension/CodeBlockExtension.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExtendedCodeBlockExtension = void 0;
+const extension_code_block_1 = require("@remirror/extension-code-block");
+class ExtendedCodeBlockExtension extends extension_code_block_1.CodeBlockExtension {
+    createNodeViews() {
+        return (node) => {
+            const { language } = node.attrs;
+            // This is the pre container for the code block
+            const dom = document.createElement('pre');
+            dom.setAttribute('spellcheck', 'false');
+            dom.classList.add(`code-block`);
+            // This is the actual code content in the code block
+            const contentDOM = document.createElement('code');
+            contentDOM.setAttribute('data-code-block-language', language);
+            // Divider between code block and pre container
+            const dividerElement = document.createElement('div');
+            dividerElement.classList.add('block-divider');
+            // The material icon to use
+            const codeIcon = document.createElement('svg');
+            codeIcon.classList.add('material-symbols-rounded');
+            codeIcon.textContent = 'code';
+            dom.append(codeIcon);
+            dom.append(dividerElement);
+            dom.append(contentDOM);
+            return { dom, contentDOM };
+        };
+    }
+}
+exports.ExtendedCodeBlockExtension = ExtendedCodeBlockExtension;

package/lib/Extensions/Extensions.d.ts

@@ -2,6 +2,7 @@ import { Extension } from '@remirror/core';
 import { EditorContextOptions } from '../Editor/EditorContext';
 export declare enum NodeName {
     Image = "image",
+    CodeBlock = "codeBlock",
     AssetImage = "assetImage",
     Text = "text"
 }

package/lib/Extensions/Extensions.js

@@ -8,9 +8,12 @@ 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 CodeBlockExtension_1 = require("./CodeBlockExtension/CodeBlockExtension");
+const ClearFormattingExtension_1 = require("./ClearFormattingExtension/ClearFormattingExtension");
 var NodeName;
 (function (NodeName) {
     NodeName["Image"] = "image";
+    NodeName["CodeBlock"] = "codeBlock";
     NodeName["AssetImage"] = "assetImage";
     NodeName["Text"] = "text";
 })(NodeName = exports.NodeName || (exports.NodeName = {}));
@@ -29,6 +32,7 @@ const createExtensions = (context) => {
             new extensions_1.NodeFormattingExtension({ indents: [] }),
             new extensions_1.ParagraphExtension(),
             new PreformattedExtension_1.PreformattedExtension(),
+            new CodeBlockExtension_1.ExtendedCodeBlockExtension({ defaultWrap: true }),
             new extensions_1.UnderlineExtension(),
             new extensions_1.HistoryExtension(),
             new ImageExtension_1.ImageExtension(),
@@ -40,6 +44,7 @@ const createExtensions = (context) => {
             new AssetLinkExtension_1.AssetLinkExtension({
                 matrixDomain: context.matrix.matrixDomain,
             }),
+            new ClearFormattingExtension_1.ClearFormattingExtension(),
         ];
     };
 };

package/lib/Extensions/PreformattedExtension/PreformattedExtension.d.ts

@@ -1,8 +1,10 @@
 import { ApplySchemaAttributes, CommandFunction, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
+import { NodeViewMethod } from 'remirror';
 export declare class PreformattedExtension extends NodeExtension {
     get name(): "preformatted";
     createTags(): ("block" | "formattingNode" | "textBlock")[];
     createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+    createNodeViews(): NodeViewMethod;
     /**
      * Toggle the <pre> for the current block.
      */

package/lib/Extensions/PreformattedExtension/PreformattedExtension.js

@@ -34,6 +34,29 @@ let PreformattedExtension = class PreformattedExtension extends core_1.NodeExten
             },
         };
     }
+    createNodeViews() {
+        return (node) => {
+            const { nodeTextAlignment } = node.attrs;
+            // This is the pre container for the code block
+            const dom = document.createElement('div');
+            dom.classList.add(`preformatted`);
+            // This is the actual code content in the code block
+            const contentDOM = document.createElement('pre');
+            contentDOM.setAttribute('data-node-text-align', nodeTextAlignment);
+            contentDOM.setAttribute('style', `text-align:${nodeTextAlignment}`);
+            // Divider between code block and pre container
+            const dividerElement = document.createElement('div');
+            dividerElement.classList.add('block-divider');
+            // The material icon to use
+            const codeIcon = document.createElement('svg');
+            codeIcon.classList.add('material-symbols-rounded');
+            codeIcon.textContent = 'short_text';
+            dom.append(codeIcon);
+            dom.append(dividerElement);
+            dom.append(contentDOM);
+            return { dom, contentDOM };
+        };
+    }
     /**
      * Toggle the <pre> for the current block.
      */

package/lib/index.css

@@ -1,3 +1,5 @@
+@import "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded";
+
 /* src/index.scss */
 .squiz-fte-scope *,
 .squiz-fte-scope ::before,
@@ -674,6 +676,36 @@
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
+.squiz-fte-scope .code-block,
+.squiz-fte-scope .preformatted {
+  display: flex;
+}
+.squiz-fte-scope .code-block .material-symbols-rounded,
+.squiz-fte-scope .preformatted .material-symbols-rounded {
+  font-size: 1.125rem;
+  --tw-text-opacity: 1;
+  color: rgb(79 79 79 / var(--tw-text-opacity));
+  pointer-events: none;
+  margin-right: 0.375rem;
+}
+.squiz-fte-scope .code-block .block-divider,
+.squiz-fte-scope .preformatted .block-divider {
+  --tw-bg-opacity: 1;
+  background-color: rgb(237 237 237 / var(--tw-bg-opacity));
+  width: 4px;
+  border-radius: 0.75rem;
+  margin-right: 0.625rem;
+}
+.squiz-fte-scope .code-block code,
+.squiz-fte-scope .code-block pre,
+.squiz-fte-scope .preformatted code,
+.squiz-fte-scope .preformatted pre {
+  --tw-text-opacity: 1;
+  color: rgb(79 79 79 / var(--tw-text-opacity));
+  font-size: 0.75rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
+}
 .squiz-fte-scope .squiz-fte-form-group {
   display: flex;
   flex-direction: column;
@@ -812,12 +844,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 +859,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 +883,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;
 }
@@ -959,6 +991,15 @@
 .squiz-fte-scope .dropdown-button:focus {
   background-color: rgba(0, 0, 0, 0.04);
 }
+.squiz-fte-scope .dropdown-button svg {
+  font-size: 18px;
+}
+.squiz-fte-scope .dropdown-button .dropdown-button-label {
+  display: flex;
+  align-items: center;
+  font-size: 14px;
+  gap: 5px;
+}
 .squiz-fte-scope .squiz-fte-checkbox {
   --tw-text-opacity: 1;
   color: rgb(61 61 61 / var(--tw-text-opacity));
@@ -1042,12 +1083,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/ui/ToolbarDropdownButton/ToolbarDropdownButton.d.ts

@@ -4,6 +4,7 @@ type DropdownButtonProps = {
     isDisabled: boolean;
     isActive: boolean;
     label: string;
+    icon?: JSX.Element;
 };
-declare const DropdownButton: ({ children, handleOnClick, isDisabled, isActive, label }: DropdownButtonProps) => JSX.Element;
+declare const DropdownButton: ({ children, handleOnClick, isDisabled, isActive, label, icon }: DropdownButtonProps) => JSX.Element;
 export default DropdownButton;

package/lib/ui/ToolbarDropdownButton/ToolbarDropdownButton.js

@@ -4,10 +4,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
-const Check_1 = __importDefault(require("@mui/icons-material/Check"));
-const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }) => {
+const CheckRounded_1 = __importDefault(require("@mui/icons-material/CheckRounded"));
+const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label, icon }) => {
     return (react_1.default.createElement("button", { "aria-label": label, id: "dropdownMenuButton", title: label, type: "button", onClick: handleOnClick, disabled: isDisabled, className: `btn dropdown-button ${isActive ? 'is-active' : ''}` },
-        react_1.default.createElement("span", null, children || label),
-        isActive && react_1.default.createElement(Check_1.default, { className: "dropdown-button-icon" })));
+        react_1.default.createElement("div", { className: "dropdown-button-label" },
+            icon && icon,
+            children || label),
+        isActive && react_1.default.createElement(CheckRounded_1.default, { className: "dropdown-button-icon" })));
 };
 exports.default = DropdownButton;

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -4,9 +4,12 @@ exports.remirrorNodeToSquizNode = exports.resolveNodeTag = void 0;
 const undefinedIfEmpty_1 = require("../../undefinedIfEmpty");
 const Extensions_1 = require("../../../Extensions/Extensions");
 const resolveNodeTag = (node) => {
-    if (node.type.name === 'text') {
+    if (node.type.name === Extensions_1.NodeName.Text) {
         return 'span';
     }
+    if (node.type.name === Extensions_1.NodeName.CodeBlock) {
+        return 'code';
+    }
     if (node.type.spec?.toDOM) {
         const domNode = node.type.spec.toDOM(node);
         if (domNode instanceof window.Node) {
@@ -63,9 +66,11 @@ const transformFragment = (fragment) => {
     return transformed;
 };
 const transformNode = (node) => {
-    const attributes = node.type.name === Extensions_1.NodeName.Image ? transformAttributes(node.attrs) : undefined;
     const formattingOptions = (0, undefinedIfEmpty_1.undefinedIfEmpty)(resolveFormattingOptions(node));
     const font = (0, undefinedIfEmpty_1.undefinedIfEmpty)(resolveFontOptions(node));
+    const attributes = node.type.name === Extensions_1.NodeName.Image || node.type.name === Extensions_1.NodeName.CodeBlock
+        ? transformAttributes(node.attrs)
+        : undefined;
     let transformedNode = { type: 'text', value: node.text || '' };
     // Squiz "text" nodes can't have formatting/font options but Remirror "text" nodes can.
     // If the node has formatting options wrap in a tag.

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -21,6 +21,7 @@ const getNodeType = (node) => {
         p: 'paragraph',
         a: Extensions_1.NodeName.Text,
         span: Extensions_1.NodeName.Text,
+        code: Extensions_1.NodeName.CodeBlock,
     };
     if (typeMap[node.type]) {
         return typeMap[node.type];
@@ -43,6 +44,12 @@ const getNodeAttributes = (node) => {
             title: node.attributes?.title,
         };
     }
+    else if (node.type === 'tag' && node.tag === 'code') {
+        return {
+            language: node.attributes?.language || 'markup',
+            wrap: node.attributes?.wrap || true,
+        };
+    }
     else if (node.type === 'matrix-image') {
         return {
             matrixAssetId: node.matrixAssetId,

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;