@nascentdigital/funnel-editor 4.4.18

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

@@ -0,0 +1,150 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AssetFactory = AssetFactory;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const hooks_1 = require("../../../hooks");
+const interaction_1 = require("../../interaction");
+const asset_1 = require("../asset");
+// component
+function AssetFactory({ schema, assetId, anchor, onCommit, onCancel: onCancelRaw }) {
+    // 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 onCommitRef = (0, react_1.useRef)(onCommit);
+    onCommitRef.current = onCommit;
+    const onCancelRef = (0, react_1.useRef)(onCancelRaw);
+    onCancelRef.current = onCancelRaw;
+    const assetStore = (0, hooks_1.useAssetStore)();
+    const asset = assetId
+        ? assetStore.getAsset(assetId)
+        : undefined;
+    // open menu when bound
+    (0, react_1.useEffect)(() => {
+        // setup update menu
+        if (assetId) {
+            menu.items = updateMenuItems;
+        }
+        // or setup create menu
+        else {
+            menu.items = createMenuItems;
+        }
+        // open menu
+        menu.open(anchorRef.current);
+    }, [menu, assetId]);
+    // helpers
+    const onPick = async () => {
+        var _a;
+        // launch picker
+        const asset = await ((_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.pick({
+            schema
+        }));
+        // cancel if no visual was selected
+        if (!asset) {
+            onCancel();
+        }
+        // or launch uploader if the directive was received
+        else if (asset === 'upload') {
+            await onUpload();
+        }
+        // otherwise, select image
+        else {
+            onComplete(asset);
+        }
+    };
+    const onUpload = async () => {
+        var _a;
+        // launch uploader
+        const asset = await ((_a = uploaderRef.current) === null || _a === void 0 ? void 0 : _a.upload({
+            schema,
+            anchor
+        }));
+        // cancel if no visual was selected
+        if (!asset) {
+            onCancel();
+        }
+        // or launch uploader if the directive was received
+        else if (asset === 'pick') {
+            await onPick();
+        }
+        // otherwise, select asset
+        else {
+            onComplete(asset);
+        }
+    };
+    const onEdit = async () => {
+        var _a;
+        // fail if there's no asset (should never happen)
+        if (!asset || !asset.value) {
+            console.warn('[AssetFactory] cannot edit unbound asset:', assetId);
+            return;
+        }
+        // perform edit
+        const updatedAsset = await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
+            schema,
+            asset: asset.value,
+            anchor
+        }));
+        // always cancel
+        onCancel();
+    };
+    const onComplete = (asset) => {
+        // resolve asset
+        onCommitRef.current({
+            __ref: 'asset',
+            type: 'asset',
+            value: funnel_core_1.Schema.AssetField.LinkedValue.unlink(asset.value)
+        });
+    };
+    const onMenuSelect = async (option) => {
+        // launch picker
+        if (option === 'pick') {
+            await onPick();
+        }
+        // or uploader
+        else if (option === 'upload') {
+            await onUpload();
+        }
+        // or edit
+        else {
+            await onEdit();
+        }
+    };
+    const onCancel = () => onCancelRef.current();
+    // render nothing (for now)
+    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)(asset_1.AssetPicker, { ref: pickerRef }), (0, jsx_runtime_1.jsx)(asset_1.AssetUploader, { ref: uploaderRef }), (0, jsx_runtime_1.jsx)(asset_1.AssetEditor, { ref: editorRef })] }));
+}
+const createMenuItems = [
+    {
+        id: 'pick',
+        label: 'Choose from library',
+        icon: 'ImageDown'
+    },
+    {
+        id: 'upload',
+        label: 'Upload media',
+        icon: 'Upload'
+    }
+];
+const updateMenuItems = [
+    {
+        id: 'edit',
+        label: 'Edit details',
+        icon: 'NotebookPen'
+    },
+    {
+        id: 'pick',
+        label: 'Replace from library',
+        icon: 'ImageDown'
+    },
+    {
+        id: 'upload',
+        label: 'Replace with upload',
+        icon: 'Upload'
+    }
+];

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

@@ -0,0 +1,12 @@
+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;
+export declare namespace CollectionFactory {
+    type Props = {
+        schema: Schema.CollectionField;
+        language: Language;
+        collection?: Schema.CollectionField.Value;
+        anchor: HTMLElement;
+        onCommit: Callback<Schema.Field.Data<Schema.CollectionField>>;
+        onCancel: Callback.Void;
+    };
+}

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

