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

package/src/EditorToolbar/Tools/Underline/UnderlineButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { UnderlineExtension } from '@remirror/extension-underline';
+import Button from '../../../ui/Button/Button';
+import FormatUnderlinedRoundedIcon from '@mui/icons-material/FormatUnderlinedRounded';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
+
+const UnderlineButton = () => {
+  const { toggleUnderline } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<UnderlineExtension>();
+  const enabled = toggleUnderline.enabled();
+  const handleSelect = () => {
+    if (toggleUnderline.enabled()) {
+      chain.toggleUnderline().focus().run();
+    }
+  };
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={active.underline()}
+      icon={<FormatUnderlinedRoundedIcon />}
+      label={`Underline (${getShortcutSymbol()}+U)`}
+    />
+  );
+};
+
+export default UnderlineButton;

package/src/EditorToolbar/Tools/Undo/UndoButton.spec.tsx

@@ -0,0 +1,70 @@
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import Editor from '../../../Editor/Editor';
+import React from 'react';
+import { renderWithEditor } from '../../../../tests';
+import UndoButton from './UndoButton';
+
+describe('Undo button', () => {
+  it('Renders the undo button', () => {
+    render(<Editor />);
+    expect(screen.getByRole('button', { name: 'Undo (Ctrl+Z)' })).toBeInTheDocument();
+  });
+
+  it('Renders a disabled button if you have not made any changes yet', () => {
+    render(<Editor />);
+    const undo = screen.getByRole('button', { name: 'Undo (Ctrl+Z)' });
+    expect(undo).toBeDisabled();
+  });
+
+  it('Enables the button when you perform an action', () => {
+    const { baseElement } = render(<Editor />);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+
+    const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
+    expect(leftAlignButton).toBeTruthy();
+
+    fireEvent.click(leftAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+    const undo = screen.getByRole('button', { name: 'Undo (Ctrl+Z)' });
+    expect(undo).not.toBeDisabled();
+  });
+
+  it('Reverts this action when clicked', () => {
+    const { baseElement } = render(<Editor />);
+
+    // perform some action
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+    const leftAlignButton = baseElement.querySelector('button[title="Align left"]') as HTMLButtonElement;
+    expect(leftAlignButton).toBeTruthy();
+    fireEvent.click(leftAlignButton);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeTruthy();
+
+    // Check that this enables the undo button
+    const undo = screen.getByRole('button', { name: 'Undo (Ctrl+Z)' });
+    expect(undo).not.toBeDisabled();
+
+    // Click the undo button and check that this has reverted the previous action
+    fireEvent.click(undo);
+    expect(baseElement.querySelector('p[data-node-text-align="left"]')).toBeFalsy();
+  });
+
+  it('Reverts text content changes', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<UndoButton />, { content: 'Initial content...' });
+
+    await act(() => editor.jumpTo('end'));
+    await act(() => editor.paste(' with some updated content.'));
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [{ type: 'text', text: 'Initial content... with some updated content.' }],
+    });
+
+    fireEvent.click(screen.getByRole('button', { name: 'Undo (Ctrl+Z)' }));
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [{ type: 'text', text: 'Initial content...' }],
+    });
+  });
+});

package/src/EditorToolbar/Tools/Undo/UndoButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useCommands, useHelpers } from '@remirror/react';
+import { HistoryExtension } from 'remirror/extensions';
+import Button from '../../../ui/Button/Button';
+import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
+
+const UndoButton = () => {
+  const { undo } = useCommands<HistoryExtension>();
+  const { undoDepth } = useHelpers<HistoryExtension>(true);
+
+  const handleSelect = () => {
+    if (undo.enabled()) {
+      undo();
+    }
+  };
+
+  const enabled = undoDepth() > 0;
+
+  return (
+    <Button
+      handleOnClick={handleSelect}
+      isDisabled={!enabled}
+      isActive={false}
+      icon={<UndoRoundedIcon />}
+      label={`Undo (${getShortcutSymbol()}+Z)`}
+    />
+  );
+};
+
+export default UndoButton;

package/src/EditorToolbar/_floating-toolbar.scss

@@ -0,0 +1,9 @@
+/// This class is excluded from the scope of squiz-fte-scope as it is outside of the scoped element
+.squiz-fte-scope__floating-popover {
+  @extend .editor-toolbar;
+  @apply bg-white border-gray-200 p-1 shadow rounded-md border flex;
+
+  .MuiDivider-root {
+    @apply my-0;
+  }
+}

