@squiz/formatted-text-editor 1.21.1-alpha.7 → 1.22.0

package/src/EditorToolbar/Tools/Image/ImageButton.spec.tsx

@@ -1,8 +1,12 @@
 import '@testing-library/jest-dom';
-import { screen, fireEvent, waitForElementToBeRemoved, act } from '@testing-library/react';
+import { screen, fireEvent, waitForElementToBeRemoved, act, waitFor } from '@testing-library/react';
+import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
-import { renderWithEditor } from '../../../../tests';
+import { renderWithEditor, select } from '../../../../tests';
 import ImageButton from './ImageButton';
+import { getImageSize } from 'react-image-size';
+
+jest.mock('react-image-size');
 
 describe('ImageButton', () => {
   const openModal = async () => {
@@ -10,6 +14,10 @@ describe('ImageButton', () => {
     await screen.findByRole('button', { name: 'Apply' });
   };
 
+  beforeEach(() => {
+    (getImageSize as jest.Mock).mockResolvedValue({ width: 2, height: 2 });
+  });
+
   it('Opens the modal when clicking on the image button', async () => {
     await renderWithEditor(<ImageButton />);
 
@@ -64,6 +72,94 @@ describe('ImageButton', () => {
     });
   });
 
+  it('Updates the attributes of an existing image', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: 'Some <img src="https://httpcats.com/529.jpg" alt="hi" /> nonsense',
+    });
+
+    await act(() => editor.selectText(new NodeSelection(editor.state.doc.resolve(6))));
+
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: 'https://httpcats.com/303.jpg' } });
+    fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: 'Updated cats!' } });
+
+    // wait for the new image dimensions to be calculated
+    await waitFor(() => expect(screen.getByLabelText('Height')).toHaveValue(2));
+
+    // verify the content matches what was initially set prior to applying
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'Some ',
+          type: 'text',
+        },
+        {
+          type: 'image',
+          attrs: {
+            alt: 'hi',
+            crop: null,
+            height: null,
+            width: null,
+            rotate: null,
+            src: 'https://httpcats.com/529.jpg',
+            title: '',
+            fileName: null,
+            resizable: false,
+          },
+        },
+        { type: 'text', text: ' nonsense' },
+      ],
+    });
+
+    // apply the changes
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    // asset the content has been updated
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'Some ',
+          type: 'text',
+        },
+        {
+          type: 'image',
+          attrs: {
+            alt: 'Updated cats!',
+            crop: null,
+            height: 2,
+            width: 2,
+            rotate: null,
+            src: 'https://httpcats.com/303.jpg',
+            title: '',
+            fileName: null,
+            resizable: false,
+          },
+        },
+        { type: 'text', text: ' nonsense' },
+      ],
+    });
+  });
+
+  it('Removes the image when content is cleared (backspaced)', async () => {
+    const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: '<img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif"/>',
+    });
+
+    await act(() => editor.selectText(10));
+    await act(() => editor.backspace(1));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+    });
+  });
+
   it('Closes the modal when clicking on the cancel button', async () => {
     await renderWithEditor(<ImageButton />);
 
@@ -76,4 +172,156 @@ describe('ImageButton', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Cancel' }));
     expect(modalHeading).not.toBeInTheDocument();
   });
+
+  it('Adds a new image with no source field', async () => {
+    await renderWithEditor(<ImageButton />, { content: 'Some nonsense content here' });
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Source is required')).toBeInTheDocument();
+  });
+
+  it('Adds a new image with data URI in source field', async () => {
+    await renderWithEditor(<ImageButton />);
+
+    const dataUri = 'data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==';
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: dataUri } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Must not be a data URI')).toBeInTheDocument();
+  });
+
+  it('Adds a new image with a non-image URL in source field', async () => {
+    (getImageSize as jest.Mock).mockRejectedValue('error: not an image');
+
+    await renderWithEditor(<ImageButton />);
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: 'https://not-an-image.com/not-an-image' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Must be a valid image URL')).toBeInTheDocument();
+  });
+
+  it('Adds a new image with no alt text', async () => {
+    await renderWithEditor(<ImageButton />, { content: 'Some tacos here' });
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Source'), { target: { value: 'https://httpcats.com/529.jpg' } });
+    fireEvent.change(screen.getByLabelText('Alternative description'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Alternative description is required')).toBeInTheDocument();
+  });
+
+  it('Adds a new image with no width or height text', async () => {
+    await renderWithEditor(<ImageButton />, { content: 'Some beautiful content here' });
+
+    // open the modal and add an image.
+    await openModal();
+    fireEvent.change(screen.getByLabelText('Width'), { target: { value: '' } });
+    fireEvent.change(screen.getByLabelText('Height'), { target: { value: '' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+    expect(await screen.findByText('Width is required')).toBeInTheDocument();
+    expect(await screen.findByText('Height is required')).toBeInTheDocument();
+  });
+
+  it('Adds a new asset image', async () => {
+    const matrixIdentifier = 'matrix-api-identifier';
+    const matrixDomain = 'https://my-matrix.squiz.net';
+    const { getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: 'Some nonsense content here',
+      context: {
+        matrix: {
+          matrixIdentifier,
+          matrixDomain,
+          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'image' }),
+        },
+      },
+    });
+
+    // open the modal and add an image.
+    await openModal();
+    select(screen.getByLabelText('Type'), 'Asset image');
+    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '100' } });
+    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: 'assetImage',
+          attrs: { matrixAssetId: '100', matrixIdentifier, matrixDomain },
+        },
+        { type: 'text', text: 'Some nonsense content here' },
+      ],
+    });
+  });
+
+  it('Updates the attributes of an existing asset image', async () => {
+    const matrixIdentifier = 'matrix-api-identifier';
+    const matrixDomain = 'https://my-matrix.squiz.net';
+    const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: 'Some <img src="https://httpcats.com/529.jpg" alt="hi" /> nonsense',
+      context: {
+        matrix: {
+          matrixIdentifier,
+          matrixDomain,
+          resolveMatrixAsset: () => Promise.resolve({ id: '100', type: 'image' }),
+        },
+      },
+    });
+
+    await act(() => editor.selectText(new NodeSelection(editor.state.doc.resolve(6))));
+
+    await openModal();
+    select(screen.getByLabelText('Type'), 'Asset image');
+    fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: '100' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Apply' }));
+
+    await waitForElementToBeRemoved(() => screen.getByRole('button', { name: 'Apply' }));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'Some ',
+          type: 'text',
+        },
+        {
+          type: 'assetImage',
+          attrs: { matrixAssetId: '100', matrixIdentifier, matrixDomain },
+        },
+        { type: 'text', text: ' nonsense' },
+      ],
+    });
+  });
+
+  it.each([
+    ['Asset ID not provided', '', null, 'Asset ID is required'],
+    ['Asset does not exist', '100', null, 'Asset ID is invalid or not an image'],
+    ['Asset is not an image', '100', { id: 100, type: 'physical_file' }, 'Asset ID is invalid or not an image'],
+  ])(
+    'Shows an error if an invalid asset ID is provided - %s',
+    async (description: string, assetId: string, asset: any, expectedError: string) => {
+      const resolveMatrixAsset = jest.fn(() => Promise.resolve(asset));
+
+      await renderWithEditor(<ImageButton />, { context: { matrix: { resolveMatrixAsset } } });
+
+      await openModal();
+      select(screen.getByLabelText('Type'), 'Asset image');
+      fireEvent.change(screen.getByLabelText('Asset ID'), { target: { value: assetId } });
+      await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+      expect(screen.getByText(expectedError)).toBeInTheDocument();
+    },
+  );
 });

