@squiz/formatted-text-editor 1.69.0 → 1.71.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 1.71.0
+
+### Minor Changes
+
+- 882fb82: Added table transormation support between Squiz & Remirror models (allowing saving of tables)
+
+## 1.70.0
+
+### Minor Changes
+
+- 0513957: `enableTableTool` prop added to the Editor to control the display of the table insertion tool until we are ready to release it
+
 ## 1.69.0
 
 ### Minor Changes

package/demo/App.tsx

@@ -22,6 +22,7 @@ function App() {
   const [reconvertedDoc, setReconvertedDoc] = useState('');
   const [error, setError] = useState<unknown>(null);
   const [editable, setEditable] = useState(true);
+  const [enableTableTool, setEnableTableTool] = useState(true);
   const [border, setBorder] = useState(true);
 
   const handleEditorChange: RemirrorEventListener<Extension> = (parameter) => {
@@ -45,8 +46,12 @@ function App() {
         <div className="form-group">
           <label htmlFor="editable">Editable</label>&nbsp;
           <input id="editable" type="checkbox" onChange={() => setEditable(!editable)} checked={editable} />
+        </div>
+        <div className="form-group">
           <label htmlFor="border">Border</label>&nbsp;
           <input id="border" type="checkbox" onChange={() => setBorder(!border)} checked={border} />
+        </div>
+        <div className="form-group">
           <label htmlFor="showChildren">Show children</label>&nbsp;
           <input
             id="showChildren"
@@ -55,6 +60,15 @@ function App() {
             checked={showChildren}
           />
         </div>
+        <div className="form-group">
+          <label htmlFor="tableTool">Enable table tool</label>&nbsp;
+          <input
+            id="tableTool"
+            type="checkbox"
+            onChange={() => setEnableTableTool(!enableTableTool)}
+            checked={enableTableTool}
+          />
+        </div>
       </div>
       <h1>Editor</h1>
       <div className="page-section">
@@ -64,6 +78,7 @@ function App() {
             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>`}
             onChange={handleEditorChange}
+            enableTableTool={enableTableTool}
           >
             {showChildren && <ComponentHandlers />}
           </Editor>

package/lib/Editor/Editor.d.ts

@@ -10,6 +10,7 @@ type EditorProps = {
     isFocused?: boolean;
     label?: string;
     attributes?: Record<string, string>;
+    enableTableTool?: boolean;
 };
-declare const Editor: ({ content, className, border, editable, onChange, children, isFocused, attributes, }: EditorProps) => React.JSX.Element;
+declare const Editor: ({ content, className, border, editable, onChange, children, isFocused, attributes, enableTableTool, }: EditorProps) => React.JSX.Element;
 export default Editor;

package/lib/Editor/Editor.js

@@ -34,6 +34,7 @@ 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) => {
         const { clipboardData } = event;
@@ -50,7 +51,7 @@ const WrappedEditor = () => {
     (0, react_2.useEditorEvent)('paste', preventImagePaste);
     return react_1.default.createElement(react_2.EditorComponent, null);
 };
-const Editor = ({ content, className, border = true, editable = true, onChange, children, isFocused, attributes, }) => {
+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)),
         content,
@@ -67,12 +68,19 @@ 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 },
-            editable && react_1.default.createElement(EditorToolbar_1.Toolbar, { isVisible: isVisible }),
+        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),
+            enableTableTool && react_1.default.createElement(extension_react_tables_1.TableComponents, { enableTableCellMenu: false }),
             editable && isVisible && react_1.default.createElement(EditorToolbar_1.FloatingToolbar, null))));
 };
 exports.default = Editor;

package/lib/EditorToolbar/Toolbar.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 type ToolbarProps = {
     isVisible: boolean;
+    enableTableTool: boolean;
 };
-export declare const Toolbar: ({ isVisible }: ToolbarProps) => React.JSX.Element;
+export declare const Toolbar: ({ isVisible, enableTableTool }: ToolbarProps) => React.JSX.Element;
 export {};

package/lib/EditorToolbar/Toolbar.js

@@ -20,8 +20,9 @@ const RemoveLinkButton_1 = __importDefault(require("./Tools/Link/RemoveLinkButto
 const ClearFormattingButton_1 = __importDefault(require("./Tools/ClearFormatting/ClearFormattingButton"));
 const ListButtons_1 = __importDefault(require("./Tools/Lists/ListButtons"));
 const HorizontalLineButton_1 = __importDefault(require("./Tools/HorizontalLine/HorizontalLineButton"));
+const TableButton_1 = __importDefault(require("./Tools/Table/TableButton"));
 const hooks_1 = require("../hooks");
-const Toolbar = ({ isVisible }) => {
+const Toolbar = ({ isVisible, enableTableTool }) => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
     return (react_1.default.createElement(react_components_1.Toolbar, { className: (0, clsx_1.default)('editor-toolbar header-toolbar', isVisible && 'show-toolbar'), role: "toolbar", tabIndex: 0 },
         react_1.default.createElement("div", { className: "editor-toolbar__tools" },
@@ -40,6 +41,7 @@ const Toolbar = ({ isVisible }) => {
                 react_1.default.createElement(LinkButton_1.default, null),
                 react_1.default.createElement(RemoveLinkButton_1.default, null))),
             extensionNames.image && react_1.default.createElement(ImageButton_1.default, null),
-            extensionNames.clearFormatting && react_1.default.createElement(ClearFormattingButton_1.default, null))));
+            extensionNames.clearFormatting && react_1.default.createElement(ClearFormattingButton_1.default, null),
+            enableTableTool && extensionNames.table && react_1.default.createElement(TableButton_1.default, null))));
 };
 exports.Toolbar = Toolbar;

package/lib/EditorToolbar/Tools/Table/TableButton.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const TableButton: () => React.JSX.Element;
+export default TableButton;

package/lib/EditorToolbar/Tools/Table/TableButton.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 react_components_1 = require("@remirror/react-components");
+const Button_1 = __importDefault(require("../../../ui/Button/Button"));
+const TableViewRounded_1 = __importDefault(require("@mui/icons-material/TableViewRounded"));
+const TableButton = () => {
+    const { createTable } = (0, react_2.useCommands)();
+    const active = (0, react_2.useActive)();
+    const enabled = createTable.enabled();
+    const handleSelect = () => {
+        createTable({ rowsCount: 4, columnsCount: 3, withHeaderRow: false });
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.table(), icon: react_1.default.createElement(TableViewRounded_1.default, null), label: "Insert table" }),
+        react_1.default.createElement(react_components_1.VerticalDivider, null)));
+};
+exports.default = TableButton;

package/lib/Extensions/Extensions.d.ts

@@ -6,6 +6,8 @@ export declare enum NodeName {
     CodeBlock = "codeBlock",
     AssetImage = "assetImage",
     Text = "text",
+    TableControllerCell = "tableControllerCell",
+    tableCell = "tableCell",
     hardBreak = "hardBreak",
     Unsupported = "unsupportedNode"
 }

package/lib/Extensions/Extensions.js

@@ -12,12 +12,16 @@ const CodeBlockExtension_1 = require("./CodeBlockExtension/CodeBlockExtension");
 const ClearFormattingExtension_1 = require("./ClearFormattingExtension/ClearFormattingExtension");
 const UnsupportedNodeExtension_1 = require("./UnsuportedExtension/UnsupportedNodeExtension");
 const FetchUrlExtension_1 = require("./FetchUrlExtension/FetchUrlExtension");
+const extension_react_tables_1 = require("@remirror/extension-react-tables");
+const extension_react_component_1 = require("@remirror/extension-react-component");
 var NodeName;
 (function (NodeName) {
     NodeName["Image"] = "image";
     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 = {}));
@@ -61,6 +65,8 @@ const createExtensions = (context, browserContext) => {
                 fetchUrl: browserContext.onRequestResource,
             }),
             new extensions_1.TextExtension(),
+            new extension_react_tables_1.TableExtension(),
+            new extension_react_component_1.ReactComponentExtension(),
         ];
     };
 };

package/lib/index.css

@@ -445,6 +445,9 @@
 .squiz-fte-scope .flex {
   display: flex !important;
 }
+.squiz-fte-scope .table {
+  display: table !important;
+}
 .squiz-fte-scope .grid {
   display: grid !important;
 }
@@ -799,6 +802,9 @@
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
+.squiz-fte-scope.squiz-fte-scope__editor .squiz-fte-scope__floating-popover {
+  z-index: 999;
+}
 .squiz-fte-scope.squiz-fte-scope__editor:has(.squiz-fte-scope.squiz-fte-scope__editor__children) {
   min-height: 2rem;
   width: 100%;
@@ -825,6 +831,9 @@
   position: relative;
   display: block;
 }
+.squiz-fte-scope.squiz-fte-scope__editor .remirror-editor-wrapper {
+  position: relative;
+}
 .squiz-fte-scope.squiz-fte-scope__editor--bordered {
   border-width: 2px;
   border-style: solid;
@@ -865,6 +874,293 @@
     var(--tw-ring-shadow, 0 0 #0000),
     var(--tw-shadow);
 }
+.squiz-fte-scope.squiz-fte-scope__editor .remirror-table {
+  width: 100%;
+}
+.squiz-fte-scope.squiz-fte-scope__editor .remirror-table-container {
+  margin: 2rem;
+}
+.squiz-fte-scope.squiz-fte-scope__editor .remirror-table tbody th,
+.squiz-fte-scope.squiz-fte-scope__editor .remirror-table tbody td {
+  padding: 0.5rem;
+}
+.squiz-fte-scope.squiz-fte-scope__editor .remirror-table tbody p {
+  margin: 0;
+}
+.squiz-fte-scope :root {
+  --rmr-color-table-default-border: #e0e0e0;
+  --rmr-color-table-selected-cell: transparent;
+  --rmr-color-table-selected-border: #0774d2;
+  --rmr-color-table-selected-controller: #0774d2;
+  --rmr-hue-blue-7: #0774d2;
+  --rmr-color-table-mark: #f5f5f5;
+  --rmr-color-table-default-controller: #f7f7f7;
+  --rmr-color-table-predelete-cell: transparent;
+  --rmr-color-table-predelete-border: #d72321;
+  --rmr-color-table-predelete-controller: #d72321;
+}
+.squiz-fte-scope .remirror-positioner {
+  cursor: none;
+  min-height: 1px;
+  min-width: 1px;
+  pointer-events: none;
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  z-index: -1;
+}
+.squiz-fte-scope .remirror-positioner-widget {
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+.squiz-fte-scope .remirror-editor.ProseMirror .tableWrapper {
+  overflow-x: auto;
+}
+.squiz-fte-scope .remirror-editor.ProseMirror table {
+  border-collapse: collapse;
+  overflow: hidden;
+  table-layout: fixed;
+  width: 100%;
+}
+.squiz-fte-scope .remirror-editor.ProseMirror td,
+.squiz-fte-scope .remirror-editor.ProseMirror th {
+  border-color: var(--rmr-color-table-default-border);
+  border-style: solid;
+  border-width: 1px;
+  box-sizing: border-box;
+  position: relative;
+  vertical-align: top;
+}
+.squiz-fte-scope .remirror-editor.ProseMirror .column-resize-handle {
+  background-color: var(--rmr-hue-blue-7);
+  bottom: 0;
+  pointer-events: none;
+  position: absolute;
+  right: -2px;
+  top: 0;
+  width: 4px;
+  z-index: 40;
+}
+.squiz-fte-scope .remirror-editor.ProseMirror.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+.squiz-fte-scope .remirror-editor.ProseMirror td.selectedCell,
+.squiz-fte-scope .remirror-editor.ProseMirror th.selectedCell {
+  background-color: var(--rmr-color-table-selected-cell);
+  border-color: var(--rmr-color-table-selected-border);
+  border-style: double;
+}
+.squiz-fte-scope .remirror-table-colgroup > col:first-of-type {
+  overflow: visible;
+  width: 13px;
+}
+.squiz-fte-scope .remirror-controllers-toggle {
+  visibility: hidden;
+}
+.squiz-fte-scope .remirror-table-show-controllers .remirror-controllers-toggle {
+  visibility: visible;
+}
+.squiz-fte-scope .remirror-table-insert-button {
+  background-color: #dcdcdc;
+  border-radius: 4px;
+  cursor: pointer;
+  height: 18px;
+  position: absolute;
+  transition: background-color 0.15s ease;
+  width: 18px;
+  z-index: 25;
+}
+.squiz-fte-scope .remirror-table-insert-button svg {
+  fill: #fff;
+}
+.squiz-fte-scope .remirror-table-insert-button:hover {
+  background-color: #136bda;
+}
+.squiz-fte-scope .remirror-table-insert-button:hover svg {
+  fill: #fff;
+}
+.squiz-fte-scope .remirror-table-delete-inner-button {
+  background-color: #cecece;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  height: 18px;
+  padding: 0;
+  position: absolute;
+  transition: background-color 0.15s ease;
+  width: 18px;
+  z-index: 30;
+}
+.squiz-fte-scope .remirror-table-delete-inner-button:hover {
+  background-color: #ff7884;
+}
+.squiz-fte-scope .remirror-table-delete-table-inner-button {
+  left: calc(var(--remirror-table-delete-button-x) - 9px);
+  top: calc(var(--remirror-table-delete-button-y) - 9px);
+}
+.squiz-fte-scope .remirror-table-delete-row-column-inner-button {
+  left: calc(var(--remirror-table-delete-row-column-button-x) - 9px);
+  top: calc(var(--remirror-table-delete-row-column-button-y) - 9px);
+}
+.squiz-fte-scope .remirror-table-with-controllers {
+  height: 1px;
+  margin-bottom: 40px;
+  margin-top: 40px;
+}
+.squiz-fte-scope .ProseMirror table.remirror-table-with-controllers {
+  overflow: visible;
+}
+.squiz-fte-scope .remirror-table-waitting-controllers {
+  display: none;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:first-of-type {
+  height: 12px;
+  overflow: visible;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:first-of-type th:first-of-type {
+  cursor: pointer;
+  height: 12px;
+  overflow: visible;
+  padding: 0;
+  position: relative;
+  width: 12px;
+  z-index: 15;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:first-of-type th:first-of-type div.remirror-table-controller-wrapper {
+  align-items: flex-end;
+  display: flex;
+  height: 12px;
+  justify-content: flex-end;
+  overflow: visible;
+  width: 12px;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:first-of-type th:first-of-type div.remirror-table-controller-trigger-area {
+  display: none;
+  flex: 1;
+  position: relative;
+  z-index: 10;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:first-of-type th:first-of-type div.remirror-table-controller-mark-row-corner {
+  border-color: var(--rmr-color-table-mark);
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 2px;
+  bottom: -2px;
+  height: 0;
+  left: -12px;
+  position: absolute;
+  width: 0;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:first-of-type th:first-of-type div.remirror-table-controller-mark-column-corner {
+  border-color: var(--rmr-color-table-mark);
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 2px;
+  height: 0;
+  position: absolute;
+  right: -2px;
+  top: -12px;
+  width: 0;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:first-of-type th:nth-of-type(n + 2) {
+  cursor: pointer;
+  height: 12px;
+  overflow: visible;
+  padding: 0;
+  position: relative;
+  z-index: 15;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:first-of-type th:nth-of-type(n + 2) div.remirror-table-controller-wrapper {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: row;
+  height: 12px;
+  justify-content: flex-end;
+  overflow: visible;
+  width: 100%;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:first-of-type th:nth-of-type(n + 2) div.remirror-table-controller-trigger-area {
+  flex: 1;
+  height: 36px;
+  position: relative;
+  z-index: 10;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:first-of-type th:nth-of-type(n + 2) div.remirror-table-controller-mark-row-corner {
+  display: none;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:first-of-type th:nth-of-type(n + 2) div.remirror-table-controller-mark-column-corner {
+  border-color: var(--rmr-color-table-mark);
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 2px;
+  height: 0;
+  position: absolute;
+  right: -2px;
+  top: -12px;
+  width: 0;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:nth-of-type(n + 2) th {
+  cursor: pointer;
+  overflow: visible;
+  padding: 0;
+  position: relative;
+  width: 12px;
+  z-index: 15;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:nth-of-type(n + 2) th div.remirror-table-controller-wrapper {
+  align-items: flex-end;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: flex-end;
+  overflow: visible;
+  width: 12px;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:nth-of-type(n + 2) th div.remirror-table-controller-trigger-area {
+  flex: 1;
+  position: relative;
+  width: 36px;
+  z-index: 10;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:nth-of-type(n + 2) th div.remirror-table-controller-mark-row-corner {
+  border-color: var(--rmr-color-table-mark);
+  border-radius: 50%;
+  border-style: solid;
+  border-width: 2px;
+  bottom: -2px;
+  height: 0;
+  left: -12px;
+  position: absolute;
+  width: 0;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers > tr:nth-of-type(n + 2) th div.remirror-table-controller-mark-column-corner {
+  display: none;
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers th.remirror-table-controller {
+  background-color: var(--rmr-color-table-default-controller);
+}
+.squiz-fte-scope .remirror-table-tbody-with-controllers th.selectedCell.remirror-table-controller {
+  background-color: var(--rmr-color-table-selected-controller);
+}
+.squiz-fte-scope .remirror-table-show-predelete td.selectedCell,
+.squiz-fte-scope .remirror-table-show-predelete th.selectedCell.remirror-table-controller {
+  background-color: var(--rmr-color-table-predelete-cell) !important;
+  border-color: var(--rmr-color-table-predelete-border) !important;
+}
+.squiz-fte-scope .remirror-table-show-predelete th.selectedCell.remirror-table-controller {
+  background-color: var(--rmr-color-table-predelete-controller) !important;
+}
+.squiz-fte-scope .remirror-table-show-predelete.remirror-table-preselect-all td,
+.squiz-fte-scope .remirror-table-show-predelete.remirror-table-preselect-all th.remirror-table-controller {
+  background-color: var(--rmr-color-table-predelete-cell) !important;
+  border-color: var(--rmr-color-table-predelete-border) !important;
+}
+.squiz-fte-scope .remirror-table-show-predelete.remirror-table-preselect-all th.remirror-table-controller {
+  background-color: var(--rmr-color-table-predelete-controller) !important;
+}
 .squiz-fte-scope .editor-toolbar,
 .squiz-fte-scope__floating-popover {
   border-top-left-radius: 8px;

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.69.0",
+  "version": "1.71.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -22,6 +22,7 @@
   "dependencies": {
     "@headlessui/react": "1.7.11",
     "@mui/icons-material": "5.11.16",
+    "@remirror/extension-react-tables": "^2.2.19",
     "@remirror/react": "2.0.25",
     "@squiz/dx-json-schema-lib": "^1.65.1",
     "@squiz/resource-browser": "^1.66.3",