@squiz/formatted-text-editor 2.1.0 → 2.2.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 2.2.1
+
+### Patch Changes
+
+- b4b34a6: Added basic checks in case no content tools are provided (no context)
+
+## 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

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,89 +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;
+
+// Set up React query for testing
+const createTestQueryClient = () =>
+  new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+const testQueryClient = createTestQueryClient();
+
 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) : [],
-                ),
-              ];
-            };
+  <QueryClientProvider client={testQueryClient}>
+    <ResourceBrowserContextProvider
+      value={{
+        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) : [],
+                  ),
+                ];
+              };
 
-            return Promise.resolve(
-              flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
-            );
-          },
-        }),
-      ],
-    }}
-  >
-    <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;
-        },
+              return Promise.resolve(
+                flattenResources(resources).find((resource) => resource.id === reference.resource) || null,
+              );
+            },
+          }),
+        ],
       }}
-      tags={['tag1']}
     >
-      <EditorContext.Provider
-        value={{
-          matrix: {
-            matrixDomain: 'https://matrix-domain.squiz.net',
+      <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': '',
+            },
           },
-          resolveNodeToUrl: (node: ResolveNodeType): Promise<string> => {
-            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 || '');
+          customFetch: async (input, init) => {
+            const response = await fetch(input, init);
+            return response;
           },
         }}
+        tags={['tag1']}
       >
-        {children}
-      </EditorContext.Provider>
-    </AiServiceProvider>
-  </ResourceBrowserContextProvider>
+        <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/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/Tools/ContentTools/ContentToolsDropdown.js

@@ -10,7 +10,7 @@ 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) => ({
+    const dropdownItems = contentTools?.map((item) => ({
         items: [
             {
                 action: () => alert(JSON.stringify(item, null, 2)),
@@ -21,7 +21,7 @@ const ContentToolsDropdown = () => {
         key: item.id,
     }));
     // No content tools to show, don't show dropdown at all
-    if (contentTools.length === 0) {
+    if (!contentTools || contentTools?.length === 0) {
         return null;
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
@@ -30,6 +30,6 @@ const ContentToolsDropdown = () => {
                 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 })));
+            }, 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/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;
+}

package/lib/Extensions/ImageExtension/DAMImageExtension.js

@@ -0,0 +1,97 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DAMImageExtension = void 0;
+const core_1 = require("@remirror/core");
+const remirror_1 = require("remirror");
+const Extensions_1 = require("../Extensions");
+let DAMImageExtension = class DAMImageExtension extends core_1.NodeExtension {
+    get name() {
+        return Extensions_1.NodeName.DAMImage;
+    }
+    createTags() {
+        return [core_1.ExtensionTag.InlineNode, core_1.ExtensionTag.Media];
+    }
+    createNodeSpec(extra, override) {
+        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 (!(0, core_1.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 } = (0, core_1.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,
+                    },
+                ];
+            },
+        };
+    }
+    insertDAMImage(attrs) {
+        return ({ tr, dispatch }) => {
+            const { from, to } = (0, remirror_1.getTextSelection)(tr.selection, tr.doc);
+            const node = this.type.create({ ...attrs, src: attrs.url });
+            dispatch?.(tr.replaceRangeWith(from, to, node));
+            return true;
+        };
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], DAMImageExtension.prototype, "insertDAMImage", null);
+DAMImageExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {},
+        defaultPriority: core_1.ExtensionPriority.High,
+    })
+], DAMImageExtension);
+exports.DAMImageExtension = DAMImageExtension;

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 {};