@squiz/formatted-text-editor 2.6.4 → 2.6.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Change Log
 
+## 2.6.6
+
+### Patch Changes
+
+- 25036af: Squiz Link support for DAM assets
+- Updated dependencies [25036af]
+  - @squiz/dx-json-schema-lib@1.81.4
+
+## 2.6.5
+
+### Patch Changes
+
+- ff44594: Update to pass dam variant
+
 ## 2.6.4
 
 ### Patch Changes

package/demo/diff/AppContext.tsx

@@ -1,4 +1,4 @@
-import DamResourceBrowserPlugin from '@squiz/dam-resource-browser-plugin';
+import DamResourceBrowserPlugin, { DamResourceBrowserSource } from '@squiz/dam-resource-browser-plugin';
 import { AiServiceProvider } from '@squiz/dxp-ai-client-react';
 import MatrixResourceBrowserPlugin, {
   Resource,
@@ -11,6 +11,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { EditorContext, ResolveNodeType } from '../../src';
 import resources from './resources.json';
 import sources from './sources.json';
+import contentApi from './contentApi.json';
 
 export type AppContextProps = PropsWithChildren;
 
@@ -38,9 +39,36 @@ export const AppContext = ({ children }: AppContextProps) => (
               id: 'matrixIdentifier',
               type: 'matrix',
             },
+            {
+              name: 'Bynder',
+              id: 'bynder',
+              type: 'dam',
+              configuration: {
+                externalType: 'bynder',
+                externalRootUrl: 'https://squiz-sandbox.bynder.com',
+                authUrl: 'authUrl - See readme for local authToken instructions',
+                clientId: 'clientId - See readme for local authToken instructions',
+                redirectUrl: 'http://localhost:6006/',
+              },
+            } as DamResourceBrowserSource,
           ]),
         plugins: [
-          DamResourceBrowserPlugin(),
+          DamResourceBrowserPlugin({
+            onResourceRequestProxy: () => {
+              return Promise.resolve({
+                id: 'id1',
+                type: 'image',
+                fileSize: 300,
+                description: 'description1',
+                name: 'Bynder Image',
+                original: 'https://picsum.photos/300/250',
+                height: 100,
+                width: 200,
+                extension: ['jpeg'],
+                thumbnails: { thul: 'https://picsum.photos/300/250' },
+              });
+            },
+          }),
           MatrixResourceBrowserPlugin({
             onRequestSources: (): Promise<Source> => Promise.resolve(sources),
             onRequestChildren: (source: Source, resource: Resource | null): Promise<Resource[]> =>
@@ -72,6 +100,12 @@ export const AppContext = ({ children }: AppContextProps) => (
                   nextStart: null,
                 },
               }),
+            onRequestMatrixAsset: (assetId: string) => {
+              return Promise.resolve({
+                ...contentApi,
+                id: assetId,
+              });
+            },
           }),
         ],
       }}

package/demo/diff/contentApi.json

@@ -0,0 +1,21 @@
+{
+  "id": "3",
+  "type": "image",
+  "type_name": "Image",
+  "name": "Image",
+  "short_name": "Image",
+  "urls": ["https://picsum.photos/300/250"],
+  "url": "https://picsum.photos/300/250",
+  "attributes": {
+    "name": "Image",
+    "title": "Image",
+    "width": 640,
+    "height": 438,
+    "size": 99384,
+    "variety_count": 5,
+    "allow_unrestricted": true,
+    "caption": "",
+    "alt": ""
+  },
+  "children": []
+}

package/demo/diff/index.scss

@@ -1,5 +1,7 @@
+@import '../../../../node_modules/@squiz/sds/lib/package.css';
 @import '../../../../node_modules/@squiz/resource-browser/lib/index.css';
 @import '../../../../node_modules/@squiz/matrix-resource-browser-plugin/lib/index.css';
