@squiz/formatted-text-editor 2.0.1 → 2.2.0

package/lib/ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { InputContainerProps } from '../InputContainer/InputContainer';
+import { NodeName } from '../../../Extensions/Extensions';
+type MatrixAsset = {
+    matrixIdentifier?: string;
+    matrixAssetId?: string;
+};
+type DAMAsset = {
+    damSystemIdentifier?: string;
+    damObjectId?: string;
+    damSystemType?: string;
+};
+type ResourceBrowserSelectorValue = MatrixAsset & DAMAsset & {
+    nodeType?: NodeName;
+    url?: string;
+};
+export type ResourceBrowserSelectorProps<T extends ResourceBrowserSelectorValue> = Omit<InputContainerProps, 'children'> & {
+    modalTitle: string;
+    allowedTypes?: string[];
+    value?: T | null;
+    onChange: (value: {
+        target: {
+            value: T;
+        };
+    }) => void;
+};
+export declare const ResourceBrowserSelector: <T extends ResourceBrowserSelectorValue>({ modalTitle, allowedTypes, value, onChange, ...props }: ResourceBrowserSelectorProps<T>) => React.JSX.Element;
+export {};

package/lib/ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector.js

@@ -0,0 +1,88 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ResourceBrowserSelector = void 0;
+const react_1 = __importStar(require("react"));
+const resource_browser_1 = require("@squiz/resource-browser");
+const InputContainer_1 = require("../InputContainer/InputContainer");
+const Extensions_1 = require("../../../Extensions/Extensions");
+const ResourceBrowserSelector = ({ modalTitle, allowedTypes, value, onChange, ...props }) => {
+    const convertFormDataToResourceBrowserValue = (0, react_1.useCallback)((value) => {
+        if (value?.matrixIdentifier && value?.matrixAssetId) {
+            return {
+                sourceId: value.matrixIdentifier,
+                resourceId: value.matrixAssetId,
+            };
+        }
+        else if (value?.damSystemIdentifier && value?.damObjectId) {
+            return {
+                sourceId: value.damSystemIdentifier,
+                resourceId: value.damObjectId,
+            };
+        }
+        return null;
+    }, []);
+    const handleResourceChange = (0, react_1.useCallback)((resource) => {
+        // Clear out any key properties for clear resource use case
+        let onChangeData = {
+            ...value,
+            matrixIdentifier: undefined,
+            matrixAssetId: undefined,
+            damSystemIdentifier: undefined,
+            damObjectId: undefined,
+            damSystemType: undefined,
+            url: undefined,
+        };
+        if (resource?.source?.type === 'matrix') {
+            onChangeData = {
+                ...value,
+                matrixIdentifier: resource?.source?.id,
+                matrixAssetId: resource?.id,
+                url: resource?.url,
+                nodeType: Extensions_1.NodeName.AssetImage,
+            };
+        }
+        else if (resource?.source?.type === 'dam') {
+            onChangeData = {
+                ...value,
+                damSystemIdentifier: resource?.source?.id,
+                damObjectId: resource?.id,
+                damSystemType: (resource?.source).configuration.externalType,
+                url: resource?.url,
+                nodeType: Extensions_1.NodeName.DAMImage,
+            };
+        }
+        onChange({
+            target: {
+                value: {
+                    ...onChangeData,
+                },
+            },
+        });
+    }, []);
+    return (react_1.default.createElement(InputContainer_1.InputContainer, { ...props },
+        react_1.default.createElement(resource_browser_1.ResourceBrowser, { modalTitle: modalTitle, allowedTypes: allowedTypes, value: convertFormDataToResourceBrowserValue(value), onChange: handleResourceChange })));
+};
+exports.ResourceBrowserSelector = ResourceBrowserSelector;

package/lib/utils/converters/remirrorNodeToSquizNode/remirrorNodeToSquizNode.js

@@ -117,6 +117,15 @@ const transformNode = (node) => {
             matrixDomain: node.attrs.matrixDomain,
         };
     }
