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

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/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(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/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,10 +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 = {}));
@@ -30,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(),

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;
@@ -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));

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.34.1-alpha.6",
+  "version": "1.34.1-alpha.8",
   "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.6",
-    "@squiz/resource-browser": "1.34.1-alpha.6",
+    "@squiz/dx-json-schema-lib": "1.34.1-alpha.8",
+    "@squiz/resource-browser": "1.34.1-alpha.8",
     "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": "82f279a64c198e72d7ccfb6296624052bd4ce510"
+  "gitHead": "6e1be2071c856fe3e6e4b14dbc1e67d93b97e12b"
 }

package/src/EditorToolbar/Tools/Image/ImageButton.tsx

@@ -7,6 +7,7 @@ import Button from '../../../ui/Button/Button';
 import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
 import { NodeName } from '../../../Extensions/Extensions';
 import { AssetImageExtension } from '../../../Extensions/ImageExtension/AssetImageExtension';
+import { CodeBlockExtension } from 'remirror/dist-types/extensions';
 
 type ImageButtonProps = {
   inPopover?: boolean;
@@ -15,10 +16,10 @@ type ImageButtonProps = {
 const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
   const [showModal, setShowModal] = useState(false);
   const { insertImage, insertAssetImage } = useCommands<ImageExtension | AssetImageExtension>();
-  const active = useActive<ImageExtension | AssetImageExtension>();
+  const active = useActive<ImageExtension | AssetImageExtension | CodeBlockExtension>();
   const selection = 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) {

package/src/EditorToolbar/Tools/Link/LinkButton.tsx

@@ -9,6 +9,7 @@ import { CommandsExtension } from '../../../Extensions/CommandsExtension/Command
 import { AssetLinkExtension } from '../../../Extensions/LinkExtension/AssetLinkExtension';
 import { MarkName } from '../../../Extensions/Extensions';
 import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
+import { CodeBlockExtension } from 'remirror/dist-types/extensions';
 
 export type LinkButtonProps = {
   inPopover?: boolean;
@@ -17,9 +18,9 @@ export type LinkButtonProps = {
 const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
   const [showModal, setShowModal] = useState(false);
   const { updateLink, updateAssetLink } = useCommands<AssetLinkExtension | LinkExtension | CommandsExtension>();
-  const active = useActive<LinkExtension | AssetLinkExtension | ImageExtension>();
+  const active = useActive<LinkExtension | AssetLinkExtension | ImageExtension | CodeBlockExtension>();
   // 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/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.spec.tsx

@@ -0,0 +1,47 @@
+import '@testing-library/jest-dom';
+import { render, fireEvent } from '@testing-library/react';
+import Editor from '../../../../Editor/Editor';
+import React from 'react';
+
+describe('Code block button', () => {
+  it('Renders the code block button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(getByRole('button', { name: 'Code block' })).toBeTruthy();
+  });
+
+  it('Applies active status after selecting code block button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const codeblockButton = getByRole('button', { name: 'Code block' });
+    expect(codeblockButton).toBeTruthy();
+    expect(codeblockButton.className).not.toContain('is-active');
+
+    fireEvent.click(codeblockButton);
+    expect(codeblockButton.className).toContain('is-active');
+  });
+
+  it('Should render a check icon if button is active', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+
+    const codeblockButton = getByRole('button', { name: 'Code block' });
+    expect(codeblockButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeFalsy();
+
+    fireEvent.click(codeblockButton);
+    expect(codeblockButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeTruthy();
+  });
+
+  it('Should apply preformatted tag and code tag to editor after clicking button', () => {
+    const { baseElement, getByRole } = render(<Editor />);
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('div.remirror-editor pre code')).toBeFalsy();
+
+    const codeblockButton = getByRole('button', { name: 'Code block' });
+    expect(codeblockButton).toBeTruthy();
+    fireEvent.click(codeblockButton);
+
+    expect(baseElement.querySelector(`div.remirror-editor pre code`)).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/TextType/CodeBlock/CodeBlockButton.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useCommands, useActive } from '@remirror/react';
+import { ExtendedCodeBlockExtension } from '../../../../Extensions/CodeBlockExtension/CodeBlockExtension';
+import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
+
+const CodeBlockButton = () => {
+  const { toggleCodeBlock } = useCommands<ExtendedCodeBlockExtension>();
+
+  const active = useActive<ExtendedCodeBlockExtension>();
+  const enabled = toggleCodeBlock.enabled();
+
+  const handleSelect = () => {
+    if (toggleCodeBlock.enabled()) {
+      toggleCodeBlock();
+    }
+  };
+
+  return (
+    <DropdownButton
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.codeBlock()}
+      label="Code block"
+      icon={<CodeRoundedIcon />}
+    >
+      <p>Code block</p>
+    </DropdownButton>
+  );
+};
+
+export default CodeBlockButton;

package/src/EditorToolbar/Tools/TextType/Heading/HeadingButton.spec.tsx

@@ -36,10 +36,10 @@ describe('Heading button', () => {
     expect(baseElement).toBeTruthy();
 
     const headingButton = getByRole('button', { name: label });
-    expect(headingButton.querySelector('svg[data-testid="CheckIcon"]')).toBeFalsy();
+    expect(headingButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeFalsy();
 
     fireEvent.click(headingButton);
-    expect(headingButton.querySelector('svg[data-testid="CheckIcon"]')).toBeTruthy();
+    expect(headingButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeTruthy();
   });
 
   it.each(headings)('Should apply "%s" heading tag to editor after clicking button', (label, tag) => {

package/src/EditorToolbar/Tools/TextType/Paragraph/ParagraphButton.spec.tsx

@@ -25,6 +25,6 @@ describe('Paragraph button', () => {
 
     const paragraphButton = baseElement.querySelector('button[title="Paragraph"]') as HTMLButtonElement;
     expect(paragraphButton).toBeTruthy();
-    expect(paragraphButton.querySelector('svg[data-testid="CheckIcon"]')).toBeTruthy();
+    expect(paragraphButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeTruthy();
   });
 });

package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.spec.tsx

@@ -27,10 +27,10 @@ describe('Preformatted button', () => {
     expect(baseElement).toBeTruthy();
 
     const preformattedButton = getByRole('button', { name: 'Preformatted' });
-    expect(preformattedButton.querySelector('svg[data-testid="CheckIcon"]')).toBeFalsy();
+    expect(preformattedButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeFalsy();
 
     fireEvent.click(preformattedButton);
-    expect(preformattedButton.querySelector('svg[data-testid="CheckIcon"]')).toBeTruthy();
+    expect(preformattedButton.querySelector('svg[data-testid="CheckRoundedIcon"]')).toBeTruthy();
   });
 
   it('Should apply preformatted tag to editor after clicking button', () => {

package/src/EditorToolbar/Tools/TextType/Preformatted/PreformattedButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { useCommands, useActive } from '@remirror/react';
 import { PreformattedExtension } from '../../../../Extensions/PreformattedExtension/PreformattedExtension';
 import DropdownButton from '../../../../ui/ToolbarDropdownButton/ToolbarDropdownButton';
+import ShortTextRoundedIcon from '@mui/icons-material/ShortTextRounded';
 
 const PreformattedButton = () => {
   const { togglePreformatted } = useCommands<PreformattedExtension>();
@@ -21,8 +22,9 @@ const PreformattedButton = () => {
       isDisabled={!enabled}
       isActive={active.preformatted()}
       label="Preformatted"
+      icon={<ShortTextRoundedIcon />}
     >
-      <pre>Preformatted</pre>
+      <p>Preformatted</p>
     </DropdownButton>
   );
 };

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

@@ -2,24 +2,33 @@ import React from 'react';
 import HeadingButton from './Heading/HeadingButton';
 import ParagraphButton from './Paragraph/ParagraphButton';
 import PreformattedButton from './Preformatted/PreformattedButton';
+import CodeBlockButton from './CodeBlock/CodeBlockButton';
 import ToolbarDropdown from '../../../ui/ToolbarDropdown/ToolbarDropdown';
 import { useActive, VerticalDivider } from '@remirror/react';
 import { PreformattedExtension } from '../../../Extensions/PreformattedExtension/PreformattedExtension';
+import { CodeBlockExtension } from 'remirror/dist-types/extensions';
 
 const TextTypeDropdown = () => {
-  const active = useActive<PreformattedExtension>();
+  const active = useActive<PreformattedExtension | CodeBlockExtension>();
 
   const activeLabel = () => {
     // Determine if preformatted is active
     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 })) {
         return `Heading ${i}`;
       }
     }
+
     // Default to paragraph
     return 'Paragraph';
   };
@@ -35,6 +44,7 @@ const TextTypeDropdown = () => {
         <HeadingButton level={5} />
         <HeadingButton level={6} />
         <PreformattedButton />
+        <CodeBlockButton />
       </ToolbarDropdown>
       <VerticalDivider />
     </>

package/src/Extensions/CodeBlockExtension/CodeBlockExtension.ts

@@ -0,0 +1,34 @@
+import { CodeBlockExtension } from '@remirror/extension-code-block';
+import { NodeViewMethod, ProsemirrorNode } from 'remirror';
+
+export class ExtendedCodeBlockExtension extends CodeBlockExtension {
+  createNodeViews(): NodeViewMethod {
+    return (node: ProsemirrorNode) => {
+      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 };
+    };
+  }
+}

package/src/Extensions/Extensions.ts

@@ -15,10 +15,12 @@ import { ImageExtension } from './ImageExtension/ImageExtension';
 import { CommandsExtension } from './CommandsExtension/CommandsExtension';
 import { EditorContextOptions } from '../Editor/EditorContext';
 import { AssetImageExtension } from './ImageExtension/AssetImageExtension';
+import { ExtendedCodeBlockExtension } from './CodeBlockExtension/CodeBlockExtension';
 import { ClearFormattingExtension } from './ClearFormattingExtension/ClearFormattingExtension';
 
 export enum NodeName {
   Image = 'image',
+  CodeBlock = 'codeBlock',
   AssetImage = 'assetImage',
   Text = 'text',
 }
@@ -38,6 +40,7 @@ export const createExtensions = (context: EditorContextOptions) => {
       new NodeFormattingExtension({ indents: [] }),
       new ParagraphExtension(),
       new PreformattedExtension(),
+      new ExtendedCodeBlockExtension({ defaultWrap: true }),
       new UnderlineExtension(),
       new HistoryExtension(),
       new ImageExtension(),

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

@@ -36,6 +36,8 @@ describe('PreformattedExtension', () => {
       },
     });
 
-    expect(getHtmlContent()).toBe('<pre style="">This is some preformatted text</pre>');
+    expect(getHtmlContent()).toBe(
+      '<div class="preformatted"><svg class="material-symbols-rounded">short_text</svg><div class="block-divider"></div><pre data-node-text-align="null" style="text-align:null">This is some preformatted text</pre></div>',
+    );
   });
 });

package/src/Extensions/PreformattedExtension/PreformattedExtension.ts

@@ -10,6 +10,7 @@ import {
   ProsemirrorNode,
   toggleBlockItem,
 } from '@remirror/core';
+import { NodeViewMethod } from 'remirror';
 
 @extension({})
 export class PreformattedExtension extends NodeExtension {
@@ -41,6 +42,36 @@ export class PreformattedExtension extends NodeExtension {
     };
   }
 
+  createNodeViews(): NodeViewMethod {
+    return (node: ProsemirrorNode) => {
+      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/src/index.scss

@@ -3,6 +3,9 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+/* So we can use icons inside of FTE content */
+@import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded';
+
 /* Global */
 @import './ui/typography';
 @import './ui/forms';

package/src/ui/ToolbarDropdownButton/ToolbarDropdownButton.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import CheckIcon from '@mui/icons-material/Check';
+import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
 
 type DropdownButtonProps = {
   children?: JSX.Element;
@@ -7,9 +7,10 @@ type DropdownButtonProps = {
   isDisabled: boolean;
   isActive: boolean;
   label: string;
+  icon?: JSX.Element;
 };
 
-const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }: DropdownButtonProps) => {
+const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label, icon }: DropdownButtonProps) => {
   return (
     <button
       aria-label={label}
@@ -20,8 +21,11 @@ const DropdownButton = ({ children, handleOnClick, isDisabled, isActive, label }
       disabled={isDisabled}
       className={`btn dropdown-button ${isActive ? 'is-active' : ''}`}
     >
-      <span>{children || label}</span>
-      {isActive && <CheckIcon className="dropdown-button-icon" />}
+      <div className="dropdown-button-label">
+        {icon && icon}
+        {children || label}
+      </div>
+      {isActive && <CheckRoundedIcon className="dropdown-button-icon" />}
     </button>
   );
 };

package/src/ui/ToolbarDropdownButton/_toolbar-dropdown-button.scss

@@ -11,4 +11,15 @@
   &:focus {
     background-color: rgba(black, 0.04);
   }
+
+  svg {
+    font-size: 18px;
+  }
+
+  .dropdown-button-label {
+    display: flex;
+    align-items: center;
+    font-size: 14px;
+    gap: 5px;
+  }
 }

package/src/ui/_typography.scss

@@ -44,3 +44,29 @@ h6 {
   letter-spacing: -0.2px;
   line-height: 1.25rem;
 }
+
+.code-block,
+.preformatted {
+  display: flex;
+
+  .material-symbols-rounded {
+    @apply text-gray-700 text-xlg;
+    pointer-events: none;
+    margin-right: 0.375rem;
+  }
+
+  .block-divider {
+    @apply bg-gray-200;
+    width: 4px;
+    border-radius: 0.75rem;
+    margin-right: 0.625rem;
+  }
+
+  code,
+  pre {
+    @apply text-gray-700;
+    font-size: 0.75rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
+  }
+}

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.spec.ts

@@ -74,6 +74,43 @@ describe('remirrorNodeToSquizNode', () => {
     expect(result).toEqual(expected);
   });
 
+  it('should handle code block formatting', async () => {
+    const content: RemirrorJSON = {
+      type: 'doc',
+      content: [
+        {
+          type: 'codeBlock',
+          attrs: {
+            language: 'js',
+            wrap: true,
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Hello world',
+            },
+          ],
+        },
+      ],
+    };
+
+    const { editor } = await renderWithEditor(null, { content });
+
+    const expected: FormattedText = [
+      {
+        type: 'tag',
+        tag: 'code',
+        children: [{ type: 'text', value: 'Hello world' }],
+        attributes: {
+          language: 'js',
+        },
+      },
+    ];
+
+    const result = remirrorNodeToSquizNode(editor.doc);
+    expect(result).toEqual(expected);
+  });
+
   it('should handle images', async () => {
     const content: RemirrorJSON = {
       type: 'doc',

package/src/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.ts

@@ -16,10 +16,14 @@ type FormattedNodeFontProperties = FormattedTextModels.v1.FormattedNodeFontPrope
 type FormattedNodeWithChildren = Extract<FormattedNode, { children: FormattedNode[] }>;
 
 export const resolveNodeTag = (node: ProsemirrorNode): string => {
-  if (node.type.name === 'text') {
+  if (node.type.name === NodeName.Text) {
     return 'span';
   }
 
+  if (node.type.name === NodeName.CodeBlock) {
+    return 'code';
+  }
+
   if (node.type.spec?.toDOM) {
     const domNode = node.type.spec.toDOM(node);
 
@@ -92,9 +96,13 @@ const transformFragment = (fragment: Fragment): FormattedText => {
 };
 
 const transformNode = (node: ProsemirrorNode): FormattedNode => {
-  const attributes = node.type.name === NodeName.Image ? transformAttributes(node.attrs) : undefined;
   const formattingOptions = undefinedIfEmpty(resolveFormattingOptions(node));
   const font = undefinedIfEmpty(resolveFontOptions(node));
+  const attributes =
+    node.type.name === NodeName.Image || node.type.name === NodeName.CodeBlock
+      ? transformAttributes(node.attrs)
+      : undefined;
+
   let transformedNode: FormattedNode = { type: 'text', value: node.text || '' };
 
   // Squiz "text" nodes can't have formatting/font options but Remirror "text" nodes can.

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.spec.ts

@@ -139,10 +139,10 @@ describe('squizNodeToRemirrorNode', () => {
             },
           ],
           type: 'tag',
-          tag: 'code',
+          tag: 'video',
         },
       ],
-      'Unsupported node type provided: tag (tag: code)',
+      'Unsupported node type provided: tag (tag: video)',
     ],
     [
       'Unsupported node type',
@@ -192,6 +192,43 @@ describe('squizNodeToRemirrorNode', () => {
     expect(result).toEqual(expected);
   });
 
+  it('should handle code block text', () => {
+    const squizComponentJSON: FormattedText = [
+      {
+        children: [
+          {
+            type: 'text',
+            value: 'Hello world!',
+          },
+        ],
+        type: 'tag',
+        tag: 'code',
+      },
+    ];
+
+    const expected: RemirrorJSON = {
+      content: [
+        {
+          type: 'codeBlock',
+          attrs: {
+            language: 'markup',
+            wrap: true,
+          },
+          content: [
+            {
+              type: 'text',
+              text: 'Hello world!',
+            },
+          ],
+        },
+      ],
+      type: 'doc',
+    };
+
+    const result = squizNodeToRemirrorNode(squizComponentJSON);
+    expect(result).toEqual(expected);
+  });
+
   it('should handle images', () => {
     const squizComponentJSON: FormattedText = [
       {

package/src/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.ts

@@ -26,6 +26,7 @@ const getNodeType = (node: FormattedNodes): string => {
     p: 'paragraph',
     a: NodeName.Text,
     span: NodeName.Text,
+    code: NodeName.CodeBlock,
   };
 
   if (typeMap[node.type]) {
@@ -53,6 +54,11 @@ const getNodeAttributes = (node: FormattedNodes): Attrs => {
       src: node.attributes?.src,
       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/src/utils/getNodeNamesByGroup.spec.ts

@@ -15,6 +15,6 @@ describe('getNodeNamesByGroup', () => {
     // 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']);
+    expect(otherNodeNames).toEqual(['assetImage', 'doc', 'text', 'codeBlock', 'image']);
   });
 });

package/tailwind.config.cjs

@@ -27,9 +27,6 @@ module.exports = {
         'heading-3': ['1.125rem', '1.375rem'],
         'heading-4': ['1rem', '1.25rem'],
       },
-      fontFamily: {
-        base: 'Open Sans, Arial, sans-serif',
-      },
       boxShadow: {
         outline: '0 0 0 1px rgba(0,0,0,0.10)',
         sm: '0 0 0 1px rgba(0,0,0,0.04), 0 1px 4px 2px rgba(0,0,0,0.08)',
@@ -75,6 +72,10 @@ module.exports = {
           300: '#0774d2',
           400: '#044985',
         },
+        teal: {
+          100: '#E6F4F6',
+          400: '#024752',
+        },
         red: {
           300: '#d72321',
         },