@squiz/formatted-text-editor 1.21.1-alpha.4 → 1.21.1-alpha.41

package/src/EditorToolbar/Tools/Link/LinkButton.spec.tsx

@@ -37,7 +37,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.squiz.net/link-button', target: '_blank', title: 'Link title' },
+              attrs: { href: 'https://www.squiz.net/link-button', target: '_blank', title: 'Link title' },
             },
           ],
         },
@@ -75,7 +75,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.example.org/updated-link', target: null, title: null },
+              attrs: { href: 'https://www.example.org/updated-link', target: '_self', title: null },
             },
           ],
         },
@@ -134,25 +134,7 @@ describe('LinkButton', () => {
     });
   });
 
-  it.each([
-    ['Link fully selected', 1, 12, 'Sample link'],
-    ['Link partially selected', 2, 4, 'Sample link'],
-    ['Link partially selected along with other content', 8, 15, 'Sample link wi'],
-  ])(
-    'Expands selection when a link is partially selected - %s',
-    async (description: string, from: number, to: number, expectedSelection: string) => {
-      const { editor, getSelectedText } = await renderWithEditor(<LinkButton />, {
-        content: '<a href="https://www.example.org/my-link">Sample link</a> <strong>with</strong> some other content.',
-      });
-
-      await act(() => editor.selectText({ from, to }));
-      await openModal();
-
-      expect(getSelectedText()).toBe(expectedSelection);
-    },
-  );
-
-  it('Updates full selection when it is expanded from what was initially selected', async () => {
+  it('Updates unselected part of link when link is partially selected', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
       content: '<a href="https://www.example.org/my-link">Sample link</a> <strong>with</strong> some other content.',
     });
@@ -179,7 +161,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
             },
           ],
         },
@@ -189,7 +171,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
             },
             { type: 'bold' },
           ],
@@ -200,7 +182,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
             },
           ],
         },
@@ -237,7 +219,7 @@ describe('LinkButton', () => {
           marks: [
             {
               type: 'link',
-              attrs: { auto: false, href: 'https://www.example.org/my-link', target: null, title: null },
+              attrs: { href: 'https://www.example.org/my-link', target: '_self', title: null },
             },
           ],
         },
@@ -252,7 +234,7 @@ describe('LinkButton', () => {
     });
 
     // jump to the middle of the link.
-    await act(() => editor.selectText(5));
+    await act(() => editor.selectText({ from: 1, to: 12 }));
 
     // press the keyboard shortcut.
     fireEvent.keyDown(elements.editor, { key: 'k', ctrlKey: true });
@@ -274,4 +256,112 @@ describe('LinkButton', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
     expect(modalHeading).not.toBeInTheDocument();
   });
+
+  it('Add a new asset link', async () => {
+    const matrixIdentifier = 'matrix-api-identifier';
+    const matrixDomain = 'https://my-matrix.squiz.net';
+    const { getJsonContent } = await renderWithEditor(<LinkButton />, {
+      context: {
+        matrix: {
+          matrixIdentifier,
+          matrixDomain,
+          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'physical_file' }),
+        },
+      },
+    });
+
+    await openModal();
+    select(screen.getByLabelText('Type'), 'Link to asset');
+    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '123' } });
+    fireEvent.change(screen.getByLabelText('Text'), { target: { value: 'Link text' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Link text',
+          marks: [
+            {
+              type: 'assetLink',
+              attrs: { matrixAssetId: '123', target: '_self', matrixDomain, matrixIdentifier },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('Updates an existing link to be an asset link', async () => {
+    const matrixIdentifier = 'matrix-api-identifier';
+    const matrixDomain = 'https://my-matrix.squiz.net';
+    const { editor, getJsonContent } = await renderWithEditor(<LinkButton />, {
+      content:
+        '<a href="https://www.example.org/my-link">Sample link</a> with ' +
+        '<a href="https://www.example.org/another-link">another link</a>',
+      context: {
+        matrix: {
+          matrixIdentifier,
+          matrixDomain,
+          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'physical_file' }),
+        },
+      },
+    });
+
+    await act(() => editor.selectText(5));
+
+    await openModal();
+    select(screen.getByLabelText('Type'), 'Link to asset');
+    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '123' } });
+    select(screen.getByLabelText('Target'), 'New window');
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'text',
+          text: 'Sample link',
+          marks: [
+            {
+              type: 'assetLink',
+              attrs: { matrixAssetId: '123', target: '_blank', matrixDomain, matrixIdentifier },
+            },
+          ],
+        },
+        { type: 'text', text: ' with ' },
+        {
+          type: 'text',
+          text: 'another link',
+          marks: [
+            {
+              type: 'link',
+              attrs: { href: 'https://www.example.org/another-link', target: '_self', title: null },
+            },
+          ],
+        },
+      ],
+    });
+  });
+
+  it('Shows an error if an invalid asset ID is provided', async () => {
+    const resolveMatrixAsset = jest.fn(() => Promise.resolve(null));
+
+    await renderWithEditor(<LinkButton />, { context: { matrix: { resolveMatrixAsset } } });
+
+    await openModal();
+    select(screen.getByLabelText('Type'), 'Link to asset');
+    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: 'invalid-asset-id' } });
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(screen.getByText('Invalid asset ID')).toBeInTheDocument();
+    expect(resolveMatrixAsset).toHaveBeenCalledWith('invalid-asset-id');
+  });
 });

