@nascentdigital/funnel-editor 5.0.1 → 5.0.2

package/dist/core/components/fields/factories/FieldValueFactory.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.FieldValueFactory = FieldValueFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -14,46 +25,72 @@ 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, _g;
+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) => {
         onCommit(item);
     };
     const cancel = () => {
         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':
             // custom handling for media
             if (funnel_ui_1.Media.Schema.filter(itemSchema)) {
-                return ((0, jsx_runtime_1.jsx)(MediaFactory_1.MediaFactory, { schema: itemSchema, language: language, media: (_f = field === null || field === void 0 ? void 0 : field.value) === null || _f === void 0 ? void 0 : _f.value, anchor: anchor, onCommit: item => commit(funnel_core_1.Schema.CollectionField.Value.toData(item)), onCancel: cancel }));
+                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, { schema: itemSchema, language: language, collection: (_g = field === null || field === void 0 ? void 0 : field.value) === null || _g === void 0 ? void 0 : _g.value, anchor: anchor, onCommit: item => commit(item), onCancel: cancel }));
+                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

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

package/dist/core/components/fields/factories/MediaFactory.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.MediaFactory = MediaFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -10,64 +21,54 @@ const asset_1 = require("../asset");
 const embed_1 = require("../embed");
 const media_1 = require("../media");
 // component
