@squiz/formatted-text-editor 1.21.1-alpha.2 → 1.21.1-alpha.20

package/src/EditorToolbar/Tools/Redo/RedoButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useHelpers } from '@remirror/react';
 import { HistoryExtension } from 'remirror/extensions';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import RedoRoundedIcon from '@mui/icons-material/RedoRounded';
 
 const RedoButton = () => {
@@ -17,7 +17,7 @@ const RedoButton = () => {
   const enabled = redoDepth() > 0;
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={false}

package/src/EditorToolbar/Tools/TextAlign/CenterAlign/CenterAlignButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
 
 const CenterAlignButton = () => {
@@ -18,7 +18,7 @@ const CenterAlignButton = () => {
   const enabled = centerAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}

package/src/EditorToolbar/Tools/TextAlign/JustifyAlign/JustifyAlignButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify';
 
 const JustifyAlignButton = () => {
@@ -18,7 +18,7 @@ const JustifyAlignButton = () => {
   const enabled = justifyAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}

package/src/EditorToolbar/Tools/TextAlign/LeftAlign/LeftAlignButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
 
 const LeftAlignButton = () => {
@@ -18,7 +18,7 @@ const LeftAlignButton = () => {
   const enabled = leftAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}

package/src/EditorToolbar/Tools/TextAlign/RightAlign/RightAlignButton.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useChainedCommands } from '@remirror/react';
 import { NodeFormattingExtension } from '@remirror/extension-node-formatting';
-import ToolbarButton from '../../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../../ui/Button/Button';
 import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
 
 const RightAlignButton = () => {
@@ -18,7 +18,7 @@ const RightAlignButton = () => {
   const enabled = rightAlign.enabled();
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active}

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

@@ -14,6 +14,6 @@ describe('Underline button', () => {
     expect(screen.getByRole('button', { name: 'Underline (cmd+U)' }).classList.contains('squiz-fte-btn')).toBeTruthy();
     const underline = screen.getByRole('button', { name: 'Underline (cmd+U)' });
     fireEvent.click(underline);
-    expect(underline.classList.contains('is-active')).toBeTruthy();
+    expect(underline.classList.contains('squiz-fte-btn--is-active')).toBeTruthy();
   });
 });

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useActive, useChainedCommands } from '@remirror/react';
 import { UnderlineExtension } from '@remirror/extension-underline';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import FormatUnderlinedRoundedIcon from '@mui/icons-material/FormatUnderlinedRounded';
 
 const UnderlineButton = () => {
@@ -17,7 +17,7 @@ const UnderlineButton = () => {
   };
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={active.underline()}

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

@@ -1,7 +1,9 @@
 import '@testing-library/jest-dom';
-import { render, screen, fireEvent } from '@testing-library/react';
+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', () => {
@@ -46,4 +48,23 @@ describe('Undo button', () => {
     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 (cmd+Z)' }));
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [{ type: 'text', text: 'Initial content...' }],
+    });
+  });
 });

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useCommands, useHelpers } from '@remirror/react';
 import { HistoryExtension } from 'remirror/extensions';
