@squiz/formatted-text-editor 0.0.0-rbv2-20240530041851

package/src/Editor/EditorContext.spec.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { EditorContext, EditorContextOptions } from './EditorContext';
+import { render } from '@testing-library/react';
+
+describe('EditorContext', () => {
+  it('Has expected defaults', async () => {
+    let defaultContext: EditorContextOptions | null = null;
+
+    render(
+      <EditorContext.Consumer>
+        {(value) => {
+          defaultContext = value;
+          return null;
+        }}
+      </EditorContext.Consumer>,
+    );
+
+    expect(defaultContext).toEqual({
+      matrix: {
+        matrixDomain: '',
+      },
+      resolveNodeToUrl: expect.any(Function),
+    });
+  });
+});

package/src/Editor/EditorContext.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ResolveNodeToUrl } from '../types';
+
+export type EditorContextOptions = {
+  matrix: {
+    matrixDomain: string;
+  };
+  resolveNodeToUrl: ResolveNodeToUrl;
+};
+
+export const defaultEditorContext: EditorContextOptions = {
+  matrix: {
+    matrixDomain: '',
+  },
+  resolveNodeToUrl: () => {
+    throw new Error('resolveNodeToUrl has not been configured.');
+  },
+};
+
+export const EditorContext = React.createContext(defaultEditorContext);

package/src/Editor/_editor.scss

@@ -0,0 +1,430 @@
+/* 2 class selectors so specificity is higher vs eg. ".squiz-ce-scope *" which would take priority over this. */
+.squiz-fte-scope.squiz-fte-scope__editor {
+  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];
+
+    .remirror-editor {
+      @apply pt-0;
+    }
+  }
+
+  .remirror-editor {
+    @apply shadow-none p-8;
+    overflow: auto;
+    min-height: 15vh;
+
+    &:active,
+    &:focus {
+      @apply outline-0;
+    }
+
+    p {
+      position: relative; // ensures that the placeholder text is positioned correctly
+      /* Make sure content aligned with "text-align: justify" is justified */
+      @apply block;
+    }
+
+    &-wrapper {
+      position: relative;
+    }
+  }
+
+  &--bordered {
+    @apply border-2 border-solid;
+  }
+
+  &--is-disabled {
+    @apply bg-gray-50 border-0 cursor-not-allowed;
+
+    .remirror-is-empty:first-of-type::before {
+      display: none;
+    }
+  }
+
+  .remirror-is-empty:first-of-type::before {
+    position: absolute;
+    pointer-events: none;
+    height: 0;
+    font-style: italic;
+    content: attr(data-placeholder);
+    @apply text-gray-500;
+  }
+
+  .ProseMirror-selectednode {
+    @apply border-blue-300 border-2 border-solid;
+  }
+
+  // match the Remirror node
+  img {
+    display: inline;
+  }
+
+  &: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/FloatingToolbar.spec.tsx

