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

package/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.spec.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithEditor } from '../../../../tests';
+import ClearFormattingButton from './ClearFormattingButton';
+
+describe('Clear formatting button', () => {
+  it('Renders the clear formatting button', async () => {
+    await renderWithEditor(<ClearFormattingButton />, { content: 'Some nonsense content here' });
+    expect(screen.getByRole('button', { name: 'Clear all formatting (Ctrl+\\)' })).toBeInTheDocument();
+  });
+
+  it('Clears the formatting from editor content after clicking button', async () => {
+    const { getHtmlContent } = await renderWithEditor(<ClearFormattingButton />, {
+      content: '<p>Hello <strong>Mr Bean</strong></p>',
+    });
+
+    const clearFormatting = screen.getByRole('button', { name: 'Clear all formatting (Ctrl+\\)' });
+    fireEvent.click(clearFormatting);
+
+    expect(getHtmlContent()).toBe('<p style="">Hello Mr Bean</p>');
+  });
+
+  it('Clears the formatting from editor content when shortcut is pressed', async () => {
+    const { getHtmlContent } = await renderWithEditor(<ClearFormattingButton />, {
+      content: '<p>Hello <strong>Mr Bean</strong></p>',
+    });
+
+    const editor = screen.getByRole('textbox'); // Assuming the editor is an input field or textarea
+    fireEvent.keyDown(editor, { key: '\\', code: 'Backslash', ctrlKey: true });
+
+    expect(getHtmlContent()).toBe('<p style="">Hello Mr Bean</p>');
+  });
+});

package/src/EditorToolbar/Tools/ClearFormatting/ClearFormattingButton.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback } from 'react';
+import { useCommands, useEditorState, useKeymap } from '@remirror/react';
+import { VerticalDivider } from '@remirror/react-components';
+import FormatClearRoundedIcon from '@mui/icons-material/FormatClearRounded';
+import { ClearFormattingExtension } from '../../../Extensions/ClearFormattingExtension/ClearFormattingExtension';
+import Button from '../../../ui/Button/Button';
+import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
+
+const ClearFormattingButton = () => {
+  const { clearFormatting } = useCommands<ClearFormattingExtension>();
+  const { selection } = useEditorState();
+
+  // Checks wether we have specific content selected or not
+  const contentSelected = !selection.empty;
+
+  const handleSelect = () => {
+    if (clearFormatting.enabled()) {
+      clearFormatting();
+    }
+  };
+
+  const handleShortcut = useCallback(() => {
+    handleSelect();
+    // Prevent other key handlers being run
+    return true;
+  }, []);
+
+  // When Ctrl+\ is pressed clear formatting, only registered in the toolbar button instance to avoid the key press
+  // being double handled.
+  useKeymap('Mod-\\', handleShortcut);
+
+  return (
+    <>
+      <VerticalDivider />
+      <Button
+        handleOnClick={handleSelect}
+        isDisabled={false}
+        isActive={false}
+        icon={<FormatClearRoundedIcon />}
+        label={`${
+          contentSelected ? 'Clear formatting from selection' : 'Clear all formatting'
+        } (${getShortcutSymbol()}+\\)`}
+      />
+    </>
+  );
+};
+
+export default ClearFormattingButton;

package/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.spec.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { screen, fireEvent } from '@testing-library/react';
+import { renderWithEditor } from '../../../../tests';
+import HorizontalLineButton from './HorizontalLineButton';
+
+describe('Horizontal line button', () => {
+  it('Renders the horizontal line button', async () => {
+    await renderWithEditor(<HorizontalLineButton />, { content: 'Some nonsense content here' });
+    expect(screen.getByRole('button', { name: 'Horizontal line' })).toBeInTheDocument();
+  });
+
+  it('Inserts a horizontal line into the editor content after clicking button', async () => {
+    const { getHtmlContent } = await renderWithEditor(<HorizontalLineButton />, {
+      content: '<p>Hello Mr Bean</p>',
+    });
+
+    const horizontalLine = screen.getByRole('button', { name: 'Horizontal line' });
+    fireEvent.click(horizontalLine);
+
+    expect(getHtmlContent()).toBe('<hr><p style="">Hello Mr Bean</p>');
+  });
+});

package/src/EditorToolbar/Tools/HorizontalLine/HorizontalLineButton.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useCommands, useActive, useChainedCommands } from '@remirror/react';
+import { VerticalDivider } from '@remirror/react-components';
+import { HorizontalRuleExtension } from '@remirror/extension-horizontal-rule';
+import Button from '../../../ui/Button/Button';
+import HorizontalRuleRounded from '@mui/icons-material/HorizontalRuleRounded';
+
+const HorizontalLineButton = () => {
+  const { insertHorizontalRule } = useCommands();
+  const chain = useChainedCommands();
+
+  const active = useActive<HorizontalRuleExtension>();
+  const enabled = insertHorizontalRule.enabled();
+  const handleSelect = () => {
+    if (insertHorizontalRule.enabled()) {
+      chain.insertHorizontalRule().focus().run();
+    }
+  };
+
+  return (
+    <>
+      <Button
+        handleOnClick={handleSelect}
+        isDisabled={!enabled}
+        isActive={active.italic()}
+        icon={<HorizontalRuleRounded />}
+        label="Horizontal line"
+      />
+      <VerticalDivider />
+    </>
+  );
+};
+
+export default HorizontalLineButton;

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