package/src/EditorToolbar/_toolbar.scss

@@ -0,0 +1,37 @@
+.editor-toolbar {
+  @apply bg-transparent rounded-t;
+
+  &__tools {
+    @apply border-gray-200 border-b-2 border-solid p-1 w-full flex flex-wrap justify-items-center;
+
+    > *:not(:first-child, .MuiDivider-root) {
+      margin: 0 0 0 2px;
+    }
+
+    .MuiDivider-root {
+      @apply my-0 mx-1 border;
+      margin-right: 2px;
+      height: auto;
+    }
+
+    .squiz-fte-btn {
+      @apply p-1 font-bold;
+      ~ .squiz-fte-btn {
+        margin-left: 2px;
+      }
+    }
+  }
+}
+
+.header-toolbar {
+  transition-duration: 0.3s;
+  transition-property: max-height, opacity;
+  transition-timing-function: ease-out;
+  opacity: 0;
+  max-height: 0;
+
+  &.show-toolbar {
+    opacity: 1;
+    max-height: 108px; // this should mean at least 3 icons can git vertically if needed
+  }
+}

package/src/EditorToolbar/index.ts

@@ -0,0 +1,2 @@
+export * from './FloatingToolbar';
+export * from './Toolbar';

package/src/Extensions/ClearFormattingExtension/ClearFormattingExtension.ts

@@ -0,0 +1,57 @@
+import { command, extension, PlainExtension, CommandFunction, Mark, ExtensionTag } from '@remirror/core';
+import { getNodeNamesByGroup } from '../../utils/getNodeNamesByGroup';
+import { getMarkNamesByGroup } from '../../utils/getMarkNamesByGroup';
+
+@extension({})
+export class ClearFormattingExtension extends PlainExtension {
+  get name() {
+    return 'clearFormatting' as const;
+  }
+
+  @command()
+  clearFormatting(): CommandFunction {
+    return ({ dispatch, tr, state }) => {
+      const { empty, ranges } = state.selection;
+      const schema = state.schema;
+
+      const formattingNodes = getNodeNamesByGroup(schema, ExtensionTag.FormattingNode);
+      const formattingMarks = getMarkNamesByGroup(schema, ExtensionTag.FormattingMark);
+      let isChanged = false;
+
+      ranges.forEach(({ $from, $to }) => {
+        // Check if there is a selection or not, if no selection use the doc content size as the range
+        state.doc.nodesBetween(empty ? 0 : $from.pos, empty ? state.doc.content.size : $to.pos, (node, pos) => {
+          // Clear marks (bold, italic, etc)
+          node.marks.forEach((mark: Mark) => {
+            if (formattingMarks.includes(mark.type.name)) {
+              tr.removeMark(pos, pos + node.nodeSize, mark);
+              isChanged = true;
+            }
+          });
+
+          // Leave non-foramtting nodes as-is
+          if (!formattingNodes.includes(node.type.name)) {
+            return;
+          }
+
+          // Clear node attributes & set to paragraph by default
+          if (node.type.name === schema.nodes.paragraph.name) {
+            const { nodeTextAlignment } = node.attrs;
+
+            if (nodeTextAlignment && nodeTextAlignment !== 'left') {
+              tr.setNodeAttribute(pos, 'nodeTextAlignment', null);
+              isChanged = true;
+            }
+          } else {
+            tr.setNodeMarkup(pos, schema.nodes.paragraph, null, node.marks);
+            isChanged = true;
+          }
+        });
+      });
+
+      dispatch?.(tr);
+
+      return isChanged;
+    };
+  }
+}

package/src/Extensions/CodeBlockExtension/CodeBlockExtension.ts