@@ -0,0 +1,49 @@
+import { act, screen } from '@testing-library/react';
+import { NodeSelection } from 'prosemirror-state';
+import { renderWithEditor } from '../../tests';
+
+describe('FloatingToolbar', () => {
+  const getFloatingButtonNames = () => {
+    return screen.queryAllByRole('button').map((button) => button.getAttribute('title'));
+  };
+
+  it.each([
+    ['Nothing selected', 3, 3, []],
+    ['Regular text selected', 3, 4, ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)', 'Link (Ctrl+K)']],
+    ['Regular text + link selected', 3, 17, ['Bold (Ctrl+B)', 'Italic (Ctrl+I)', 'Underline (Ctrl+U)']],
+    ['Nothing selected, positioned directly on the left of a link', 12, 12, []],
+    ['Nothing selected, positioned directly on the right of a link', 19, 19, []],
+    ['Nothing selected, positioned within a link', 13, 13, ['Link (Ctrl+K)', 'Remove link (Shift+Ctrl+K)']],
+  ])(
+    'Renders formatting buttons when text is selected - %s',
+    async (description: string, from: number, to: number, expectedButtons: string[]) => {
+      const { editor } = await renderWithEditor(null, {
+        content: 'My awesome <a href="https://example.org">example</a> content.',
+        editable: true,
+      });
+
+      await act(() => editor.selectText({ from, to }));
+
+      expect(getFloatingButtonNames()).toEqual(expectedButtons);
+    },
+  );
+
+  it.each([
+    ['Image selected', 1, ['Image (Ctrl+L)']],
+    ['Asset image selected', 2, ['Image (Ctrl+L)']],
+  ])(
+    'Renders formatting buttons when node is selected - %s',
+    async (description: string, pos: number, expectedButtons: string[]) => {
+      const { editor } = await renderWithEditor(null, {
+        content:
+          '<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" />' +
+          '<img data-matrix-asset-id="100" data-matrix-identifier="key" data-matrix-domain="my-matrix.squiz.net" />',
+        editable: true,
+      });
+
+      await act(() => editor.selectText(new NodeSelection(editor.state.doc.resolve(pos))));
+
+      expect(getFloatingButtonNames()).toEqual(expectedButtons);
+    },
+  );
+});

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -0,0 +1,62 @@
+import React, { useMemo } from 'react';
+import ItalicButton from './Tools/Italic/ItalicButton';
+import UnderlineButton from './Tools/Underline/UnderlineButton';
+import BoldButton from './Tools/Bold/BoldButton';
+import { useExtensionNames } from '../hooks';
+import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
+import LinkButton from './Tools/Link/LinkButton';
+import { FloatingToolbar as RemirrorFloatingToolbar, useActive, usePositioner, useCommands } from '@remirror/react';
+import { VerticalDivider } from '@remirror/react-components';
+import { createToolbarPositioner, ToolbarPositionerRange } from '../utils/createToolbarPositioner';
+import ImageButton from './Tools/Image/ImageButton';
+import { MarkName } from '../Extensions/Extensions';
+import { ImageExtension } from '../Extensions/ImageExtension/ImageExtension';
+import ClearFormattingButton from './Tools/ClearFormatting/ClearFormattingButton';
+import { ClearFormattingExtension } from '../Extensions/ClearFormattingExtension/ClearFormattingExtension';
+
+export const FloatingToolbar = () => {
+  const watchedMarks = [MarkName.Link, MarkName.AssetLink];
+  const extensionNames = useExtensionNames();
+  const positioner = useMemo(() => createToolbarPositioner({ types: watchedMarks }), []);
+  const { clearFormatting } = useCommands<ClearFormattingExtension>();
+  const active = useActive<ImageExtension>();
+  const {
+    data: { marks },
+  } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
+
+  let buttons = [
+    extensionNames.bold && <BoldButton key="bold" />,
+    extensionNames.italic && <ItalicButton key="italic" />,
+    extensionNames.underline && <UnderlineButton key="underline" />,
+  ];
+
+  if (active.image() || active.assetImage()) {
+    buttons = [<ImageButton key="add-image" inPopover={true} />];
+  } else if (marks?.[MarkName.Link].isExclusivelyActive || marks?.[MarkName.AssetLink].isExclusivelyActive) {
+    // if all of the selected text is a link show the options to update/remove the link instead of the regular
+    // formatting options.
+    buttons = [
+      <LinkButton key="update-link" inPopover={true} />,
+      <RemoveLinkButton key="remove-link" inPopover={true} />,
+    ];
+  } else if (!marks?.[MarkName.Link].isActive && !marks?.[MarkName.AssetLink].isActive) {
+    // if none of the selected text is a link show the option to create a link.
+    buttons.push(<VerticalDivider key="link-divider" />, <LinkButton key="add-link" inPopover={true} />);
+  }
+
+  // Clear formatting will always be the last button in the toolbar
+  if (extensionNames.clearFormatting && clearFormatting.enabled()) {
+    buttons.push(<ClearFormattingButton key="clearFormatting" />);
+  }
+
+  return (
+    <RemirrorFloatingToolbar
+      className="squiz-fte-scope squiz-fte-scope__floating-popover"
+      positioner={positioner}
+      tabIndex={0}
+      role={'toolbar'}
+    >
+      {buttons}
+    </RemirrorFloatingToolbar>
+  );
+};

