@squiz/formatted-text-editor 1.69.0 → 1.70.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Change Log
 
+## 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,
@@ -70,9 +71,10 @@ const Editor = ({ content, className, border = true, editable = true, onChange,
     }, []);
     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 }),
+            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.js

@@ -12,6 +12,8 @@ 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";
@@ -61,6 +63,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "1.69.0",
+  "version": "1.70.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",

package/src/Editor/Editor.tsx

@@ -8,6 +8,7 @@ import { EditorContext } from './EditorContext';
 import { createExtensions } from '../Extensions/Extensions';
 import useFocus from '../hooks/useFocus';
 import { ResourceBrowserContext } from '@squiz/resource-browser';
+import { TableComponents } from '@remirror/extension-react-tables';
 
 type EditorProps = {
   className?: string;
@@ -19,6 +20,7 @@ type EditorProps = {
   isFocused?: boolean;
   label?: string;
   attributes?: Record<string, string>;
+  enableTableTool?: boolean;
 };
 
 const WrappedEditor = () => {
@@ -51,6 +53,7 @@ const Editor = ({
   children,
   isFocused,
   attributes,
+  enableTableTool = false,
 }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
     extensions: createExtensions(useContext(EditorContext), useContext(ResourceBrowserContext)),
@@ -95,9 +98,10 @@ const Editor = ({
         label="Text editor"
         attributes={attributes}
       >
-        {editable && <Toolbar isVisible={isVisible} />}
+        {editable && <Toolbar isVisible={isVisible} enableTableTool={enableTableTool} />}
         {children && <div className="squiz-fte-scope__editor__children">{children}</div>}
         <WrappedEditor />
+        {enableTableTool && <TableComponents enableTableCellMenu={false} />}
         {editable && isVisible && <FloatingToolbar />}
       </Remirror>
     </div>

package/src/Editor/_editor.scss

@@ -3,6 +3,10 @@
   font-family: 'Open Sans' !important;
   @apply bg-white rounded border-gray-300;
 
+  .squiz-fte-scope__floating-popover {
+    z-index: 999; // ensure table styles don't hide this menu
+  }
+
   &:has(&__children) {
     /* The children replace the space taken up by top padding of the editor when present. */
     @apply w-full min-h-[2rem];
@@ -27,6 +31,10 @@
       /* Make sure content aligned with "text-align: justify" is justified */
       @apply block;
     }
+
+    &-wrapper {
+      position: relative;
+    }
   }
 
   &--bordered {
@@ -62,4 +70,361 @@
   &:has(.show-toolbar) {
     @apply shadow-md border-0;
   }
+
+  // Tables
+  .remirror-table {
+    &-container {
+      @apply m-8;
+    }
+
+    width: 100%;
+
+    tbody {
+      th,
+      td {
+        @apply p-2;
+      }
+
+      p {
+        margin: 0; // everything is by default a paragraph, inside the table that does not make sense so remove the margin
+      }
+    }
+  }
+}
+
+// TODO: work through this nonsense and see which bits are necessary for functionality
+: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;
+}
+
+//remirror styles
+.remirror-positioner {
+  cursor: none;
+  min-height: 1px;
+  min-width: 1px;
+  pointer-events: none;
+  position: absolute;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  z-index: -1;
+}
+
+.remirror-positioner-widget {
+  height: 0;
+  position: absolute;
+  width: 0;
+}
+
+.remirror-editor.ProseMirror .tableWrapper {
+  overflow-x: auto;
+}
+
+.remirror-editor.ProseMirror table {
+  border-collapse: collapse;
+  overflow: hidden;
+  table-layout: fixed;
+  width: 100%;
+}
+
+.remirror-editor.ProseMirror td,
+.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;
+}
+
+.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;
+}
+
+.remirror-editor.ProseMirror.resize-cursor {
+  cursor: ew-resize;
+  cursor: col-resize;
+}
+
+.remirror-editor.ProseMirror td.selectedCell,
+.remirror-editor.ProseMirror th.selectedCell {
+  background-color: var(--rmr-color-table-selected-cell);
+  border-color: var(--rmr-color-table-selected-border);
+  border-style: double;
+}
+
+.remirror-table-colgroup > col:first-of-type {
+  overflow: visible;
+  width: 13px;
+}
+
+.remirror-controllers-toggle {
+  visibility: hidden;
+}
+
+.remirror-table-show-controllers .remirror-controllers-toggle {
+  visibility: visible;
+}
+
+.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;
+}
+
+.remirror-table-insert-button svg {
+  fill: #fff;
+}
+
+.remirror-table-insert-button:hover {
+  background-color: #136bda;
+}
+
+.remirror-table-insert-button:hover svg {
+  fill: #fff;
+}
+
+.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;
+}
+
+.remirror-table-delete-inner-button:hover {
+  background-color: #ff7884;
+}
+
+.remirror-table-delete-table-inner-button {
+  left: calc(var(--remirror-table-delete-button-x) - 9px);
+  top: calc(var(--remirror-table-delete-button-y) - 9px);
+}
+
+.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);
+}
+
+.remirror-table-with-controllers {
+  height: 1px;
+  margin-bottom: 40px;
+  margin-top: 40px;
+}
+
+.ProseMirror table.remirror-table-with-controllers {
+  overflow: visible;
+}
+
+.remirror-table-waitting-controllers {
+  display: none;
+}
+
+.remirror-table-tbody-with-controllers > tr:first-of-type {
+  height: 12px;
+  overflow: visible;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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%;
+}
+
+.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;
+}
+
+.remirror-table-tbody-with-controllers
+  > tr:first-of-type
+  th:nth-of-type(n + 2)
+  div.remirror-table-controller-mark-row-corner {
+  display: none;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.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;
+}
+
+.remirror-table-tbody-with-controllers > tr:nth-of-type(n + 2) th div.remirror-table-controller-mark-column-corner {
+  display: none;
+}
+
+.remirror-table-tbody-with-controllers th.remirror-table-controller {
+  background-color: var(--rmr-color-table-default-controller);
+}
+
+.remirror-table-tbody-with-controllers th.selectedCell.remirror-table-controller {
+  background-color: var(--rmr-color-table-selected-controller);
+}
+
+.remirror-table-show-predelete td.selectedCell,
+.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;
+}
+
+.remirror-table-show-predelete th.selectedCell.remirror-table-controller {
+  background-color: var(--rmr-color-table-predelete-controller) !important;
+}
+
+.remirror-table-show-predelete.remirror-table-preselect-all td,
+.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;
+}
+
+.remirror-table-show-predelete.remirror-table-preselect-all th.remirror-table-controller {
+  background-color: var(--rmr-color-table-predelete-controller) !important;
 }

