@squiz/formatted-text-editor 1.69.0 → 1.71.0

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)),
@@ -71,6 +74,13 @@ const Editor = ({
     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 (
@@ -88,16 +98,17 @@ const Editor = ({
     >
       <Remirror
         manager={manager}
-        state={state}
+        initialContent={state}
         editable={editable}
         onChange={handleChange}
         placeholder="Write something"
         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,11 +28,16 @@ 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',
   AssetImage = 'assetImage',
   Text = 'text',
+  TableControllerCell = 'tableControllerCell',
+  tableCell = 'tableCell',
   hardBreak = 'hardBreak',
   Unsupported = 'unsupportedNode',
 }
@@ -77,6 +82,8 @@ export const createExtensions = (context: EditorContextOptions, browserContext:
         fetchUrl: browserContext.onRequestResource,
       }),
       new TextExtension(),
+      new TableExtension(),
+      new ReactComponentExtension(),
     ];
   };
 };