@squiz/formatted-text-editor 1.70.0 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # Change Log
 
+## 2.0.0
+
+### Major Changes
+
+- f7279c6: Migration to resource-browser 2.x.x and use of plugin model. Alterations to data fetching for url resolution for FTE due to changes in RB2.
+
+  Breaking change: change to resource-browser 2.x.x requires a different context wrapper to version 1.x.x which the component editing ui and the formatted text editor relies upon to render the resource picker when selecting a resource; making the internal update to RB2 incompatible with 1.x.x usages of these packages.
+
+  This change was made to expand the support the resource browser had for data sources other than Matrix.
+
+  Consumers need to update usages of ResourceBrowserContext.provider with ResourceBrowserContextProvider and provide plugins e.g. @squiz/matrix-resource-browser-plugin or @squiz/dam-resource-browser-plugin to the context interface. Consumers also need to provide a new url fetcher to the FTE EditorContext.Provider `resolveNodeToUrl` to resolve MatrixAsset nodes to a url form; previously this relied upon exposed parts of the ResourceBrowser which are no longer exposed outside the RB itself.
+
+## 1.71.0
+
+### Minor Changes
+
+- 882fb82: Added table transormation support between Squiz & Remirror models (allowing saving of tables)
+
 ## 1.70.0
 
 ### Minor Changes

package/demo/App.tsx

@@ -76,7 +76,13 @@ function App() {
           <Editor
             editable={editable}
             border={border}
-            content={`<p>Hello <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.<img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/></p>`}
+            content={`
+              <p>Hello
+              <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.
+              <img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/>
+              <img data-matrix-asset-id="1" data-matrix-identifier="matrixIdentifier" data-matrix-domain="https://matrix-domain.squiz.net">
+              </p>
+            `}
             onChange={handleEditorChange}
             enableTableTool={enableTableTool}
           >

package/demo/AppContext.tsx

@@ -1,29 +1,48 @@
 import React, { PropsWithChildren } from 'react';
-import { ResourceBrowserContext, Source, Resource, ResourceReference } from '@squiz/resource-browser';
+import { ResourceBrowserSource, ResourceBrowserContextProvider } from '@squiz/resource-browser';
+import MatrixResourceBrowserPlugin, {
+  Source,
+  Resource,
+  ResourceReference,
+} from '@squiz/matrix-resource-browser-plugin';
 import { EditorContext } from '../src';
 import resources from './resources.json';
 import sources from './sources.json';
+import { ResolveNodeType } from '../src/types';
 
 export type AppContextProps = PropsWithChildren;
-
 export const AppContext = ({ children }: AppContextProps) => (
-  <ResourceBrowserContext.Provider
+  <ResourceBrowserContextProvider
     value={{
-      onRequestSources: (): Promise<Source> => Promise.resolve(sources),
-      onRequestChildren: (source: Source, resource: Resource | null): Promise<Resource[]> =>
-        Promise.resolve(resource._children || resources),
-      onRequestResource: (reference: ResourceReference): Promise<Resource | null> => {
-        const flattenResources = (resources: unknown[]) => {
-          return [
-            ...resources,
-            ...resources.flatMap((resource) => ('_children' in resource ? flattenResources(resource._children) : [])),
-          ];
-        };
+      onRequestSources: (): Promise<ResourceBrowserSource[]> =>
+        Promise.resolve([
+          {
+            name: 'Matrix',
+            id: 'matrixIdentifier',
+            type: 'matrix',
+          },
+        ]),
+      plugins: [
+        MatrixResourceBrowserPlugin({
+          onRequestSources: (): Promise<Source> => Promise.resolve(sources),
+          onRequestChildren: (source: Source, resource: Resource | null): Promise<Resource[]> =>
+            Promise.resolve(resource._children || resources),
+          onRequestResource: (reference: ResourceReference): Promise<Resource | null> => {
+            const flattenResources = (resources: unknown[]) => {
+              return [
+                ...resources,
+                ...resources.flatMap((resource) =>
+                  '_children' in resource ? flattenResources(resource._children) : [],
+                ),
+              ];
+            };
 
-        return Promise.resolve(
-          flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
-        );
-      },
+            return Promise.resolve(
+              flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
+            );
+          },
+        }),
+      ],
     }}
   >
     <EditorContext.Provider
@@ -31,9 +50,21 @@ export const AppContext = ({ children }: AppContextProps) => (
         matrix: {
           matrixDomain: 'https://matrix-domain.squiz.net',
         },
+        resolveNodeToUrl: (node: ResolveNodeType): Promise<string> => {
+          const nodeResource = node.matrixAssetId;
+          const flattenResources = (resources: unknown[]) => {
+            return [
+              ...resources,
+              ...resources.flatMap((resource) => ('_children' in resource ? flattenResources(resource._children) : [])),
+            ];
+          };
+
+          const resource = flattenResources(resources).find((resource) => resource.id === nodeResource);
+          return Promise.resolve(resource.url || '');
+        },
       }}
     >
       {children}
     </EditorContext.Provider>
-  </ResourceBrowserContext.Provider>
+  </ResourceBrowserContextProvider>
 );