package/src/EditorToolbar/Tools/Image/ImageButton.tsx

@@ -1,29 +1,37 @@
-import React, { useState, useCallback } from 'react';
+import React, { useCallback, useState } from 'react';
+import { useActive, useCommands, useCurrentSelection, useKeymap } from '@remirror/react';
 import ImageRoundedIcon from '@mui/icons-material/ImageRounded';
 import ImageModal from './ImageModal';
 import { ImageFormData } from './Form/ImageForm';
 import Button from '../../../ui/Button/Button';
-import { useCommands, useKeymap } from '@remirror/react';
+import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
+import { NodeName } from '../../../Extensions/Extensions';
+import { AssetImageExtension } from '../../../Extensions/ImageExtension/AssetImageExtension';
 
-const ImageButton = () => {
+type ImageButtonProps = {
+  inPopover?: boolean;
+};
+
+const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
   const [showModal, setShowModal] = useState(false);
-  const { insertImage } = useCommands();
-  const active = showModal;
+  const { insertImage, insertAssetImage } = useCommands<ImageExtension | AssetImageExtension>();
+  const active = useActive<ImageExtension | AssetImageExtension>();
+  const selection = useCurrentSelection();
+  // if the active selection is not an image, disable the button as it means it will be text
+  const disabled = !selection.empty && !active.image() && !active.assetImage();
 
   const handleClick = () => {
     if (!showModal) {
-      // 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 insertImageFromData = (data: ImageFormData) => {
-    const { src, alt, width, height } = data;
-    if (src) {
-      insertImage({ src, alt, width, height });
+    const { imageType, image, assetImage } = data;
+    if (imageType === NodeName.Image) {
+      insertImage(image);
+    } else {
+      insertAssetImage(assetImage);
     }
   };
 
@@ -38,16 +46,21 @@ const ImageButton = () => {
     return true;
   }, []);
 
-  useKeymap('Mod-l', handleShortcut);
+  // when Ctrl+l is pressed show the modal, only registered in the toolbar button instance to avoid the key press
+  // being double handled.
+  if (!inPopover) {
+    // disable the shortcut if the button is disabled
+    useKeymap('Mod-l', disabled ? () => false : handleShortcut);
+  }
 
   return (
     <>
       <Button
         handleOnClick={handleClick}
-        isActive={active}
+        isActive={active.image() || active.assetImage()}
         icon={<ImageRoundedIcon />}
         label="Image (cmd+L)"
-        isDisabled={false}
+        isDisabled={disabled}
       />
       {showModal && <ImageModal onCancel={() => setShowModal(false)} onSubmit={handleSubmit} />}
     </>

package/src/EditorToolbar/Tools/Image/ImageModal.spec.tsx

@@ -1,13 +1,18 @@
 import '@testing-library/jest-dom';
-import { screen, fireEvent } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
 import React from 'react';
 import { renderWithEditor } from '../../../../tests';
 import ImageModal from './ImageModal';
+import { getImageSize } from 'react-image-size';
 
+jest.mock('react-image-size');
+beforeEach(() => {
+  (getImageSize as jest.Mock).mockResolvedValue({ width: 0, height: 0 });
+});
 const mockSubmitFunction = jest.fn();
 const mockCancelFunction = jest.fn();
-const setup = () => {
-  const utils = renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+const setup = async () => {
+  const utils = await renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
   const sourceInput = screen.getByRole('textbox', { name: /source/i }) as HTMLInputElement;
   const altInput = screen.getByRole('textbox', { name: /alt/i }) as HTMLInputElement;
   const widthInput = screen.getByRole('spinbutton', { name: /Width/i }) as HTMLInputElement;
@@ -29,32 +34,42 @@ describe('ImageModal', () => {
   });
 
   it('Populates the source field when a source is supplied', async () => {
-    const { sourceInput } = setup();
+    const { sourceInput } = await setup();
     fireEvent.change(sourceInput, { target: { value: 'https://httpcats.com/302.jpg' } });
-    expect(sourceInput.value).toBe('https://httpcats.com/302.jpg');
+    await waitFor(() => {
+      expect(sourceInput.value).toBe('https://httpcats.com/302.jpg');
+    });
   });
 
   it('Renders empty width and height fields if the image source is empty', async () => {
-    const { sourceInput, widthInput, heightInput } = setup();
+    const { sourceInput, widthInput, heightInput } = await setup();
     fireEvent.change(sourceInput, { target: { value: '' } });
-    expect(widthInput.value).toBe('');
-    expect(heightInput.value).toBe('');
+    await waitFor(() => {
+      expect(widthInput.value).toBe('');
+      expect(heightInput.value).toBe('');
+    });
   });
 
   it('Updates the height field with aspect ratio based value from width', async () => {
-    const { widthInput, heightInput } = setup();
+    const { widthInput, heightInput } = await setup();
     fireEvent.change(widthInput, { target: { value: '300' } });
-    expect(widthInput.value).toBe('300');
-    expect(heightInput.value).toBe('168.75');
+    await waitFor(() => {
+      expect(widthInput.value).toBe('300');
+      expect(heightInput.value).toBe('168.75');
+    });
   });
+
   it('Updates the width field with aspect ratio based value from height', async () => {
-    const { widthInput, heightInput } = setup();
+    const { widthInput, heightInput } = await setup();
     fireEvent.change(heightInput, { target: { value: '100' } });
-    expect(heightInput.value).toBe('100');
-    expect(widthInput.value).toBe('177.78');
+    await waitFor(() => {
+      expect(heightInput.value).toBe('100');
+      expect(widthInput.value).toBe('177.78');
+    });
   });
-  it('Does not change the width when height is changed and aspect ratio link is off', () => {
-    const { widthInput, heightInput } = setup();
+
+  it('Does not change the width when height is changed and aspect ratio link is off', async () => {
+    const { widthInput, heightInput } = await setup();
     fireEvent.change(heightInput, { target: { value: '100' } });
     expect(heightInput.value).toBe('100');
     expect(widthInput.value).toBe('177.78');
@@ -63,8 +78,9 @@ describe('ImageModal', () => {
     expect(heightInput.value).toBe('200');
     expect(widthInput.value).toBe('177.78');
   });
-  it('Does not change the height when width is changed and aspect ratio link is off', () => {
-    const { widthInput, heightInput } = setup();
+
+  it('Does not change the height when width is changed and aspect ratio link is off', async () => {
+    const { widthInput, heightInput } = await setup();
     fireEvent.change(widthInput, { target: { value: '450' } });
     expect(widthInput.value).toBe('450');
     expect(heightInput.value).toBe('253.13');
@@ -73,11 +89,34 @@ describe('ImageModal', () => {
     expect(widthInput.value).toBe('600');
     expect(heightInput.value).toBe('253.13');
   });
-  it('Changes the icon when aspect ratio button is toggled', () => {
-    renderWithEditor(<ImageModal onCancel={mockCancelFunction} onSubmit={mockSubmitFunction} />);
+
+  it('Changes the icon when aspect ratio button is toggled', async () => {
+    await setup();
     expect(screen.getByTestId('InsertLinkRoundedIcon')).toBeInTheDocument();
     fireEvent.click(screen.getByRole('button', { name: /constrain properties/i }));
     expect(screen.queryByTestId('InsertLinkRoundedIcon')).not.toBeInTheDocument();
     expect(screen.getByTestId('LinkOffIcon')).toBeInTheDocument();
   });
+
+  it('Returns relevant error message if the width is not higher than 0', async () => {
+    const { widthInput } = await setup();
+
+    fireEvent.change(widthInput, { target: { value: '0' } });
+    fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
+    await waitFor(() => {
+      expect(widthInput.value).toBe('0');
+    });
+    expect(await screen.findByText('Must be higher than 0')).toBeInTheDocument();
+  });
+
+  it('Returns relevant error message if the height is not higher than 0', async () => {
+    const { heightInput } = await setup();
+
+    fireEvent.change(heightInput, { target: { value: '0' } });
+    fireEvent.click(screen.getByRole('button', { name: /Apply/i }));
+    await waitFor(() => {
+      expect(heightInput.value).toBe('0');
+    });
+    expect(await screen.findByText('Must be higher than 0')).toBeInTheDocument();
+  });
 });

package/src/EditorToolbar/Tools/Image/ImageModal.tsx

@@ -1,9 +1,10 @@
-import { getMarkRanges } from 'remirror';
 import ImageForm, { ImageFormData } from './Form/ImageForm';
 import React from 'react';
-import { useRemirrorContext, useCurrentSelection } from '@remirror/react';
+import { useCurrentSelection } from '@remirror/react';
 import FormModal from '../../../ui/Modal/FormModal';
 import { SubmitHandler } from 'react-hook-form';
+import { NodeSelection } from 'prosemirror-state';
+import { NodeName } from '../../../Extensions/Extensions';
 
 type ImageModalProps = {
   onCancel: () => void;
@@ -11,17 +12,18 @@ type ImageModalProps = {
 };
 
 const ImageModal = ({ onCancel, onSubmit }: ImageModalProps) => {
-  const {
-    helpers,
-    view: { state },
-  } = useRemirrorContext();
-  const selection = useCurrentSelection();
-  const currentImage = getMarkRanges(selection, 'image')[0];
-  const selectedImage = helpers.getTextBetween(selection.from, selection.to, state.doc);
+  const selection = useCurrentSelection() as NodeSelection;
+  const currentImage = selection?.node;
+  const currentImageAttrs = { ...currentImage?.attrs };
+  const formData = {
+    imageType: currentImage?.type.name === NodeName.AssetImage ? NodeName.AssetImage : NodeName.Image,
+    image: currentImage?.type?.name === NodeName.Image ? currentImageAttrs : {},
+    assetImage: currentImage?.type?.name === NodeName.AssetImage ? currentImageAttrs : {},
+  };
 
   return (
     <FormModal title="Image" onCancel={onCancel}>
-      <ImageForm data={{ ...currentImage?.mark.attrs, src: selectedImage }} onSubmit={onSubmit} />
+      <ImageForm data={formData} onSubmit={onSubmit} />
     </FormModal>
   );
 };

package/src/EditorToolbar/Tools/Link/Form/LinkForm.spec.tsx

@@ -1,30 +1,58 @@
 import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import LinkForm from './LinkForm';
+import { LinkForm } from './LinkForm';
+import { LinkTarget } from '../../../../Extensions/LinkExtension/common';
+import { MarkName } from '../../../../Extensions/Extensions';
 
 describe('Link Form', () => {
   const handleSubmit = jest.fn();
   const data = {
-    href: 'https://www.squiz.net/link-form',
-    target: '_blank',
-    title: 'Link title',
+    linkType: MarkName.Link,
     text: 'Link text',
+    range: { from: 10, to: 15 },
+    link: {
+      href: 'https://www.squiz.net/link-form',
+      target: LinkTarget.Blank,
+      title: 'Link title',
+    },
+    assetLink: {
+      matrixAssetId: '100',
+      matrixIdentifier: 'matrix-identifier',
+      matrixDomain: 'my-matrix.squiz.net',
+      target: LinkTarget.Blank,
+    },
   };
 
-  it('Renders the form with the relevant fields', () => {
+  it('Renders the form with expected default values when no data is provided', () => {
+    render(<LinkForm onSubmit={handleSubmit} />);
+
+    expect(screen.getByLabelText('Type')).toHaveTextContent('Link to URL');
+    expect(screen.getByLabelText('URL')).toHaveValue('');
+    expect(screen.getByLabelText('Text')).toHaveValue('');
+    expect(screen.getByLabelText('Title')).toHaveValue('');
+    expect(screen.getByLabelText('Target')).toHaveTextContent('Current window');
+    expect(document.querySelectorAll('label')).toHaveLength(5);
+  });
+
+  it('Renders the form with the expected fields for arbitrary links', () => {
     render(<LinkForm data={data} onSubmit={handleSubmit} />);
 
+    expect(screen.getByLabelText('Type')).toHaveTextContent('Link to URL');
     expect(screen.getByLabelText('URL')).toHaveValue('https://www.squiz.net/link-form');
     expect(screen.getByLabelText('Text')).toHaveValue('Link text');
     expect(screen.getByLabelText('Title')).toHaveValue('Link title');
     expect(screen.getByLabelText('Target')).toHaveTextContent('New window');
+    expect(document.querySelectorAll('label')).toHaveLength(5);
   });
 
-  it('Renders the form with the specified class', () => {
-    render(<LinkForm data={data} onSubmit={handleSubmit} />);
+  it('Renders the form with the expected fields for asset links', () => {
+    render(<LinkForm data={{ ...data, linkType: MarkName.AssetLink }} onSubmit={handleSubmit} />);
 
-    const formClass = document.querySelector('.squiz-fte-form');
-    expect(formClass).toBeInTheDocument();
+    expect(screen.getByLabelText('Type')).toHaveTextContent('Link to asset');
+    expect(screen.getByLabelText('Asset ID')).toHaveValue('100');
+    expect(screen.getByLabelText('Text')).toHaveValue('Link text');
+    expect(screen.getByLabelText('Target')).toHaveTextContent('New window');
+    expect(document.querySelectorAll('label')).toHaveLength(4);
   });
 });