@squiz/formatted-text-editor 2.0.1 → 2.2.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 2.2.0
+
+### Minor Changes
+
+- 985e1a5: ### Updates to DAM asset resolver package
+
+  **Changes:**
+
+  - Updated DAM resolver package versions.
+  - Updated Json validation schema so multiple resolvers can be used for SquizImage type.
+  - Updated higher order node map so Dam images could be resolved to simple url.
+  - Updated page builder resolver to handle DAM images
+
+### Patch Changes
+
+- Updated dependencies [985e1a5]
+  - @squiz/dx-json-schema-lib@1.72.0
+
+## 2.1.0
+
+### Minor Changes
+
+- 37094f9: Added content tools dropdown & context to FTE
+
 ## 2.0.1
 
 ### Patch Changes

package/demo/App.tsx

@@ -81,6 +81,11 @@ function App() {
               <a href="https://www.google.com"><strong>Mr Bean</strong></a>, nice to <a href="https://www.google.com">meet you</a>.
               <img src="https://media2.giphy.com/media/3o6ozsIxg5legYvggo/giphy.gif" height="150" width="200"/>
               <img data-matrix-asset-id="1" data-matrix-identifier="matrixIdentifier" data-matrix-domain="https://matrix-domain.squiz.net">
+              <img
+                  data-dam-object-id="CA87B42E-9410-402F-B3669D6900DD0793"
+                  data-dam-system-identifier="byder001"
+                  data-dam-system-type="bynder"
+              >
               </p>
             `}
             onChange={handleEditorChange}

package/demo/AppContext.tsx

@@ -5,66 +5,126 @@ import MatrixResourceBrowserPlugin, {
   Resource,
   ResourceReference,
 } from '@squiz/matrix-resource-browser-plugin';
+import DamResourceBrowserPlugin from '@squiz/dam-resource-browser-plugin';
 import { EditorContext } from '../src';
 import resources from './resources.json';
 import sources from './sources.json';
 import { ResolveNodeType } from '../src/types';
+import { AiServiceProvider } from '@squiz/dxp-ai-client-react';
+import { QueryClientProvider, QueryClient } from 'react-query';
 
 export type AppContextProps = PropsWithChildren;
-export const AppContext = ({ children }: AppContextProps) => (
-  <ResourceBrowserContextProvider
-    value={{
-      onRequestSources: (): Promise<ResourceBrowserSource[]> =>
-        Promise.resolve([
-          {
-            name: 'Matrix',
-            id: 'matrixIdentifier',
-            type: 'matrix',
-          },
-        ]),
-      plugins: [
-        MatrixResourceBrowserPlugin({
-          onRequestSources: (): Promise<Source> => Promise.resolve(sources),
-          onRequestChildren: (source: Source, resource: Resource | null): Promise<Resource[]> =>
-            Promise.resolve(resource._children || resources),
-          onRequestResource: (reference: ResourceReference): Promise<Resource | null> => {
-            const flattenResources = (resources: unknown[]) => {
-              return [
-                ...resources,
-                ...resources.flatMap((resource) =>
-                  '_children' in resource ? flattenResources(resource._children) : [],
-                ),
-              ];
-            };
 
-            return Promise.resolve(
-              flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
-            );
-          },
-        }),
-      ],
-    }}
-  >
-    <EditorContext.Provider
+// Set up React query for testing
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+const testQueryClient = createTestQueryClient();
+
+export const AppContext = ({ children }: AppContextProps) => (
+  <QueryClientProvider client={testQueryClient}>
+    <ResourceBrowserContextProvider
       value={{
-        matrix: {
-          matrixDomain: 'https://matrix-domain.squiz.net',
-        },
-        resolveNodeToUrl: (node: ResolveNodeType): Promise<string> => {
-          const nodeResource = node.matrixAssetId;
-          const flattenResources = (resources: unknown[]) => {
-            return [
-              ...resources,
-              ...resources.flatMap((resource) => ('_children' in resource ? flattenResources(resource._children) : [])),
-            ];
-          };
+        onRequestSources: (): Promise<ResourceBrowserSource[]> =>
+          Promise.resolve([
+            {
+              name: 'Matrix',
+              id: 'matrixIdentifier',
+              type: 'matrix',
+            },
+            {
+              name: 'Bynder',
+              id: 'byder001',
+              type: 'dam',
+              configuration: {
+                externalType: 'bynder',
+              },
+            },
+          ]),
+        plugins: [
+          DamResourceBrowserPlugin(),
+          MatrixResourceBrowserPlugin({
+            onRequestSources: (): Promise<Source> => Promise.resolve(sources),
+            onRequestChildren: (source: Source, resource: Resource | null): Promise<Resource[]> =>
+              Promise.resolve(resource._children || resources),
+            onRequestResource: (reference: ResourceReference): Promise<Resource | null> => {
+              const flattenResources = (resources: unknown[]) => {
+                return [
+                  ...resources,
+                  ...resources.flatMap((resource) =>
+                    '_children' in resource ? flattenResources(resource._children) : [],
+                  ),
+                ];
+              };
 
-          const resource = flattenResources(resources).find((resource) => resource.id === nodeResource);
-          return Promise.resolve(resource.url || '');
-        },
+              return Promise.resolve(
+                flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
+              );
+            },
+          }),
+        ],
       }}
     >
-      {children}
-    </EditorContext.Provider>
-  </ResourceBrowserContextProvider>
+      <AiServiceProvider
+        clientConfig={{
+          // We are using a simple Express proxy here for testing locally in FTE
+          // You can find this proxy here: https://gitlab.squiz.net/tgrob/dxp-ai-client-proxy
+          baseUrl: 'http://localhost:7777',
+          baseApiParams: {
+            headers: {
+              // You will need to create an API key to test this in FTE, details can be found here:
+              // https://squizgroup.atlassian.net/wiki/spaces/PRODUCT/pages/2895119377/FEaaS+Playbook+Configuring+a+Matrix+instance+for+the+Component+Service#Create-an-API-key
+              'x-api-key': '',
+            },
+          },
+          customFetch: async (input, init) => {
+            const response = await fetch(input, init);
+            return response;
+          },
+        }}
+        tags={['tag1']}
+      >
+        <EditorContext.Provider
+          value={{
+            matrix: {
+              matrixDomain: 'https://matrix-domain.squiz.net',
+            },
+            resolveNodeToUrl: (node: ResolveNodeType): Promise<string> => {
+              console.log(`resolveNodeToUrl ${JSON.stringify(node)}`);
+              // Matrix Resource
+              if (node.matrixAssetId) {
+                const nodeResource = node.matrixAssetId;
+                const flattenResources = (resources: unknown[]) => {
+                  return [
+                    ...resources,
+                    ...resources.flatMap((resource) =>
+                      '_children' in resource ? flattenResources(resource._children) : [],
+                    ),
+                  ];
+                };
+
+                const resource = flattenResources(resources).find((resource) => resource.id === nodeResource);
+                return Promise.resolve(resource.url || '');
+              }
+
+              // DAM Resource
+              if (node.damSystemType === 'bynder') {
+                return Promise.resolve('https://squiz-sandbox.bynder.com/m/4c92419541508c37/original/rx77.jpg');
+              }
+
+              return Promise.resolve('');
+            },
+          }}
+        >
+          {children}
+        </EditorContext.Provider>
+      </AiServiceProvider>
+    </ResourceBrowserContextProvider>
+  </QueryClientProvider>
 );

package/jest.config.ts

@@ -23,5 +23,5 @@ export default {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css|scss)$':
       '<rootDir>/file-transformer.js',
   },
-  setupFilesAfterEnv: ['<rootDir>/jest.bootstrap.ts'],
+  setupFilesAfterEnv: ['<rootDir>/jest.bootstrap.ts', '<rootDir>/jest.setup.ts'],
 };

package/jest.setup.ts

@@ -0,0 +1,16 @@
+import { useAiService } from '@squiz/dxp-ai-client-react';
+
+// 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>;
+
+beforeEach(() => {
+  // Provide the mock implementation before each test
+  mockedUseAiService.mockReturnValue({
+    contentTools: [],
+  } as any);
+});

package/lib/EditorToolbar/FloatingToolbar.js

@@ -52,7 +52,7 @@ const FloatingToolbar = () => {
         extensionNames.italic && react_1.default.createElement(ItalicButton_1.default, { key: "italic" }),
         extensionNames.underline && react_1.default.createElement(UnderlineButton_1.default, { key: "underline" }),
     ];
-    if (active.image() || active.assetImage()) {
+    if (active.image() || active.assetImage() || active.DAMImage()) {
         buttons = [react_1.default.createElement(ImageButton_1.default, { key: "add-image", inPopover: true })];
     }
     else if (marks?.[Extensions_1.MarkName.Link].isExclusivelyActive || marks?.[Extensions_1.MarkName.AssetLink].isExclusivelyActive) {

package/lib/EditorToolbar/Toolbar.js

@@ -21,6 +21,7 @@ const ClearFormattingButton_1 = __importDefault(require("./Tools/ClearFormatting
 const ListButtons_1 = __importDefault(require("./Tools/Lists/ListButtons"));
 const HorizontalLineButton_1 = __importDefault(require("./Tools/HorizontalLine/HorizontalLineButton"));
 const TableButton_1 = __importDefault(require("./Tools/Table/TableButton"));
+const ContentToolsDropdown_1 = __importDefault(require("./Tools/ContentTools/ContentToolsDropdown"));
 const hooks_1 = require("../hooks");
 const Toolbar = ({ isVisible, enableTableTool }) => {
     const extensionNames = (0, hooks_1.useExtensionNames)();
@@ -42,6 +43,7 @@ const Toolbar = ({ isVisible, enableTableTool }) => {
                 react_1.default.createElement(RemoveLinkButton_1.default, null))),
             extensionNames.image && react_1.default.createElement(ImageButton_1.default, null),
             extensionNames.clearFormatting && react_1.default.createElement(ClearFormattingButton_1.default, null),
-            enableTableTool && extensionNames.table && react_1.default.createElement(TableButton_1.default, null))));
+            enableTableTool && extensionNames.table && react_1.default.createElement(TableButton_1.default, null),
+            react_1.default.createElement(ContentToolsDropdown_1.default, null))));
 };
 exports.Toolbar = Toolbar;

package/lib/EditorToolbar/Tools/ContentTools/ContentToolsDropdown.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const ContentToolsDropdown: () => React.JSX.Element | null;
+export default ContentToolsDropdown;

package/lib/EditorToolbar/Tools/ContentTools/ContentToolsDropdown.js

@@ -0,0 +1,35 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const AiIcon_1 = require("../../../Icons/AiIcon");
+const sds_1 = require("@squiz/sds");
+const dxp_ai_client_react_1 = require("@squiz/dxp-ai-client-react");
+const react_2 = require("@remirror/react");
+const ContentToolsDropdown = () => {
+    const { contentTools } = (0, dxp_ai_client_react_1.useAiService)();
+    const dropdownItems = contentTools.map((item) => ({
+        items: [
+            {
+                action: () => alert(JSON.stringify(item, null, 2)),
+                key: item.id,
+                label: react_1.default.createElement("span", null, item.name),
+            },
+        ],
+        key: item.id,
+    }));
+    // No content tools to show, don't show dropdown at all
+    if (contentTools.length === 0) {
+        return null;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(react_2.VerticalDivider, null),
+        react_1.default.createElement(sds_1.Dropdown, { title: "Content tools", "aria-label": "Content tools", buttonProps: {
+                format: sds_1.BUTTON_FORMAT_TRANSPARENT,
+                icon: AiIcon_1.ICON_AI,
+                theme: sds_1.BUTTON_THEME_DEFAULT,
+            }, className: "content-tools-dropdown", dropdownPosition: sds_1.DROPDOWN_POSITION_RIGHT, heading: 'Rewrite to...', sections: dropdownItems })));
+};
+exports.default = ContentToolsDropdown;

package/lib/EditorToolbar/Tools/Image/Form/ImageForm.d.ts

@@ -3,11 +3,12 @@ import { SubmitHandler } from 'react-hook-form';
 import { ImageAttributes } from '@remirror/extension-image/dist-types/image-extension';
 import { NodeName } from '../../../../Extensions/Extensions';
 import { AssetImageAttributes } from '../../../../Extensions/ImageExtension/AssetImageExtension';
+import { DAMImageAttributes } from '../../../../Extensions/ImageExtension/DAMImageExtension';
 import { DeepPartial } from '../../../../types';
 export type ImageFormData = {
     imageType: NodeName;
     image: Pick<ImageAttributes, 'src' | 'alt' | 'width' | 'height'>;
-    assetImage: AssetImageAttributes;
+    resourceImage: AssetImageAttributes & DAMImageAttributes;
 };
 export type FormProps = {
     data: DeepPartial<ImageFormData>;

package/lib/EditorToolbar/Tools/Image/Form/ImageForm.js

@@ -37,16 +37,22 @@ const InsertLinkRounded_1 = __importDefault(require("@mui/icons-material/InsertL
 const Extensions_1 = require("../../../../Extensions/Extensions");
 const validation_1 = require("../../../../utils/validation");
 const Tabs_1 = require("../../../../ui/Tabs/Tabs");
-const MatrixAsset_1 = require("../../../../ui/Fields/MatrixAsset/MatrixAsset");
+const ResourceBrowserSelector_1 = require("../../../../ui/Fields/ResourceBrowserSelector/ResourceBrowserSelector");
+var ViewTypes;
+(function (ViewTypes) {
+    ViewTypes["Resource"] = "Resource";
+    ViewTypes["URL"] = "URL";
+})(ViewTypes || (ViewTypes = {}));
 const imageTypeOptions = {
-    [Extensions_1.NodeName.AssetImage]: { label: 'From source' },
-    [Extensions_1.NodeName.Image]: { label: 'From URL' },
+    [ViewTypes.Resource]: { label: 'From source' },
+    [ViewTypes.URL]: { label: 'From URL' },
 };
 const ImageForm = ({ data, onSubmit }) => {
     const { control, register, handleSubmit, setValue, watch, formState: { errors }, } = (0, react_hook_form_1.useForm)({
         defaultValues: data,
     });
-    const imageType = watch('imageType') || Extensions_1.NodeName.AssetImage;
+    const imageType = watch('imageType');
+    const [viewType, setViewType] = (0, react_1.useState)(ViewTypes.Resource);
     const [aspectRatioFromWidth, setAspectRatioFromWidth] = (0, react_1.useState)(9 / 16);
     const [aspectRatioFromHeight, setAspectRatioFromHeight] = (0, react_1.useState)(16 / 9);
     const [aspectRatioLocked, setAspectRatioLocked] = (0, react_1.useState)(true);
@@ -86,10 +92,32 @@ const ImageForm = ({ data, onSubmit }) => {
     const toggleAspectRatio = () => {
         setAspectRatioLocked(!aspectRatioLocked);
     };
+    (0, react_1.useEffect)(() => {
+        if (imageType === Extensions_1.NodeName.Image) {
+            setViewType(ViewTypes.URL);
+        }
+        else {
+            setViewType(ViewTypes.Resource);
+        }
+    }, [imageType, setViewType]);
+    const handleChangeViewType = (0, react_1.useCallback)((value) => {
+        setViewType(value);
+        // 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', Extensions_1.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', Extensions_1.NodeName.AssetImage);
+        }
+    }, [setViewType, setValue]);
     return (react_1.default.createElement("form", { className: "squiz-fte-form", onSubmit: handleSubmit(onSubmit) },
         react_1.default.createElement("div", { className: "squiz-fte-form-group mb-4" },
-            react_1.default.createElement(Tabs_1.Tabs, { value: imageType, options: imageTypeOptions, onChange: (value) => setValue('imageType', value) })),
-        imageType === Extensions_1.NodeName.Image && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(Tabs_1.Tabs, { value: imageType === Extensions_1.NodeName.Image ? ViewTypes.URL : ViewTypes.Resource, options: imageTypeOptions, onChange: handleChangeViewType })),
+        viewType === ViewTypes.URL && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
                 react_1.default.createElement(Input_1.Input, { label: "Source", required: true, error: errors?.image?.src?.message, ...register('image.src', {
                         onChange: setDimensionsFromURL,
@@ -135,9 +163,24 @@ const ImageForm = ({ data, onSubmit }) => {
                         }) }))),
             react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
                 react_1.default.createElement(Input_1.Input, { label: "Alternative description", error: errors?.image?.alt?.message, ...register('image.alt') })))),
-        imageType === Extensions_1.NodeName.AssetImage && (react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
-            react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "assetImage", rules: {
-                    validate: (0, validation_1.hasProperties)('An image must be selected', ['matrixIdentifier', 'matrixAssetId']),
-                }, render: ({ field: { onChange, value }, fieldState: { error } }) => (react_1.default.createElement(MatrixAsset_1.MatrixAsset, { modalTitle: "Insert image", allowedTypes: ['image'], value: value, onChange: onChange, error: error?.message })) })))));
+        viewType === ViewTypes.Resource && (react_1.default.createElement("div", { className: "squiz-fte-form-group mb-2" },
+            react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "resourceImage", rules: {
+                    validate: (value) => {
+                        const matrixValidation = (0, validation_1.hasProperties)('An image must be selected', [
+                            'matrixIdentifier',
+                            'matrixAssetId',
+                        ])(value);
+                        const damValidation = (0, validation_1.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 } }) => (react_1.default.createElement(ResourceBrowserSelector_1.ResourceBrowserSelector, { modalTitle: "Insert image", allowedTypes: ['image'], value: value, onChange: (value) => {
+                        console.log(`onChange: ${value}`);
+                        setValue('imageType', value.target.value.nodeType);
+                        onChange(value);
+                    }, error: error?.message })) })))));
 };
 exports.default = ImageForm;

package/lib/EditorToolbar/Tools/Image/ImageButton.js

@@ -35,23 +35,26 @@ const Extensions_1 = require("../../../Extensions/Extensions");
 const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const ImageButton = ({ inPopover = false }) => {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
-    const { insertImage, insertAssetImage } = (0, react_2.useCommands)();
+    const { insertImage, insertAssetImage, insertDAMImage } = (0, react_2.useCommands)();
     const active = (0, react_2.useActive)();
     const selection = (0, react_2.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) {
             setShowModal(true);
         }
     };
     const insertImageFromData = (data) => {
-        const { imageType, image, assetImage } = data;
+        const { imageType, image, resourceImage } = data;
         if (imageType === Extensions_1.NodeName.Image) {
             insertImage(image);
         }
+        else if (imageType === Extensions_1.NodeName.DAMImage) {
+            insertDAMImage(resourceImage);
+        }
         else {
-            insertAssetImage(assetImage);
+            insertAssetImage(resourceImage);
         }
     };
     const handleSubmit = async (data) => {
@@ -70,7 +73,7 @@ const ImageButton = ({ inPopover = false }) => {
         (0, react_2.useKeymap)('Mod-l', disabled ? () => false : handleShortcut);
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.image() || active.assetImage(), icon: react_1.default.createElement(ImageRounded_1.default, null), label: `Image (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+L)`, isDisabled: disabled }),
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.image() || active.assetImage() || active.DAMImage(), icon: react_1.default.createElement(ImageRounded_1.default, null), label: `Image (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+L)`, isDisabled: disabled }),
         showModal && react_1.default.createElement(ImageModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
 };
 exports.default = ImageButton;

package/lib/EditorToolbar/Tools/Image/ImageModal.js

@@ -16,7 +16,9 @@ const ImageModal = ({ onCancel, onSubmit }) => {
     const formData = {
         imageType: currentImage?.type.name === Extensions_1.NodeName.Image ? Extensions_1.NodeName.Image : Extensions_1.NodeName.AssetImage,
         image: currentImage?.type?.name === Extensions_1.NodeName.Image ? currentImageAttrs : {},
-        assetImage: currentImage?.type?.name === Extensions_1.NodeName.AssetImage ? currentImageAttrs : {},
+        resourceImage: currentImage?.type?.name === Extensions_1.NodeName.DAMImage || currentImage?.type?.name === Extensions_1.NodeName.AssetImage
+            ? currentImageAttrs
+            : {},
     };
     return (react_1.default.createElement(FormModal_1.default, { title: "Image", icon: react_1.default.createElement(ImageRounded_1.default, null), onCancel: onCancel },
         react_1.default.createElement(ImageForm_1.default, { data: formData, onSubmit: onSubmit })));

package/lib/EditorToolbar/Tools/Table/TableButton.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const react_2 = require("@remirror/react");
-const react_components_1 = require("@remirror/react-components");
 const Button_1 = __importDefault(require("../../../ui/Button/Button"));
 const TableViewRounded_1 = __importDefault(require("@mui/icons-material/TableViewRounded"));
 const TableButton = () => {
@@ -16,7 +15,6 @@ const TableButton = () => {
         createTable({ rowsCount: 4, columnsCount: 3, withHeaderRow: false });
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.table(), icon: react_1.default.createElement(TableViewRounded_1.default, null), label: "Insert table" }),
-        react_1.default.createElement(react_components_1.VerticalDivider, null)));
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleSelect, isDisabled: !enabled, isActive: active.table(), icon: react_1.default.createElement(TableViewRounded_1.default, null), label: "Insert table" })));
 };
 exports.default = TableButton;

package/lib/Extensions/Extensions.d.ts

@@ -4,6 +4,7 @@ export declare enum NodeName {
     Image = "image",
     CodeBlock = "codeBlock",
     AssetImage = "assetImage",
+    DAMImage = "DAMImage",
     Text = "text",
     TableControllerCell = "tableControllerCell",
     tableCell = "tableCell",

package/lib/Extensions/Extensions.js

@@ -8,6 +8,7 @@ const LinkExtension_1 = require("./LinkExtension/LinkExtension");
 const ImageExtension_1 = require("./ImageExtension/ImageExtension");
 const CommandsExtension_1 = require("./CommandsExtension/CommandsExtension");
 const AssetImageExtension_1 = require("./ImageExtension/AssetImageExtension");
+const DAMImageExtension_1 = require("./ImageExtension/DAMImageExtension");
 const CodeBlockExtension_1 = require("./CodeBlockExtension/CodeBlockExtension");
 const ClearFormattingExtension_1 = require("./ClearFormattingExtension/ClearFormattingExtension");
 const UnsupportedNodeExtension_1 = require("./UnsuportedExtension/UnsupportedNodeExtension");
@@ -19,6 +20,7 @@ var NodeName;
     NodeName["Image"] = "image";
     NodeName["CodeBlock"] = "codeBlock";
     NodeName["AssetImage"] = "assetImage";
+    NodeName["DAMImage"] = "DAMImage";
     NodeName["Text"] = "text";
     NodeName["TableControllerCell"] = "tableControllerCell";
     NodeName["tableCell"] = "tableCell";
@@ -50,6 +52,7 @@ const createExtensions = (context) => {
             new AssetImageExtension_1.AssetImageExtension({
                 matrixDomain: context.matrix.matrixDomain,
             }),
+            new DAMImageExtension_1.DAMImageExtension(),
             new LinkExtension_1.LinkExtension(),
             new AssetLinkExtension_1.AssetLinkExtension({
                 matrixDomain: context.matrix.matrixDomain,

package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.js

@@ -25,6 +25,12 @@ let FetchUrlExtension = class FetchUrlExtension extends core_1.PlainExtension {
                     tr.replaceWith(pos, pos + node.nodeSize, newNode);
                 }));
             }
+            if (node.type.name === Extensions_1.NodeName.DAMImage && node.attrs.src === '') {
+                promises.push(this.fetchAndReplace(node.attrs, (url) => {
+                    const newNode = state.schema.nodes[Extensions_1.NodeName.DAMImage].create({ ...node.attrs, src: url });
+                    tr.replaceWith(pos, pos + node.nodeSize, newNode);
+                }));
+            }
             const assetLinkMark = this.findAssetLinkMark(node.marks);
             if (node.type.name === 'text' && assetLinkMark) {
                 promises.push(this.fetchAndReplace(assetLinkMark.attrs, (url) => {

package/lib/Extensions/ImageExtension/DAMImageExtension.d.ts

@@ -0,0 +1,17 @@
+import { ApplySchemaAttributes, NodeExtension, NodeExtensionSpec, NodeSpecOverride, CommandFunction } from '@remirror/core';
+import { NodeName } from '../Extensions';
+export type DAMImageAttributes = {
+    damObjectId: string;
+    damSystemIdentifier: string;
+    damSystemType: string;
+    damAdditional?: {
+        variant: string;
+    };
+    url: string;
+};
+export declare class DAMImageExtension extends NodeExtension {
+    get name(): NodeName.DAMImage;
+    createTags(): ("inline" | "media")[];
+    createNodeSpec(extra: ApplySchemaAttributes, override: NodeSpecOverride): NodeExtensionSpec;
+    insertDAMImage(attrs: DAMImageAttributes): CommandFunction;
+}