package/demo/resources.json

@@ -9,6 +9,10 @@
       "code": "live",
       "name": "Live"
     },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
     "name": "Example image one",
     "childCount": 0,
     "url": "https://picsum.photos/200/300"
@@ -23,6 +27,10 @@
       "code": "live",
       "name": "Live"
     },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
     "name": "Example image two",
     "childCount": 0,
     "url": "https://picsum.photos/200/300"
@@ -37,6 +45,10 @@
       "code": "live",
       "name": "Live"
     },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
     "name": "Example page",
     "childCount": 0,
     "url": "https://picsum.photos/200/300"
@@ -51,6 +63,10 @@
       "code": "live",
       "name": "Live"
     },
+    "source": {
+      "id": "1",
+      "type": "matrix"
+    },
     "name": "Example folder",
     "childCount": 10,
     "url": "",
@@ -65,6 +81,10 @@
           "code": "live",
           "name": "Live"
         },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
         "name": "Example image one #2",
         "childCount": 0,
         "url": "https://picsum.photos/200/300"
@@ -79,6 +99,10 @@
           "code": "live",
           "name": "Live"
         },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
         "name": "Example image two #2",
         "childCount": 0,
         "url": "https://picsum.photos/200/300"
@@ -93,6 +117,10 @@
           "code": "live",
           "name": "Live"
         },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
         "name": "Example page #2",
         "childCount": 0,
         "url": "https://picsum.photos/200/300"
@@ -107,6 +135,10 @@
           "code": "live",
           "name": "Live"
         },
+        "source": {
+          "id": "1",
+          "type": "matrix"
+        },
         "name": "Example folder #2",
         "childCount": 10,
         "url": "",
@@ -121,6 +153,10 @@
               "code": "live",
               "name": "Live"
             },
+            "source": {
+              "id": "1",
+              "type": "matrix"
+            },
             "name": "Example image one #3",
             "childCount": 0,
             "url": "https://picsum.photos/200/300"
@@ -135,6 +171,10 @@
               "code": "live",
               "name": "Live"
             },
+            "source": {
+              "id": "1",
+              "type": "matrix"
+            },
             "name": "Example image two #3",
             "childCount": 0,
             "url": "https://picsum.photos/200/300"
@@ -149,6 +189,10 @@
               "code": "live",
               "name": "Live"
             },
+            "source": {
+              "id": "1",
+              "type": "matrix"
+            },
             "name": "Example page #3",
             "childCount": 0,
             "url": "https://picsum.photos/200/300"

package/demo/sources.json

@@ -16,6 +16,10 @@
         "status": {
           "code": "live",
           "name": "Live"
+        },
+        "source": {
+          "id": "1",
+          "type": "matrix"
         }
       }
     ]

package/lib/Editor/Editor.js

@@ -33,7 +33,6 @@ const EditorToolbar_1 = require("../EditorToolbar");
 const EditorContext_1 = require("./EditorContext");
 const Extensions_1 = require("../Extensions/Extensions");
 const useFocus_1 = __importDefault(require("../hooks/useFocus"));
