@nascentdigital/funnel-editor 4.6.7 → 5.0.2

package/dist/core/components/fields/factories/AssetFactory.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.AssetFactory = AssetFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -8,14 +19,15 @@ const hooks_1 = require("../../../hooks");
 const interaction_1 = require("../../interaction");
 const asset_1 = require("../asset");
 // component
-function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw }) {
+function AssetFactory(_a) {
+    var { schema, assetId, onCommit, onCancel: onCancelRaw } = _a, popupProps = __rest(_a, ["schema", "assetId", "onCommit", "onCancel"]);
     // bind refs
     const menu = (0, interaction_1.useMenuController)();
     const pickerRef = (0, react_1.useRef)(null);
     const uploaderRef = (0, react_1.useRef)(null);
     const editorRef = (0, react_1.useRef)(null);
-    const anchorRef = (0, react_1.useRef)(anchor);
-    anchorRef.current = anchor;
+    const popupPropsRef = (0, react_1.useRef)(popupProps);
+    popupPropsRef.current = popupProps;
     const onCommitRef = (0, react_1.useRef)(onCommit);
     onCommitRef.current = onCommit;
     const onCancelRef = (0, react_1.useRef)(onCancelRaw);
@@ -35,7 +47,7 @@ function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw
             menu.items = createMenuItems;
         }
         // open menu
-        menu.open(anchorRef.current);
+        menu.open(popupPropsRef.current.anchor);
     }, [menu, assetId]);
     // helpers
     const onPick = async () => {
@@ -60,10 +72,7 @@ function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw
     const onUpload = async () => {
         var _a;
         // launch uploader
-        const asset = await ((_a = uploaderRef.current) === null || _a === void 0 ? void 0 : _a.upload({
-            schema,
-            anchor
-        }));
+        const asset = await ((_a = uploaderRef.current) === null || _a === void 0 ? void 0 : _a.upload(Object.assign({ schema }, (popupPropsRef.current))));
         // cancel if no visual was selected
         if (!asset) {
             onCancel();
@@ -85,11 +94,7 @@ function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw
             return;
         }
         // perform edit
-        const updatedAsset = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-            schema,
-            asset: asset.value,
-            anchor
-        }));
+        const updatedAsset = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit(Object.assign({ schema, asset: asset.value }, (popupPropsRef.current))));
         // always cancel
         onCancel();
     };

package/dist/core/components/fields/factories/CollectionFactory.d.ts

@@ -1,11 +1,11 @@
 import { Callback, Language, Schema } from '@nascentdigital/funnel-core';