@@ -0,0 +1,34 @@
+import { CodeBlockExtension } from '@remirror/extension-code-block';
+import { NodeViewMethod, ProsemirrorNode } from 'remirror';
+
+export class ExtendedCodeBlockExtension extends CodeBlockExtension {
+  createNodeViews(): NodeViewMethod {
+    return (node: ProsemirrorNode) => {
+      const { language } = node.attrs;
+
+      // This is the pre container for the code block
+      const dom = document.createElement('pre');
+      dom.setAttribute('spellcheck', 'false');
+      dom.classList.add(`code-block`);
+
+      // This is the actual code content in the code block
+      const contentDOM = document.createElement('code');
+      contentDOM.setAttribute('data-code-block-language', language);
+
+      // Divider between code block and pre container
+      const dividerElement = document.createElement('div');
+      dividerElement.classList.add('block-divider');
+
+      // The material icon to use
+      const codeIcon = document.createElement('svg');
+      codeIcon.classList.add('material-symbols-rounded');
+      codeIcon.textContent = 'code';
+
+      dom.append(codeIcon);
+      dom.append(dividerElement);
+      dom.append(contentDOM);
+
+      return { dom, contentDOM };
+    };
+  }
+}

package/src/Extensions/CommandsExtension/CommandsExtension.ts

@@ -0,0 +1,54 @@
+import { PlainExtension } from '@remirror/core';
+import { command, CommandFunction, FromToProps, getTextSelection, MarkType } from 'remirror';
+import { Attrs } from 'prosemirror-model';
+
+export class CommandsExtension extends PlainExtension {
+  get name(): string {
+    return 'squizCommands' as const;
+  }
+
+  /**
+   * Updates the attributes of a specific mark for the current selection.
+   * Optionally, if text is provided it will replace the current selection.
+   * The cursor will be place at the end of the selection after changes.
+   *
+   * @param {object} options
+   */
+  @command()
+  updateMark(options: {
+    mark: MarkType;
+    attrs?: Attrs;
+    text?: string;
+    removeMark?: boolean;
+    range: FromToProps;
+  }): CommandFunction {
+    return (props) => {
+      const { tr, dispatch, view } = props;
+      const { mark, attrs, text, removeMark, range } = options;
+
+      const selectedText = tr.doc.textBetween(range.from, range.to);
+
+      if (text !== undefined && text !== selectedText) {
+        // update the text in the editor if it was updated, update the range to cover the length of the new text.
+        tr.insertText(text, range.from, range.to);
+        range.to = range.from + text.length;
+      }
+
+      // apply the link, or remove it if no URL was provided.
+      if (removeMark) {
+        tr.removeMark(range.from, range.to, mark);
+      } else {
+        tr.addMark(range.from, range.to, mark.create(attrs));
+      }
+
+      // move the cursor to the end of the link and re-focus the editor.
+      tr.setSelection(getTextSelection({ from: range.to, to: range.to }, tr.doc));
+
+      // apply the transaction.
+      dispatch?.(tr);
+      view?.focus();
+
+      return true;
+    };
+  }
+}

package/src/Extensions/Extensions.ts

@@ -0,0 +1,88 @@
+import {
+  BoldExtension,
+  DocExtension,
+  HeadingExtension,
+  ItalicExtension,
+  NodeFormattingExtension,
+  ParagraphExtension,
+  UnderlineExtension,
+  HistoryExtension,
+  OrderedListExtension,
+  BulletListExtension,
+  ListItemExtension,
+  PlaceholderExtension,
+  HorizontalRuleExtension,
+  TextExtension,
+  HardBreakExtension,
+} from 'remirror/extensions';
+import { Extension } from '@remirror/core';
+import { PreformattedExtension } from './PreformattedExtension/PreformattedExtension';
+import { AssetLinkExtension } from './LinkExtension/AssetLinkExtension';
+import { LinkExtension } from './LinkExtension/LinkExtension';
+import { ImageExtension } from './ImageExtension/ImageExtension';
+import { CommandsExtension } from './CommandsExtension/CommandsExtension';
+import { EditorContextOptions } from '../Editor/EditorContext';
+import { AssetImageExtension } from './ImageExtension/AssetImageExtension';
+import { ExtendedCodeBlockExtension } from './CodeBlockExtension/CodeBlockExtension';
+import { ClearFormattingExtension } from './ClearFormattingExtension/ClearFormattingExtension';
+import { UnsupportedNodeExtension } from './UnsuportedExtension/UnsupportedNodeExtension';
+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',
+}
+
+export enum MarkName {
+  Link = 'link',
+  AssetLink = 'assetLink',
+}
+
+export const createExtensions = (context: EditorContextOptions) => {
+  return (): Extension[] => {
+    return [
+      new CommandsExtension(),
+      new BoldExtension(),
+      new DocExtension(),
+      new HeadingExtension(),
+      new ItalicExtension(),
+      new NodeFormattingExtension({ indents: [] }),
+      new ParagraphExtension(),
+      new HardBreakExtension(),
+      new PreformattedExtension(),
+      new ExtendedCodeBlockExtension({ defaultWrap: true }),
+      new UnderlineExtension(),
+      new HistoryExtension(),
+      new ImageExtension(),
+      new ImageExtension({ preferPastedTextContent: false }),
+      new AssetImageExtension({
+        matrixDomain: context.matrix.matrixDomain,
+      }),
+      new LinkExtension(),
+      new AssetLinkExtension({
+        matrixDomain: context.matrix.matrixDomain,
+      }),
+      new UnsupportedNodeExtension(),
+      new ClearFormattingExtension(),
+      new BulletListExtension(),
+      new ListItemExtension(),
+      new OrderedListExtension(),
+      new HorizontalRuleExtension(),
+      new PlaceholderExtension(),
+      new FetchUrlExtension({
+        fetchUrl: context.resolveNodeToUrl,
+      }),
+      new TextExtension(),
+      new TableExtension(),
+      new ReactComponentExtension(),
+    ];
+  };
+};

