@squiz/formatted-text-editor 1.35.0 → 1.35.1-alpha.1

package/lib/Extensions/Extensions.d.ts

@@ -4,7 +4,8 @@ export declare enum NodeName {
     Image = "image",
     CodeBlock = "codeBlock",
     AssetImage = "assetImage",
-    Text = "text"
+    Text = "text",
+    Unsupported = "unsupportedNode"
 }
 export declare enum MarkName {
     Link = "link",

package/lib/Extensions/Extensions.js

@@ -10,12 +10,14 @@ const CommandsExtension_1 = require("./CommandsExtension/CommandsExtension");
 const AssetImageExtension_1 = require("./ImageExtension/AssetImageExtension");
 const CodeBlockExtension_1 = require("./CodeBlockExtension/CodeBlockExtension");
 const ClearFormattingExtension_1 = require("./ClearFormattingExtension/ClearFormattingExtension");
+const UnsupportedNodeExtension_1 = require("./UnsuportedExtension/UnsupportedNodeExtension");
 var NodeName;
 (function (NodeName) {
     NodeName["Image"] = "image";
     NodeName["CodeBlock"] = "codeBlock";
     NodeName["AssetImage"] = "assetImage";
     NodeName["Text"] = "text";
+    NodeName["Unsupported"] = "unsupportedNode";
 })(NodeName = exports.NodeName || (exports.NodeName = {}));
 var MarkName;
 (function (MarkName) {
@@ -44,6 +46,7 @@ const createExtensions = (context) => {
             new AssetLinkExtension_1.AssetLinkExtension({
                 matrixDomain: context.matrix.matrixDomain,
             }),
+            new UnsupportedNodeExtension_1.UnsupportedNodeExtension(),
             new ClearFormattingExtension_1.ClearFormattingExtension(),
         ];
     };

package/lib/Extensions/UnsuportedExtension/UnsupportedNodeExtension.d.ts

@@ -0,0 +1,10 @@
+import { ApplySchemaAttributes, NodeExtension, NodeExtensionSpec, NodeSpecOverride } from '@remirror/core';
+import { NodeName } from '../Extensions';
+import { ComponentType } from 'react';
+import { NodeViewComponentProps } from '@remirror/react';
+export declare class UnsupportedNodeExtension extends NodeExtension {
+    get name(): NodeName.Unsupported;
+    ReactComponent: ComponentType<NodeViewComponentProps>;
+    createTags(): "inline"[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+}

package/lib/Extensions/UnsuportedExtension/UnsupportedNodeExtension.js

@@ -0,0 +1,76 @@
+"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;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.UnsupportedNodeExtension = void 0;
+const core_1 = require("@remirror/core");
+const Extensions_1 = require("../Extensions");
+const CollapseBox_1 = __importDefault(require("../../ui/CollapseBox/CollapseBox"));
+let UnsupportedNodeExtension = class UnsupportedNodeExtension extends core_1.NodeExtension {
+    get name() {
+        return Extensions_1.NodeName.Unsupported;
+    }
+    ReactComponent = CollapseBox_1.default;
+    createTags() {
+        return [core_1.ExtensionTag.InlineNode];
+    }
+    createNodeSpec(extra, override) {
+        return {
+            selectable: false,
+            draggable: true,
+            atom: true,
+            inline: true,
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+                originalNode: {},
+                errorMessage: {},
+            },
+            parseDOM: [
+                {
+                    tag: `[data-unsupported-node]`,
+                    getAttrs: (node) => {
+                        if (!(0, core_1.isElementDomNode)(node)) {
+                            return false;
+                        }
+                        const unsupportedNodes = node.getAttribute('data-unsupported-node');
+                        try {
+                            const decodedNodes = JSON.parse(unsupportedNodes);
+                            return {
+                                ...extra.parse(node),
+                                originalNode: decodedNodes?.originalNode,
+                                errorMessage: decodedNodes?.errorMessage,
+                            };
+                        }
+                        catch (error) {
+                            console.error('Failed to parse Remirror nodes from data-unsupported-node', error);
+                            return false;
+                        }
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                const { originalNode, errorMessage, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const attrs = {
+                    ...extra.dom(node),
+                    ...rest,
+                    originalNode,
+                    errorMessage,
+                    'data-unsupported-node': JSON.stringify({ originalNode, errorMessage }),
+                };
+                return ['div', attrs];
+            },
+        };
+    }
+};
+UnsupportedNodeExtension = __decorate([
+    (0, core_1.extension)({})
+], UnsupportedNodeExtension);
+exports.UnsupportedNodeExtension = UnsupportedNodeExtension;

package/lib/index.css

@@ -350,6 +350,9 @@
 .squiz-fte-scope .visible {
   visibility: visible !important;
 }
+.squiz-fte-scope .collapse {
+  visibility: collapse !important;
+}
 .squiz-fte-scope .fixed {
   position: fixed !important;
 }
@@ -1022,6 +1025,38 @@
 .squiz-fte-scope .squiz-fte-checkbox .checkbox svg {
   width: 100%;
 }
+.squiz-fte-scope .collapse-box {
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 245 245 / var(--tw-bg-opacity));
+  padding: 0.5rem;
+  --tw-text-opacity: 1;
+  color: rgb(61 61 61 / var(--tw-text-opacity));
+}
+.squiz-fte-scope .collapse-box__header {
+  display: flex;
+  width: 100%;
+  align-items: center;
+}
+.squiz-fte-scope .collapse-box__label {
+  margin-left: 0.5rem;
+  margin-right: auto;
+}
+.squiz-fte-scope .collapse-box__icon {
+  --tw-text-opacity: 1;
+  color: rgb(112 112 112 / var(--tw-text-opacity));
+}
+.squiz-fte-scope .collapse-box__icon--warning {
+  --tw-text-opacity: 1;
+  color: rgb(215 35 33 / var(--tw-text-opacity));
+}
+.squiz-fte-scope .collapse-box__content {
+  margin-top: 0.5rem;
+  border-radius: 0.5rem;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding: 0.5rem;
+}
 .squiz-fte-scope .squiz-fte-modal {
   display: flex;
   width: 100%;

package/lib/ui/CollapseBox/CollapseBox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { NodeViewComponentProps } from '@remirror/react';
+export interface CollapseBoxProps {
+    node: NodeViewComponentProps['node'];
+}
+declare const CollapseBox: React.FC<CollapseBoxProps>;
+export default CollapseBox;

package/lib/ui/CollapseBox/CollapseBox.js

@@ -0,0 +1,48 @@
+"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 MotionPhotosOffOutlined_1 = __importDefault(require("@mui/icons-material/MotionPhotosOffOutlined"));
+const UnfoldLessOutlined_1 = __importDefault(require("@mui/icons-material/UnfoldLessOutlined"));
+const UnfoldMoreOutlined_1 = __importDefault(require("@mui/icons-material/UnfoldMoreOutlined"));
+const CollapseBox = ({ node }) => {
+    const [isVisible, setIsVisible] = (0, react_1.useState)(true);
+    const label = 'This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.';
+    const errorMessage = node?.attrs?.errorMessage;
+    const errorNode = JSON.stringify(node?.attrs?.originalNode, null, 3);
+    return (react_1.default.createElement("div", { className: "collapse-box", suppressContentEditableWarning: true, contentEditable: false },
+        react_1.default.createElement("button", { className: "collapse-box__header", onClick: () => setIsVisible(!isVisible), type: 'button' },
+            react_1.default.createElement(MotionPhotosOffOutlined_1.default, { className: "collapse-box__icon--warning" }),
+            react_1.default.createElement("div", { className: "collapse-box__label" }, label),
+            isVisible ? react_1.default.createElement(UnfoldLessOutlined_1.default, null) : react_1.default.createElement(UnfoldMoreOutlined_1.default, null)),
+        react_1.default.createElement("div", { className: "collapse-box__content", hidden: isVisible, "data-testid": "content" },
+            errorMessage,
+            react_1.default.createElement("br", null),
+            errorNode)));
+};
+exports.default = CollapseBox;

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

@@ -105,6 +105,10 @@ const transformNode = (node) => {
                 transformedNode = transformMark(mark, transformedNode);
         }
     });
+    if (node.type.name === Extensions_1.NodeName.Unsupported) {
+        const unsupportedNode = node.attrs?.originalNode;
+        return { ...unsupportedNode };
+    }
     return transformedNode;
 };
 /**

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

@@ -93,10 +93,17 @@ const getNodeMarks = (node) => {
         });
     }
     // Handle font formatting
-    if ('font' in node) {
-        node.font?.bold && marks.push({ type: 'bold' });
-        node.font?.italics && marks.push({ type: 'italic' });
-        node.font?.underline && marks.push({ type: 'underline' });
+    if ('font' in node && node.font !== undefined) {
+        for (const [type, enabled] of Object.entries(node.font)) {
+            if (enabled) {
+                if (type === 'bold' || type === 'italics' || type === 'underline') {
+                    marks.push({ type: type === 'italics' ? 'italic' : type });
+                }
+                else {
+                    throw new Error(`Unsupported mark provided: ${type}`);
+                }
+            }
+        }
     }
     return marks;
 };
@@ -135,7 +142,24 @@ const formatNode = (node) => {
 const squizNodeToRemirrorNode = (nodes) => {
     let children = [];
     nodes.forEach((node) => {
-        children.push(...formatNode(node));
+        try {
+            children.push(...formatNode(node));
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+            children.push({
+                type: 'paragraph',
+                content: [
+                    {
+                        type: Extensions_1.NodeName.Unsupported,
+                        attrs: {
+                            originalNode: node,
+                            errorMessage,
+                        },
+                    },
+                ],
+            });
+        }
     });
     if (children.find((child) => child.type === 'text')) {
         children = [{ type: 'paragraph', content: children }];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.35.0",
+  "version": "1.35.1-alpha.1",
   "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.35.0",
-    "@squiz/resource-browser": "1.35.0",
+    "@squiz/dx-json-schema-lib": "1.35.1-alpha.1",
+    "@squiz/resource-browser": "1.35.1-alpha.1",
     "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": "124a9ee3a6880fb8e5207bc9dc4448660e945936"
+  "gitHead": "7078d3f12984eca01f1cf0bcef3b63a9509f7511"
 }

package/src/Extensions/Extensions.ts

@@ -17,12 +17,14 @@ import { EditorContextOptions } from '../Editor/EditorContext';
 import { AssetImageExtension } from './ImageExtension/AssetImageExtension';
 import { ExtendedCodeBlockExtension } from './CodeBlockExtension/CodeBlockExtension';
 import { ClearFormattingExtension } from './ClearFormattingExtension/ClearFormattingExtension';
+import { UnsupportedNodeExtension } from './UnsuportedExtension/UnsupportedNodeExtension';
 
 export enum NodeName {
   Image = 'image',
   CodeBlock = 'codeBlock',
   AssetImage = 'assetImage',
   Text = 'text',
+  Unsupported = 'unsupportedNode',
 }
 
 export enum MarkName {
@@ -52,6 +54,7 @@ export const createExtensions = (context: EditorContextOptions) => {
       new AssetLinkExtension({
         matrixDomain: context.matrix.matrixDomain,
       }),
+      new UnsupportedNodeExtension(),
       new ClearFormattingExtension(),
     ];
   };

package/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.spec.ts

@@ -0,0 +1,137 @@
+import { ExtensionTag, NodeExtensionSpec, ApplySchemaAttributes } from '@remirror/core';
+import { NodeName } from '../Extensions';
+import CollapseBox from '../../ui/CollapseBox/CollapseBox';
+import { UnsupportedNodeExtension } from './UnsupportedNodeExtension';
+import { renderWithEditor } from '../../../tests';
+
+describe('UnsupportedNodeExtension', () => {
+  it('should have the correct extension name', () => {
+    const extension = new UnsupportedNodeExtension();
+    expect(extension.name).toBe(NodeName.Unsupported);
+  });
+
+  it('should use the CollapseBox component as the ReactComponent', () => {
+    const extension = new UnsupportedNodeExtension();
+    expect(extension.ReactComponent).toBe(CollapseBox);
+  });
+
+  it('should create the correct tags', () => {
+    const extension = new UnsupportedNodeExtension();
+    expect(extension.createTags()).toEqual([ExtensionTag.InlineNode]);
+  });
+
+  it('should create the correct node spec', () => {
+    const extension = new UnsupportedNodeExtension();
+    const extra: ApplySchemaAttributes = {
+      defaults: () => ({}),
+      parse: () => ({}),
+      dom: () => ({}),
+    };
+
+    const override: NodeExtensionSpec = {
+      selectable: true,
+    };
+
+    const nodeSpec = extension.createNodeSpec(extra, override);
+
+    expect(nodeSpec.selectable).toBe(true);
+    expect(nodeSpec.draggable).toBe(true);
+    expect(nodeSpec.atom).toBe(true);
+    expect(nodeSpec.inline).toBe(true);
+    expect(nodeSpec.attrs).toEqual({ originalNode: {}, errorMessage: {} });
+    expect(nodeSpec.parseDOM).toEqual([
+      {
+        tag: '[data-unsupported-node]',
+        getAttrs: expect.any(Function),
+      },
+    ]);
+
+    expect(nodeSpec.toDOM).toEqual(expect.any(Function));
+  });
+
+  it('should generate the correct toDOM representation', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<div data-unsupported-node="{&quot;originalNode&quot;:{&quot;type&quot;:&quot;tag&quot;,&quot;tag&quot;:&quot;p&quot;,&quot;children&quot;:[{&quot;type&quot;:&quot;tag&quot;,&quot;tag&quot;:&quot;p&quot;,&quot;children&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot;some text before&quot;},{&quot;type&quot;:&quot;sup&quot;,&quot;children&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Hello&quot;}]},{&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot; and after&quot;},{&quot;type&quot;:&quot;tag&quot;,&quot;tag&quot;:&quot;strike&quot;,&quot;children&quot;:[{&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot;Some text.&quot;}]}]}]},&quot;errorMessage&quot;:&quot;Unsupported node type provided: sup&quot;}" />`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: {
+        nodeIndent: null,
+        nodeTextAlignment: null,
+        nodeLineHeight: null,
+        style: '',
+      },
+      content: [
+        {
+          type: 'unsupportedNode',
+          attrs: {
+            originalNode: {
+              type: 'tag',
+              tag: 'p',
+              children: [
+                {
+                  type: 'tag',
+                  tag: 'p',
+                  children: [
+                    {
+                      type: 'text',
+                      value: 'some text before',
+                    },
+                    {
+                      type: 'sup',
+                      children: [
+                        {
+                          type: 'text',
+                          value: 'Hello',
+                        },
+                      ],
+                    },
+                    {
+                      type: 'text',
+                      value: ' and after',
+                    },
+                    {
+                      type: 'tag',
+                      tag: 'strike',
+                      children: [
+                        {
+                          type: 'text',
+                          value: 'Some text.',
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+            errorMessage: 'Unsupported node type provided: sup',
+          },
+        },
+      ],
+    });
+  });
+
+  it('should omit extra attributes from node.attrs in toDOM representation', async () => {
+    const { getHtmlContent } = await renderWithEditor(null, {
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'unsupportedNode',
+            content: [
+              {
+                type: 'text',
+                text: 'This is some preformatted text',
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toBe(
+      '<span class="unsupported-node-node-view-wrapper" originalnode="null" errormessage="null" data-unsupported-node="{&quot;originalNode&quot;:null,&quot;errorMessage&quot;:null}" draggable="true"><div class="collapse-box" contenteditable="false"><button class="collapse-box__header" type="button"><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium collapse-box__icon--warning css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="MotionPhotosOffOutlinedIcon"><path d="M2.81 2.81 1.39 4.22l2.27 2.27C2.61 8.07 2 9.96 2 12c0 5.52 4.48 10 10 10 2.04 0 3.93-.61 5.51-1.66l2.27 2.27 1.41-1.42L2.81 2.81zM12 20c-4.41 0-8-3.59-8-8 0-1.48.41-2.86 1.12-4.06l10.93 10.94C14.86 19.59 13.48 20 12 20zm0-16c4.41 0 8 3.59 8 8 0 1.48-.41 2.86-1.12 4.05l1.45 1.45C21.39 15.93 22 14.04 22 12c0-5.52-4.48-10-10-10-2.04 0-3.93.61-5.51 1.66l1.45 1.45C9.14 4.41 10.52 4 12 4z"></path></svg><div class="collapse-box__label">This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.</div><svg class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root" focusable="false" aria-hidden="true" viewBox="0 0 24 24" data-testid="UnfoldLessOutlinedIcon"><path d="M7.41 18.59 8.83 20 12 16.83 15.17 20l1.41-1.41L12 14l-4.59 4.59zm9.18-13.18L15.17 4 12 7.17 8.83 4 7.41 5.41 12 10l4.59-4.59z"></path></svg></button><div class="collapse-box__content" hidden="" data-testid="content"><br>null</div></div></span>',
+    );
+  });
+});

package/src/Extensions/UnsuportedExtension/UnsupportedNodeExtension.tsx

@@ -0,0 +1,80 @@
+import {
+  ApplySchemaAttributes,
+  ExtensionTag,
+  NodeExtension,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  ProsemirrorNode,
+  extension,
+  isElementDomNode,
+  omitExtraAttributes,
+} from '@remirror/core';
+
+import { NodeName } from '../Extensions';
+import { ComponentType } from 'react';
+import { NodeViewComponentProps } from '@remirror/react';
+import CollapseBox from '../../ui/CollapseBox/CollapseBox';
+
+@extension({})
+export class UnsupportedNodeExtension extends NodeExtension {
+  get name() {
+    return NodeName.Unsupported as const;
+  }
+
+  ReactComponent: ComponentType<NodeViewComponentProps> = CollapseBox;
+
+  createTags() {
+    return [ExtensionTag.InlineNode];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    return {
+      selectable: false,
+      draggable: true,
+      atom: true,
+      inline: true,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        originalNode: {},
+        errorMessage: {},
+      },
+      parseDOM: [
+        {
+          tag: `[data-unsupported-node]`,
+          getAttrs: (node) => {
+            if (!isElementDomNode(node)) {
+              return false;
+            }
+            const unsupportedNodes = node.getAttribute('data-unsupported-node');
+
+            try {
+              const decodedNodes = JSON.parse(unsupportedNodes as string);
+
+              return {
+                ...extra.parse(node),
+                originalNode: decodedNodes?.originalNode,
+                errorMessage: decodedNodes?.errorMessage,
+              };
+            } catch (error) {
+              console.error('Failed to parse Remirror nodes from data-unsupported-node', error);
+              return false;
+            }
+          },
+        },
+      ],
+      toDOM: (node: ProsemirrorNode) => {
+        const { originalNode, errorMessage, ...rest } = omitExtraAttributes(node.attrs, extra);
+
+        const attrs = {
+          ...extra.dom(node),
+          ...rest,
+          originalNode,
+          errorMessage,
+          'data-unsupported-node': JSON.stringify({ originalNode, errorMessage }),
+        };
+        return ['div', attrs];
+      },
+    };
+  }
+}

package/src/index.scss

@@ -19,5 +19,6 @@
 @import './ui/ToolbarDropdown/toolbar-dropdown';
 @import './ui/ToolbarDropdownButton/toolbar-dropdown-button';
 @import './ui/Fields/Checkbox/checkbox';
+@import './ui/CollapseBox/collapseBox';
 
 @import './ui/Modal/modal';

package/src/ui/CollapseBox/CollapseBox.spec.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { NodeViewComponentProps } from '@remirror/react';
+import CollapseBox, { CollapseBoxProps } from './CollapseBox';
+
+jest.mock('@remirror/react');
+
+describe('CollapseBox', () => {
+  const createProps = (): CollapseBoxProps => ({
+    node: jest.fn() as unknown as NodeViewComponentProps['node'],
+  });
+
+  const props = createProps();
+
+  it('should display the label correctly', () => {
+    const label =
+      'This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.';
+    const { getByText } = render(<CollapseBox {...props} />);
+
+    expect(getByText(label)).toBeInTheDocument();
+  });
+
+  it('should display the warning icon correctly', () => {
+    const { getByTestId } = render(<CollapseBox {...props} />);
+
+    expect(getByTestId('MotionPhotosOffOutlinedIcon')).toBeInTheDocument();
+  });
+
+  it('should display the collapse icons correctly', () => {
+    const { getByTestId, getByRole } = render(<CollapseBox {...props} />);
+
+    expect(getByTestId('UnfoldLessOutlinedIcon')).toBeInTheDocument();
+
+    fireEvent.click(getByRole('button'));
+
+    expect(getByTestId('UnfoldMoreOutlinedIcon')).toBeInTheDocument();
+  });
+
+  it('should hide the content when isVisible is false', () => {
+    const { getByTestId, getByRole } = render(<CollapseBox {...props} />);
+
+    expect(getByTestId('content')).not.toBeVisible();
+
+    fireEvent.click(getByRole('button'));
+
+    expect(getByTestId('content')).toBeVisible();
+  });
+});

package/src/ui/CollapseBox/CollapseBox.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import { NodeViewComponentProps } from '@remirror/react';
+import MotionPhotosOffOutlinedIcon from '@mui/icons-material/MotionPhotosOffOutlined';
+import UnfoldLessOutlinedIcon from '@mui/icons-material/UnfoldLessOutlined';
+import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
+
+export interface CollapseBoxProps {
+  node: NodeViewComponentProps['node'];
+}
+
+const CollapseBox: React.FC<CollapseBoxProps> = ({ node }) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const label =
+    'This section cannot be displayed here due to unsupported HTML elements. The front-end view of your page won’t be affected.';
+
+  const errorMessage = node?.attrs?.errorMessage;
+  const errorNode = JSON.stringify(node?.attrs?.originalNode, null, 3);
+
+  return (
+    <div className="collapse-box" suppressContentEditableWarning={true} contentEditable={false}>
+      <button className="collapse-box__header" onClick={() => setIsVisible(!isVisible)} type={'button'}>
+        <MotionPhotosOffOutlinedIcon className="collapse-box__icon--warning" />
+        <div className="collapse-box__label">{label}</div>
+        {isVisible ? <UnfoldLessOutlinedIcon /> : <UnfoldMoreOutlinedIcon />}
+      </button>
+      <div className="collapse-box__content" hidden={isVisible} data-testid="content">
+        {errorMessage}
+        <br />
+        {errorNode}
+      </div>
+    </div>
+  );
+};
+
+export default CollapseBox;

package/src/ui/CollapseBox/_collapseBox.scss

@@ -0,0 +1,23 @@
+.collapse-box {
+  @apply text-gray-800 p-2 bg-gray-100 rounded-lg;
+
+  &__header {
+    @apply flex items-center w-full;
+  }
+
+  &__label {
+    @apply ml-2 mr-auto;
+  }
+
+  &__icon {
+    @apply text-gray-600;
+
+    &--warning {
+      @apply text-red-300;
+    }
+  }
+
+  &__content {
+    @apply bg-white mt-2 p-2 rounded-lg;
+  }
+}

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

@@ -141,6 +141,11 @@ const transformNode = (node: ProsemirrorNode): FormattedNode => {
     }
   });
 
+  if (node.type.name === NodeName.Unsupported) {
+    const unsupportedNode = node.attrs?.originalNode;
+    return { ...unsupportedNode };
+  }
+
   return transformedNode;
 };
 

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

@@ -142,7 +142,32 @@ describe('squizNodeToRemirrorNode', () => {
           tag: 'video',
         },
       ],
-      'Unsupported node type provided: tag (tag: video)',
+      {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'unsupportedNode',
+                attrs: {
+                  originalNode: {
+                    children: [
+                      {
+                        type: 'text',
+                        value: 'Should throw an error.',
+                      },
+                    ],
+                    type: 'tag',
+                    tag: 'video',
+                  },
+                  errorMessage: 'Unsupported node type provided: tag (tag: video)',
+                },
+              },
+            ],
+          },
+        ],
+      },
     ],
     [
       'Unsupported node type',
@@ -157,10 +182,35 @@ describe('squizNodeToRemirrorNode', () => {
           type: 'unsupported-type',
         },
       ],
-      'Unsupported node type provided: unsupported-type',
+      {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'unsupportedNode',
+                attrs: {
+                  originalNode: {
+                    children: [
+                      {
+                        type: 'text',
+                        value: 'Should throw an error.',
+                      },
+                    ],
+                    type: 'unsupported-type',
+                  },
+                  errorMessage: 'Unsupported node type provided: unsupported-type',
+                },
+              },
+            ],
+          },
+        ],
+      },
     ],
-  ])('should throw an error for non supported node types', (description: string, node: any, expectedError: string) => {
-    expect(() => squizNodeToRemirrorNode(node)).toThrow(expectedError);
+  ])('should throw an error for non supported node types', (description: string, node: any, expected: any) => {
+    const result = squizNodeToRemirrorNode(node);
+    expect(result).toEqual(expected);
   });
 
   it('should handle pre formatted text', () => {

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

@@ -104,10 +104,16 @@ const getNodeMarks = (node: FormattedNodes): ObjectMark[] => {
   }
 
   // Handle font formatting
-  if ('font' in node) {
-    node.font?.bold && marks.push({ type: 'bold' });
-    node.font?.italics && marks.push({ type: 'italic' });
-    node.font?.underline && marks.push({ type: 'underline' });
+  if ('font' in node && node.font !== undefined) {
+    for (const [type, enabled] of Object.entries(node.font)) {
+      if (enabled) {
+        if (type === 'bold' || type === 'italics' || type === 'underline') {
+          marks.push({ type: type === 'italics' ? 'italic' : type });
+        } else {
+          throw new Error(`Unsupported mark provided: ${type}`);
+        }
+      }
+    }
   }
 
   return marks;
@@ -154,7 +160,23 @@ export const squizNodeToRemirrorNode = (nodes: FormattedText): RemirrorJSON => {
   let children: RemirrorJSON[] = [];
 
   nodes.forEach((node) => {
-    children.push(...formatNode(node));
+    try {
+      children.push(...formatNode(node));
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      children.push({
+        type: 'paragraph',
+        content: [
+          {
+            type: NodeName.Unsupported,
+            attrs: {
+              originalNode: node,
+              errorMessage,
+            },
+          },
+        ],
+      });
+    }
   });
 
   if (children.find((child) => child.type === 'text')) {

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', 'codeBlock', 'image']);
+    expect(otherNodeNames).toEqual(['assetImage', 'doc', 'text', 'codeBlock', 'image', 'unsupportedNode']);
   });
 });