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

package/package.json

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

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/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/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/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,8 +44,9 @@ const TextTypeDropdown = () => {
         <HeadingButton level={5} />
         <HeadingButton level={6} />
         <PreformattedButton />
+        <CodeBlockButton />
       </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/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,9 +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',
 }
@@ -37,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(),
@@ -48,6 +52,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>`,
@@ -36,6 +36,8 @@ describe('AssetLinkExtension', () => {
       },
     });
 
-    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';