package/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts

@@ -0,0 +1,68 @@
+import { extension, PlainExtension, Mark } from '@remirror/core';
+import { Dispose, EditorView } from '@remirror/core-types';
+import { MarkName, NodeName } from '../Extensions';
+import { ResolveNodeToUrl, ResolveNodeType } from '../../types';
+
+export type FetchUrlOptions = {
+  fetchUrl?: ResolveNodeToUrl;
+};
+@extension<FetchUrlOptions>({
+  defaultOptions: {
+    fetchUrl: () => Promise.resolve(''),
+  },
+})
+export class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
+  get name() {
+    return 'fetchUrl';
+  }
+
+  // Implement the `onView` lifecycle method to scan for `[fetch]` and replace attributes
+  onView(view: EditorView): Dispose | void {
+    const { state } = view;
+    const { tr } = state;
+
+    const promises: Promise<void>[] = [];
+
+    state.doc.descendants((node, pos) => {
+      if (node.type.name === NodeName.AssetImage && node.attrs.src === '') {
+        promises.push(
+          this.fetchAndReplace(node.attrs, (url: string) => {
+            const newNode = state.schema.nodes[NodeName.AssetImage].create({ ...node.attrs, src: url });
+            tr.replaceWith(pos, pos + node.nodeSize, newNode);
+          }),
+        );
+      }
+
+      const assetLinkMark = this.findAssetLinkMark(node.marks as Mark[]);
+      if (node.type.name === 'text' && assetLinkMark) {
+        promises.push(
+          this.fetchAndReplace(assetLinkMark.attrs, (url: string) => {
+            const updatedMark = assetLinkMark.type.create({ ...assetLinkMark.attrs, href: url });
+            tr.addMark(pos, pos + node.nodeSize, updatedMark);
+          }),
+        );
+      }
+    });
+
+    if (promises.length) {
+      Promise.all(promises).then(() => {
+        view.dispatch(tr);
+      });
+    }
+  }
+
+  private findAssetLinkMark(marks: Mark[]): Mark | undefined {
+    return marks.find((mark) => mark.type.name === MarkName.AssetLink && mark.attrs.href === '');
+  }
+
+  private fetchAndReplace(nodeAttrs: ResolveNodeType, onFetched: (url: string) => void): Promise<void> {
+    return this.options
+      .fetchUrl(nodeAttrs)
+      .then((url: string) => {
+        onFetched(url);
+      })
+      .catch((error) => {
+        console.error('Error fetching URL:', error);
+      });
+  }
+}

package/src/Extensions/ImageExtension/AssetImageExtension.spec.ts