@@ -0,0 +1,167 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollectionFactory = CollectionFactory;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+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 }) {
+    // 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 onCommitRef = (0, react_1.useRef)(onCommit);
+    onCommitRef.current = onCommit;
+    const onCancelRef = (0, react_1.useRef)(onCancelRaw);
+    onCancelRef.current = onCancelRaw;
+    const collectionOptions = schema.collections;
+    // open menu when bound
+    (0, react_1.useEffect)(() => {
+        // setup update menu
+        if (initialValue) {
+            menu.items = [
+                ...updateMenuItems,
+                ...collectionOptions
+                    .reduce((items, collection) => {
+                    // add item
+                    items.push({
+                        id: getCollectionItemId(collection),
+                        label: `Replace with ${collection.name}`,
+                        icon: 'FilePlusCorner'
+                    });
+                    // keep reducing
+                    return items;
+                }, [])
+            ];
+        }
+        // or setup create menu
+        else {
+            menu.items = [
+                ...createMenuItems,
+                ...collectionOptions.reduce((items, collection) => {
+                    // add item
+                    items.push({
+                        id: getCollectionItemId(collection),
+                        label: `Create ${collection.name}`,
+                        icon: 'FilePlusCorner'
+                    });
+                    // keep reducing
+                    return items;
+                }, [])
+            ];
+        }
+        // open menu
+        menu.open(anchorRef.current);
+    }, [menu, collectionOptions, initialValue]);
+    // helpers
+    const onPick = async () => {
+        var _a;
+        // start picker (cancel if nothing was picked
+        const collection = await ((_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.pick({ schema }));
+        if (!collection) {
+            onCancel();
+        }
+        // otherwise, return result
+        else {
+            onCommitRef.current(funnel_core_1.Schema.CollectionField.Value.ForRef.toData({
+                id: collection.id,
+                type: collection.template.type
+            }));
+        }
+    };
+    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
+        }));
+        if (!collection) {
+            onCancel();
+        }
+        // otherwise, return result
+        else {
+            onCommit(collection);
+        }
+    };
+    const onEdit = async () => {
+        var _a;
+        // get schema (or throw)
+        const collectionType = initialValue === null || initialValue === void 0 ? void 0 : initialValue.type;
+        const collectionSchema = collectionOptions.find(collection => collection.type === collectionType);
+        if (!collectionSchema) {
+            console.error('[CollectionFactor] unable to resolve collection:', collectionType);
+            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
+        }));
+        if (!collection) {
+            onCancel();
+        }
+        // otherwise, return result
+        else {
+            onCommit(collection);
+        }
+    };
+    const onMenuSelect = async (option) => {
+        // launch picker
+        if (option === 'pick') {
+            await onPick();
+        }
+        // or edit
+        else if (option === 'edit') {
+            await onEdit();
+        }
+        // or uploader
+        else {
+            // get collection
+            const collectionType = getCollectionType(option);
+            const collection = collectionOptions.find(collection => collection.type === collectionType);
+            // blow up if collection isn't there
+            if (!collection) {
+                console.error('[CollectionFactor] unable to resolve collection:', collectionType);
+                throw new funnel_core_1.IllegalStateError(`Unable to resolve "${collectionType}" Collection`);
+            }
+            // create collection
+            await onCreate(collection);
+        }
+    };
+    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)(collection_1.CollectionPicker, { ref: pickerRef, language: language }), (0, jsx_runtime_1.jsx)(collection_1.CollectionEditor, { ref: editorRef, language: language })] }));
+}
+// helpers
+const createMenuItems = [
+    {
+        id: 'pick',
+        label: 'Find existing',
+        icon: 'FileSearchCorner'
+    }
+];
+const updateMenuItems = [
+    {
+        id: 'edit',
+        label: 'Edit details',
+        icon: 'Pencil'
+    },
+    {
+        id: 'pick',
+        label: 'Find existing',
+        icon: 'FileSearchCorner'
+    }
+];
+const collectionItemPrefix = 'collection-';
+function getCollectionItemId(collection) {
+    return `${collectionItemPrefix}${collection.type}`;
+}
+function getCollectionType(collectionItemId) {
+    return collectionItemId.substring(collectionItemPrefix.length);
+}

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

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

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

