@nascentdigital/funnel-editor 4.4.21 → 4.5.1

package/dist/core/domain/BlockConfiguration.d.ts

@@ -1,4 +1,5 @@
-import { BlockLayout, EventBus, FieldModel } from '@nascentdigital/funnel-core';
+import { BlockLayout, EventBus, Field, FieldModel, Schema } from '@nascentdigital/funnel-core';
+import { PanelLayout } from '@nascentdigital/funnel-ui';
 import { Block } from './Block';
 import { IAssetStore } from './IAssetStore';
 import { SectionBlock } from './SectionBlock';
@@ -15,6 +16,13 @@ export declare class BlockConfiguration {
     constructor({ block: blockOrSectionBlock, assetStore }: BlockConfiguration.ConstructorArgs);
     get editableFields(): ReadonlyArray<FieldModel.Config>;
     set editableFields(fields: ReadonlyArray<FieldModel.Config>);
+    get blocksFields(): FieldModel.Config[];
+    get blockFieldData(): Schema.Block.Data.ForFields<Schema.Fields>;
+    get desktopFields(): FieldModel.Config[];
+    get mobileFields(): never[];
+    get nameField(): FieldModel.Config | undefined;
+    get themeField(): FieldModel.Config | undefined;
+    get layoutField(): Field<Schema.EnumField<Schema.EnumField.Options<PanelLayout>>> | undefined;
     get layout(): BlockLayout | undefined;
     get events$(): import("rxjs").Observable<EventBus.Event<string, string>>;
     get valid(): boolean;

package/dist/core/domain/BlockConfiguration.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BlockConfiguration = void 0;
 const funnel_core_1 = require("@nascentdigital/funnel-core");
+const funnel_ui_1 = require("@nascentdigital/funnel-ui");
 const rxjs_1 = require("rxjs");
 const SectionBlock_1 = require("./SectionBlock");
 // model
@@ -46,6 +47,53 @@ class BlockConfiguration {
         this._editableFields = fields;
         this.raiseEvent('changed');
     }
+    get blocksFields() {
+        return [
+            this.nameField,
+            this.themeField
+        ].filter(funnel_core_1.Value.isDefined);
+    }
+    get blockFieldData() {
+        const { assetStore, block } = this;
+        return block.fields.reduce((data, field) => {
+            // link assets
+            const fieldValue = field.value;
+            if ((fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.type) === 'asset') {
+                const assetData = funnel_core_1.Schema.AssetField.Value.fromData(fieldValue);
+                const asset = (assetData === null || assetData === void 0 ? void 0 : assetData.id)
+                    ? assetStore.getAsset(assetData === null || assetData === void 0 ? void 0 : assetData.id)
+                    : undefined;
+                data[field.id] = assetData && asset
+                    ? funnel_core_1.Schema.AssetField.LinkedValue.toData(funnel_core_1.Schema.AssetField.Value.toLinked(assetData, asset))
+                    : fieldValue;
+            }
+            else {
+                data[field.id] = field.value;
+            }
+            // keep reducing
+            return data;
+        }, {});
+    }
+    get desktopFields() {
+        return [
+            this._editableFields.find(field => field.id === 'contentAlign')
+        ].filter(funnel_core_1.Value.isDefined);
+    }
+    get mobileFields() {
+        return [].filter(funnel_core_1.Value.isDefined);
+    }
+    get nameField() {
+        const { block, sectionBlock } = this;
+        return sectionBlock
+            ? this._editableFields.find(field => field.id === block.nameField.id)
+            : undefined;
+    }
+    get themeField() {
+        return this._editableFields.find(field => field.id === funnel_ui_1.BlockConfig.Presets.ThemeOnly.key);
+    }
+    get layoutField() {
+        return this._editableFields.find(field => field.id === 'layout');
+    }
     get layout() {
         return this._layout;
     }
@@ -149,30 +197,12 @@ class BlockConfiguration {
     }
     sync() {
         // recompute the editable fields
-        const { assetStore, block, fields, editableFields } = this;
+        const { block, blockFieldData: fieldData, fields, editableFields } = this;
         const configData = editableFields.reduce((data, field) => {
             data[field.id] = field.value;
             // keep reducing
             return data;
         }, {});
-        const fieldData = block.fields.reduce((data, field) => {
-            // link assets
-            const fieldValue = field.value;
-            if ((fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.type) === 'asset') {
-                const assetData = funnel_core_1.Schema.AssetField.Value.fromData(fieldValue);
-                const asset = (assetData === null || assetData === void 0 ? void 0 : assetData.id)
-                    ? assetStore.getAsset(assetData === null || assetData === void 0 ? void 0 : assetData.id)
-                    : undefined;
-                data[field.id] = assetData && asset
-                    ? funnel_core_1.Schema.AssetField.LinkedValue.toData(funnel_core_1.Schema.AssetField.Value.toLinked(assetData, asset))
-                    : fieldValue;
-            }
-            else {
-                data[field.id] = field.value;
-            }
-            // keep reducing
-            return data;
-        }, {});
         // get customized schema (if there are effects)
         const blockSchema = block.schema;
         const { getConfig, getLayout } = blockSchema;
@@ -204,7 +234,7 @@ class BlockConfiguration {
         });
         // resolve layouts
         this._layout = getLayout
-            ? getLayout({ config: configData, fields: fieldData })
+            ? getLayout({ config: updatedConfig, fields: fieldData })
             : undefined;
         // assign to editable fields (raised event)
         this.editableFields = configFields;

package/dist/core/domain/Section.js

@@ -88,7 +88,7 @@ class Section extends ItemBase_1.ItemBase {
         this._blocks.push(block);
         this._modifiedOn = Date.now();
         // bind block
-        block.bind(this);
+        block.bind({ parent: this, area: this.area });
         // raise change
         this.raiseEvent('changed');
         // return block

package/dist/page/components/BlockEditor.js

@@ -7,7 +7,7 @@ exports.BlockEditor = BlockEditor;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const core_1 = require("../../core");
-const BlockConfig_1 = require("./BlockConfig");
+const config_1 = require("./config");
 // component
 function BlockEditor({ className, block, onSelectItem }) {
     // bind props + hooks
@@ -39,7 +39,7 @@ function BlockEditor({ className, block, onSelectItem }) {
         // delete the block
         block.delete();
         // and select the nearest neighbour (if any)
-        if (block.parent instanceof core_1.Section && nearestBlock) {
+        if (nearestBlock) {
             onSelectItem(nearestBlock);
         }
     };
@@ -54,7 +54,7 @@ function BlockEditor({ className, block, onSelectItem }) {
         }
     };
     // render editor
-    return ((0, jsx_runtime_1.jsx)(core_1.FieldsPanel, { className: (0, classnames_1.default)(className, 'px-l6 py-l10'), title: block.name, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BlockConfig_1.BlockConfig, { className: "shrink-0", block: block }), block.canDelete &&
+    return ((0, jsx_runtime_1.jsx)(core_1.FieldsPanel, { className: (0, classnames_1.default)(className, 'px-l6 py-l10'), title: block.name, actions: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(config_1.BlockConfig, { className: "shrink-0", block: block }), block.canDelete &&
                     (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.IconButton, { className: "DeleteAction text-content-primary hover:text-destructive shrink-0", variant: "util", icon: "EllipsisVertical", onClick: e => menu.open(e.currentTarget) }), (0, jsx_runtime_1.jsx)(core_1.Menu, { controller: menu, onItemClick: onMenuClick })] })] }), fields: block.fields }));
 }
 const blockMenu = [

package/dist/page/components/{BlockConfig.d.ts → config/BlockConfig.d.ts}

@@ -1,4 +1,4 @@
-import { Block, SectionBlock } from '../../core';
+import { Block, SectionBlock } from '../../../core';
 export declare function BlockConfig({ className, block: blockOrSectionBlock }: BlockConfig.Props): import("react/jsx-runtime").JSX.Element | undefined;
 export declare namespace BlockConfig {
     type Props = {

package/dist/page/components/config/BlockConfig.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockConfig = BlockConfig;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const core_1 = require("../../../core");
+const BlockConfigEditor_1 = require("./BlockConfigEditor");
+const LegacyBlockConfigEditor_1 = require("./LegacyBlockConfigEditor");
+// component
+function BlockConfig({ className, block: blockOrSectionBlock }) {
+    // bind ref
+    const editorRef = (0, react_1.useRef)(null);
+    const legacyEditorRef = (0, react_1.useRef)(null);
+    // skip if there's no config
+    const block = blockOrSectionBlock instanceof core_1.SectionBlock
+        ? blockOrSectionBlock.block
+        : blockOrSectionBlock;
+    const { config } = block;
+    if (config.length === 0) {
+        return undefined;
+    }
+    // helpers
+    const onEdit = async (event) => {
+        var _a, _b;
+        // use new configurator (if enabled)
+        if (process.env.NEXT_PUBLIC_EDITOR_BLOCK_CONFIG === 'experimental') {
+            await ((_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.edit({
+                block: blockOrSectionBlock,
+                anchor: event.currentTarget
+            }));
+        }
+        // or use legacy version
+        else {
+            await ((_b = legacyEditorRef.current) === null || _b === void 0 ? void 0 : _b.edit({
+                block: blockOrSectionBlock,
+                anchor: event.currentTarget
+            }));
+        }
+    };
+    // render
+    const valid = config.every(field => field.valid);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(core_1.StatusChip, { className: className, variant: valid ? 'success' : 'error', onClick: onEdit, children: "Configure" }), (0, jsx_runtime_1.jsx)(BlockConfigEditor_1.BlockConfigEditor, { ref: editorRef }), (0, jsx_runtime_1.jsx)(LegacyBlockConfigEditor_1.LegacyBlockConfigEditor, { ref: legacyEditorRef })] }));
+}