+@import '../../../../node_modules/@squiz/dam-resource-browser-plugin/lib/index.css';
 
 body {
   font-family: 'Open Sans';

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.d.ts

@@ -2,14 +2,15 @@ import { ReactElement } from 'react';
 import { SubmitHandler } from 'react-hook-form';
 import { FromToProps } from 'remirror';
 import { UpdateLinkProps } from '../../../../Extensions/LinkExtension/LinkExtension';
-import { UpdateAssetLinkProps } from '../../../../Extensions/LinkExtension/AssetLinkExtension';
 import { MarkName } from '../../../../Extensions/Extensions';
 import { DeepPartial } from '../../../../types';
+import { UpdateAssetLinkProps } from '../../../../Extensions/LinkExtension/AssetLinkExtension';
+import { UpdateDAMLinkProps } from '../../../../Extensions/LinkExtension/DamLinkExtension';
 export type LinkFormData = {
     linkType: MarkName;
     text: string;
     link: UpdateLinkProps['attrs'];
-    assetLink: UpdateAssetLinkProps['attrs'];
+    assetLink: Partial<UpdateDAMLinkProps['attrs'] & UpdateAssetLinkProps['attrs']>;
     range: FromToProps;
 };
 export type FormProps = {

package/lib/EditorToolbar/Tools/Link/Form/LinkForm.js

@@ -25,7 +25,7 @@ const LinkForm = ({ data, onSubmit }) => {
     const linkType = watch('linkType') || Extensions_1.MarkName.AssetLink;
     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: linkType, options: linkTypeOptions, onChange: (value) => setValue('linkType', value) })),
