@squiz/formatted-text-editor 2.0.1 → 2.2.0

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

@@ -1,11 +1,18 @@
 import '@testing-library/jest-dom';
 import { screen, fireEvent, waitForElementToBeRemoved, act, waitFor } from '@testing-library/react';
+import { ResourceBrowserResource } from '@squiz/resource-browser';
 import { NodeSelection } from 'prosemirror-state';
 import React from 'react';
-import { renderWithEditor, mockResourceBrowserContext } from '../../../../tests';
+import { renderWithEditor, mockResourceBrowserContext, mockResourceBrowser } from '../../../../tests';
 import ImageButton from './ImageButton';
 import { getImageSize } from 'react-image-size';
 
+const { setSelectedResource, setShouldUseMockResourceBrowser, mockResourceBrowserImpl } = mockResourceBrowser();
+jest.mock('@squiz/resource-browser', () => ({
+  ...jest.requireActual('@squiz/resource-browser'),
+  ResourceBrowser: (props: any) => mockResourceBrowserImpl(props),
+}));
+
 jest.mock('react-image-size');
 
 describe('ImageButton', () => {
@@ -295,7 +302,7 @@ describe('ImageButton', () => {
     });
   });
 
-  it('Updates the attributes of an existing asset image', async () => {
+  it('assetImage: Updates the attributes of an existing asset image', async () => {
     const matrixIdentifier = 'matrix-api-identifier';
     const matrixDomain = 'https://my-matrix.squiz.net';
     const { MockResourceBrowserContext, selectResource } = mockResourceBrowserContext({
@@ -362,6 +369,67 @@ describe('ImageButton', () => {
     });
   });
 
+  it('DAMImage: Updates the attributes of an existing dam image', async () => {
+    setShouldUseMockResourceBrowser(true);
+    setSelectedResource({
+      id: 'my-resource-id',
+      name: 'My resource',
+      url: 'myResourceUrl',
+      source: {
+        id: 'my-source-id',
+        type: 'dam',
+        configuration: {
+          externalType: 'bynder',
+        },
+      },
+    } as unknown as ResourceBrowserResource);
+
+    const { editor, getJsonContent } = await renderWithEditor(<ImageButton />, {
+      content: 'Some <img src="https://httpcats.com/529.jpg" alt="hi" /> nonsense',
+      context: {
+        editor: {
+          matrix: {
+            matrixDomain: 'https://my-matrix.squiz.net',
+          },
+        },
+      },
+    });
+
+    await act(() => editor.selectText(new NodeSelection(editor.state.doc.resolve(6))));
+
+    await openModal();
+    fireEvent.click(screen.getByRole('button', { name: 'From source' }));
+    // Trigger the mock Resource Browser to invoke its onChange callback to fill the form with data
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Select ResourceBrowser Resource' })).toBeInTheDocument();
+    });
+    fireEvent.click(await screen.findByRole('button', { name: 'Select ResourceBrowser Resource' }));
+    // Close the image selection modal
+    await act(() => fireEvent.click(screen.getByRole('button', { name: 'Apply' })));
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          text: 'Some ',
+          type: 'text',
+        },
+        {
+          type: 'DAMImage',
+          attrs: {
+            damObjectId: 'my-resource-id',
+            damSystemIdentifier: 'my-source-id',
+            damAdditional: undefined,
+            damSystemType: 'bynder',
+            src: 'myResourceUrl',
+          },
+        },
+        { type: 'text', text: ' nonsense' },
+      ],
+    });
+  });
+
   it('Shows an error if a resource is not selected', async () => {
     await renderWithEditor(<ImageButton />);
     await openModal();

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

@@ -6,7 +6,8 @@ import { ImageFormData } from './Form/ImageForm';
 import Button from '../../../ui/Button/Button';
 import { ImageExtension } from '../../../Extensions/ImageExtension/ImageExtension';
 import { NodeName } from '../../../Extensions/Extensions';
-import { AssetImageExtension } from '../../../Extensions/ImageExtension/AssetImageExtension';
+import { AssetImageExtension, AssetImageAttributes } from '../../../Extensions/ImageExtension/AssetImageExtension';
+import { DAMImageExtension, DAMImageAttributes } from '../../../Extensions/ImageExtension/DAMImageExtension';
 import { CodeBlockExtension } from 'remirror/dist-types/extensions';
 import { getShortcutSymbol } from '../../../utils/getShortcutSymbol';
 
@@ -16,11 +17,14 @@ type ImageButtonProps = {
 
 const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
   const [showModal, setShowModal] = useState(false);
-  const { insertImage, insertAssetImage } = useCommands<ImageExtension | AssetImageExtension>();
+  const { insertImage, insertAssetImage, insertDAMImage } = useCommands<
+    ImageExtension | AssetImageExtension | DAMImageExtension
+  >();
   const active = useActive<ImageExtension | AssetImageExtension | CodeBlockExtension>();
   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()) || active.codeBlock();
+  const disabled =
+    (!selection.empty && !active.image() && !active.assetImage() && !active.DAMImage()) || active.codeBlock();
 
   const handleClick = () => {
     if (!showModal) {
@@ -29,11 +33,13 @@ const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
   };
 
   const insertImageFromData = (data: ImageFormData) => {
-    const { imageType, image, assetImage } = data;
+    const { imageType, image, resourceImage } = data;
     if (imageType === NodeName.Image) {
       insertImage(image);
+    } else if (imageType === NodeName.DAMImage) {
+      insertDAMImage(resourceImage as DAMImageAttributes);
     } else {
-      insertAssetImage(assetImage);
+      insertAssetImage(resourceImage as AssetImageAttributes);
     }
   };
 
@@ -59,7 +65,7 @@ const ImageButton = ({ inPopover = false }: ImageButtonProps) => {
     <>
       <Button
         handleOnClick={handleClick}
-        isActive={active.image() || active.assetImage()}
+        isActive={active.image() || active.assetImage() || active.DAMImage()}
         icon={<ImageRoundedIcon />}
         label={`Image (${getShortcutSymbol()}+L)`}
         isDisabled={disabled}

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

@@ -19,7 +19,10 @@ const ImageModal = ({ onCancel, onSubmit }: ImageModalProps) => {
   const formData = {
     imageType: currentImage?.type.name === NodeName.Image ? NodeName.Image : NodeName.AssetImage,
     image: currentImage?.type?.name === NodeName.Image ? currentImageAttrs : {},
-    assetImage: currentImage?.type?.name === NodeName.AssetImage ? currentImageAttrs : {},
+    resourceImage:
+      currentImage?.type?.name === NodeName.DAMImage || currentImage?.type?.name === NodeName.AssetImage
+        ? currentImageAttrs
+        : {},
   };
 
   return (

package/src/EditorToolbar/Tools/Table/TableButton.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { useCommands, useActive } from '@remirror/react';
-import { VerticalDivider } from '@remirror/react-components';
 import { TableExtension } from '@remirror/extension-react-tables';
 import Button from '../../../ui/Button/Button';
 import TableViewRoundedIcon from '@mui/icons-material/TableViewRounded';
@@ -24,7 +23,6 @@ const TableButton = () => {
         icon={<TableViewRoundedIcon />}
         label="Insert table"
       />
-      <VerticalDivider />
     </>
   );
 };

package/src/Extensions/Extensions.ts

@@ -23,6 +23,7 @@ import { ImageExtension } from './ImageExtension/ImageExtension';
 import { CommandsExtension } from './CommandsExtension/CommandsExtension';
 import { EditorContextOptions } from '../Editor/EditorContext';
 import { AssetImageExtension } from './ImageExtension/AssetImageExtension';
+import { DAMImageExtension } from './ImageExtension/DAMImageExtension';
 import { ExtendedCodeBlockExtension } from './CodeBlockExtension/CodeBlockExtension';
 import { ClearFormattingExtension } from './ClearFormattingExtension/ClearFormattingExtension';
 import { UnsupportedNodeExtension } from './UnsuportedExtension/UnsupportedNodeExtension';
@@ -34,6 +35,7 @@ export enum NodeName {
   Image = 'image',
   CodeBlock = 'codeBlock',
   AssetImage = 'assetImage',
+  DAMImage = 'DAMImage',
   Text = 'text',
   TableControllerCell = 'tableControllerCell',
   tableCell = 'tableCell',
@@ -66,6 +68,7 @@ export const createExtensions = (context: EditorContextOptions) => {
       new AssetImageExtension({
         matrixDomain: context.matrix.matrixDomain,
       }),
+      new DAMImageExtension(),
       new LinkExtension(),
       new AssetLinkExtension({
         matrixDomain: context.matrix.matrixDomain,

package/src/Extensions/FetchUrlExtension/FetchUrlExtension.ts

@@ -33,6 +33,15 @@ export class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
         );
       }
 
+      if (node.type.name === NodeName.DAMImage && node.attrs.src === '') {
+        promises.push(
+          this.fetchAndReplace(node.attrs, (url: string) => {
+            const newNode = state.schema.nodes[NodeName.DAMImage].create({ ...node.attrs, src: url });
+            tr.replaceWith(pos, pos + node.nodeSize, newNode);
+          }),
+        );
+      }
+
       const assetLinkMark = this.findAssetLinkMark(node.marks as Mark[]);
       if (node.type.name === 'text' && assetLinkMark) {
         promises.push(

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

@@ -0,0 +1,87 @@
+import { renderWithEditor } from '../../../tests';
+
+describe('DAMImageExtension', () => {
+  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-dam-object-id="5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a"
+                  data-dam-system-identifier="byder001"
+                  data-dam-system-type="bynder" 
+                  data-dam-additional='{"variant":"xyz"}'
+                  />`,
+    });
+
+    expect(getJsonContent()).toEqual({
+      type: 'paragraph',
+      attrs: expect.any(Object),
+      content: [
+        {
+          type: 'DAMImage',
+          attrs: {
+            damObjectId: '5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a',
+            damSystemIdentifier: 'byder001',
+            damSystemType: 'bynder',
+            damAdditional: {
+              variant: 'xyz',
+            },
+            src: 'https://default-resource/',
+          },
+        },
+      ],
+    });
+  });
+
+  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-dam-object-id="5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a" />',
+    });
+
+    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: 'DAMImage',
+            attrs: {
+              damObjectId: '5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a',
+              damSystemIdentifier: 'byder001',
+              damSystemType: 'bynder',
+              damAdditional: {
+                variant: 'xyz',
+              },
+            },
+          },
+        ],
+      },
+    });
+
+    expect(getHtmlContent()).toEqual(
+      '<img ' +
+        'src="https://default-resource/" ' +
+        'data-dam-object-id="5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a" ' +
+        'data-dam-system-identifier="byder001" ' +
+        'data-dam-system-type="bynder" ' +
+        'data-dam-additional="{&quot;variant&quot;:&quot;xyz&quot;}" ' +
+        'draggable="true">' +
+        '<img class="ProseMirror-separator" alt="">' +
+        '<br class="ProseMirror-trailingBreak">',
+    );
+  });
+});

package/src/Extensions/ImageExtension/DAMImageExtension.ts

@@ -0,0 +1,119 @@
+import {
+  ApplySchemaAttributes,
+  command,
+  extension,
+  ExtensionPriority,
+  ExtensionTag,
+  isElementDomNode,
+  NodeExtension,
+  NodeExtensionSpec,
+  NodeSpecOverride,
+  omitExtraAttributes,
+  CommandFunction,
+} from '@remirror/core';
+import { getTextSelection } from 'remirror';
+import { NodeName } from '../Extensions';
+
+export type DAMImageAttributes = {
+  damObjectId: string;
+  damSystemIdentifier: string;
+  damSystemType: string;
+  damAdditional?: {
+    variant: string;
+  };
+  url: string;
+};
+
+@extension({
+  defaultOptions: {},
+  defaultPriority: ExtensionPriority.High,
+})
+export class DAMImageExtension extends NodeExtension {
+  get name() {
+    return NodeName.DAMImage as const;
+  }
+
+  createTags() {
+    return [ExtensionTag.InlineNode, ExtensionTag.Media];
+  }
+
+  createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec {
+    return {
+      inline: true,
+      draggable: true,
+      selectable: true,
+      ...override,
+      attrs: {
+        ...extra.defaults(),
+        damObjectId: {},
+        damSystemIdentifier: {},
+        damSystemType: {},
+        damAdditional: { default: undefined },
+        src: { default: '' },
+      },
+      parseDOM: [
+        {
+          tag: 'img[data-dam-object-id]',
+          getAttrs: (node) => {
+            if (!isElementDomNode(node)) {
+              return false;
+            }
+
+            const damObjectId = node.getAttribute('data-dam-object-id');
+            const damSystemIdentifier = node.getAttribute('data-dam-system-identifier');
+            const damSystemType = node.getAttribute('data-dam-system-type');
+            let damAdditional = node.getAttribute('data-dam-additional') || undefined;
+
+            if (!damObjectId || !damSystemIdentifier || !damSystemType) {
+              return false;
+            }
+
+            if (damAdditional) {
+              damAdditional = JSON.parse(damAdditional);
+            }
+
+            return {
+              ...extra.parse(node),
+              damObjectId,
+              damSystemIdentifier,
+              damSystemType,
+              damAdditional,
+              src: '',
+            };
+          },
+        },
+      ],
+      toDOM: (node) => {
+        const { damObjectId, damSystemIdentifier, damSystemType, damAdditional, src, ...rest } = omitExtraAttributes(
+          node.attrs,
+          extra,
+        );
+
+        return [
+          'img',
+          {
+            ...extra.dom(node),
+            ...rest,
+            src,
+            'data-dam-object-id': damObjectId,
+            'data-dam-system-identifier': damSystemIdentifier,
+            'data-dam-system-type': damSystemType,
+            'data-dam-additional': damAdditional ? JSON.stringify(damAdditional) : undefined,
+          },
+        ];
+      },
+    };
+  }
+
+  @command()
+  insertDAMImage(attrs: DAMImageAttributes): CommandFunction {
+    return ({ tr, dispatch }) => {
+      const { from, to } = getTextSelection(tr.selection, tr.doc);
+      const node = this.type.create({ ...attrs, src: attrs.url });
+
+      dispatch?.(tr.replaceRangeWith(from, to, node));
+
+      return true;
+    };
+  }
+}

package/src/Icons/AiIcon.tsx

@@ -0,0 +1,140 @@
+import React from 'react';
+
+export const ICON_AI = (
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <g id="sq-AI-icon" clipPath="url(#clip0_3060_44545)">
+      <g id="circle" filter="url(#filter0_dd_3060_44545)">
+        <rect x="2" y="2" width="20" height="20" rx="10" fill="url(#paint0_linear_3060_44545)" />
+        <rect x="1.5" y="1.5" width="21" height="21" rx="10.5" stroke="white" />
+      </g>
+      <g id="Vector" filter="url(#filter1_d_3060_44545)">
+        <path
+          d="M11.2084 9.79157L10.1219 7.39977C9.88269 6.86674 9.11731 6.86674 8.87813 7.39977L7.79157 9.79157L5.39977 10.8781C4.86674 11.1241 4.86674 11.8827 5.39977 12.1219L7.79157 13.2084L8.87813 15.6002C9.12415 16.1333 9.88269 16.1333 10.1219 15.6002L11.2084 13.2084L13.6002 12.1219C14.1333 11.8759 14.1333 11.1173 13.6002 10.8781L11.2084 9.79157Z"
+          fill="white"
+        />
+      </g>
+      <g id="Vector_2" opacity="0.8" filter="url(#filter2_d_3060_44545)">
+        <path
+          d="M17.4491 10.4491L16.8493 11.7779C16.7126 12.074 16.2874 12.074 16.1507 11.7779L15.5509 10.4415L14.2221 9.84169C13.926 9.70501 13.926 9.2874 14.2221 9.15072L15.5585 8.55087L16.1583 7.2221C16.295 6.92597 16.7126 6.92597 16.8493 7.2221L17.4491 8.55847L18.7779 9.15831C19.074 9.29499 19.074 9.7126 18.7779 9.84928L17.4491 10.4491Z"
+          fill="white"
+        />
+      </g>
+      <g id="Ellipse 55" opacity="0.8" filter="url(#filter3_d_3060_44545)">
+        <circle cx="14.5" cy="16.5" r="1.5" fill="white" />
+      </g>
+    </g>
+    <defs>
+      <filter
+        id="filter0_dd_3060_44545"
+        x="0"
+        y="0"
+        width="24"
+        height="24"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dx="1" dy="1" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0.2 0 0 0 0 0.709941 0 0 0 0 1 0 0 0 0.64 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3060_44545" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dx="-1" dy="-1" />
+        <feComposite in2="hardAlpha" operator="out" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0.96 0 0 0 0 0.76 0 0 0 0 0.48 0 0 0 0.64 0" />
+        <feBlend mode="normal" in2="effect1_dropShadow_3060_44545" result="effect2_dropShadow_3060_44545" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_3060_44545" result="shape" />
+      </filter>
+      <filter
+        id="filter1_d_3060_44545"
+        x="5"
+        y="7"
+        width="9"
+        height="10"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3060_44545" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3060_44545" result="shape" />
+      </filter>
+      <filter
+        id="filter2_d_3060_44545"
+        x="14"
+        y="7"
+        width="5"
+        height="6.30682"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1.30682" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3060_44545" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3060_44545" result="shape" />
+      </filter>
+      <filter
+        id="filter3_d_3060_44545"
+        x="13"
+        y="15"
+        width="3"
+        height="4.32373"
+        filterUnits="userSpaceOnUse"
+        colorInterpolationFilters="sRGB"
+      >
+        <feFlood floodOpacity="0" result="BackgroundImageFix" />
+        <feColorMatrix
+          in="SourceAlpha"
+          type="matrix"
+          values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
+          result="hardAlpha"
+        />
+        <feOffset dy="1.32373" />
+        <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0" />
+        <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_3060_44545" />
+        <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_3060_44545" result="shape" />
+      </filter>
+      <linearGradient
+        id="paint0_linear_3060_44545"
+        x1="6.54545"
+        y1="3.81818"
+        x2="17"
+        y2="20.1818"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#F5D6AB" />
+        <stop offset="0.251162" stopColor="#F895A7" />
+        <stop offset="0.585" stopColor="#77A1F1" />
+        <stop offset="0.861262" stopColor="#68C8FF" />
+      </linearGradient>
+      <clipPath id="clip0_3060_44545">
+        <rect width="24" height="24" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);

package/src/index.scss

@@ -3,6 +3,8 @@
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
 
+@import '@squiz/sds/lib/package.css';
+
 /* So we can use icons inside of FTE content */
 @import 'https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded';
 
@@ -22,3 +24,5 @@
 @import './ui/CollapseBox/collapseBox';
 
 @import './ui/Modal/modal';
+
+@import './EditorToolbar/Tools/ContentTools/content-tools';