-export declare function CollectionFactory({ schema, language, collection: initialValue, anchor, onCommit, onCancel: onCancelRaw }: CollectionFactory.Props): import("react/jsx-runtime").JSX.Element;
+import { Popup } from '../../interaction';
+export declare function CollectionFactory({ schema, language, collection: initialValue, onCommit, onCancel: onCancelRaw, ...popupProps }: CollectionFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace CollectionFactory {
-    type Props = {
+    type Props = Popup.Props.Delegated & {
         schema: Schema.CollectionField;
         language: Language;
         collection?: Schema.CollectionField.Value;
-        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.CollectionField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/factories/CollectionFactory.js

@@ -1,4 +1,15 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CollectionFactory = CollectionFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -7,13 +18,14 @@ const react_1 = require("react");
 const interaction_1 = require("../../interaction");
 const collection_1 = require("../collection");
 // component
-function CollectionFactory({ schema, language, collection: initialValue, anchor, onCommit, onCancel: onCancelRaw }) {
+function CollectionFactory(_a) {
+    var { schema, language, collection: initialValue, onCommit, onCancel: onCancelRaw } = _a, popupProps = __rest(_a, ["schema", "language", "collection", "onCommit", "onCancel"]);
     // bind refs
     const menu = (0, interaction_1.useMenuController)();
     const pickerRef = (0, react_1.useRef)(null);
     const editorRef = (0, react_1.useRef)(null);
-    const anchorRef = (0, react_1.useRef)(anchor);
-    anchorRef.current = anchor;
+    const popupPropsRef = (0, react_1.useRef)(popupProps);
+    popupPropsRef.current = popupProps;
     const onCommitRef = (0, react_1.useRef)(onCommit);
     onCommitRef.current = onCommit;
     const onCancelRef = (0, react_1.useRef)(onCancelRaw);
@@ -55,7 +67,7 @@ function CollectionFactory({ schema, language, collection: initialValue, anchor,
             ];
         }
         // open menu
-        menu.open(anchorRef.current);
+        menu.open(popupPropsRef.current.anchor);
     }, [menu, collectionOptions, initialValue]);
     // helpers
     const onPick = async () => {
@@ -76,10 +88,8 @@ function CollectionFactory({ schema, language, collection: initialValue, anchor,
     const onCreate = async (collectionSchema) => {
         var _a;
         // start picker (cancel if nothing was picked
-        const collection = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-            schema,
-            collectionSchema
-        }));
+        const collection = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit(Object.assign({ schema,
+            collectionSchema }, (popupPropsRef.current))));
         if (!collection) {
             onCancel();
         }
@@ -98,11 +108,8 @@ function CollectionFactory({ schema, language, collection: initialValue, anchor,
             throw new funnel_core_1.IllegalStateError(`Unable to resolve "${collectionType}" Collection`);
         }
         // start picker (cancel if nothing was picked
-        const collection = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-            schema,
-            collectionSchema,
-            value: initialValue
-        }));
+        const collection = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit(Object.assign({ schema,
+            collectionSchema, value: initialValue }, (popupPropsRef.current))));
         if (!collection) {
             onCancel();
         }

package/dist/core/components/fields/factories/EmbeddedVideoFactory.d.ts

@@ -1,11 +1,11 @@
 import { Callback, Language, Schema } from '@nascentdigital/funnel-core';
-export declare function EmbeddedVideoFactory({ schema, initialValue, language, anchor, onCommit, onCancel }: EmbeddedVideoFactory.Props): import("react/jsx-runtime").JSX.Element;
+import { Popup } from '../../interaction';
+export declare function EmbeddedVideoFactory({ schema, initialValue, language, onCommit, onCancel, ...popupProps }: EmbeddedVideoFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace EmbeddedVideoFactory {
-    type Props = {
+    type Props = Popup.Props.Delegated & {
         schema: Schema.EmbeddedVideoField;
         initialValue?: Schema.Field.Data<Schema.EmbeddedVideoField>;
         language: Language;
-        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.EmbeddedVideoField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/factories/EmbeddedVideoFactory.js

@@ -1,15 +1,27 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.EmbeddedVideoFactory = EmbeddedVideoFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const embed_1 = require("../embed");
 // component
-function EmbeddedVideoFactory({ schema, initialValue, language, anchor, onCommit, onCancel }) {
+function EmbeddedVideoFactory(_a) {
+    var { schema, initialValue, language, onCommit, onCancel } = _a, popupProps = __rest(_a, ["schema", "initialValue", "language", "onCommit", "onCancel"]);
     // bind refs
     const editorRef = (0, react_1.useRef)(null);
-    const anchorRef = (0, react_1.useRef)(anchor);
-    anchorRef.current = anchor;
+    const popupPropsRef = (0, react_1.useRef)(popupProps);
+    popupPropsRef.current = popupProps;
     const onCommitRef = (0, react_1.useRef)(onCommit);
     onCommitRef.current = onCommit;
     const onCancelRef = (0, react_1.useRef)(onCancel);
@@ -20,11 +32,8 @@ function EmbeddedVideoFactory({ schema, initialValue, language, anchor, onCommit
         const onEdit = async () => {
             var _a;
             // start editor (cancel if dismissed)
-            const value = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-                schema,
-                initialValue,
-                anchor: anchorRef.current
-            }));
+            const value = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit(Object.assign({ schema,
+                initialValue }, (popupPropsRef.current))));
             if (!value) {
                 onCancelRef.current();
             }

package/dist/core/components/fields/factories/FieldValueFactory.d.ts

@@ -1,11 +1,13 @@
-import { Callback, Field, ObjectField, Schema } from '@nascentdigital/funnel-core';
-export declare function FieldValueFactory<T extends Schema.Field.Type>({ anchor, itemSchema, field, onCommit, onCancel }: FieldValueFactory.Props<T>): import("react/jsx-runtime").JSX.Element | null;
+import { Callback, Field, FieldModel, ObjectField, Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
+export declare function FieldValueFactory<T extends Schema.Field.Type>({ itemSchema, field, onCommit, onCancel, ...popupProps }: FieldValueFactory.Props<T>): import("react/jsx-runtime").JSX.Element | null;
 export declare namespace FieldValueFactory {
-    type Props<T extends Schema.Field.Type = Schema.Field.Type> = {
-        anchor: string;
+    type Props<T extends Schema.Field.Type = Schema.Field.Type> = Popup.Props.Delegated & {
+        field?: CompatibleField<T>;
         itemSchema: T;
-        field?: Field<T> | ObjectField;
         onCommit?: Callback<Schema.Field.Data<T>>;
         onCancel?: Callback.Void;
     };
+    type CompatibleField<T extends Schema.Field.Type = Schema.Field.Type> = Field<T> | ObjectField;
+    function isCompatibleField(field: FieldModel | undefined): field is CompatibleField;
 }

package/dist/core/components/fields/factories/FieldValueFactory.js

@@ -1,52 +1,96 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FieldValueFactory = FieldValueFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
 const hooks_1 = require("../../../hooks");
 const AssetFactory_1 = require("./AssetFactory");
 const CollectionFactory_1 = require("./CollectionFactory");
 const EmbeddedVideoFactory_1 = require("./EmbeddedVideoFactory");
 const LinkFactory_1 = require("./LinkFactory");
+const MediaFactory_1 = require("./MediaFactory");
 const ObjectFactory_1 = require("./ObjectFactory");
 const PageFactory_1 = require("./PageFactory");
 const TextFactory_1 = require("./TextFactory");
 // factory
-function FieldValueFactory({ anchor, itemSchema, field, onCommit = funnel_core_1.Fn.NoOp, onCancel = funnel_core_1.Fn.NoOp }) {
-    var _a, _b, _c, _d, _e, _f;
+function FieldValueFactory(_a) {
+    var _b, _c, _d, _e, _f, _g, _h;
+    var { itemSchema, field, onCommit = funnel_core_1.Fn.NoOp, onCancel = funnel_core_1.Fn.NoOp } = _a, popupProps = __rest(_a, ["itemSchema", "field", "onCommit", "onCancel"]);
     // bind language
     const brandConfig = funnel_core_1.AppConfig.brandConfig();
     const page = (0, hooks_1.usePossiblePage)();
     const collection = (0, hooks_1.usePossibleCollection)();
-    const region = (_a = page === null || page === void 0 ? void 0 : page.region) !== null && _a !== void 0 ? _a : funnel_core_1.RegionsConfig.getDefaultRegion(brandConfig.regionalization);
-    const language = (_c = (_b = page === null || page === void 0 ? void 0 : page.language) !== null && _b !== void 0 ? _b : collection === null || collection === void 0 ? void 0 : collection.language) !== null && _c !== void 0 ? _c : funnel_core_1.RegionsConfig.getDefaultLanguage(brandConfig.regionalization);
+    const region = (_b = page === null || page === void 0 ? void 0 : page.region) !== null && _b !== void 0 ? _b : funnel_core_1.RegionsConfig.getDefaultRegion(brandConfig.regionalization);
+    const language = (_d = (_c = page === null || page === void 0 ? void 0 : page.language) !== null && _c !== void 0 ? _c : collection === null || collection === void 0 ? void 0 : collection.language) !== null && _d !== void 0 ? _d : funnel_core_1.RegionsConfig.getDefaultLanguage(brandConfig.regionalization);
     const commit = (item) => {
-        console.debug(`[FieldValueFactory/commit] creating value for "${itemSchema.name}"`, item);
         onCommit(item);
     };
     const cancel = () => {
-        console.debug(`[FieldValueFactory/cancel] cancelling "${itemSchema.name}"`);
         onCancel();
     };
+    console.debug('[FieldValueFactory] creating field', { field, itemSchema });
     // handle based on item type
     switch (itemSchema.type) {
         case 'text':
-            return ((0, jsx_runtime_1.jsx)(TextFactory_1.TextFactory, { schema: itemSchema, initialValue: field === null || field === void 0 ? void 0 : field.value, anchor: anchor, onCommit: item => commit(item), onCancel: cancel }));
+            return ((0, jsx_runtime_1.jsx)(TextFactory_1.TextFactory, Object.assign({ schema: itemSchema, initialValue: field === null || field === void 0 ? void 0 : field.value, onCommit: item => commit(item), onCancel: cancel }, popupProps)));
         case 'link':
-            return ((0, jsx_runtime_1.jsx)(LinkFactory_1.LinkFactory, { schema: itemSchema, initialValue: field === null || field === void 0 ? void 0 : field.value, region: region, language: language, anchor: anchor, onCommit: item => commit(item), onCancel: cancel }));
+            return ((0, jsx_runtime_1.jsx)(LinkFactory_1.LinkFactory, Object.assign({ schema: itemSchema, initialValue: field === null || field === void 0 ? void 0 : field.value, region: region, language: language, onCommit: item => commit(item), onCancel: cancel }, popupProps)));
         case 'embedded.video':
-            return ((0, jsx_runtime_1.jsx)(EmbeddedVideoFactory_1.EmbeddedVideoFactory, { schema: itemSchema, initialValue: field === null || field === void 0 ? void 0 : field.value, language: language, anchor: anchor, onCommit: item => commit(item), onCancel: cancel }));
+            return ((0, jsx_runtime_1.jsx)(EmbeddedVideoFactory_1.EmbeddedVideoFactory, Object.assign({ schema: itemSchema, initialValue: field === null || field === void 0 ? void 0 : field.value, language: language, onCommit: item => commit(item), onCancel: cancel }, popupProps)));
         case 'asset': {
-            return ((0, jsx_runtime_1.jsx)(AssetFactory_1.AssetFactory, { schema: itemSchema, assetId: (_e = (_d = field === null || field === void 0 ? void 0 : field.value) === null || _d === void 0 ? void 0 : _d.value) === null || _e === void 0 ? void 0 : _e.id, anchor: anchor, onCommit: item => commit(item), onCancel: cancel }));
+            return ((0, jsx_runtime_1.jsx)(AssetFactory_1.AssetFactory, Object.assign({ schema: itemSchema, assetId: (_f = (_e = field === null || field === void 0 ? void 0 : field.value) === null || _e === void 0 ? void 0 : _e.value) === null || _f === void 0 ? void 0 : _f.id, onCommit: item => commit(item), onCancel: cancel }, popupProps)));
         }
         case 'page':
-            return ((0, jsx_runtime_1.jsx)(PageFactory_1.PageFactory, { schema: itemSchema, region: region, language: language, onCommit: item => commit(item), onCancel: cancel }));
+            return ((0, jsx_runtime_1.jsx)(PageFactory_1.PageFactory, Object.assign({ schema: itemSchema, region: region, language: language, onCommit: item => commit(item), onCancel: cancel }, popupProps)));
         case 'collection':
-            return ((0, jsx_runtime_1.jsx)(CollectionFactory_1.CollectionFactory, { schema: itemSchema, language: language, collection: (_f = field === null || field === void 0 ? void 0 : field.value) === null || _f === void 0 ? void 0 : _f.value, anchor: anchor, onCommit: item => commit(item), onCancel: cancel }));
+            // custom handling for media
+            if (funnel_ui_1.Media.Schema.filter(itemSchema)) {
+                console.debug('[FieldValueFactory] creating factory for MediaFactory');
+                return ((0, jsx_runtime_1.jsx)(MediaFactory_1.MediaFactory, Object.assign({ schema: itemSchema, language: language, media: (_g = field === null || field === void 0 ? void 0 : field.value) === null || _g === void 0 ? void 0 : _g.value, onCommit: item => commit(funnel_core_1.Schema.CollectionField.Value.toData(item)), onCancel: cancel }, popupProps)));
+            }
+            // or generic collection
+            else {
+                return ((0, jsx_runtime_1.jsx)(CollectionFactory_1.CollectionFactory, Object.assign({ schema: itemSchema, language: language, collection: (_h = field === null || field === void 0 ? void 0 : field.value) === null || _h === void 0 ? void 0 : _h.value, onCommit: item => commit(item), onCancel: cancel }, popupProps)));
+            }
         case 'object':
-            return ((0, jsx_runtime_1.jsx)(ObjectFactory_1.ObjectFactory, { schema: itemSchema, field: field, onCommit: item => commit(item), onCancel: cancel }));
+            return ((0, jsx_runtime_1.jsx)(ObjectFactory_1.ObjectFactory, Object.assign({ schema: itemSchema, field: field, onCommit: item => commit(item), onCancel: cancel }, popupProps)));
         default:
             console.debug('[FieldValueFactory] no support for ', itemSchema);
             return null;
     }
 }
+// extension
+(function (FieldValueFactory) {
+    // helpers
+    function isCompatibleField(field) {
+        // skip if field isn't there
+        if (!field) {
+            return false;
+        }
+        // or accept if it's an object
+        switch (field.schema.type) {
+            case 'link':
+            case 'embedded.video':
+            case 'asset':
+            case 'page':
+            case 'collection':
+            case 'object':
+                return true;
+            default:
+                return false;
+        }
+    }
+    FieldValueFactory.isCompatibleField = isCompatibleField;
+})(FieldValueFactory || (exports.FieldValueFactory = FieldValueFactory = {}));

package/dist/core/components/fields/factories/LinkFactory.d.ts

@@ -1,12 +1,12 @@
 import { Callback, Language, Schema } from '@nascentdigital/funnel-core';
-export declare function LinkFactory({ schema, initialValue, region, language, anchor, onCommit, onCancel }: LinkFactory.Props): import("react/jsx-runtime").JSX.Element;
+import { Popup } from '../../interaction';
+export declare function LinkFactory({ schema, initialValue, region, language, onCommit, onCancel, ...popupProps }: LinkFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace LinkFactory {
-    type Props = {
+    type Props = Popup.Props.Delegated & {
         schema: Schema.LinkField;
         initialValue?: Schema.Field.Data<Schema.LinkField>;
         region: string;
         language: Language;
-        anchor: string;
         onCommit: Callback<Schema.Field.Data<Schema.LinkField>>;
         onCancel: Callback.Void;
     };

package/dist/core/components/fields/factories/LinkFactory.js

@@ -1,15 +1,27 @@
 "use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LinkFactory = LinkFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const link_1 = require("../link");
 // component
-function LinkFactory({ schema, initialValue, region, language, anchor, onCommit, onCancel }) {
+function LinkFactory(_a) {
+    var { schema, initialValue, region, language, onCommit, onCancel } = _a, popupProps = __rest(_a, ["schema", "initialValue", "region", "language", "onCommit", "onCancel"]);
     // bind refs
     const editorRef = (0, react_1.useRef)(null);
-    const anchorRef = (0, react_1.useRef)(anchor);
-    anchorRef.current = anchor;
+    const popupPropsRef = (0, react_1.useRef)(popupProps);
+    popupPropsRef.current = popupProps;
     const onCommitRef = (0, react_1.useRef)(onCommit);
     onCommitRef.current = onCommit;
     const onCancelRef = (0, react_1.useRef)(onCancel);
@@ -20,11 +32,8 @@ function LinkFactory({ schema, initialValue, region, language, anchor, onCommit,
         const onEdit = async () => {
             var _a;
             // start editor (cancel if dismissed)
-            const value = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-                schema,
-                initialValue,
-                anchor: anchorRef.current
-            }));
+            const value = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit(Object.assign({ schema,
+                initialValue }, (popupPropsRef.current))));
             if (!value) {
                 onCancelRef.current();
             }

package/dist/core/components/fields/factories/MediaFactory.d.ts

@@ -0,0 +1,13 @@
+import { Callback, Language } from '@nascentdigital/funnel-core';
+import { Media } from '@nascentdigital/funnel-ui';
+import { Popup } from '../../interaction';
+export declare function MediaFactory({ schema, language, media: initialValue, onCommit: onCommitRaw, onCancel: onCancelRaw, ...popupProps }: MediaFactory.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace MediaFactory {
+    type Props = Popup.Props.Delegated & {
+        schema: Media.Schema;
+        language: Language;
+        media?: Media.Value;
+        onCommit: Callback<Media.Value>;
+        onCancel: Callback.Void;
+    };
+}

package/dist/core/components/fields/factories/MediaFactory.js

@@ -0,0 +1,212 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaFactory = MediaFactory;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
+const react_1 = require("react");
+const interaction_1 = require("../../interaction");
+const asset_1 = require("../asset");
+const embed_1 = require("../embed");
+const media_1 = require("../media");
+// component
+function MediaFactory(_a) {
+    var { schema, language, media: initialValue, onCommit: onCommitRaw, onCancel: onCancelRaw } = _a, popupProps = __rest(_a, ["schema", "language", "media", "onCommit", "onCancel"]);
+    // bind refs
+    const menu = (0, interaction_1.useMenuController)();
+    const editorRef = (0, react_1.useRef)(null);
+    const assetPickerRef = (0, react_1.useRef)(null);
+    const assetUploaderRef = (0, react_1.useRef)(null);
+    const embeddedVideoEditorRef = (0, react_1.useRef)(null);
+    const popupPropsRef = (0, react_1.useRef)(popupProps);
+    popupPropsRef.current = popupProps;
+    const onCommitRef = (0, react_1.useRef)(onCommitRaw);
+    onCommitRef.current = onCommitRaw;
+    const onCancelRef = (0, react_1.useRef)(onCancelRaw);
+    onCancelRef.current = onCancelRaw;
+    const collectionOptions = schema.collections;
+    const getPickerArgs = (0, react_1.useCallback)(() => {
+        var _a, _b, _c;
+        return ({
+            assetPicker: (_a = assetPickerRef.current) !== null && _a !== void 0 ? _a : undefined,
+            assetUploader: (_b = assetUploaderRef.current) !== null && _b !== void 0 ? _b : undefined,
+            embeddedVideoEditor: (_c = embeddedVideoEditorRef.current) !== null && _c !== void 0 ? _c : undefined,
+            popupProps: popupPropsRef.current
+        });
+    }, []);
+    // open menu when bound
+    (0, react_1.useEffect)(() => {
+        console.debug('[MediaFactory] mounting media factory for', { schema, collectionOptions, initialValue });
+        // open menu if new
+        const popupProps = popupPropsRef.current;
+        if (!initialValue) {
+            menu.items = mediaMenuOption;
+            menu.open(popupProps.anchor);
+        }
+        // or open editor
+        else {
+            // blow up if editor isn't available (shouldn't happen)
+            const editor = editorRef.current;
+            if (!editor) {
+                throw new funnel_core_1.IllegalStateError('Unable to resolve reference to MediaEditor');
+            }
+            // start picker (cancel if nothing was picked
+            editor.edit(Object.assign({ schema, target: { type: 'media', media: initialValue } }, popupProps))
+                .then(async (media) => {
+                console.debug('[MediaFactory/onEdit] editing completed', media);
+                // cancel if there's no media
+                if (!media) {
+                    onCancelRef.current();
+                }
+                // or commit change
+                else {
+                    onCommitRef.current(media);
+                }
+            })
+                .catch(console.error);
+        }
+    }, [menu, schema, collectionOptions, initialValue]);
+    // helpers
+    const onEdit = async (target) => {
+        var _a;
+        // start picker (cancel if nothing was picked
+        const media = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit(Object.assign({ schema,
+            target }, (popupPropsRef.current))));
+        // stop if cancelled
+        if (!media) {
+            onCancel();
+        }
+        // otherwise, return result
+        else {
+            onCommit(media);
+        }
+    };
+    const onMenuSelect = async (option) => {
+        // process based on option
+        const pickerArgs = getPickerArgs();
+        switch (option) {
+            case 'pick.asset':
+            case 'add.asset': {
+                // get visual (or cancel)
+                const asset = option === 'pick.asset'
+                    ? await pickAsset(pickerArgs)
+                    : await uploadAsset(pickerArgs);
+                if (!asset) {
+                    onCancel();
+                    break;
+                }
+                // open editor with asset
+                await onEdit(funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)
+                    ? { type: 'image', image: asset }
+                    : { type: 'video.local', video: asset });
+                // stop processing
+                break;
+            }
+            case 'add.url': {
+                // link video (or cancel)
+                const video = await linkVideo(pickerArgs);
+                if (!video) {
+                    onCancel();
+                    break;
+                }
+                // open editor with video
+                await onEdit({ type: 'video.remote', video });
+                // stop processing
+                break;
+            }
+        }
+    };
+    const onCommit = (media) => onCommitRef.current(media);
+    const onCancel = () => onCancelRef.current();
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.Menu, Object.assign({ controller: menu, onItemClick: onMenuSelect, onClose: onCancel }, popupProps)), (0, jsx_runtime_1.jsx)(media_1.MediaEditor, { ref: editorRef, language: language }), (0, jsx_runtime_1.jsx)(asset_1.AssetUploader, { ref: assetUploaderRef }), (0, jsx_runtime_1.jsx)(asset_1.AssetPicker, { ref: assetPickerRef }), (0, jsx_runtime_1.jsx)(embed_1.EmbeddedVideoEditor, { ref: embeddedVideoEditorRef, language: language })] }));
+}
+const mediaMenuOption = [
+    {
+        id: 'pick.asset',
+        label: 'Select from library',
+        icon: 'Image'
+    },
+    {
+        id: 'add.asset',
+        label: 'Upload asset',
+        icon: 'Upload'
+    },
+    {
+        id: 'add.url',
+        label: 'Add video link',
+        icon: 'Link'
+    }
+];
+const mediaAssetSchema = funnel_core_1.Schema.Field.visual({ name: 'Image or Video' });
+async function uploadAsset(args) {
+    // launch uploader (or skip if there's no result)
+    const { assetUploader, popupProps = {} } = args;
+    const result = await (assetUploader === null || assetUploader === void 0 ? void 0 : assetUploader.upload(Object.assign({ schema: mediaAssetSchema }, popupProps)));
+    if (!result) {
+        return undefined;
+    }
+    // or switch to picking
+    else if (result === 'pick') {
+        return pickAsset(args);
+    }
+    // create new image media
+    const { value: asset } = result;
+    if (funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)) {
+        console.debug('[MediaFactory] creating new image media');
+        return asset;
+    }
+    // or create new video media
+    else if (funnel_core_1.Schema.AssetField.LinkedValue.Video.filter(asset)) {
+        console.debug('[MediaFactory] creating new video media');
+        return asset;
+    }
+    // or abort
+    else {
+        return undefined;
+    }
+}
+async function pickAsset(args) {
+    // launch picker (or cancel if nothing is selected)
+    const { assetPicker, popupProps = {} } = args;
+    const result = await (assetPicker === null || assetPicker === void 0 ? void 0 : assetPicker.pick(Object.assign({ schema: mediaAssetSchema }, popupProps)));
+    if (!result) {
+        return undefined;
+    }
+    // or launch uploader if the directive was received
+    else if (result === 'upload') {
+        return uploadAsset(args);
+    }
+    // create new image media
+    const { value: asset } = result;
+    if (funnel_core_1.Schema.AssetField.LinkedValue.Image.filter(asset)) {
+        console.debug('[MediaFactory] creating new image media');
+        return asset;
+    }
+    // or create new video media
+    else if (funnel_core_1.Schema.AssetField.LinkedValue.Video.filter(asset)) {
+        console.debug('[MediaFactory] creating new video media');
+        return asset;
+    }
+    // or abort
+    else {
+        return undefined;
+    }
+}
+async function linkVideo({ embeddedVideoEditor, popupProps = {} }) {
+    var _a;
+    // start editor (cancel if dismissed)
+    const value = await (embeddedVideoEditor === null || embeddedVideoEditor === void 0 ? void 0 : embeddedVideoEditor.edit(Object.assign({ schema: funnel_ui_1.Media.Video.Source.schema.content.remote.schema }, popupProps)));
+    return (_a = value === null || value === void 0 ? void 0 : value.value) !== null && _a !== void 0 ? _a : undefined;
+}

package/dist/core/components/fields/factories/ObjectFactory.d.ts

@@ -1,7 +1,8 @@
 import { Callback, ObjectField, Schema } from '@nascentdigital/funnel-core';
-export declare function ObjectFactory({ schema, field, onCommit, onCancel }: ObjectFactory.Props): import("react/jsx-runtime").JSX.Element;
+import { Popup } from '../../interaction';
+export declare function ObjectFactory({ schema, fieldId, field, onCommit, onCancel, ...popupProps }: ObjectFactory.Props): import("react/jsx-runtime").JSX.Element;
 export declare namespace ObjectFactory {
-    type Props = {
+    type Props = Popup.Props.Delegated & {
         schema: Schema.ObjectField;
         fieldId?: string;
         field?: ObjectField;