package/dist/page/components/config/BlockConfigEditor.d.ts

@@ -0,0 +1,13 @@
+import { Rect } from '@nascentdigital/funnel-core';
+import { Block, SectionBlock } from '../../../core';
+export declare const BlockConfigEditor: import("react").ForwardRefExoticComponent<import("react").RefAttributes<BlockConfigEditor.Ref>>;
+export declare namespace BlockConfigEditor {
+    type Props = {};
+    interface Ref {
+        edit(options: Options): Promise<void>;
+    }
+    type Options = {
+        block: Block | SectionBlock;
+        anchor: HTMLElement | Rect;
+    };
+}

package/dist/page/components/config/BlockConfigEditor.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BlockConfigEditor = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const react_1 = require("motion/react");
+const react_2 = require("react");
+const rxjs_1 = require("rxjs");
+const core_1 = require("../../../core");
+const hooks_1 = require("../../hooks");
+const BlockPreview_1 = require("./BlockPreview");
+// editor
+exports.BlockConfigEditor = (0, react_2.forwardRef)(function BlockConfigEditor(_, ref) {
+    // bind state + hooks
+    const [deferral, setDeferral] = (0, react_2.useState)(undefined);
+    const [configuration, setConfiguration] = (0, react_2.useState)();
+    const [anchor, setAnchor] = (0, react_2.useState)();
+    const [blockView, setBlockView] = (0, react_2.useState)('desktop');
+    const pageController = (0, hooks_1.usePageController)();
+    const touch = (0, client_1.useTouch)();
+    const panelLayoutPickerRef = (0, react_2.useRef)(null);
+    const { modified = false, valid = false, blocksFields = [], desktopFields = [], mobileFields = [] } = configuration !== null && configuration !== void 0 ? configuration : {};
+    const settingsFields = blockView === 'desktop' ? desktopFields : mobileFields;
+    // sync w/ configuration
+    (0, core_1.useBlockConfiguration)(configuration);
+    // bind ref
+    (0, react_2.useImperativeHandle)(ref, () => ({
+        edit: async ({ block, anchor }) => {
+            // reset state
+            setConfiguration(block.getConfiguration());
+            setAnchor(anchor);
+            setBlockView('desktop');
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), []);
+    // helpers
+    const onSave = async () => {
+        // save config
+        configuration === null || configuration === void 0 ? void 0 : configuration.save();
+        // wait for page to save
+        await (0, rxjs_1.firstValueFrom)(pageController.saved$);
+        // complete (we're done)
+        deferral === null || deferral === void 0 ? void 0 : deferral.resolve();
+        // refresh
+        touch();
+    };
+    const onCancel = () => {
+        // skip if missing or already completed
+        if (!deferral || deferral.isComplete) {
+            return;
+        }
+        // cancel
+        deferral.resolve(undefined);
+        // touch
+        touch();
+    };
+    const onChangePanelLayout = async (e) => {
+        var _a;
+        // skip if there's no layout field (shouldn't happen)
+        const { layoutField } = configuration !== null && configuration !== void 0 ? configuration : {};
+        if (!layoutField) {
+            return;
+        }
+        // pick new layout
+        const { schema: layoutSchema, value: layoutData } = layoutField;
+        const selectedLayout = await ((_a = panelLayoutPickerRef.current) === null || _a === void 0 ? void 0 : _a.open({
+            anchor: e.currentTarget,
+            anchorOffset: 4,
+            placement: 'top',
+            items: Object.entries(layoutSchema.options).map(([layout, option]) => ({
+                id: layout,
+                label: option.name
+            })),
+            selectedItem: layoutData === null || layoutData === void 0 ? void 0 : layoutData.value
+        }));
+        // update if something was picked
+        if (selectedLayout) {
+            layoutField.value = funnel_core_1.Schema.EnumField.Value.toData(selectedLayout);
+        }
+    };
+    // skip if there's no config
+    if (!configuration) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(core_1.MiniEditor, { className: "w-[550px] max-w-full", title: "Block Configuration", open: !!deferral && !deferral.isComplete, anchor: anchor, anchorOffset: 4, onSave: onSave, onClose: onCancel, disableSave: !modified || !valid, customActions: (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", disabled: configuration.isConfigInDefault, onClick: () => configuration.reset(), children: "Reset to Default" }), wide: true, children: [(0, jsx_runtime_1.jsxs)("section", { className: "flex items-center gap-l4", children: [(0, jsx_runtime_1.jsx)("span", { className: "label-sm text-content-primary flex-1", children: "Layout" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "ArrowLeftRight", children: "Rearrange" }), (0, jsx_runtime_1.jsx)(core_1.Button, { variant: "secondary", size: "sm", iconLeft: "LayoutTemplate", onClick: onChangePanelLayout, children: "Change" })] }), blocksFields.length > 0 &&
+                        (0, jsx_runtime_1.jsx)("section", { className: "grid grid-cols-2 auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: blocksFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) }), (0, jsx_runtime_1.jsx)(core_1.Tabs, { items: blockViews, selectedItem: blockView, onSelect: setBlockView }), (0, jsx_runtime_1.jsx)("section", { className: "stacked p-l6 bg-surface1 rounded-md", children: (0, jsx_runtime_1.jsx)(react_1.AnimatePresence, { children: (0, jsx_runtime_1.jsx)(core_1.Animate, { effect: "fade", present: true, children: (0, jsx_runtime_1.jsx)(BlockPreview_1.BlockPreview, { variant: blockView, configuration: configuration }) }, blockView) }) }), settingsFields.length > 0 &&
+                        (0, jsx_runtime_1.jsx)("section", { className: "grid grid-cols-2 auto-rows-auto items-start gap-l6", children: (0, jsx_runtime_1.jsx)(core_1.FieldErrorController, { children: settingsFields.map(field => (0, jsx_runtime_1.jsx)(core_1.FieldEditor, { className: "col-span-2", field: field, variant: "wide" }, field.id)) }) }), (0, jsx_runtime_1.jsx)("hr", { className: "divider border-border-l1" })] }), (0, jsx_runtime_1.jsx)(core_1.QuickPicker, { ref: panelLayoutPickerRef, variant: "card", title: "Pick Block Layout", description: "Select an available layout for this block.", renderItem: (item) => renderPanelLayoutItem(item) })] }));
+});
+function renderPanelLayoutItem(item) {
+    switch (item.id) {
+        case 'stack.h':
+            return ((0, jsx_runtime_1.jsx)("div", { children: "Stack H" }));
+        case 'stack.v':
+            return ((0, jsx_runtime_1.jsx)("div", { children: "Stack V" }));
+        case 'nested':
+            return ((0, jsx_runtime_1.jsx)("div", { children: "Nested" }));
+        default:
+            return ((0, jsx_runtime_1.jsx)("div", { children: item.id }));
+    }
+}
+const blockViews = [
+    { id: 'desktop', label: 'Desktop' },
+    { id: 'mobile', label: 'Mobile' },
+];

package/dist/page/components/config/BlockPreview.d.ts

@@ -0,0 +1,10 @@
+import { BlockConfiguration } from '../../../core';
+export declare function BlockPreview({ className, variant, configuration }: BlockPreview.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace BlockPreview {
+    type Variant = 'desktop' | 'mobile';
+    type Props = {
+        className?: string;
+        variant: Variant;
+        configuration: BlockConfiguration;
+    };
+}