package/src/EditorToolbar/Toolbar.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { Toolbar as RemirrorToolbar, VerticalDivider } from '@remirror/react-components';
+import clsx from 'clsx';
+import ItalicButton from './Tools/Italic/ItalicButton';
+import UnderlineButton from './Tools/Underline/UnderlineButton';
+import BoldButton from './Tools/Bold/BoldButton';
+import TextAlignButtons from './Tools/TextAlign/TextAlignButtons';
+import UndoButton from './Tools/Undo/UndoButton';
+import RedoButton from './Tools/Redo/RedoButton';
+import TextTypeDropdown from './Tools/TextType/TextTypeDropdown';
+import LinkButton from './Tools/Link/LinkButton';
+import ImageButton from './Tools/Image/ImageButton';
+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, enableTableTool }: ToolbarProps) => {
+  const extensionNames = useExtensionNames();
+
+  return (
+    <RemirrorToolbar
+      className={clsx('editor-toolbar header-toolbar', isVisible && 'show-toolbar')}
+      role="toolbar"
+      tabIndex={0}
+    >
+      <div className="editor-toolbar__tools">
+        {extensionNames.history && (
+          <>
+            <UndoButton />
+            <RedoButton />
+            <VerticalDivider />
+          </>
+        )}
+        {extensionNames.heading && extensionNames.paragraph && extensionNames.preformatted && <TextTypeDropdown />}
+        {extensionNames.bold && <BoldButton />}
+        {extensionNames.italic && <ItalicButton />}
+        {extensionNames.underline && <UnderlineButton />}
+        {extensionNames.nodeFormatting && <TextAlignButtons />}
+        {extensionNames.listItem && <ListButtons />}
+        {extensionNames.horizontalRule && <HorizontalLineButton />}
+        {extensionNames.link && (
+          <>
+            <LinkButton />
+            <RemoveLinkButton />
+          </>
+        )}
+        {extensionNames.image && <ImageButton />}
+        {extensionNames.clearFormatting && <ClearFormattingButton />}
+        {enableTableTool && extensionNames.table && <TableButton />}
+      </div>
+    </RemirrorToolbar>
+  );
+};

package/src/EditorToolbar/Tools/Bold/BoldButton.spec.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+
+describe('Bold button', () => {
+  it('Renders the bold button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Bold (Ctrl+B)' })).toBeInTheDocument();
+  });
+
+  it('Activates the button if clicked', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Bold (Ctrl+B)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
+    const bold = screen.getByRole('button', { name: 'Bold (Ctrl+B)' });
+    fireEvent.click(bold);
+    expect(bold.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
+  });
+});

package/src/EditorToolbar/Tools/Bold/BoldButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { BoldExtension } from '@remirror/extension-bold';
+import Button from '../../../ui/Button/Button';
+import FormatBoldRoundedIcon from '@mui/icons-material/FormatBoldRounded';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
+
+const BoldButton = () => {
+  const { toggleBold } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<BoldExtension>();
+  const enabled = toggleBold.enabled();
+  const handleSelect = () => {
+    if (toggleBold.enabled()) {
+      chain.toggleBold().focus().run();
+    }
+  };
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.bold()}
+      icon={<FormatBoldRoundedIcon />}
+      label={`Bold (${getShortcutSymbol()}+B)`}
+    />
+  );
+};
+
+export default BoldButton;