-import ToolbarButton from '../../../ui/ToolbarButton/ToolbarButton';
+import Button from '../../../ui/Button/Button';
 import UndoRoundedIcon from '@mui/icons-material/UndoRounded';
 
 const UndoButton = () => {
@@ -17,7 +17,7 @@ const UndoButton = () => {
   const enabled = undoDepth() > 0;
 
   return (
-    <ToolbarButton
+    <Button
       handleOnClick={handleSelect}
       isDisabled={!enabled}
       isActive={false}

package/src/EditorToolbar/_floating-toolbar.scss

@@ -1,4 +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;
+
+  .editor-divider {
+    @apply my-0;
+  }
 }

package/src/EditorToolbar/_toolbar.scss

@@ -7,10 +7,16 @@
   > *:not(:first-child, .editor-divider) {
     margin: 0 0 0 2px;
   }
-}
 
-.editor-divider {
-  @apply -my-1 mx-1 border;
-  margin-right: 2px;
-  height: auto;
+  .editor-divider {
+    @apply -my-1 mx-1 border;
+    margin-right: 2px;
+    height: auto;
+  }
+  .squiz-fte-btn {
+    @apply p-1;
+    ~ .squiz-fte-btn {
+      margin-left: 2px;
+    }
+  }
 }

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

@@ -7,23 +7,38 @@ import {
   UnderlineExtension,
   HistoryExtension,
 } 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';
 
-export const Extensions = () => [
-  new BoldExtension(),
-  new HeadingExtension(),
-  new ItalicExtension(),
-  new NodeFormattingExtension(),
-  new ParagraphExtension(),
-  new PreformattedExtension(),
-  new UnderlineExtension(),
-  new HistoryExtension(),
-  new LinkExtension({
-    supportedTargets: [
-      // '_self' is the browser default and will be used when encountering a link with a
-      // different target is encountered.
-      '_blank',
-    ],
-  }),
-];
+export enum MarkName {
+  Link = 'link',
+  AssetLink = 'assetLink',
+}
+
+export const createExtensions = (context: EditorContextOptions) => {
+  return (): Extension[] => {
+    return [
+      new CommandsExtension(),
+      new BoldExtension(),
+      new HeadingExtension(),
+      new ItalicExtension(),
+      new NodeFormattingExtension({ indents: [] }),
+      new ParagraphExtension(),
+      new PreformattedExtension(),
+      new UnderlineExtension(),
+      new HistoryExtension(),
+      new ImageExtension(),
+      new ImageExtension({ preferPastedTextContent: false }),
+      new LinkExtension(),
+      new AssetLinkExtension({
+        matrixIdentifier: context.matrix.matrixIdentifier,
+        matrixDomain: context.matrix.matrixDomain,
+      }),
+    ];
+  };
+};

package/src/Extensions/ImageExtension/ImageExtension.ts

@@ -0,0 +1,112 @@
+import { ImageExtension as RemirrorImageExtension } from 'remirror/extensions';
+import { PasteRule } from 'prosemirror-paste-rules';
+import {
+  isElementDomNode,
+  omitExtraAttributes,
+  ApplySchemaAttributes,
+  NodeSpecOverride,
+  NodeExtensionSpec,
+  getTextSelection,
+  PrimitiveSelection,
+} from '@remirror/core';
+import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
+import { CommandFunction } from '@remirror/pm';
+
+/**
+ * Get the width and the height of the image.
+ */
+function getDimensions(element: HTMLElement) {
+  let { width, height } = element.style;
+  width = width || element.getAttribute('width') || '';
+  height = height || element.getAttribute('height') || '';
+
+  return { width, height };
+}
+
+/**
+ * Retrieve attributes from the dom for the image extension.
+ */
+function getImageAttributes({ element, parse }: { element: HTMLElement; parse: ApplySchemaAttributes['parse'] }) {
+  const { width, height } = getDimensions(element);
+
+  return {
+    ...parse(element),
+    alt: element.getAttribute('alt') ?? '',
+    height: Number.parseInt(height || '0', 10) || null,
+    src: element.getAttribute('src') ?? null,
+    title: element.getAttribute('title') ?? '',
+    width: Number.parseInt(width || '0', 10) || null,
+    fileName: element.getAttribute('data-file-name') ?? null,
+  };
+}
+
+export class ImageExtension extends RemirrorImageExtension {
+  createPasteRules(): PasteRule[] {
+    return [
+      {
+        type: 'file',
+        regexp: /image/i,
+        fileHandler: (): boolean => {
+          return false;
+        },
+      },
+    ];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    const { preferPastedTextContent } = this.options;
+    return {
+      inline: true,
+      draggable: true,
+      selectable: true,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        alt: { default: '' },
+        crop: { default: null },
+        height: { default: null },
+        width: { default: null },
+        rotate: { default: null },
+        src: { default: null },
+        title: { default: '' },
+        fileName: { default: null },
+
+        resizable: { default: false },
+      },
+      parseDOM: [
+        {
+          tag: 'img[src]',
+          getAttrs: (element) => {
+            if (isElementDomNode(element)) {
+              const attrs = getImageAttributes({ element, parse: extra.parse });
+
+              if (preferPastedTextContent && attrs.src?.startsWith('file:///')) {
+                return false;
+              }
+
+              return attrs;
+            }
+
+            return {};
+          },
+        },
+        ...(override.parseDOM ?? []),
+      ],
+      toDOM: (node) => {
+        const attrs = omitExtraAttributes(node.attrs, extra);
+        return ['img', { ...extra.dom(node), ...attrs }];
+      },
+    };
+  }
+
+  insertImage(attributes: ImageAttributes, selection?: PrimitiveSelection): CommandFunction {
+    return ({ tr, dispatch }) => {
+      const { from, to } = getTextSelection(selection ?? tr.selection, tr.doc);
+      const node = this.type.create(attributes);
+
+      dispatch?.(tr.replaceRangeWith(from, to, node));
+
+      return true;
+    };
+  }
+}

package/src/Extensions/LinkExtension/AssetLinkExtension.spec.ts