@@ -0,0 +1,117 @@
+import '@testing-library/jest-dom';
+import { render, screen, act, fireEvent, waitFor } from '@testing-library/react';
+import React from 'react';
+import ImageForm from './ImageForm';
+import { NodeName } from '../../../../Extensions/Extensions';
+import { mockResourceBrowserContext } from '../../../../../tests';
+
+describe('Image Form', () => {
+  const handleSubmit = jest.fn();
+  const data = {
+    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 for arbitrary images', () => {
+    render(<ImageForm data={data} onSubmit={handleSubmit} />);
+
+    expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From URL');
+    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', async () => {
+    const { MockResourceBrowserContext } = mockResourceBrowserContext({
+      sources: [{ id: 'my-source-id' }],
+      resources: [
+        {
+          id: '100',
+          name: 'My selected image',
+          type: {
+            code: 'image',
+            name: 'Image',
+          },
+        },
+      ],
+    });
+
+    render(
+      <MockResourceBrowserContext>
+        <ImageForm
+          data={{
+            ...data,
+            imageType: NodeName.AssetImage,
+            assetImage: { matrixAssetId: '100', matrixIdentifier: 'matrix-api-identifier' },
+          }}
+          onSubmit={handleSubmit}
+        />
+      </MockResourceBrowserContext>,
+    );
+
+    expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
+    await waitFor(() => {
+      expect(screen.getByText('My selected image')).toBeInTheDocument();
+    });
+  });
+
+  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

@@ -0,0 +1,201 @@
+import React, { ReactElement, useState } from 'react';
+import { Controller, SubmitHandler, useForm } from 'react-hook-form';
+import { getImageSize } from 'react-image-size';
+import clsx from 'clsx';
+import { Input } from '../../../../ui/Fields/Input/Input';
+import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
+import Button from '../../../../ui/Button/Button';
+import LinkOffIcon from '@mui/icons-material/LinkOff';
+import InsertLinkRoundedIcon from '@mui/icons-material/InsertLinkRounded';
+import { NodeName } from '../../../../Extensions/Extensions';
+import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/AssetImageExtension';
+import { DeepPartial } from '../../../../types';
+import { noEmptySpacesValidation, regexDataURI, hasProperties } from '../../../../utils/validation';
+import { TabOptions, Tabs } from '../../../../ui/Tabs/Tabs';
+import { MatrixAsset } from '../../../../ui/Fields/MatrixAsset/MatrixAsset';
+
+export type ImageFormData = {
+  imageType: NodeName;
+  image: Pick<ImageAttributes, 'src' | 'alt' | 'width' | 'height'>;
+  assetImage: AssetImageAttributes;
+};
+
+const imageTypeOptions: TabOptions = {
+  [NodeName.AssetImage]: { label: 'From source' },
+  [NodeName.Image]: { label: 'From URL' },
+};
+
+export type FormProps = {
+  data: DeepPartial<ImageFormData>;
+  onSubmit: SubmitHandler<ImageFormData>;
+};
+export type Dimensions = 'image.width' | 'image.height';
+
+const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
+  const {
+    control,
+    register,
+    handleSubmit,
+    setValue,
+    watch,
+    formState: { errors },
+  } = useForm<ImageFormData>({
+    defaultValues: data,
+  });
+  const imageType = watch('imageType') || NodeName.AssetImage;
+  const [aspectRatioFromWidth, setAspectRatioFromWidth] = useState(9 / 16);
+  const [aspectRatioFromHeight, setAspectRatioFromHeight] = useState(16 / 9);
+  const [aspectRatioLocked, setAspectRatioLocked] = useState(true);
+
+  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 = (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 === '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);
+    }
+  };
+
+  const toggleAspectRatio = () => {
+    setAspectRatioLocked(!aspectRatioLocked);
+  };
+
+  return (
+    <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
+      <div className="squiz-fte-form-group mb-4">
+        <Tabs
+          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';
+                    }
+                  },
+                  noEmptySpaces: noEmptySpacesValidation,
+                },
+              })}
+            />
+          </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 as number) > 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 as number) > 0)) {
+                        return 'Must be higher than 0';
+                      }
+                    },
+                  },
+                })}
+              />
+            </div>
+          </div>
+          <div className="squiz-fte-form-group mb-2">
+            <Input label="Alternative description" error={errors?.image?.alt?.message} {...register('image.alt')} />
+          </div>
+        </>
+      )}
+      {imageType === NodeName.AssetImage && (
+        <div className="squiz-fte-form-group mb-2">
+          <Controller
+            control={control}
+            name="assetImage"
+            rules={{
+              validate: hasProperties('An image must be selected', ['matrixIdentifier', 'matrixAssetId']),
+            }}
+            render={({ field: { onChange, value }, fieldState: { error } }) => (
+              <MatrixAsset
+                modalTitle="Insert image"
+                allowedTypes={['image']}
+                value={value}
+                onChange={onChange}
+                error={error?.message}
+              />
+            )}
+          />
+        </div>
+      )}
+    </form>
+  );
+};
+
+export default ImageForm;