@@ -0,0 +1,40 @@
+"use strict";
+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 }) {
+    // bind refs
+    const editorRef = (0, react_1.useRef)(null);
+    const anchorRef = (0, react_1.useRef)(anchor);
+    anchorRef.current = anchor;
+    const onCommitRef = (0, react_1.useRef)(onCommit);
+    onCommitRef.current = onCommit;
+    const onCancelRef = (0, react_1.useRef)(onCancel);
+    onCancelRef.current = onCancel;
+    // start picker on mount
+    (0, react_1.useEffect)(() => {
+        // open page picker
+        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
+            }));
+            if (!value) {
+                onCancelRef.current();
+            }
+            // otherwise, return result
+            else {
+                onCommitRef.current(value);
+            }
+        };
+        onEdit().catch(() => onCancelRef.current());
+    }, [schema, initialValue]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(embed_1.EmbeddedVideoEditor, { ref: editorRef, language: language }));
+}

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

@@ -0,0 +1,11 @@
+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;
+export declare namespace FieldValueFactory {
+    type Props<T extends Schema.Field.Type = Schema.Field.Type> = {
+        anchor: HTMLElement;
+        itemSchema: T;
+        field?: Field<T> | ObjectField;
+        onCommit?: Callback<Schema.Field.Data<T>>;
+        onCancel?: Callback.Void;
+    };
+}

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

@@ -0,0 +1,52 @@
+"use strict";
+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 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 ObjectFactory_1 = require("./ObjectFactory");
+const PageFactory_1 = require("./PageFactory");
+const TextFactory_1 = require("./TextFactory");
+function FieldValueFactory({ anchor, itemSchema, field, onCommit = funnel_core_1.Fn.NoOp, onCancel = funnel_core_1.Fn.NoOp }) {
+    var _a, _b, _c, _d, _e, _f;
+    // bind language
+    const brandConfig = funnel_core_1.AppConfig.brandConfig();
+    const page = (0, hooks_1.usePossiblePage)();
+    const collection = (0, hooks_1.usePossibleCollection)();
+    const store = collection !== null && collection !== void 0 ? collection : page;
+    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 commit = (item) => {
+        console.debug(`[FieldValueFactory/commit] creating value for "${itemSchema.name}"`, item);
+        onCommit(item);
+    };
+    const cancel = () => {
+        console.debug(`[FieldValueFactory/cancel] cancelling "${itemSchema.name}"`);
+        onCancel();
+    };
+    // 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 }));
+        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 }));
+        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 }));
+        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 }));
+        }
+        case 'page':
+            return ((0, jsx_runtime_1.jsx)(PageFactory_1.PageFactory, { schema: itemSchema, region: region, language: language, onCommit: item => commit(item), onCancel: cancel }));
+        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 }));
+        case 'object':
+            return ((0, jsx_runtime_1.jsx)(ObjectFactory_1.ObjectFactory, { schema: itemSchema, field: field, onCommit: item => commit(item), onCancel: cancel }));
+        default:
+            console.debug('[FieldValueFactory] no support for ', itemSchema);
+            return null;
+    }
+}

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

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

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

@@ -0,0 +1,40 @@
+"use strict";
+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 }) {
+    // bind refs
+    const editorRef = (0, react_1.useRef)(null);
+    const anchorRef = (0, react_1.useRef)(anchor);
+    anchorRef.current = anchor;
+    const onCommitRef = (0, react_1.useRef)(onCommit);
+    onCommitRef.current = onCommit;
+    const onCancelRef = (0, react_1.useRef)(onCancel);
+    onCancelRef.current = onCancel;
+    // start picker on mount
+    (0, react_1.useEffect)(() => {
+        // open page picker
+        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
+            }));
+            if (!value) {
+                onCancelRef.current();
+            }
+            // otherwise, return result
+            else {
+                onCommitRef.current(value);
+            }
+        };
+        onEdit().catch(() => onCancelRef.current());
+    }, [schema, initialValue]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(link_1.LinkEditor, { ref: editorRef, region: region, language: language }));
+}

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