@@ -0,0 +1,104 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('AssetLinkExtension', () => {
+  it('Parses HTML content representing an asset link', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<a href="https://my-matrix.squiz.net/?a=this-is-actually-ignored"
+                  target="_self"
+                  data-matrix-asset-id="123"
+                  data-matrix-identifier="matrix-api-identifier"
+                  data-matrix-domain="https://matrix-domain.squiz.net">
+                  Hello!
+                </a>`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Hello!',
+          marks: [
+            {
+              type: 'assetLink',
+              attrs: {
+                matrixAssetId: '123',
+                matrixDomain: 'https://matrix-domain.squiz.net',
+                matrixIdentifier: 'matrix-api-identifier',
+                target: '_self',
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('Resolves to a regular link if HTML content is missing some of the expected attributes', async () => {
+    const { getJsonContent } = await renderWithEditor(null, {
+      content: `<a href="https://my-matrix.squiz.net/?a=123"
+                  target="_self"
+                  data-matrix-asset-id="123">
+                  Hello!
+                </a>`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Hello!',
+          marks: [
+            {
+              type: 'link',
+              attrs: {
+                href: 'https://my-matrix.squiz.net/?a=123',
+                target: '_self',
+                title: null,
+              },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('Outputs expected HTML', async () => {
+    const { getHtmlContent } = await renderWithEditor(null, {
+      content: {
+        type: 'paragraph',
+        content: [
+          {
+            type: 'text',
+            text: 'Hello!',
+            marks: [
+              {
+                type: 'assetLink',
+                attrs: {
+                  matrixAssetId: '123',
+                  matrixDomain: 'https://matrix-domain.squiz.net',
+                  matrixIdentifier: 'matrix-api-identifier',
+                  target: '_blank',
+                },
+              },
+            ],
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toEqual(
+      '<a rel="noopener noreferrer nofollow" ' +
+        'href="/?a=123" ' +
+        'target="_blank" ' +
+        'data-matrix-asset-id="123" ' +
+        'data-matrix-identifier="matrix-api-identifier" ' +
+        'data-matrix-domain="https://matrix-domain.squiz.net">' +
+        'Hello!' +
+        '</a>',
+    );
+  });
+});

package/src/Extensions/LinkExtension/AssetLinkExtension.ts

@@ -0,0 +1,128 @@
+import {
+  ApplySchemaAttributes,
+  ExtensionPriority,
+  FromToProps,
+  isElementDomNode,
+  MarkExtensionSpec,
+  MarkSpecOverride,
+} from 'remirror';
+import { command, CommandFunction, extension, MarkExtension, omitExtraAttributes, removeMark } from '@remirror/core';
+import { LinkTarget, validateTarget } from './common';
+import { CommandsExtension } from '../CommandsExtension/CommandsExtension';
+import { MarkName } from '../Extensions';
+
+export type AssetLinkAttributes = {
+  matrixAssetId: string;
+  matrixIdentifier: string;
+  matrixDomain: string;
+  target: LinkTarget;
+};
+
+export type AssetLinkOptions = {
+  matrixIdentifier?: string;
+  matrixDomain?: string;
+  defaultTarget?: LinkTarget;
+  supportedTargets?: LinkTarget[];
+};
+
+export type UpdateAssetLinkProps = {
+  text: string;
+  attrs: Partial<AssetLinkAttributes>;
+  range: FromToProps;
+};
+
+@extension<AssetLinkOptions>({
+  defaultOptions: {
+    matrixIdentifier: '',
+    matrixDomain: '',
+    defaultTarget: LinkTarget.Self,
+    supportedTargets: [LinkTarget.Self, LinkTarget.Blank],
+  },
+  defaultPriority: ExtensionPriority.High,
+})
+export class AssetLinkExtension extends MarkExtension<AssetLinkOptions> {
+  get name(): string {
+    return MarkName.AssetLink;
+  }
+
+  createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec {
+    return {
+      inclusive: false,
+      excludes: 'link',
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        matrixAssetId: {},
+        matrixIdentifier: { default: this.options.matrixIdentifier },
+        matrixDomain: { default: this.options.matrixDomain },
+        target: { default: this.options.defaultTarget },
+      },
+      parseDOM: [
+        {
+          tag: 'a[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,
+              target: validateTarget(
+                node.getAttribute('target'),
+                this.options.supportedTargets,
+                this.options.defaultTarget,
+              ),
+            };
+          },
+        },
+      ],
+      toDOM: (node) => {
+        const { matrixAssetId, matrixIdentifier, matrixDomain, target, ...rest } = omitExtraAttributes(
+          node.attrs,
+          extra,
+        );
+        const rel = 'noopener noreferrer nofollow';
+        const attrs = {
+          ...extra.dom(node),
+          ...rest,
+          rel,
+          // TODO: this won't be acceptable if/when we get to rendering outside of Matrix.
+          href: `/?a=${matrixAssetId}`,
+          target: validateTarget(target, this.options.supportedTargets, this.options.defaultTarget),
+          'data-matrix-asset-id': matrixAssetId,
+          'data-matrix-identifier': matrixIdentifier,
+          'data-matrix-domain': matrixDomain,
+        };
+
+        return ['a', attrs, 0];
+      },
+    };
+  }
+
+  @command()
+  updateAssetLink({ text, attrs, range }: UpdateAssetLinkProps): CommandFunction {
+    return this.store.getExtension(CommandsExtension).updateMark({
+      attrs,
+      text,
+      range,
+      mark: this.type,
+      removeMark: !attrs.matrixAssetId,
+    });
+  }
+
+  @command()
+  removeAssetLink(): CommandFunction {
+    return removeMark({ type: this.type });
+  }
+}