@@ -0,0 +1,77 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('AssetImageExtension', () => {
+  it('Parses HTML content representing an asset image', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<img
+                  src="https://my-matrix.squiz.net/?a=this-is-actually-ignored"
+                  data-matrix-asset-id="123"
+                  data-matrix-identifier="matrix-api-identifier"
+                  data-matrix-domain="https://matrix-domain.squiz.net" />`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'assetImage',
+          attrs: {
+            matrixAssetId: '123',
+            matrixDomain: 'https://matrix-domain.squiz.net',
+            matrixIdentifier: 'matrix-api-identifier',
+            src: 'https://default-resource/',
+          },
+        },
+      ],
+    });
+  });
+
+  it('Resolves to a regular image if HTML content is missing some of the expected attributes', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: '<img src="https://my-matrix.squiz.net/?a=123" data-matrix-asset-id="123" />',
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'image',
+          attrs: expect.objectContaining({
+            src: 'https://my-matrix.squiz.net/?a=123',
+          }),
+        },
+      ],
+    });
+  });
+
+  it('Outputs expected HTML', async () => {
+    const { getHtmlContent } = await renderWithEditor(null, {
+      content: {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'assetImage',
+            attrs: {
+              matrixAssetId: '123',
+              matrixDomain: 'https://matrix-domain.squiz.net',
+              matrixIdentifier: 'matrix-api-identifier',
+            },
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toEqual(
+      '<img ' +
+        'src="https://default-resource/" ' +
+        'data-matrix-asset-id="123" ' +
+        'data-matrix-identifier="matrix-api-identifier" ' +
+        'data-matrix-domain="https://matrix-domain.squiz.net" ' +
+        'draggable="true">' +
+        '<img class="ProseMirror-separator" alt="">' +
+        '<br class="ProseMirror-trailingBreak">',
+    );
+  });
+});

package/src/Extensions/ImageExtension/AssetImageExtension.ts

@@ -0,0 +1,109 @@
+import {
+  ApplySchemaAttributes,
+  command,
+  extension,
+  ExtensionPriority,
+  ExtensionTag,
+  isElementDomNode,
+  NodeExtension,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  omitExtraAttributes,
+  CommandFunction,
+} from '@remirror/core';
+import { getTextSelection } from 'remirror';
+import { NodeName } from '../Extensions';
+
+export type AssetImageOptions = {
+  matrixDomain?: string;
+};
+
+export type AssetImageAttributes = {
+  matrixAssetId: string;
+  matrixIdentifier: string;
+  matrixDomain: string;
+  url: string;
+};
+
+@extension<AssetImageOptions>({
+  defaultOptions: {
+    matrixDomain: '',
+  },
+  defaultPriority: ExtensionPriority.High,
+})
+export class AssetImageExtension extends NodeExtension<AssetImageOptions> {
+  get name() {
+    return NodeName.AssetImage as const;
+  }
+
+  createTags() {
+    return [ExtensionTag.InlineNode, ExtensionTag.Media];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    return {
+      inline: true,
+      draggable: true,
+      selectable: true,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        matrixAssetId: {},
+        matrixIdentifier: {},
+        matrixDomain: { default: this.options.matrixDomain },
+        src: { default: '' },
+      },
+      parseDOM: [
+        {
+          tag: 'img[data-matrix-asset-id]',
+          getAttrs: (node) => {
+            if (!isElementDomNode(node)) {
+              return false;
+            }
+
+            const matrixAssetId = node.getAttribute('data-matrix-asset-id');
+            const matrixIdentifier = node.getAttribute('data-matrix-identifier');
+            const matrixDomain = node.getAttribute('data-matrix-domain');
+
+            if (!matrixAssetId || !matrixIdentifier || !matrixDomain) {
+              return false;
+            }
+
+            return {
+              ...extra.parse(node),
+              matrixAssetId,
+              matrixIdentifier,
+              matrixDomain,
+            };
+          },
+        },
+      ],
+      toDOM: (node) => {
+        const { matrixAssetId, matrixIdentifier, matrixDomain, src, ...rest } = omitExtraAttributes(node.attrs, extra);
+        return [
+          'img',
+          {
+            ...extra.dom(node),
+            ...rest,
+            src,
+            'data-matrix-asset-id': matrixAssetId,
+            'data-matrix-identifier': matrixIdentifier,
+            'data-matrix-domain': matrixDomain,
+          },
+        ];
+      },
+    };
+  }
+
+  @command()
+  insertAssetImage(attrs: AssetImageAttributes): CommandFunction {
+    return ({ tr, dispatch }) => {
+      const { from, to } = getTextSelection(tr.selection, tr.doc);
+      const node = this.type.create({ ...attrs, src: attrs.url });
+
+      dispatch?.(tr.replaceRangeWith(from, to, node));
+
+      return true;
+    };
+  }
+}