@@ -0,0 +1,11 @@
+import { Callback, ObjectField, Schema } from '@nascentdigital/funnel-core';
+export declare function ObjectFactory({ schema, field, onCommit, onCancel }: ObjectFactory.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace ObjectFactory {
+    type Props = {
+        schema: Schema.ObjectField;
+        fieldId?: string;
+        field?: ObjectField;
+        onCommit: Callback<Schema.Field.Data<Schema.ObjectField>>;
+        onCancel: Callback.Void;
+    };
+}

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

@@ -0,0 +1,39 @@
+"use strict";
+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 }) {
+    // bind refs
+    const editorRef = (0, react_1.useRef)(null);
+    const onCommitRef = (0, react_1.useRef)(onCommit);
+    onCommitRef.current = onCommit;
+    const onCancelRef = (0, react_1.useRef)(onCancel);
+    onCancelRef.current = onCancel;
+    // start picker on mount
+    (0, react_1.useEffect)(() => {
+        // open page picker
+        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,
+                field
+            }));
+            if (!value) {
+                console.debug('[ObjectFactory] editing cancelled');
+                onCancelRef.current();
+            }
+            // otherwise, return result
+            else {
+                console.debug('[ObjectFactory] editing complete:', value);
+                onCommitRef.current(value);
+            }
+        };
+        onEdit().catch(() => onCancelRef.current());
+    }, [schema, field]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(object_1.ObjectEditor, { ref: editorRef }));
+}

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

@@ -0,0 +1,11 @@
+import { Callback, Language, Schema } from '@nascentdigital/funnel-core';
+export declare function PageFactory({ schema, language, onCommit, onCancel }: PageFactory.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace PageFactory {
+    type Props = {
+        schema: Schema.PageField;
+        region: string;
+        language: Language;
+        onCommit: Callback<Schema.Field.Data<Schema.PageField>>;
+        onCancel: Callback.Void;
+    };
+}

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

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PageFactory = PageFactory;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const react_1 = require("react");
+const page_1 = require("../page");
+// component
+function PageFactory({ schema, language, onCommit, onCancel }) {
+    // bind refs
+    const pickerRef = (0, react_1.useRef)(null);
+    const onCommitRef = (0, react_1.useRef)(onCommit);
+    onCommitRef.current = onCommit;
+    const onCancelRef = (0, react_1.useRef)(onCancel);
+    onCancelRef.current = onCancel;
+    // start picker on mount
+    (0, react_1.useEffect)(() => {
+        // open page picker
+        const onPick = async () => {
+            var _a;
+            // start picker (cancel if nothing was picked
+            const page = await ((_a = pickerRef.current) === null || _a === void 0 ? void 0 : _a.pick(schema));
+            if (!page) {
+                onCancelRef.current();
+            }
+            // otherwise, return result
+            else {
+                onCommitRef.current(funnel_core_1.Schema.PageField.Value.toData({
+                    id: page.id,
+                    type: page.template.type,
+                    scope: schema.scope
+                }));
+            }
+        };
+        onPick().catch(() => onCancelRef.current());
+    }, [schema, language]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(page_1.PagePicker, { ref: pickerRef, language: language }));
+}

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

@@ -0,0 +1,11 @@
+import { Callback, Rect, Schema } from '@nascentdigital/funnel-core';
+export declare function TextFactory({ schema, initialValue, anchor, onCommit, onCancel }: TextFactory.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace TextFactory {
+    type Props = {
+        schema: Schema.TextField;
+        initialValue?: Schema.Field.Data<Schema.TextField>;
+        anchor: HTMLElement | Rect;
+        onCommit: Callback<Schema.Field.Data<Schema.TextField>>;
+        onCancel: Callback.Void;
+    };
+}

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextFactory = TextFactory;
+const jsx_runtime_1 = require("react/jsx-runtime");
+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 }) {
+    // bind refs
+    const quickInputRef = (0, react_1.useRef)(null);
+    const anchorRef = (0, react_1.useRef)(anchor);
+    anchorRef.current = anchor;
+    const onCommitRef = (0, react_1.useRef)(onCommit);
+    onCommitRef.current = onCommit;
+    const onCancelRef = (0, react_1.useRef)(onCancel);
+    onCancelRef.current = onCancel;
+    // start picker on mount
+    (0, react_1.useEffect)(() => {
+        // open page picker
+        const onEdit = async () => {
+            // skip if ref isn't bound (should never happen)
+            const quickInput = quickInputRef.current;
+            if (!quickInput) {
+                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
+            });
+            if (!value) {
+                onCancelRef.current();
+            }
+            // otherwise, return result
+            else {
+                onCommitRef.current(funnel_core_1.Schema.TextField.Value.toData(value));
+            }
+        };
+        onEdit().catch(() => onCancelRef.current());
+    }, [schema, initialValue]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(interaction_1.QuickInput, { ref: quickInputRef }));
+}