package/src/EditorToolbar/Toolbar.tsx

@@ -14,12 +14,14 @@ import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
 import ClearFormattingButton from './Tools/ClearFormatting/ClearFormattingButton';
 import ListButtons from './Tools/Lists/ListButtons';
 import HorizontalLineButton from './Tools/HorizontalLine/HorizontalLineButton';
+import TableButton from './Tools/Table/TableButton';
 import { useExtensionNames } from '../hooks';
 
 type ToolbarProps = {
   isVisible: boolean;
+  enableTableTool: boolean;
 };
-export const Toolbar = ({ isVisible }: ToolbarProps) => {
+export const Toolbar = ({ isVisible, enableTableTool }: ToolbarProps) => {
   const extensionNames = useExtensionNames();
 
   return (
@@ -51,6 +53,7 @@ export const Toolbar = ({ isVisible }: ToolbarProps) => {
         )}
         {extensionNames.image && <ImageButton />}
         {extensionNames.clearFormatting && <ClearFormattingButton />}
+        {enableTableTool && extensionNames.table && <TableButton />}
       </div>
     </RemirrorToolbar>
   );

package/src/EditorToolbar/Tools/Table/TableButton.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithEditor } from '../../../../tests';
+import TableButton from './TableButton';
+
+const defaultTableMarkup = `<div class="remirror-table-show-controllers"><table class="remirror-table remirror-table-with-controllers" data-controllers-injected="" style="min-width: 40px;"><colgroup class="remirror-table-colgroup"><col><col><col><col></colgroup><tbody class="remirror-table-tbody-with-controllers"><tr><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle selectedCell" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th></tr><tr><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td></tr><tr><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td></tr><tr><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td></tr><tr><th contenteditable="false" class="remirror-table-controller remirror-controllers-toggle" data-controller-cell=""><div contenteditable="false" class="remirror-table-controller-wrapper"><div contenteditable="false"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-trigger-area"></div><div class="remirror-table-controller-mark-row-corner"></div><div class="remirror-table-controller-mark-column-corner"></div></div></th><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td><td><p style=""><br class="ProseMirror-trailingBreak"></p></td></tr></tbody></table><div></div></div>`;
+
+describe('Table button', () => {
+  it('Renders the table button', async () => {
+    await renderWithEditor(<TableButton />, { content: 'Some nonsense content here' });
+    expect(screen.getByRole('button', { name: 'Insert table' })).toBeInTheDocument();
+  });
+
+  it('Inserts a table into the editor content after clicking button', async () => {
+    const { getHtmlContent } = await renderWithEditor(<TableButton />, {
+      content: '<p>Hello Mr Goat</p>',
+    });
+
+    const horizontalLine = screen.getByRole('button', { name: 'Insert table' });
+    fireEvent.click(horizontalLine);
+
+    expect(getHtmlContent()).toBe(defaultTableMarkup + '<p style="">Hello Mr Goat</p>');
+  });
+});