package/src/EditorToolbar/Tools/Link/LinkButton.tsx

@@ -3,8 +3,12 @@ import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
 import LinkModal from './LinkModal';
 import { LinkFormData } from './Form/LinkForm';
 import Button from '../../../ui/Button/Button';
-import { useActive, useCommands, useExtensionEvent } from '@remirror/react';
+import { useActive, useCommands, useKeymap } from '@remirror/react';
 import { LinkExtension } from '../../../Extensions/LinkExtension/LinkExtension';
+import { CommandsExtension } from '../../../Extensions/CommandsExtension/CommandsExtension';
+import { AssetLinkExtension } from '../../../Extensions/LinkExtension/AssetLinkExtension';
+import { MarkName } from '../../../Extensions/Extensions';
+import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
 
 type LinkButtonProps = {
   inPopover?: boolean;
@@ -12,41 +16,46 @@ type LinkButtonProps = {
 
 const LinkButton = ({ inPopover = false }: LinkButtonProps) => {
   const [showModal, setShowModal] = useState(false);
-  const { selectLink, updateLink } = useCommands<LinkExtension>();
-  const active = useActive<LinkExtension>();
+  const { updateLink, updateAssetLink } = useCommands<AssetLinkExtension | LinkExtension | CommandsExtension>();
+  const active = useActive<LinkExtension | AssetLinkExtension | ImageExtension>();
+  // If the image tool is active, disable the link tool as they shouldn't work at the same time
+  const disabled = active.image();
   const handleClick = () => {
     if (!showModal) {
-      selectLink();
-
-      // form element are uncontrolled, let the event loop run to
-      // update the selected text in state before showing the modal.
-      requestAnimationFrame(() => {
-        setShowModal(true);
-      });
+      setShowModal(true);
     }
   };
+  const handleShortcut = useCallback(() => {
+    handleClick();
+    // Prevent other key handlers being run
+    return true;
+  }, []);
+
   const handleSubmit = (data: LinkFormData) => {
-    updateLink(data);
+    if (data.linkType === MarkName.AssetLink) {
+      updateAssetLink({ text: data.text, attrs: data.assetLink, range: data.range });
+    } else {
+      updateLink({ text: data.text, attrs: data.link, range: data.range });
+    }
+
     setShowModal(false);
   };
 
+  // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+  // being double handled.
   if (!inPopover) {
-    // when Ctrl+K is pressed show the modal, only registered in the toolbar button instance to avoid the key press
-    // being double handled.
-    useExtensionEvent(
-      LinkExtension,
-      'onShortcut',
-      useCallback(() => handleClick(), []),
-    );
+    // disable the shortcut if the button is disabled
+    useKeymap('Mod-k', disabled ? () => true : handleShortcut);
   }
 
   return (
     <>
       <Button
         handleOnClick={handleClick}
-        isActive={active.link()}
+        isActive={active.link() || active.assetLink()}
         icon={<InsertLinkRoundedIcon />}
         label="Link (cmd+K)"
+        isDisabled={disabled}
       />
       {showModal && <LinkModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}
     </>

package/src/EditorToolbar/Tools/Link/LinkModal.tsx

@@ -1,9 +1,10 @@
-import { getMarkRanges } from 'remirror';
-import LinkForm, { LinkFormData } from './Form/LinkForm';
+import { LinkForm, LinkFormData } from './Form/LinkForm';
 import React from 'react';
-import { useRemirrorContext, useCurrentSelection } from '@remirror/react';
+import { useRemirrorContext } from '@remirror/react';
 import FormModal from '../../../ui/Modal/FormModal';
 import { SubmitHandler } from 'react-hook-form';
+import { useExpandedSelection } from '../../../hooks';
+import { MarkName } from '../../../Extensions/Extensions';
 
 type LinkModalProps = {
   onCancel: () => void;
@@ -15,13 +16,19 @@ const LinkModal = ({ onCancel, onSubmit }: LinkModalProps) => {
     helpers,
     view: { state },
   } = useRemirrorContext();
-  const selection = useCurrentSelection();
-  const currentLink = getMarkRanges(selection, 'link')[0];
+  const { selection, marks } = useExpandedSelection([MarkName.Link, MarkName.AssetLink]);
   const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
+  const data = {
+    linkType: marks[0]?.type?.name === MarkName.AssetLink ? MarkName.AssetLink : MarkName.Link,
+    text: selectedText,
+    link: marks.find((mark) => mark.type.name === 'link')?.attrs || {},
+    assetLink: marks.find((mark) => mark.type.name === MarkName.AssetLink)?.attrs || {},
+    range: { from: selection.from, to: selection.to },
+  };
 
   return (
     <FormModal title="Link" onCancel={onCancel}>
-      <LinkForm data={{ ...currentLink?.mark.attrs, text: selectedText }} onSubmit={onSubmit} />
+      <LinkForm data={data} onSubmit={onSubmit} />
     </FormModal>
   );
 };

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.spec.tsx

@@ -7,40 +7,41 @@ import RemoveLinkButton from './RemoveLinkButton';
 describe('RemoveLinkButton', () => {
   it('Removes a link', async () => {
     const { editor, getJsonContent } = await renderWithEditor(<RemoveLinkButton />, {
-      content:
-        '<a href="https://www.example.org/my-link">Sample link</a> with some other content and ' +
-        '<a href="https://www.example.org/another-link">another link</a>.',
+      context: { matrix: { matrixDomain: 'my-matrix.squiz.net' } },
+      content: {
+        type: 'doc',
+        content: [
+          {
+            type: 'paragraph',
+            content: [
+              {
+                type: 'text',
+                text: 'Sample link',
+                marks: [{ type: 'assetLink', attrs: { matrixAssetId: '123', target: '_blank' } }],
+              },
+              { type: 'text', text: ' with ' },
+              {
+                type: 'text',
+                text: 'another link',
+                marks: [{ type: 'link', attrs: { href: 'https://www.example.org/another-link', target: '_self' } }],
+              },
+            ],
+          },
+        ],
+      },
     });
 
-    // move the cursor to inside of the link.
-    await act(() => editor.selectText(5));
+    // select all of the text.
+    await act(() => editor.selectText('all'));
 
-    // remove the link.
+    // remove the links.
     fireEvent.click(screen.getByRole('button', { name: 'Remove link' }));
 
-    // make sure the link has been removed.
+    // make sure both types of link have been removed.
     expect(getJsonContent()).toEqual({
       type: 'paragraph',
       attrs: expect.any(Object),
-      content: [
-        { type: 'text', text: 'Sample link with some other content and ' },
-        {
-          type: 'text',
-          text: 'another link',
-          marks: [
-            {
-              type: 'link',
-              attrs: {
-                auto: false,
-                href: 'https://www.example.org/another-link',
-                target: null,
-                title: null,
-              },
-            },
-          ],
-        },
-        { type: 'text', text: '.' },
-      ],
+      content: [{ type: 'text', text: 'Sample link with another link' }],
     });
   });
 });

package/src/EditorToolbar/Tools/Link/RemoveLinkButton.tsx

@@ -1,23 +1,15 @@
 import React from 'react';
-import { useRemirrorContext, useChainedCommands } from '@remirror/react';
+import { useChainedCommands } from '@remirror/react';
 import Button from '../../../ui/Button/Button';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
 
 const RemoveLinkButton = () => {
-  const { commands } = useRemirrorContext({ autoUpdate: true });
   const chain = useChainedCommands();
-  const enabled = commands.removeLink.enabled();
-  const handleClick = () => {
-    if (enabled) {
-      chain.removeLink().focus().run();
-    }
-  };
 
   return (
     <Button
-      handleOnClick={handleClick}
+      handleOnClick={() => chain.removeLink().removeAssetLink().focus().run()}
       isActive={false}
-      isDisabled={!enabled}
       icon={<LinkOffIcon />}
       label="Remove link"
     />

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/_floating-toolbar.scss

@@ -1,10 +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;
-  .squiz-fte-btn {
-    @apply p-1;
-    ~ .squiz-fte-btn {
-      margin-left: 2px;
-    }
+
+  .editor-divider {
+    @apply my-0;
   }
 }

package/src/EditorToolbar/_toolbar.scss

@@ -14,7 +14,7 @@
     height: auto;
   }
   .squiz-fte-btn {
-    @apply p-1;
+    @apply p-1 font-bold;
     ~ .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,25 +7,49 @@ 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';
+import { AssetImageExtension } from './ImageExtension/AssetImageExtension';
 
-export const Extensions = () => [
-  new BoldExtension(),
-  new HeadingExtension(),
-  new ItalicExtension(),
-  new NodeFormattingExtension(),
-  new ParagraphExtension(),
-  new PreformattedExtension(),
-  new UnderlineExtension(),
-  new HistoryExtension(),
-  new ImageExtension(),
-  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 NodeName {
+  Image = 'image',
+  AssetImage = 'assetImage',
+  Text = 'text',
+}
+
+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 AssetImageExtension({
+        matrixIdentifier: context.matrix.matrixIdentifier,
+        matrixDomain: context.matrix.matrixDomain,
+      }),
+      new LinkExtension(),
+      new AssetLinkExtension({
+        matrixIdentifier: context.matrix.matrixIdentifier,
+        matrixDomain: context.matrix.matrixDomain,
+      }),
+    ];
+  };
+};

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

@@ -0,0 +1,76 @@
+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',
+          },
+        },
+      ],
+    });
+  });
+
+  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://matrix-domain.squiz.net/_nocache?a=123" ' +
+        '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">',
+    );
+  });
+});