+            react_1.default.createElement(Tabs_1.Tabs, { value: linkType === Extensions_1.MarkName.DAMLink ? Extensions_1.MarkName.AssetLink : linkType, options: linkTypeOptions, onChange: (value) => setValue('linkType', value) })),
         linkType === Extensions_1.MarkName.Link && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
                 react_1.default.createElement(Input_1.Input, { label: "URL", required: true, error: errors?.link?.href?.message, ...register('link.href', {
@@ -45,11 +45,25 @@ const LinkForm = ({ data, onSubmit }) => {
                 react_1.default.createElement(Input_1.Input, { label: "Title", error: errors?.link?.title?.message, ...register('link.title') })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
                 react_1.default.createElement(Checkbox_1.Checkbox, { label: "Open link in new window", onChange: (value) => setValue('link.target', value), defaultChecked: data?.link?.target === common_1.LinkTarget.Blank, unchecked: common_1.LinkTarget.Self, checked: common_1.LinkTarget.Blank })))),
-        linkType === Extensions_1.MarkName.AssetLink && (react_1.default.createElement(react_1.default.Fragment, null,
+        (linkType === Extensions_1.MarkName.AssetLink || linkType === Extensions_1.MarkName.DAMLink) && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
                 react_1.default.createElement(react_hook_form_1.Controller, { control: control, name: "assetLink", rules: {
-                        validate: (0, validation_1.hasProperties)('An asset must be selected', ['matrixIdentifier', 'matrixAssetId']),
-                    }, render: ({ field: { onChange, value }, fieldState: { error } }) => (react_1.default.createElement(MatrixAsset_1.MatrixAsset, { modalTitle: "Insert link", value: value, onChange: onChange, error: error?.message })) })),
+                        validate: (value) => {
+                            if (value?.damObjectId || value?.damSystemIdentifier) {
+                                return value.damObjectId && value.damSystemIdentifier ? true : 'A DAM asset must be selected';
+                            }
+                            return value?.matrixAssetId && value?.matrixIdentifier ? true : 'An asset must be selected';
+                        },
+                    }, render: ({ field: { onChange, value }, fieldState: { error } }) => (react_1.default.createElement(MatrixAsset_1.MatrixAsset, { modalTitle: "Insert link", value: value, onChange: (newValue) => {
+                            onChange(newValue);
+                            const updated = newValue.target.value;
+                            if (updated.damSystemIdentifier && updated.damObjectId) {
+                                setValue('linkType', Extensions_1.MarkName.DAMLink);
+                            }
+                            else {
+                                setValue('linkType', Extensions_1.MarkName.AssetLink);
+                            }
+                        }, error: error?.message })) })),
             react_1.default.createElement("div", { className: (0, clsx_1.default)('squiz-fte-form-group mb-2') },
                 react_1.default.createElement(Input_1.Input, { label: "Text", required: true, error: errors?.text?.message, ...register('text', {
                         required: 'Text is required',

package/lib/EditorToolbar/Tools/Link/LinkButton.js

@@ -35,7 +35,7 @@ const Extensions_1 = require("../../../Extensions/Extensions");
 const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const LinkButton = ({ inPopover = false }) => {
     const [showModal, setShowModal] = (0, react_1.useState)(false);
-    const { updateLink, updateAssetLink } = (0, react_2.useCommands)();
+    const { updateLink, updateAssetLink, updateDAMLink } = (0, react_2.useCommands)();
     const active = (0, react_2.useActive)();
     // If the image tool is active, disable the link tool as they shouldn't work at the same time
     const disabled = active.image() || active.codeBlock();
@@ -50,11 +50,15 @@ const LinkButton = ({ inPopover = false }) => {
         return true;
     }, []);
     const handleSubmit = (data) => {
-        if (data.linkType === Extensions_1.MarkName.AssetLink) {
-            updateAssetLink({ text: data.text, attrs: data.assetLink, range: data.range });
-        }
-        else {
-            updateLink({ text: data.text, attrs: data.link, range: data.range });
+        switch (data.linkType) {
+            case Extensions_1.MarkName.AssetLink:
+                updateAssetLink({ text: data.text, attrs: data.assetLink, range: data.range });
+                break;
+            case Extensions_1.MarkName.DAMLink:
+                updateDAMLink({ text: data.text, attrs: data.assetLink, range: data.range });
+                break;
+            default:
+                updateLink({ text: data.text, attrs: data.link, range: data.range });
         }
         setShowModal(false);
     };
@@ -65,7 +69,7 @@ const LinkButton = ({ inPopover = false }) => {
         (0, react_2.useKeymap)('Mod-k', disabled ? () => true : handleShortcut);
     }
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.link() || active.assetLink(), icon: react_1.default.createElement(InsertLinkRounded_1.default, null), label: `Link (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+K)`, isDisabled: disabled }),
+        react_1.default.createElement(Button_1.default, { handleOnClick: handleClick, isActive: active.link() || active.assetLink() || active.DAMLink(), icon: react_1.default.createElement(InsertLinkRounded_1.default, null), label: `Link (${(0, getShortcutSymbol_1.getShortcutSymbol)()}+K)`, isDisabled: disabled }),
         showModal && react_1.default.createElement(LinkModal_1.default, { onCancel: () => setShowModal(false), onSubmit: handleSubmit })));
 };
 exports.default = LinkButton;

package/lib/EditorToolbar/Tools/Link/LinkModal.js

@@ -12,13 +12,17 @@ const hooks_1 = require("../../../hooks");
 const Extensions_1 = require("../../../Extensions/Extensions");
 const LinkModal = ({ onCancel, onSubmit }) => {
     const { helpers, view: { state }, } = (0, react_2.useRemirrorContext)();
-    const { selection, marks } = (0, hooks_1.useExpandedSelection)([Extensions_1.MarkName.Link, Extensions_1.MarkName.AssetLink]);
+    const { selection, marks } = (0, hooks_1.useExpandedSelection)([Extensions_1.MarkName.Link, Extensions_1.MarkName.AssetLink, Extensions_1.MarkName.DAMLink]);
     const selectedText = helpers.getTextBetween(selection.from, selection.to, state.doc);
     const data = {
-        linkType: marks[0]?.type?.name === Extensions_1.MarkName.Link ? Extensions_1.MarkName.Link : Extensions_1.MarkName.AssetLink,
+        assetLink: { ...marks.find((m) => m.type.name === Extensions_1.MarkName.DAMLink || m.type.name === Extensions_1.MarkName.AssetLink)?.attrs },
+        link: { ...marks.find((m) => m.type.name === 'link')?.attrs },
         text: selectedText,
-        link: { ...marks.find((mark) => mark.type.name === 'link')?.attrs },
-        assetLink: { ...marks.find((mark) => mark.type.name === Extensions_1.MarkName.AssetLink)?.attrs },
+        linkType: marks.find((m) => m.type.name === Extensions_1.MarkName.DAMLink)
+            ? Extensions_1.MarkName.DAMLink
+            : marks[0]?.type.name === Extensions_1.MarkName.Link
+                ? Extensions_1.MarkName.Link
+                : Extensions_1.MarkName.AssetLink,
         range: { from: selection.from, to: selection.to },
     };
     return (react_1.default.createElement(FormModal_1.default, { title: "Link", icon: react_1.default.createElement(InsertLinkRounded_1.default, null), onCancel: onCancel },

package/lib/EditorToolbar/Tools/Link/RemoveLinkButton.js

@@ -34,9 +34,9 @@ const getShortcutSymbol_1 = require("../../../utils/getShortcutSymbol");
 const RemoveLinkButton = ({ inPopover = false }) => {
     const chain = (0, react_2.useChainedCommands)();
     const active = (0, react_2.useActive)();
-    const disabled = !active.link() && !active.assetLink();
+    const disabled = !active.link() && !active.assetLink() && !active.DAMLink();
     const handleClick = () => {
-        chain.removeLink().removeAssetLink().focus().run();
+        chain.removeLink().removeAssetLink().removeDAMLink().focus().run();
     };
     const handleShortcut = (0, react_1.useCallback)(() => {
         handleClick();

package/lib/Extensions/Extensions.d.ts

@@ -13,6 +13,7 @@ export declare enum NodeName {
 }
 export declare enum MarkName {
     Link = "link",
-    AssetLink = "assetLink"
+    AssetLink = "assetLink",
+    DAMLink = "DAMLink"
 }
 export declare const createExtensions: (context: EditorContextOptions, enableDecorations?: boolean) => () => Extension[];

package/lib/Extensions/Extensions.js

@@ -15,6 +15,7 @@ const UnsupportedNodeExtension_1 = require("./UnsuportedExtension/UnsupportedNod
 const FetchUrlExtension_1 = require("./FetchUrlExtension/FetchUrlExtension");
 const extension_react_tables_1 = require("@remirror/extension-react-tables");
 const extension_react_component_1 = require("@remirror/extension-react-component");
+const DamLinkExtension_1 = require("./LinkExtension/DamLinkExtension");
 var NodeName;
 (function (NodeName) {
     NodeName["Image"] = "image";
@@ -31,6 +32,7 @@ var MarkName;
 (function (MarkName) {
     MarkName["Link"] = "link";
     MarkName["AssetLink"] = "assetLink";
+    MarkName["DAMLink"] = "DAMLink";
 })(MarkName = exports.MarkName || (exports.MarkName = {}));
 const createExtensions = (context, enableDecorations = true) => {
     return () => {
@@ -53,6 +55,7 @@ const createExtensions = (context, enableDecorations = true) => {
                 matrixDomain: context.matrix.matrixDomain,
             }),
             new DAMImageExtension_1.DAMImageExtension(),
+            new DamLinkExtension_1.DAMLinkExtension(),
             new LinkExtension_1.LinkExtension(),
             new AssetLinkExtension_1.AssetLinkExtension({
                 matrixDomain: context.matrix.matrixDomain,

package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.d.ts

@@ -8,5 +8,6 @@ export declare class FetchUrlExtension extends PlainExtension<FetchUrlOptions> {
     get name(): string;
     onView(view: EditorView): Dispose | void;
     private findAssetLinkMark;
+    private findDAMLinkMark;
     private fetchAndReplace;
 }

package/lib/Extensions/FetchUrlExtension/FetchUrlExtension.js

@@ -38,6 +38,13 @@ let FetchUrlExtension = class FetchUrlExtension extends core_1.PlainExtension {
                     tr.addMark(pos, pos + node.nodeSize, updatedMark);
                 }));
             }
+            const damLinkMark = this.findDAMLinkMark(node.marks);
+            if (node.type.name === 'text' && damLinkMark) {
+                promises.push(this.fetchAndReplace(damLinkMark.attrs, (url) => {
+                    const updatedMark = damLinkMark.type.create({ ...damLinkMark.attrs, href: url });
+                    tr.addMark(pos, pos + node.nodeSize, updatedMark);
+                }));
+            }
         });
         if (promises.length) {
             Promise.all(promises).then(() => {
@@ -48,6 +55,9 @@ let FetchUrlExtension = class FetchUrlExtension extends core_1.PlainExtension {
     findAssetLinkMark(marks) {
         return marks.find((mark) => mark.type.name === Extensions_1.MarkName.AssetLink && mark.attrs.href === '');
     }
+    findDAMLinkMark(marks) {
+        return marks.find((mark) => mark.type.name === Extensions_1.MarkName.DAMLink && mark.attrs.href === '');
+    }
     fetchAndReplace(nodeAttrs, onFetched) {
         return this.options
             .fetchUrl(nodeAttrs)

package/lib/Extensions/LinkExtension/AssetLinkExtension.js

@@ -19,7 +19,7 @@ let AssetLinkExtension = class AssetLinkExtension extends core_1.MarkExtension {
     createMarkSpec(extra, override) {
         return {
             inclusive: false,
-            excludes: [this.name, Extensions_1.MarkName.Link].join(' '),
+            excludes: [this.name, Extensions_1.MarkName.Link, Extensions_1.MarkName.DAMLink].join(' '),
             ...override,
             attrs: {
                 ...extra.defaults(),

package/lib/Extensions/LinkExtension/DamLinkExtension.d.ts

@@ -0,0 +1,29 @@
+import { ApplySchemaAttributes, FromToProps, MarkExtensionSpec, MarkSpecOverride } from 'remirror';
+import { CommandFunction, MarkExtension } from '@remirror/core';
+import { LinkTarget } from './common';
+export type DAMLinkAttributes = {
+    damObjectId: string;
+    damSystemIdentifier: string;
+    damSystemType: string;
+    damAdditional?: {
+        variant: string;
+    };
+    target: LinkTarget;
+    href: string;
+    url: string;
+};
+export type DAMLinkOptions = {
+    defaultTarget?: LinkTarget;
+    supportedTargets?: LinkTarget[];
+};
+export type UpdateDAMLinkProps = {
+    text: string;
+    attrs: Partial<DAMLinkAttributes>;
+    range: FromToProps;
+};
+export declare class DAMLinkExtension extends MarkExtension<DAMLinkOptions> {
+    get name(): string;
+    createMarkSpec(extra: ApplySchemaAttributes, override: MarkSpecOverride): MarkExtensionSpec;
+    updateDAMLink({ text, attrs, range }: UpdateDAMLinkProps): CommandFunction;
+    removeDAMLink(): CommandFunction;
+}

package/lib/Extensions/LinkExtension/DamLinkExtension.js

@@ -0,0 +1,111 @@
+"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.DAMLinkExtension = void 0;
+const remirror_1 = require("remirror");
+const core_1 = require("@remirror/core");
+const common_1 = require("./common");
+const CommandsExtension_1 = require("../CommandsExtension/CommandsExtension");
+const Extensions_1 = require("../Extensions");
+let DAMLinkExtension = class DAMLinkExtension extends core_1.MarkExtension {
+    get name() {
+        return Extensions_1.MarkName.DAMLink;
+    }
+    createMarkSpec(extra, override) {
+        return {
+            inclusive: false,
+            excludes: [this.name, Extensions_1.MarkName.Link, Extensions_1.MarkName.AssetLink].join(' '),
+            ...override,
+            attrs: {
+                ...extra.defaults(),
+                damObjectId: {},
+                damSystemIdentifier: {},
+                damSystemType: {},
+                damAdditional: { default: undefined },
+                href: { default: '' },
+                target: { default: this.options.defaultTarget },
+            },
+            parseDOM: [
+                {
+                    tag: 'a[data-dam-object-id]',
+                    getAttrs: (node) => {
+                        if (!(0, remirror_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,
+                            target: (0, common_1.validateTarget)(node.getAttribute('target'), this.options.supportedTargets, this.options.defaultTarget),
+                            href: node.getAttribute('href') || '',
+                        };
+                    },
+                },
+            ],
+            toDOM: (node) => {
+                const { damObjectId, damSystemIdentifier, damSystemType, damAdditional, target, href, ...rest } = (0, core_1.omitExtraAttributes)(node.attrs, extra);
+                const rel = 'noopener noreferrer nofollow';
+                return [
+                    'a',
+                    {
+                        ...extra.dom(node),
+                        ...rest,
+                        rel,
+                        href,
+                        target: (0, common_1.validateTarget)(target, this.options.supportedTargets, this.options.defaultTarget),
+                        'data-dam-object-id': damObjectId,
+                        'data-dam-system-identifier': damSystemIdentifier,
+                        'data-dam-system-type': damSystemType,
+                        'data-dam-additional': damAdditional ? JSON.stringify(damAdditional) : undefined,
+                    },
+                    0,
+                ];
+            },
+        };
+    }
+    updateDAMLink({ text, attrs, range }) {
+        return this.store.getExtension(CommandsExtension_1.CommandsExtension).updateMark({
+            attrs: { ...attrs, href: attrs.url },
+            text,
+            range,
+            mark: this.type,
+            removeMark: !attrs.damObjectId,
+        });
+    }
+    removeDAMLink() {
+        return (0, core_1.removeMark)({ type: this.type });
+    }
+};
+__decorate([
+    (0, core_1.command)()
+], DAMLinkExtension.prototype, "updateDAMLink", null);
+__decorate([
+    (0, core_1.command)()
+], DAMLinkExtension.prototype, "removeDAMLink", null);
+DAMLinkExtension = __decorate([
+    (0, core_1.extension)({
+        defaultOptions: {
+            defaultTarget: common_1.LinkTarget.Self,
+            supportedTargets: [common_1.LinkTarget.Self, common_1.LinkTarget.Blank],
+        },
+        defaultPriority: remirror_1.ExtensionPriority.High,
+    })
+], DAMLinkExtension);
+exports.DAMLinkExtension = DAMLinkExtension;

package/lib/Extensions/LinkExtension/LinkExtension.js

@@ -19,7 +19,7 @@ let LinkExtension = class LinkExtension extends core_1.MarkExtension {
     createMarkSpec(extra, override) {
         return {
             inclusive: false,
-            excludes: [this.name, Extensions_1.MarkName.AssetLink].join(' '),
+            excludes: [this.name, Extensions_1.MarkName.AssetLink, Extensions_1.MarkName.DAMLink].join(' '),
             ...override,
             attrs: {
                 ...extra.defaults(),

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

@@ -1,11 +1,25 @@
 import React from 'react';
 import { InputContainerProps } from '../InputContainer/InputContainer';
+import { LinkTarget } from '../../../Extensions/LinkExtension/common';
 type MatrixAssetValue = {
     matrixIdentifier?: string;
     matrixAssetId?: string;
+    matrixDomain?: string;
+};
+type DAMAssetValue = {
+    damSystemIdentifier?: string;
+    damObjectId?: string;
+    damSystemType?: string;
+    damAdditional?: {
+        variant: string;
+    };
+};
+export type ResourceBrowserSelectorValue = MatrixAssetValue & DAMAssetValue & {
     url?: string;
+    target?: LinkTarget;
+    subType?: 'matrix' | 'dam';
 };
-export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerProps, 'children'> & {
+export type ResourceBrowserSelectorProps<T extends ResourceBrowserSelectorValue> = Omit<InputContainerProps, 'children'> & {
     modalTitle: string;
     allowedTypes?: string[];
     value?: T | null;
@@ -15,5 +29,5 @@ export type MatrixAssetProps<T extends MatrixAssetValue> = Omit<InputContainerPr
         };
     }) => void;
 };
-export declare const MatrixAsset: <T extends MatrixAssetValue>({ modalTitle, allowedTypes, value, onChange, ...props }: MatrixAssetProps<T>) => React.JSX.Element;
+export declare const MatrixAsset: <T extends ResourceBrowserSelectorValue>({ modalTitle, allowedTypes, value, onChange, ...props }: ResourceBrowserSelectorProps<T>) => React.JSX.Element;
 export {};

package/lib/ui/Fields/MatrixAsset/MatrixAsset.js

@@ -1,30 +1,81 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+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.MatrixAsset = void 0;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const resource_browser_1 = require("@squiz/resource-browser");
 const InputContainer_1 = require("../InputContainer/InputContainer");
 const MatrixAsset = ({ modalTitle, allowedTypes, value, onChange, ...props }) => {
+    const convertFormDataToResourceBrowserValue = (0, react_1.useCallback)((value) => {
+        if (value && value.damSystemIdentifier && value.damObjectId) {
+            return {
+                sourceId: value.damSystemIdentifier,
+                resourceId: value.damObjectId,
+                variant: value.damAdditional?.variant,
+            };
+        }
+        if (value && value.matrixIdentifier && value.matrixAssetId) {
+            return {
+                sourceId: value.matrixIdentifier,
+                resourceId: value.matrixAssetId,
+            };
+        }
+        return null;
+    }, []);
+    const handleResourceChange = (0, react_1.useCallback)((resource) => {
+        let onChangeData = {
+            ...value,
+            matrixIdentifier: undefined,
+            matrixAssetId: undefined,
+            damSystemIdentifier: undefined,
+            damObjectId: undefined,
+            damSystemType: undefined,
+            damAdditional: undefined,
+        };
+        if (resource?.source?.type === 'dam') {
+            const damResource = resource;
+            onChangeData = {
+                ...onChangeData,
+                damSystemIdentifier: resource.source.id,
+                damObjectId: resource.id,
+                damSystemType: resource.source.configuration.externalType,
+                damAdditional: damResource.variant ? { variant: damResource.variant } : undefined,
+                url: resource.url,
+            };
+        }
+        if (resource?.source.type === 'matrix') {
+            onChangeData = {
+                ...onChangeData,
+                matrixIdentifier: resource?.source?.id,
+                matrixAssetId: resource?.id,
+                url: resource?.url,
+            };
+        }
+        onChange({ target: { value: onChangeData } });
+    }, [value]);
     return (react_1.default.createElement(InputContainer_1.InputContainer, { ...props },
-        react_1.default.createElement(resource_browser_1.ResourceBrowser, { modalTitle: modalTitle, allowedTypes: allowedTypes, value: value && value.matrixIdentifier && value.matrixAssetId
-                ? {
-                    sourceId: value.matrixIdentifier,
-                    resourceId: value.matrixAssetId,
-                }
-                : null, onChange: (resource) => {
-                onChange({
-                    target: {
-                        value: {
-                            ...value,
-                            matrixIdentifier: resource?.source?.id,
-                            matrixAssetId: resource?.id,
-                            url: resource?.url,
-                        },
-                    },
-                });
-            } })));
+        react_1.default.createElement(resource_browser_1.ResourceBrowser, { modalTitle: modalTitle, allowedTypes: allowedTypes, value: convertFormDataToResourceBrowserValue(value), onChange: handleResourceChange })));
 };
 exports.MatrixAsset = MatrixAsset;

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

@@ -9,6 +9,9 @@ type DAMAsset = {
     damSystemIdentifier?: string;
     damObjectId?: string;
     damSystemType?: string;
+    damAdditional?: {
+        variant: string;
+    };
 };
 type ResourceBrowserSelectorValue = MatrixAsset & DAMAsset & {
     nodeType?: NodeName;