+    if (node.type.name === Extensions_1.NodeName.DAMImage) {
+        transformedNode = {
+            type: 'dam-image',
+            damObjectId: node.attrs.damObjectId,
+            damSystemIdentifier: node.attrs.damSystemIdentifier,
+            damSystemType: node.attrs.damSystemType,
+            damAdditional: node.attrs.damAdditional ? JSON.parse(node.attrs.damAdditional) : undefined,
+        };
+    }
     node.marks.forEach((mark) => {
         transformedNode = transformMark(mark, transformedNode);
     });

package/lib/utils/converters/squizNodeToRemirrorNode/squizNodeToRemirrorNode.js

@@ -7,6 +7,7 @@ const getNodeType = (node) => {
     const typeMap = {
         'link-to-matrix-asset': Extensions_1.NodeName.Text,
         'matrix-image': Extensions_1.NodeName.AssetImage,
+        'dam-image': Extensions_1.NodeName.DAMImage,
         text: 'text',
     };
     const tagMap = {
@@ -87,6 +88,14 @@ const getNodeAttributes = (node) => {
             matrixIdentifier: node.matrixIdentifier,
         };
     }
+    else if (node.type === 'dam-image') {
+        return {
+            damObjectId: node.damObjectId,
+            damSystemIdentifier: node.damSystemIdentifier,
+            damSystemType: node.damSystemType,
+            damAdditional: node.damAdditional ? JSON.stringify(node.damAdditional) : undefined,
+        };
+    }
     else if (node.type === 'tag') {
         return {
             nodeIndent: null,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squiz/formatted-text-editor",
-  "version": "2.0.1",
+  "version": "2.2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "private": false,
@@ -24,9 +24,12 @@
     "@mui/icons-material": "5.15.18",
     "@remirror/extension-react-tables": "^2.2.19",
     "@remirror/react": "2.0.35",
-    "@squiz/dx-json-schema-lib": "^1.65.1",
+    "@squiz/dx-json-schema-lib": "^1.72.0",
+    "@squiz/dxp-ai-client-react": "^0.1.3-alpha",
     "@squiz/matrix-resource-browser-plugin": "^2.0.0",
     "@squiz/resource-browser": "^2.0.0",
+    "@squiz/sds": "^1.0.0-alpha.50",
+    "@squiz/dam-resource-browser-plugin": "^0.9.0-rc.0",
     "clsx": "2.1.1",
     "react-hook-form": "7.51.4",
     "react-image-size": "2.0.0",
@@ -56,6 +59,7 @@
     "react": "18.2.0",
     "react-diff-viewer-continued": "3.2.6",
     "react-dom": "18.2.0",
+    "react-query": "^3.19.6",
     "rimraf": "5.0.7",
     "tailwindcss": "3.2.6",
     "ts-jest": "29.0.5",

package/src/EditorToolbar/FloatingToolbar.spec.tsx

@@ -31,13 +31,15 @@ describe('FloatingToolbar', () => {
   it.each([
     ['Image selected', 1, ['Image (Ctrl+L)']],
     ['Asset image selected', 2, ['Image (Ctrl+L)']],
+    ['DAM image selected', 3, ['Image (Ctrl+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" />',
+          '<img data-matrix-asset-id="100" data-matrix-identifier="key" data-matrix-domain="my-matrix.squiz.net" />' +
+          '<img data-dam-object-id="5ce8e8dc-1adc-4254-87a8-d1f5a5c9045a" data-dam-system-identifier="byder001" data-dam-system-type="bynder" />',
         editable: true,
       });
 

package/src/EditorToolbar/FloatingToolbar.tsx

@@ -30,7 +30,7 @@ export const FloatingToolbar = () => {
     extensionNames.underline && <UnderlineButton key="underline" />,
   ];
 
-  if (active.image() || active.assetImage()) {
+  if (active.image() || active.assetImage() || active.DAMImage()) {
     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

package/src/EditorToolbar/Toolbar.tsx

@@ -15,6 +15,7 @@ import ClearFormattingButton from './Tools/ClearFormatting/ClearFormattingButton
 import ListButtons from './Tools/Lists/ListButtons';
 import HorizontalLineButton from './Tools/HorizontalLine/HorizontalLineButton';
 import TableButton from './Tools/Table/TableButton';
+import ContentToolsDropdown from './Tools/ContentTools/ContentToolsDropdown';
 import { useExtensionNames } from '../hooks';
 
 type ToolbarProps = {
@@ -54,6 +55,7 @@ export const Toolbar = ({ isVisible, enableTableTool }: ToolbarProps) => {
         {extensionNames.image && <ImageButton />}
         {extensionNames.clearFormatting && <ClearFormattingButton />}
         {enableTableTool && extensionNames.table && <TableButton />}
+        <ContentToolsDropdown />
       </div>
     </RemirrorToolbar>
   );

package/src/EditorToolbar/Tools/ContentTools/ContentToolsDropdown.spec.tsx

@@ -0,0 +1,78 @@
+import '@testing-library/jest-dom';
+import { fireEvent } from '@testing-library/react';
+import React from 'react';
+import { useAiService } from '@squiz/dxp-ai-client-react';
+import ContentToolsDropdown from './ContentToolsDropdown';
+import { renderWithContext } from '../../../../tests';
+
+// Mock the module
+jest.mock('@squiz/dxp-ai-client-react', () => ({
+  useAiService: jest.fn(),
+}));
+
+// Cast useAiService to a Jest mock
+const mockedUseAiService = useAiService as jest.MockedFunction<typeof useAiService>;
+
+describe('Content tools dropdown', () => {
+  it('should not render the content tools dropdown component when there are no content tools', () => {
+    mockedUseAiService.mockReturnValue({
+      contentTools: [],
+    } as any);
+
+    const { baseElement } = renderWithContext(<ContentToolsDropdown />);
+
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector('.sds-dropdown.active')).toBeFalsy();
+  });
+
+  it('should render the content tools dropdown when there are content tools', () => {
+    mockedUseAiService.mockReturnValue({
+      contentTools: [
+        {
+          id: 'unique-id',
+          name: 'Testing content tools',
+        },
+      ],
+    } as any);
+
+    const { baseElement } = renderWithContext(<ContentToolsDropdown />);
+
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector(`.sds-dropdown.active`)).toBeFalsy();
+
+    const launchButton = baseElement.querySelector(`.sds-button`) as HTMLButtonElement;
+    expect(launchButton).toBeTruthy();
+
+    fireEvent.click(launchButton);
+    expect(baseElement.querySelector(`.sds-dropdown.active`)).toBeTruthy();
+  });
+
+  it('should handle when a content tool is clicked', () => {
+    mockedUseAiService.mockReturnValue({
+      contentTools: [
+        {
+          id: 'unique-id',
+          name: 'Testing content tools',
+        },
+      ],
+    } as any);
+
+    const { baseElement } = renderWithContext(<ContentToolsDropdown />);
+
+    expect(baseElement).toBeTruthy();
+    expect(baseElement.querySelector(`.sds-dropdown.active`)).toBeFalsy();
+
+    const launchButton = baseElement.querySelector(`.sds-button`) as HTMLButtonElement;
+    expect(launchButton).toBeTruthy();
+
+    fireEvent.click(launchButton);
+    expect(baseElement.querySelector(`.sds-dropdown.active`)).toBeTruthy();
+
+    const actionItems = baseElement.querySelectorAll(`.sds-dropdown-button`);
+    const firstItem = actionItems[0] as HTMLButtonElement;
+    expect(firstItem.textContent).toBe('Testing content tools');
+
+    fireEvent.click(firstItem);
+    expect(baseElement.querySelector(`.sds-dropdown.active`)).toBeFalsy();
+  });
+});

package/src/EditorToolbar/Tools/ContentTools/ContentToolsDropdown.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { ICON_AI } from '../../../Icons/AiIcon';
+import { BUTTON_FORMAT_TRANSPARENT, BUTTON_THEME_DEFAULT, DROPDOWN_POSITION_RIGHT, Dropdown } from '@squiz/sds';
+import { useAiService } from '@squiz/dxp-ai-client-react';
+import { VerticalDivider } from '@remirror/react';
+
+const ContentToolsDropdown = () => {
+  const { contentTools } = useAiService();
+
+  const dropdownItems = contentTools.map((item) => ({
+    items: [
+      {
+        action: () => alert(JSON.stringify(item, null, 2)),
+        key: item.id,
+        label: <span>{item.name}</span>,
+      },
+    ],
+    key: item.id,
+  }));
+
+  // No content tools to show, don't show dropdown at all
+  if (contentTools.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <VerticalDivider />
+      <Dropdown
+        title="Content tools"
+        aria-label="Content tools"
+        buttonProps={{
+          format: BUTTON_FORMAT_TRANSPARENT,
+          icon: ICON_AI,
+          theme: BUTTON_THEME_DEFAULT,
+        }}
+        className="content-tools-dropdown"
+        dropdownPosition={DROPDOWN_POSITION_RIGHT}
+        heading={'Rewrite to...'}
+        sections={dropdownItems}
+      />
+    </>
+  );
+};
+
+export default ContentToolsDropdown;

package/src/EditorToolbar/Tools/ContentTools/_content-tools.scss

@@ -0,0 +1,45 @@
+.content-tools-dropdown {
+  .sds-button-icon svg {
+    fill: none !important;
+  }
+
+  .sds-dropdown {
+    left: auto;
+    right: auto;
+    top: auto;
+
+    width: 188px;
+    margin-top: 0.45rem;
+    margin-left: -2rem;
+
+    .sds-dropdown-heading {
+      font-size: 0.8125rem;
+      font-weight: 600;
+      letter-spacing: 0;
+      line-height: 1rem;
+      background-color: #f5f5f5;
+      border-radius: 0.25rem;
+      padding: 0.25rem 0.5rem;
+      pointer-events: none;
+      text-transform: none;
+    }
+
+    .sds-dropdown-section {
+      border-top: 1px solid #ededed;
+      border-bottom: none;
+      padding-top: 0.25rem;
+      margin-bottom: 0;
+
+      .sds-dropdown-label {
+        font-size: 0.8125rem;
+        color: #4f4f4f;
+        line-height: 1rem;
+      }
+    }
+
+    &.active {
+      display: block;
+      padding: 0.25rem;
+    }
+  }
+}

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

@@ -3,7 +3,13 @@ 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';
+import { mockResourceBrowser, mockResourceBrowserContext } from '../../../../../tests';
+
+const { setShouldUseMockResourceBrowser, mockResourceBrowserImpl } = mockResourceBrowser();
+jest.mock('@squiz/resource-browser', () => ({
+  ...jest.requireActual('@squiz/resource-browser'),
+  ResourceBrowser: (props: any) => mockResourceBrowserImpl(props),
+}));
 
 describe('Image Form', () => {
   const handleSubmit = jest.fn();
@@ -48,7 +54,7 @@ describe('Image Form', () => {
           data={{
             ...data,
             imageType: NodeName.AssetImage,
-            assetImage: { matrixAssetId: '100', matrixIdentifier: 'matrix-api-identifier' },
+            resourceImage: { matrixAssetId: '100', matrixIdentifier: 'matrix-api-identifier' },
           }}
           onSubmit={handleSubmit}
         />
@@ -61,6 +67,25 @@ describe('Image Form', () => {
     });
   });
 
+  it('Renders the form with the relevant fields for dam images', async () => {
+    setShouldUseMockResourceBrowser(true);
+    render(
+      <ImageForm
+        data={{
+          ...data,
+          imageType: NodeName.DAMImage,
+          resourceImage: { damObjectId: '100', damSystemIdentifier: 'dam-api-identifier' },
+        }}
+        onSubmit={handleSubmit}
+      />,
+    );
+
+    expect(document.querySelector('div[data-headlessui-state="selected"]')).toHaveTextContent('From source');
+    await waitFor(() => {
+      expect(screen.getByText('ResourceBrowser was rendered')).toBeInTheDocument();
+    });
+  });
+
   it('calculates the height when width changes and aspect ratio is locked', () => {
     render(<ImageForm data={data} onSubmit={handleSubmit} />);
     const widthInput = screen.getByLabelText('Width');

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

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState } from 'react';
+import React, { ReactElement, useState, useCallback, useEffect } from 'react';
 import { Controller, SubmitHandler, useForm } from 'react-hook-form';
 import { getImageSize } from 'react-image-size';
 import clsx from 'clsx';
@@ -9,20 +9,25 @@ 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 { DAMImageAttributes } from '../../../../Extensions/ImageExtension/DAMImageExtension';
 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';
+import { ResourceBrowserSelector } from '../../../../ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector';
 
 export type ImageFormData = {
   imageType: NodeName;
   image: Pick<ImageAttributes, 'src' | 'alt' | 'width' | 'height'>;
-  assetImage: AssetImageAttributes;
+  resourceImage: AssetImageAttributes & DAMImageAttributes;
 };
 
+enum ViewTypes {
+  Resource = 'Resource',
+  URL = 'URL',
+}
 const imageTypeOptions: TabOptions = {
-  [NodeName.AssetImage]: { label: 'From source' },
-  [NodeName.Image]: { label: 'From URL' },
+  [ViewTypes.Resource]: { label: 'From source' },
+  [ViewTypes.URL]: { label: 'From URL' },
 };
 
 export type FormProps = {
@@ -42,7 +47,8 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
   } = useForm<ImageFormData>({
     defaultValues: data,
   });
-  const imageType = watch('imageType') || NodeName.AssetImage;
+  const imageType = watch('imageType');
+  const [viewType, setViewType] = useState<ViewTypes>(ViewTypes.Resource);
   const [aspectRatioFromWidth, setAspectRatioFromWidth] = useState(9 / 16);
   const [aspectRatioFromHeight, setAspectRatioFromHeight] = useState(16 / 9);
   const [aspectRatioLocked, setAspectRatioLocked] = useState(true);
@@ -86,16 +92,41 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
     setAspectRatioLocked(!aspectRatioLocked);
   };
 
+  useEffect(() => {
+    if (imageType === NodeName.Image) {
+      setViewType(ViewTypes.URL);
+    } else {
+      setViewType(ViewTypes.Resource);
+    }
+  }, [imageType, setViewType]);
+
+  const handleChangeViewType = useCallback(
+    (value: string) => {
+      setViewType(value as ViewTypes);
+      // If its the URL field type we know what the imageType should be
+      if (value === ViewTypes.URL) {
+        console.log(`handleChangeViewType: ${value} NodeName.Image`);
+        setValue('imageType', NodeName.Image);
+      } else {
+        // Need a value here and this is the assumed default elsewhere
+        // Will be set again later once Resource Browser returns a resource value
+        console.log(`handleChangeViewType: ${value} NodeName.AssetImage`);
+        setValue('imageType', NodeName.AssetImage);
+      }
+    },
+    [setViewType, setValue],
+  );
+
   return (
     <form className="squiz-fte-form" onSubmit={handleSubmit(onSubmit)}>
       <div className="squiz-fte-form-group mb-4">
         <Tabs
-          value={imageType}
+          value={imageType === NodeName.Image ? ViewTypes.URL : ViewTypes.Resource}
           options={imageTypeOptions}
-          onChange={(value) => setValue('imageType', value as NodeName)}
+          onChange={handleChangeViewType}
         />
       </div>
-      {imageType === NodeName.Image && (
+      {viewType === ViewTypes.URL && (
         <>
           <div className="squiz-fte-form-group mb-2">
             <Input
@@ -174,20 +205,36 @@ const ImageForm = ({ data, onSubmit }: FormProps): ReactElement => {
           </div>
         </>
       )}
-      {imageType === NodeName.AssetImage && (
+      {viewType === ViewTypes.Resource && (
         <div className="squiz-fte-form-group mb-2">
           <Controller
             control={control}
-            name="assetImage"
+            name="resourceImage"
             rules={{
-              validate: hasProperties('An image must be selected', ['matrixIdentifier', 'matrixAssetId']),
+              validate: (value) => {
+                const matrixValidation = hasProperties('An image must be selected', [
+                  'matrixIdentifier',
+                  'matrixAssetId',
+                ])(value);
+                const damValidation = hasProperties('An image must be selected', [
+                  'damObjectId',
+                  'damSystemIdentifier',
+                ])(value);
+
+                // One of the two needs to validate
+                return matrixValidation && damValidation;
+              },
             }}
             render={({ field: { onChange, value }, fieldState: { error } }) => (
-              <MatrixAsset
+              <ResourceBrowserSelector
                 modalTitle="Insert image"
                 allowedTypes={['image']}
                 value={value}
-                onChange={onChange}
+                onChange={(value: { target: { value: any } }) => {
+                  console.log(`onChange: ${value}`);
+                  setValue('imageType', value.target.value.nodeType);
+                  onChange(value);
+                }}
                 error={error?.message}
               />
             )}