package/src/EditorToolbar/Tools/Table/TableButton.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { useCommands, useActive } from '@remirror/react';
+import { VerticalDivider } from '@remirror/react-components';
+import { TableExtension } from '@remirror/extension-react-tables';
+import Button from '../../../ui/Button/Button';
+import TableViewRoundedIcon from '@mui/icons-material/TableViewRounded';
+
+const TableButton = () => {
+  const { createTable } = useCommands();
+
+  const active = useActive<TableExtension>();
+  const enabled = createTable.enabled();
+
+  const handleSelect = () => {
+    createTable({ rowsCount: 4, columnsCount: 3, withHeaderRow: false });
+  };
+
+  return (
+    <>
+      <Button
+        handleOnClick={handleSelect}
+        isDisabled={!enabled}
+        isActive={active.table()}
+        icon={<TableViewRoundedIcon />}
+        label="Insert table"
+      />
+      <VerticalDivider />
+    </>
+  );
+};
+
+export default TableButton;

package/src/Extensions/Extensions.ts

@@ -28,6 +28,9 @@ import { ClearFormattingExtension } from './ClearFormattingExtension/ClearFormat
 import { UnsupportedNodeExtension } from './UnsuportedExtension/UnsupportedNodeExtension';
 import { ResourceBrowserContextProps } from '@squiz/resource-browser';
 import { FetchUrlExtension } from './FetchUrlExtension/FetchUrlExtension';
+import { TableExtension } from '@remirror/extension-react-tables';
+import { ReactComponentExtension } from '@remirror/extension-react-component';
+
 export enum NodeName {
   Image = 'image',
   CodeBlock = 'codeBlock',
@@ -77,6 +80,8 @@ export const createExtensions = (context: EditorContextOptions, browserContext:
         fetchUrl: browserContext.onRequestResource,
       }),
       new TextExtension(),
+      new TableExtension(),
+      new ReactComponentExtension(),
     ];
   };
 };

package/src/utils/getNodeNamesByGroup.spec.ts

@@ -19,6 +19,7 @@ describe('getNodeNamesByGroup', () => {
       'assetImage',
       'doc',
       'text',
+      'tableControllerCell',
       'codeBlock',
       'image',
       'unsupportedNode',
@@ -26,7 +27,11 @@ describe('getNodeNamesByGroup', () => {
       'listItem',
       'orderedList',
       'horizontalRule',
+      'table',
       'hardBreak',
+      'tableRow',
+      'tableCell',
+      'tableHeaderCell',
     ]);
   });
 });