-function MediaFactory({ schema, language, media: initialValue, anchor, onCommit: onCommitRaw, onCancel: onCancelRaw }) {
+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 pickerRef = (0, react_1.useRef)(null);
     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 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)(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(anchorRef.current);
+            menu.open(popupProps.anchor);
         }
         // or open editor
         else {
             // blow up if editor isn't available (shouldn't happen)
             const editor = editorRef.current;
-            const anchor = anchorRef.current;
             if (!editor) {
                 throw new funnel_core_1.IllegalStateError('Unable to resolve reference to MediaEditor');
             }
             // start picker (cancel if nothing was picked
-            editor.edit({
-                schema,
-                target: { type: 'media', media: initialValue },
-                anchor
-            })
+            editor.edit(Object.assign({ schema, target: { type: 'media', media: initialValue } }, popupProps))
                 .then(async (media) => {
-                var _a;
                 console.debug('[MediaFactory/onEdit] editing completed', media);
                 // cancel if there's no media
                 if (!media) {
                     onCancelRef.current();
                 }
-                // or switch to picker
-                else if (media === 'pick') {
-                    // start picker (cancel if nothing was picked
-                    const media = await ((_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.pick({ schema }));
-                    if (!media) {
-                        onCancelRef.current();
-                    }
-                    // otherwise, return result
-                    else {
-                        onCommitRef.current({
-                            id: media.id,
-                            type: media.template.type
-                        });
-                    }
-                }
                 // or commit change
                 else {
                     onCommitRef.current(media);
@@ -80,132 +81,27 @@ function MediaFactory({ schema, language, media: initialValue, anchor, onCommit:
     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({
-            schema,
-            target,
-            anchor
-        }));
+        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();
         }
-        // or switch to picker
-        else if (media === 'pick') {
-            // pick media
-            const pick = await onPickMedia();
-            // cancel if nothing got picked
-            if (!pick) {
-                onCancel();
-            }
-            // or commit selection
-            else {
-                onCommit({
-                    id: pick.id,
-                    type: pick.template.type
-                });
-            }
-        }
         // otherwise, return result
         else {
             onCommit(media);
         }
     };
-    const onPickMedia = async () => {
-        var _a;
-        // start picker (cancel if nothing was picked
-        const media = await ((_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.pick({ schema }));
-        return media !== null && media !== void 0 ? media : undefined;
-    };
-    const onUploadAsset = async () => {
-        var _a;
-        // launch uploader (or skip if there's no result)
-        const result = await ((_a = assetUploaderRef.current) === null || _a === void 0 ? void 0 : _a.upload({
-            schema: mediaUploadSchema,
-            anchor
-        }));
-        if (!result) {
-            return undefined;
-        }
-        // or switch to picking
-        else if (result === 'pick') {
-            return onPickAsset();
-        }
-        // 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;
-        }
-    };
-    const onPickAsset = async () => {
-        var _a;
-        // launch picker (or cancel if nothing is selected)
-        const result = await ((_a = assetPickerRef.current) === null || _a === void 0 ? void 0 : _a.pick({
-            schema: mediaUploadSchema
-        }));
-        if (!result) {
-            return undefined;
-        }
-        // or launch uploader if the directive was received
-        else if (result === 'upload') {
-            return onUploadAsset();
-        }
-        // 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;
-        }
-    };
-    const onLinkVideo = async () => {
-        var _a, _b;
-        // start editor (cancel if dismissed)
-        const value = await ((_a = embeddedVideoEditorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
-            schema: funnel_ui_1.Media.Video.Source.schema.content.remote.schema,
-            anchor: anchorRef.current
-        }));
-        return (_b = value === null || value === void 0 ? void 0 : value.value) !== null && _b !== void 0 ? _b : undefined;
-    };
     const onMenuSelect = async (option) => {
         // process based on option
+        const pickerArgs = getPickerArgs();
         switch (option) {
-            case 'pick': {
-                // pick media (or cancel if nothing was picked)
-                const media = await onPickMedia();
-                if (!media) {
-                    onCancel();
-                }
-                // or commit
-                else {
-                    onCommitRef.current({
-                        id: media.id,
-                        type: media.template.type
-                    });
-                }
-                // stop processing
-                break;
-            }
+            case 'pick.asset':
             case 'add.asset': {
                 // get visual (or cancel)
-                const asset = await onUploadAsset();
+                const asset = option === 'pick.asset'
+                    ? await pickAsset(pickerArgs)
+                    : await uploadAsset(pickerArgs);
                 if (!asset) {
                     onCancel();
                     break;
@@ -219,7 +115,7 @@ function MediaFactory({ schema, language, media: initialValue, anchor, onCommit:
             }
             case 'add.url': {
                 // link video (or cancel)
-                const video = await onLinkVideo();
+                const video = await linkVideo(pickerArgs);
                 if (!video) {
                     onCancel();
                     break;
@@ -234,23 +130,83 @@ function MediaFactory({ schema, language, media: initialValue, anchor, onCommit:
     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, { controller: menu, onItemClick: onMenuSelect, onClose: onCancel }), (0, jsx_runtime_1.jsx)(media_1.MediaPicker, { ref: pickerRef, language: language }), (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 })] }));
+    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',
-        label: 'Use existing media',
-        icon: 'FileSearchCorner'
+        id: 'pick.asset',
+        label: 'Select from library',
+        icon: 'Image'
     },
     {
         id: 'add.asset',
-        label: 'Upload new asset',
-        icon: 'ImageDown'
+        label: 'Upload asset',
+        icon: 'Upload'
     },
     {
         id: 'add.url',
-        label: 'Link to Video',
-        icon: 'Link2'
+        label: 'Add video link',
+        icon: 'Link'
     }
 ];
-const mediaUploadSchema = funnel_core_1.Schema.Field.visual({ name: 'Image or Video' });
+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;

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

@@ -1,13 +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.ObjectFactory = ObjectFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const object_1 = require("../object");
 // component
-function ObjectFactory({ schema, field, onCommit, onCancel }) {
+function ObjectFactory(_a) {
+    var { schema, fieldId, field, onCommit, onCancel } = _a, popupProps = __rest(_a, ["schema", "fieldId", "field", "onCommit", "onCancel"]);
     // bind refs
     const editorRef = (0, react_1.useRef)(null);
+    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,7 +34,7 @@ function ObjectFactory({ schema, field, onCommit, onCancel }) {
             // start editor (cancel if dismissed)
             const value = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
                 schema,
-                field
+                field,
             }));
             if (!value) {
                 console.debug('[ObjectFactory] editing cancelled');

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

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

package/dist/core/components/fields/factories/TextFactory.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.TextFactory = TextFactory;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -6,11 +17,12 @@ const funnel_core_1 = require("@nascentdigital/funnel-core");
 const react_1 = require("react");
 const interaction_1 = require("../../interaction");
 // component
-function TextFactory({ schema, initialValue, anchor, onCommit, onCancel }) {
+function TextFactory(_a) {
+    var { schema, initialValue, onCommit, onCancel } = _a, popupProps = __rest(_a, ["schema", "initialValue", "onCommit", "onCancel"]);
     // bind refs
     const quickInputRef = (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);
@@ -25,13 +37,7 @@ function TextFactory({ schema, initialValue, anchor, onCommit, onCancel }) {
                 throw new funnel_core_1.IllegalStateError('Unable to resolve QuickInput ref');
             }
             // start editor (cancel if dismissed)
-            const value = await quickInput.open({
-                schema,
-                anchor: anchorRef.current,
-                initialValue: initialValue === null || initialValue === void 0 ? void 0 : initialValue.value,
-                placement: 'right',
-                anchorOffset: 2
-            });
+            const value = await quickInput.open(Object.assign({ schema, initialValue: initialValue === null || initialValue === void 0 ? void 0 : initialValue.value }, (popupPropsRef.current)));
             if (!value) {
                 onCancelRef.current();
             }

package/dist/core/components/fields/link/LinkEditor.d.ts

@@ -1,4 +1,5 @@
 import { Language, Schema } from '@nascentdigital/funnel-core';
+import { Popup } from '../../interaction';
 export declare const LinkEditor: import("react").ForwardRefExoticComponent<LinkEditor.Props & import("react").RefAttributes<LinkEditor.Ref>>;
 export declare namespace LinkEditor {
     type Props = {
@@ -8,9 +9,8 @@ export declare namespace LinkEditor {
     interface Ref {
         edit(options: Options): Promise<Schema.Field.Data<Schema.LinkField> | undefined>;
     }
-    type Options = {
+    type Options = Popup.Props.Delegated & {
         schema: Schema.LinkField;
         initialValue?: Schema.Field.Data<Schema.LinkField>;
-        anchor: string;
     };
 }