-const resource_browser_1 = require("@squiz/resource-browser");
 const extension_react_tables_1 = require("@remirror/extension-react-tables");
 const WrappedEditor = () => {
     const preventImagePaste = (0, react_1.useCallback)((event) => {
@@ -53,7 +52,7 @@ const WrappedEditor = () => {
 };
 const Editor = ({ content, className, border = true, editable = true, onChange, children, isFocused, attributes, enableTableTool = false, }) => {
     const { manager, state, setState } = (0, react_2.useRemirror)({
-        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext), (0, react_1.useContext)(resource_browser_1.ResourceBrowserContext)),
+        extensions: (0, Extensions_1.createExtensions)((0, react_1.useContext)(EditorContext_1.EditorContext)),
         content,
         selection: 'start',
         stringHandler: 'html',
@@ -68,9 +67,15 @@ const Editor = ({ content, className, border = true, editable = true, onChange,
         if (isFocused) {
             manager.view.dom.focus();
         }
+        // TODO: May want to come back to this and see if there's a better solution
+        // We have to add a type button attribute to the delete buttons so they don't cause a submit by accident.
+        const tableDeleteButtons = document.querySelectorAll('.remirror-table-delete-inner-button');
+        tableDeleteButtons.forEach((button) => {
+            button.setAttribute('type', 'button');
+        });
     }, []);
     return (react_1.default.createElement("div", { ref: wrapperRef, onBlur: handleBlur, onFocusCapture: handleFocus, className: (0, clsx_1.default)('squiz-fte-scope', 'squiz-fte-scope__editor', !editable && 'squiz-fte-scope__editor--is-disabled', border && 'squiz-fte-scope__editor--bordered', className) },
-        react_1.default.createElement(react_2.Remirror, { manager: manager, state: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor", attributes: attributes },
+        react_1.default.createElement(react_2.Remirror, { manager: manager, initialContent: state, editable: editable, onChange: handleChange, placeholder: "Write something", label: "Text editor", attributes: attributes },
             editable && react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isVisible, enableTableTool: enableTableTool }),
             children && react_1.default.createElement("div", { className: "squiz-fte-scope__editor__children" }, children),
             react_1.default.createElement(WrappedEditor, null),

package/lib/Editor/EditorContext.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import { ResolveNodeToUrl } from '../types';
 export type EditorContextOptions = {
     matrix: {
         matrixDomain: string;
     };
+    resolveNodeToUrl: ResolveNodeToUrl;
 };
 export declare const defaultEditorContext: EditorContextOptions;
 export declare const EditorContext: React.Context<EditorContextOptions>;

package/lib/Editor/EditorContext.js

@@ -9,5 +9,8 @@ exports.defaultEditorContext = {
     matrix: {
         matrixDomain: '',
     },
+    resolveNodeToUrl: () => {
+        throw new Error('resolveNodeToUrl has not been configured.');
+    },
 };
 exports.EditorContext = react_1.default.createContext(exports.defaultEditorContext);

package/lib/Extensions/Extensions.d.ts

@@ -1,11 +1,12 @@
 import { Extension } from '@remirror/core';
 import { EditorContextOptions } from '../Editor/EditorContext';
-import { ResourceBrowserContextProps } from '@squiz/resource-browser';
 export declare enum NodeName {
     Image = "image",
     CodeBlock = "codeBlock",
     AssetImage = "assetImage",
     Text = "text",
+    TableControllerCell = "tableControllerCell",
+    tableCell = "tableCell",
     hardBreak = "hardBreak",
     Unsupported = "unsupportedNode"
 }
@@ -13,4 +14,4 @@ export declare enum MarkName {
     Link = "link",
     AssetLink = "assetLink"
 }
-export declare const createExtensions: (context: EditorContextOptions, browserContext: ResourceBrowserContextProps) => () => Extension[];
+export declare const createExtensions: (context: EditorContextOptions) => () => Extension[];

package/lib/Extensions/Extensions.js

@@ -20,6 +20,8 @@ var NodeName;
     NodeName["CodeBlock"] = "codeBlock";
     NodeName["AssetImage"] = "assetImage";
     NodeName["Text"] = "text";
+    NodeName["TableControllerCell"] = "tableControllerCell";
+    NodeName["tableCell"] = "tableCell";
     NodeName["hardBreak"] = "hardBreak";
     NodeName["Unsupported"] = "unsupportedNode";
 })(NodeName = exports.NodeName || (exports.NodeName = {}));
@@ -28,7 +30,7 @@ var MarkName;
     MarkName["Link"] = "link";
     MarkName["AssetLink"] = "assetLink";
 })(MarkName = exports.MarkName || (exports.MarkName = {}));
-const createExtensions = (context, browserContext) => {
+const createExtensions = (context) => {
     return () => {
         return [
             new CommandsExtension_1.CommandsExtension(),
@@ -60,7 +62,7 @@ const createExtensions = (context, browserContext) => {
             new extensions_1.HorizontalRuleExtension(),
             new extensions_1.PlaceholderExtension(),
             new FetchUrlExtension_1.FetchUrlExtension({
-                fetchUrl: browserContext.onRequestResource,
+                fetchUrl: context.resolveNodeToUrl,
             }),
             new extensions_1.TextExtension(),
             new extension_react_tables_1.TableExtension(),

package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.d.ts

@@ -1,10 +1,8 @@
 import { PlainExtension } from '@remirror/core';
 import { Dispose, EditorView } from '@remirror/core-types';
+import { ResolveNodeToUrl } from '../../types';
 export type FetchUrlOptions = {
-    fetchUrl?: (params: {
-        resource: string;
-        source: string;
-    }) => Promise<any>;
+    fetchUrl?: ResolveNodeToUrl;
 };
 export declare class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
     get name(): string;

package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.js

@@ -20,14 +20,14 @@ let FetchUrlExtension = class FetchUrlExtension extends core_1.PlainExtension {
         const promises = [];
         state.doc.descendants((node, pos) => {
             if (node.type.name === Extensions_1.NodeName.AssetImage && node.attrs.src === '') {
-                promises.push(this.fetchAndReplace(node.attrs.matrixAssetId, node.attrs.matrixIdentifier, (url) => {
+                promises.push(this.fetchAndReplace(node.attrs, (url) => {
                     const newNode = state.schema.nodes[Extensions_1.NodeName.AssetImage].create({ ...node.attrs, src: url });
                     tr.replaceWith(pos, pos + node.nodeSize, newNode);
                 }));
             }
             const assetLinkMark = this.findAssetLinkMark(node.marks);
             if (node.type.name === 'text' && assetLinkMark) {
-                promises.push(this.fetchAndReplace(assetLinkMark.attrs.matrixAssetId, assetLinkMark.attrs.matrixIdentifier, (url) => {
+                promises.push(this.fetchAndReplace(assetLinkMark.attrs, (url) => {
                     const updatedMark = assetLinkMark.type.create({ ...assetLinkMark.attrs, href: url });
                     tr.addMark(pos, pos + node.nodeSize, updatedMark);
                 }));
@@ -42,11 +42,11 @@ let FetchUrlExtension = class FetchUrlExtension extends core_1.PlainExtension {
     findAssetLinkMark(marks) {
         return marks.find((mark) => mark.type.name === Extensions_1.MarkName.AssetLink && mark.attrs.href === '');
     }
-    fetchAndReplace(resource, source, onFetched) {
+    fetchAndReplace(nodeAttrs, onFetched) {
         return this.options
-            .fetchUrl({ resource, source })
-            .then((asset) => {
-            onFetched(asset.url);
+            .fetchUrl(nodeAttrs)
+            .then((url) => {
+            onFetched(url);
         })
             .catch((error) => {
             console.error('Error fetching URL:', error);
@@ -56,7 +56,7 @@ let FetchUrlExtension = class FetchUrlExtension extends core_1.PlainExtension {
 FetchUrlExtension = __decorate([
     (0, core_1.extension)({
         defaultOptions: {
-            fetchUrl: () => Promise.resolve(),
+            fetchUrl: () => Promise.resolve(''),
         },
     })
 ], FetchUrlExtension);

package/lib/index.d.ts

@@ -3,4 +3,6 @@ import { EditorContext } from './Editor/EditorContext';
 import { remirrorNodeToSquizNode } from './utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode';
 import { squizNodeToRemirrorNode } from './utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode';
 import { htmlToSquizNode } from './utils/converters/htmlToSquizNode/htmlToSquizNode';
+import { ResolveNodeType, ResolveNodeToUrl } from './types';
 export { Editor, EditorContext, remirrorNodeToSquizNode, squizNodeToRemirrorNode, htmlToSquizNode };
+export type { ResolveNodeType, ResolveNodeToUrl };

package/lib/types.d.ts

@@ -1,3 +1,7 @@
 export type DeepPartial<T> = {
     [P in keyof T]?: T[P] extends Array<infer U> ? Array<DeepPartial<U>> : T[P] extends ReadonlyArray<infer U> ? ReadonlyArray<DeepPartial<U>> : DeepPartial<T[P]>;
 };
+export type ResolveNodeType = {
+    [attr: string]: any;
+};
+export type ResolveNodeToUrl = (node: ResolveNodeType) => Promise<string>;

package/lib/ui/Fields/MatrixAsset/MatrixAsset.js

@@ -9,19 +9,19 @@ const resource_browser_1 = require("@squiz/resource-browser");
 const InputContainer_1 = require("../InputContainer/InputContainer");
 const MatrixAsset = ({ modalTitle, allowedTypes, value, onChange, ...props }) => {
     return (react_1.default.createElement(InputContainer_1.InputContainer, { ...props },
-        react_1.default.createElement(resource_browser_1.ResourceBrowserInput, { modalTitle: modalTitle, allowedTypes: allowedTypes, value: value && value.matrixIdentifier && value.matrixAssetId
+        react_1.default.createElement(resource_browser_1.ResourceBrowser, { modalTitle: modalTitle, allowedTypes: allowedTypes, value: value && value.matrixIdentifier && value.matrixAssetId
                 ? {
-                    source: value.matrixIdentifier,
-                    resource: value.matrixAssetId,
+                    sourceId: value.matrixIdentifier,
+                    resourceId: value.matrixAssetId,
                 }
-                : null, onChange: (reference) => {
+                : null, onChange: (resource) => {
                 onChange({
                     target: {
                         value: {
                             ...value,
-                            matrixIdentifier: reference?.source?.id,
-                            matrixAssetId: reference?.resource?.id,
-                            url: reference?.resource?.url,
+                            matrixIdentifier: resource?.source?.id,
+                            matrixAssetId: resource?.id,
+                            url: resource?.url,
                         },
                     },
                 });

package/lib/utils/converters/htmlToSquizNode/htmlToSquizNode.js

@@ -10,15 +10,8 @@ const htmlToSquizNode = ({ content }) => {
         matrix: {
             matrixDomain: 'unsupported',
         },
-    }, {
-        onRequestResource: () => {
-            throw new Error('Resolving Matrix assets is not supported.');
-        },
-        onRequestSources: () => {
-            throw new Error('Resolving Matrix assets is not supported.');
-        },
-        onRequestChildren: () => {
-            throw new Error('Resolving Matrix assets is not supported.');
+        resolveNodeToUrl: () => {
+            throw new Error('Resolving Url is not supported.');
         },
     });
     const manager = core_1.RemirrorManager.create(extensions);

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

@@ -55,7 +55,7 @@ const resolveFontOptions = (node) => {
     });
     return fontOptions;
 };
-const transformAttributes = (attributes) => {
+const transformAttributes = (attributes, nodeType) => {
     const transformed = {};
     Object.keys(attributes).forEach((key) => {
         // Component service requires attributes to be a string, cast as needed.
@@ -63,6 +63,17 @@ const transformAttributes = (attributes) => {
             transformed[key] = String(attributes[key]);
         }
     });
+    // We assign an attribute here for table controller cells as we need to differentiate
+    // between them and regular table headers (th)
+    if (nodeType === Extensions_1.NodeName.TableControllerCell) {
+        transformed[nodeType] = 'true';
+    }
+    // Another check here for more specific attributes for tables (column widths)
+    if (nodeType === Extensions_1.NodeName.TableControllerCell || nodeType === Extensions_1.NodeName.tableCell) {
+        if (Array.isArray(attributes.colwidth) && attributes.colwidth[0]) {
+            transformed.colwidth = String(attributes.colwidth[0]);
+        }
+    }
     return transformed;
 };
 const transformFragment = (fragment) => {
@@ -75,9 +86,13 @@ const transformFragment = (fragment) => {
 const transformNode = (node) => {
     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 attributes;
+    if (node.type.name === Extensions_1.NodeName.Image ||
+        node.type.name === Extensions_1.NodeName.CodeBlock ||
+        node.type.name === Extensions_1.NodeName.TableControllerCell ||
+        node.type.name === Extensions_1.NodeName.tableCell) {
+        attributes = transformAttributes(node.attrs, node.type.name);
+    }
     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

@@ -23,6 +23,10 @@ const getNodeType = (node) => {
         li: 'listItem',
         ul: 'bulletList',
         hr: 'horizontalRule',
+        table: 'table',
+        tr: 'tableRow',
+        th: 'tableHeaderCell',
+        td: 'tableCell',
         a: Extensions_1.NodeName.Text,
         em: Extensions_1.NodeName.Text,
         span: Extensions_1.NodeName.Text,
@@ -34,6 +38,12 @@ const getNodeType = (node) => {
         return typeMap[node.type];
     }
     if (node.type === 'tag' && tagMap[node.tag]) {
+        // This is a specific check case for tables as there are some <th> tags which need to be returned
+        // as table controller cells.
+        if (node.attributes?.tableControllerCell) {
+            return 'tableControllerCell';
+        }
+        // Return regular tag for everything else
         return tagMap[node.tag];
     }
     // Unsupported node type
@@ -42,6 +52,19 @@ const getNodeType = (node) => {
         : `Unsupported node type provided: ${node.type}`);
 };
 const getNodeAttributes = (node) => {
+    if (node.type === 'tag' && node.tag === 'table') {
+        return {
+            isControllersInjected: true,
+        };
+    }
+    if (node.type === 'tag' && (node.tag === 'th' || node.tag === 'td')) {
+        return {
+            colspan: parseInt(node.attributes?.colspan ?? '1'),
+            rowspan: parseInt(node.attributes?.rowspan ?? '1'),
+            colwidth: node.attributes?.colwidth ? [parseInt(node.attributes.colwidth)] : null,
+            background: null,
+        };
+    }
     if (node.type === 'tag' && node.tag === 'img') {
         return {
             alt: node.attributes?.alt,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.70.0",
+  "version": "2.0.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -21,15 +21,16 @@
   },
   "dependencies": {
     "@headlessui/react": "1.7.11",
-    "@mui/icons-material": "5.11.16",
+    "@mui/icons-material": "5.15.18",
     "@remirror/extension-react-tables": "^2.2.19",
-    "@remirror/react": "2.0.25",
+    "@remirror/react": "2.0.35",
     "@squiz/dx-json-schema-lib": "^1.65.1",
-    "@squiz/resource-browser": "^1.66.3",
-    "clsx": "1.2.1",
-    "react-hook-form": "7.43.2",
+    "@squiz/matrix-resource-browser-plugin": "^2.0.0",
+    "@squiz/resource-browser": "^2.0.0",
+    "clsx": "2.1.1",
+    "react-hook-form": "7.51.4",
     "react-image-size": "2.0.0",
-    "remirror": "2.0.26"
+    "remirror": "2.0.39"
   },
   "devDependencies": {
     "@testing-library/cypress": "9.0.0",
@@ -48,18 +49,18 @@
     "eslint-plugin-react": "7.32.2",
     "jest": "29.4.1",
     "jest-environment-jsdom": "29.4.1",
-    "jest-remirror": "2.1.3",
+    "jest-remirror": "2.1.5",
     "postcss": "8.4.31",
     "postcss-nested": "6.0.0",
     "postcss-prefix-selector": "1.16.0",
     "react": "18.2.0",
     "react-diff-viewer-continued": "3.2.6",
     "react-dom": "18.2.0",
-    "rimraf": "4.1.2",
+    "rimraf": "5.0.7",
     "tailwindcss": "3.2.6",
     "ts-jest": "29.0.5",
     "typescript": "4.9.3",
-    "vite": "^4.5.0"
+    "vite": "^4.5.3"
   },
   "peerDependencies": {
     "@types/react": "^16.14.0 || ^17 || ^18",