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

package/src/Editor/Editor.tsx

@@ -1,8 +1,11 @@
-import React from 'react';
-import { EditorComponent, Remirror, useRemirror } from '@remirror/react';
+import React, { useContext, useCallback } from 'react';
+import { EditorComponent, Remirror, useRemirror, useEditorEvent } from '@remirror/react';
 import { RemirrorContentType, RemirrorEventListener, Extension } from '@remirror/core';
 import { Toolbar, FloatingToolbar } from '../EditorToolbar';
-import { Extensions } from '../Extensions/Extensions';
+import { EditorContext } from './EditorContext';
+import { createExtensions } from '../Extensions/Extensions';
+import clsx from 'clsx';
+import { ClipboardEventHandler } from '@remirror/extension-events/dist-types/events-extension';
 
 type EditorProps = {
   content?: RemirrorContentType;
@@ -10,9 +13,25 @@ type EditorProps = {
   editable?: boolean;
 };
 
-const Editor = ({ content, editable, onChange }: EditorProps) => {
+const WrappedEditor = () => {
+  const preventImagePaste = useCallback((event) => {
+    const { clipboardData } = event;
+    const pastedData = clipboardData?.files[0];
+    if (pastedData?.type && pastedData?.type.startsWith('image/')) {
+      event.preventDefault();
+    }
+
+    // Allow other paste event handlers to be run.
+    return false;
+  }, []) as ClipboardEventHandler;
+
+  useEditorEvent('paste', preventImagePaste);
+  return <EditorComponent />;
+};
+
+const Editor = ({ content, editable = true, onChange }: EditorProps) => {
   const { manager, state, setState } = useRemirror({
-    extensions: Extensions,
+    extensions: createExtensions(useContext(EditorContext)),
     content,
     selection: 'start',
     stringHandler: 'html',
@@ -25,7 +44,7 @@ const Editor = ({ content, editable, onChange }: EditorProps) => {
 
   return (
     <div className="squiz-fte-scope">
-      <div className="remirror-theme formatted-text-editor editor-wrapper">
+      <div className={clsx('remirror-theme formatted-text-editor', !editable && 'formatted-text-editor--is-disabled')}>
         <Remirror
           manager={manager}
           state={state}
@@ -34,9 +53,9 @@ const Editor = ({ content, editable, onChange }: EditorProps) => {
           placeholder="Write something"
           label="Text editor"
         >
-          <Toolbar />
-          <EditorComponent />
-          <FloatingToolbar />
+          {editable && <Toolbar />}
+          <WrappedEditor />
+          {editable && <FloatingToolbar />}
         </Remirror>
       </div>
     </div>

package/src/Editor/EditorContext.spec.tsx

@@ -0,0 +1,26 @@
+import React, { useContext } from 'react';
+import { EditorContext } from './EditorContext';
+import { render } from '@testing-library/react';
+
+describe('EditorContext', () => {
+  const defaultContextFn = jest.fn();
+  const Component = () => {
+    defaultContextFn(useContext(EditorContext));
+    return null;
+  };
+
+  it('Has expected defaults', async () => {
+    render(<Component />);
+
+    const defaultContext = defaultContextFn.mock.calls[0][0];
+
+    expect(defaultContext).toEqual({
+      matrix: {
+        resolveMatrixAsset: expect.any(Function),
+        matrixDomain: '',
+        matrixIdentifier: '',
+      },
+    });
+    expect(await defaultContext.matrix.resolveMatrixAsset('fake-asset-id')).toBeNull();
+  });
+});

package/src/Editor/EditorContext.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+
+export type MatrixAsset = {
+  id: string;
+  type: string | 'image';
+};
+
+export type MatrixAssetResolver = (assetId: string) => Promise<MatrixAsset | null>;
+
+export type EditorContextOptions = {
+  matrix: {
+    matrixIdentifier: string;
+    matrixDomain: string;
+    resolveMatrixAsset: MatrixAssetResolver;
+  };
+};
+
+export const defaultEditorContext: EditorContextOptions = {
+  matrix: {
+    matrixIdentifier: '',
+    matrixDomain: '',
+    resolveMatrixAsset: () => Promise.resolve(null),
+  },
+};
+
+export const EditorContext = React.createContext(defaultEditorContext);

package/src/Editor/_editor.scss

@@ -1,9 +1,6 @@
 .formatted-text-editor {
   font-family: 'Open Sans' !important;
-
-  &.editor-wrapper {
-    @apply bg-white rounded border-gray-300 border-2 border-solid;
-  }
+  @apply bg-white rounded border-gray-300 border-2 border-solid;
 
   .remirror-editor-wrapper {
     @apply text-gray-800 pt-0;
@@ -12,6 +9,7 @@
   .remirror-editor {
     @apply bg-white shadow-none rounded-b p-3;
     overflow: auto;
+    min-height: 15vh;
 
     &:active,
     &:focus {
@@ -24,6 +22,15 @@
     }
   }
 
+  &--is-disabled {
+    .remirror-editor {
+      @apply bg-gray-300 cursor-not-allowed;
+    }
+    .remirror-is-empty:first-of-type::before {
+      display: none;
+    }
+  }
+
   .remirror-is-empty:first-of-type::before {
     position: absolute;
     pointer-events: none;
@@ -32,4 +39,13 @@
     content: attr(data-placeholder);
     @apply text-gray-500;
   }
+
+  .ProseMirror-selectednode {
+    @apply border-blue-300 border-2 border-solid;
+  }
+
+  // match the Remirror node
+  img {
+    display: inline;
+  }
 }

package/src/EditorToolbar/FloatingToolbar.spec.tsx

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

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -5,26 +5,35 @@ import BoldButton from './Tools/Bold/BoldButton';
 import { useExtensionNames } from '../hooks';
 import RemoveLinkButton from './Tools/Link/RemoveLinkButton';
 import LinkButton from './Tools/Link/LinkButton';
-import { FloatingToolbar as RemirrorFloatingToolbar, usePositioner } from '@remirror/react';
+import { FloatingToolbar as RemirrorFloatingToolbar, useActive, usePositioner } from '@remirror/react';
 import { VerticalDivider } from '@remirror/react-components';
 import { createToolbarPositioner, ToolbarPositionerRange } from '../utils/createToolbarPositioner';
+import ImageButton from './Tools/Image/ImageButton';
+import { MarkName } from '../Extensions/Extensions';
+import { ImageExtension } from '../Extensions/ImageExtension/ImageExtension';
 
-// The editor main toolbar
 export const FloatingToolbar = () => {
+  const watchedMarks = [MarkName.Link, MarkName.AssetLink];
   const extensionNames = useExtensionNames();
-  const positioner = useMemo(() => createToolbarPositioner({ types: ['link'] }), []);
-  const { data } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
+  const positioner = useMemo(() => createToolbarPositioner({ types: watchedMarks }), []);
+  const active = useActive<ImageExtension>();
+  const {
+    data: { marks },
+  } = usePositioner<Partial<ToolbarPositionerRange>>(positioner, []);
+
   let buttons = [
     extensionNames.bold && <BoldButton key="bold" />,
     extensionNames.italic && <ItalicButton key="italic" />,
     extensionNames.underline && <UnderlineButton key="underline" />,
   ];
 
-  if (data.marks?.link.isExclusivelyActive) {
+  if (active.image() || active.assetImage()) {
+    buttons = [<ImageButton key="add-image" inPopover={true} />];
+  } else if (marks?.[MarkName.Link].isExclusivelyActive || marks?.[MarkName.AssetLink].isExclusivelyActive) {
     // if all of the selected text is a link show the options to update/remove the link instead of the regular
     // formatting options.
     buttons = [<LinkButton key="update-link" inPopover={true} />, <RemoveLinkButton key="remove-link" />];
-  } else if (!data.marks?.link.isActive) {
+  } else if (!marks?.[MarkName.Link].isActive && !marks?.[MarkName.AssetLink].isActive) {
     // if none of the selected text is a link show the option to create a link.
     buttons.push(
       <VerticalDivider key="link-divider" className="editor-divider" />,

package/src/EditorToolbar/Tools/Image/Form/ImageForm.spec.tsx

@@ -1,23 +1,98 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { render, screen, act, fireEvent } from '@testing-library/react';
 import React from 'react';
 import ImageForm from './ImageForm';
+import { NodeName } from '../../../../Extensions/Extensions';
 
 describe('Image Form', () => {
   const handleSubmit = jest.fn();
   const data = {
-    src: 'https://httpcats.com/302.jpg',
-    alt: 'Cat with mouse in mouth',
-    width: 1600,
-    height: 1400,
+    imageType: NodeName.Image,
+    image: {
+      src: 'https://httpcats.com/302.jpg',
+      alt: 'Cat with mouse in mouth',
+      width: 1600,
+      height: 1400,
+    },
   };
 
-  it('Renders the form with the relevant fields', () => {
+  it('Renders the form with the relevant fields for arbitrary images', () => {
     render(<ImageForm data={data} onSubmit={handleSubmit} />);
 
+    expect(screen.getByLabelText('Type')).toHaveTextContent('External image');
     expect(screen.getByLabelText('Source')).toHaveValue('https://httpcats.com/302.jpg');
     expect(screen.getByLabelText('Alternative description')).toHaveValue('Cat with mouse in mouth');
     expect(screen.getByLabelText('Width')).toHaveValue(1600);
     expect(screen.getByLabelText('Height')).toHaveValue(1400);
   });
+
+  it('Renders the form with the relevant fields for asset images', () => {
+    render(
+      <ImageForm
+        data={{
+          ...data,
+          imageType: NodeName.AssetImage,
+          assetImage: { matrixAssetId: '100' },
+        }}
+        onSubmit={handleSubmit}
+      />,
+    );
+
+    expect(screen.getByLabelText('Type')).toHaveTextContent('Asset image');
+    expect(screen.getByLabelText('Asset ID')).toHaveValue('100');
+  });
+
+  it('calculates the height when width changes and aspect ratio is locked', () => {
+    render(<ImageForm data={data} onSubmit={handleSubmit} />);
+    const widthInput = screen.getByLabelText('Width');
+    const heightInput = screen.getByLabelText('Height');
+
+    // change the width value
+    act(() => {
+      fireEvent.change(widthInput, { target: { value: 800 } });
+    });
+
+    // check that the height value has been calculated correctly
+    expect(heightInput).toHaveValue(450);
+  });
+
+  it('calculates the width when height changes and aspect ratio is locked', () => {
+    render(<ImageForm data={data} onSubmit={handleSubmit} />);
+    const widthInput = screen.getByLabelText('Width');
+    const heightInput = screen.getByLabelText('Height');
+
+    // change the height value
+    act(() => {
+      fireEvent.change(heightInput, { target: { value: 800 } });
+    });
+
+    // check that the width value has been calculated correctly
+    expect(widthInput).toHaveValue(1422.22);
+  });
+
+  it('does not calculate dimensions when aspect ratio is unlocked', () => {
+    render(<ImageForm data={data} onSubmit={handleSubmit} />);
+    const widthInput = screen.getByLabelText('Width');
+    const heightInput = screen.getByLabelText('Height');
+    const toggleButton = screen.getByRole('button', { name: 'Constrain properties' });
+
+    // unlock the aspect ratio
+    fireEvent.click(toggleButton);
+
+    // change the width value
+    act(() => {
+      fireEvent.change(widthInput, { target: { value: 800 } });
+    });
+
+    // check that the height value has not been calculated
+    expect(heightInput).toHaveValue(1400);
+
+    // change the height value
+    act(() => {
+      fireEvent.change(heightInput, { target: { value: 800 } });
+    });
+
+    // check that the width value has not been calculated
+    expect(widthInput).toHaveValue(800);
+  });
 });

package/src/EditorToolbar/Tools/Image/Form/ImageForm.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, useContext, useState } from 'react';
 import { Input } from '../../../../ui/Fields/Input/Input';
 import { SubmitHandler, useForm } from 'react-hook-form';
 import { getImageSize } from 'react-image-size';
@@ -6,51 +6,79 @@ import { ImageAttributes } from '@remirror/extension-image/dist-types/image-exte
 import Button from '../../../../ui/Button/Button';
 import LinkOffIcon from '@mui/icons-material/LinkOff';
 import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+import clsx from 'clsx';
+import { NodeName } from '../../../../Extensions/Extensions';
+import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/AssetImageExtension';
+import { DeepPartial } from '../../../../types';
+import { Select, SelectOptions } from '../../../../ui/Fields/Select/Select';
+import { EditorContext } from '../../../../Editor/EditorContext';
 
-export type UpdateImageOptions = ImageAttributes & {
-  src: string;
-  alt: string;
-  width: number;
-  height: number;
+export type ImageFormData = {
+  imageType: NodeName;
+  image: Pick<ImageAttributes, 'src' | 'alt' | 'width' | 'height'>;
+  assetImage: AssetImageAttributes;
+};
+
+const imageTypeOptions: SelectOptions = {
+  [NodeName.Image]: { label: 'External image' },
+  [NodeName.AssetImage]: { label: 'Asset image' },
 };
-export type ImageFormData = Pick<UpdateImageOptions, 'src' | 'alt' | 'width' | 'height'>;
 
 export type FormProps = {
-  data: Partial<ImageFormData>;
+  data: DeepPartial<ImageFormData>;
   onSubmit: SubmitHandler<ImageFormData>;
 };
-export type Dimensions = 'width' | 'height';
+export type Dimensions = 'image.width' | 'image.height';
+
+const regexDataURI =
+  /^data:([a-z]+\/[a-z0-9-+.]+(;[a-z-]+=[a-z0-9-]+)?)?(;base64)?,([a-z0-9!$&',()*+;=\-._~:@/?%\s]*)$/i;
 
 const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
-  const { register, handleSubmit, setValue } = useForm<ImageFormData>({
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<ImageFormData>({
     defaultValues: data,
   });
+  const imageType = watch('imageType') || NodeName.Image;
+  const context = useContext(EditorContext);
   const [aspectRatioFromWidth, setAspectRatioFromWidth] = useState(9 / 16);
   const [aspectRatioFromHeight, setAspectRatioFromHeight] = useState(16 / 9);
   const [aspectRatioLocked, setAspectRatioLocked] = useState(true);
 
-  const setDimensionsFromURL = (e: { target: { value: string } }) => {
-    // get the new url, calculate the width and height and set those fields
-    getImageSize(e.target.value)
-      .then(({ width, height }) => {
-        setValue('width', width);
-        setValue('height', height);
-        setAspectRatioFromWidth(height / width);
-        setAspectRatioFromHeight(width / height);
-      })
-      .catch((errorMessage) => {
-        // TODO: we will use this when we add validation in a follow-up ticket
-        console.log(errorMessage);
-      });
+  const setDimensionsFromURL = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    try {
+      const { width, height } = await getImageSize(e.target.value);
+
+      setValue('image.width', width);
+      setValue('image.height', height);
+      setAspectRatioFromWidth(height / width);
+      setAspectRatioFromHeight(width / height);
+    } catch (error) {
+      // swallow the error for fetching the image size, will occur if the URL does not point to an image.
+      // will be handled by validation when attempting to add the image.
+    }
+  };
+
+  const validateIsNotImage = async (src: string) => {
+    try {
+      await getImageSize(src);
+      return false;
+    } catch (error) {
+      return true;
+    }
   };
 
-  const calculateDimensions = () => {
+  const calculateDimensions = (event: Event) => {
     if (aspectRatioLocked) {
       const currentTarget = event?.target as HTMLInputElement;
       const type = currentTarget.name as Dimensions;
       const currentValue = currentTarget.value as string;
-      const otherValue = type === 'width' ? 'height' : 'width';
-      const aspectRatio = type === 'width' ? aspectRatioFromWidth : aspectRatioFromHeight;
+      const otherValue = type === 'image.width' ? 'image.height' : 'image.width';
+      const aspectRatio = type === 'image.width' ? aspectRatioFromWidth : aspectRatioFromHeight;
       const newValue = Math.round(aspectRatio * Number(currentValue) * 100) / 100;
       setValue(otherValue, newValue);
     }
@@ -63,28 +91,120 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
       <div className="squiz-fte-form-group mb-2">
-        <Input label="Source" {...register('src')} onBlur={setDimensionsFromURL} />
-      </div>
-      <div className="squiz-fte-form-group mb-2">
-        <Input label="Alternative description" {...register('alt')} />
-      </div>
-      <div className="flex flex-row items-end">
-        <div className="squiz-fte-form-group mb-2">
-          <Input label="Width" {...register('width')} type="number" name="width" onChange={calculateDimensions} />
-        </div>
-        <div className="flex mx-1 mb-2">
-          <Button
-            handleOnClick={toggleAspectRatio}
-            isActive={false}
-            icon={aspectRatioLocked ? <InsertLinkRoundedIcon /> : <LinkOffIcon />}
-            label="Constrain properties"
-            isDisabled={false}
-          />
-        </div>
-        <div className="squiz-fte-form-group mb-2">
-          <Input label="Height" {...register('height')} type="number" name="height" onChange={calculateDimensions} />
-        </div>
+        <Select
+          name="imageType"
+          label="Type"
+          value={imageType}
+          options={imageTypeOptions}
+          onChange={(value) => setValue('imageType', value as NodeName)}
+        />
       </div>
+      {imageType === NodeName.Image && (
+        <>
+          <div className="squiz-fte-form-group mb-2">
+            <Input
+              label="Source"
+              required
+              error={errors?.image?.src?.message}
+              {...register('image.src', {
+                onChange: setDimensionsFromURL,
+                required: 'Source is required',
+                validate: {
+                  isValidImage: async (value: string | undefined) => {
+                    if (value && regexDataURI.test(value)) {
+                      return 'Must not be a data URI';
+                    }
+                    if (value && (await validateIsNotImage(value))) {
+                      return 'Must be a valid image URL';
+                    }
+                  },
+                },
+              })}
+            />
+          </div>
+          <div className="squiz-fte-form-group mb-2">
+            <Input
+              label="Alternative description"
+              required
+              error={errors?.image?.alt?.message}
+              {...register('image.alt', { required: 'Alternative description is required' })}
+            />
+          </div>
+          <div className="flex flex-row">
+            <div className="squiz-fte-form-group mb-2">
+              <Input
+                label="Width"
+                type="number"
+                required
+                error={errors?.image?.width?.message}
+                {...register('image.width', {
+                  onChange: calculateDimensions,
+                  required: 'Width is required',
+                  validate: {
+                    isValidWidth: (value) => {
+                      if (value && !(value > 0)) {
+                        return 'Must be higher than 0';
+                      }
+                    },
+                  },
+                })}
+              />
+            </div>
+            <div className="flex mx-1 mb-2">
+              <Button
+                handleOnClick={toggleAspectRatio}
+                isActive={false}
+                icon={aspectRatioLocked ? <InsertLinkRoundedIcon /> : <LinkOffIcon />}
+                label="Constrain properties"
+                isDisabled={false}
+                className={clsx('my-auto', !errors?.image?.height && !errors?.image?.width && 'mb-0')}
+              />
+            </div>
+            <div className="squiz-fte-form-group mb-2">
+              <Input
+                label="Height"
+                type="number"
+                required
+                error={errors?.image?.height?.message}
+                {...register('image.height', {
+                  onChange: calculateDimensions,
+                  required: 'Height is required',
+                  validate: {
+                    isValidHeight: (value) => {
+                      if (value && !(value > 0)) {
+                        return 'Must be higher than 0';
+                      }
+                    },
+                  },
+                })}
+              />
+            </div>
+          </div>
+        </>
+      )}
+      {imageType === NodeName.AssetImage && (
+        <>
+          <div className="squiz-fte-form-group mb-2">
+            <Input
+              label="Asset ID"
+              required
+              error={errors?.assetImage?.matrixAssetId?.message}
+              {...register('assetImage.matrixAssetId', {
+                required: 'Asset ID is required',
+                validate: {
+                  isImage: async (assetId) => {
+                    const asset = await context.matrix.resolveMatrixAsset(assetId);
+
+                    if (asset?.type !== 'image') {
+                      return 'Asset ID is invalid or not an image';
+                    }
+                  },
+                },
+              })}
+            />
+          </div>
+        </>
+      )}
     </form>
   );
 };