@nascentdigital/funnel-editor 5.0.1 → 5.0.3

package/dist/styles/index.css

@@ -501,12 +501,12 @@ video {
 }
 
 [popover]{
-    inset: var(--toolwind-toggle-IyQVWbKn7P, 0px);
-    background-color: var(--toolwind-toggle-Cc5fWPeHR5, canvas);
-    color: var(--toolwind-toggle-hEv1MMrg0B, canvastext);
-    margin: var(--toolwind-toggle-ZXuFruRg3i, auto);
+    inset: var(--toolwind-toggle-JZbcB7Gi7r, 0px);
+    background-color: var(--toolwind-toggle-BCaXoftPtT, canvas);
+    color: var(--toolwind-toggle-JbSxTBifE3, canvastext);
+    margin: var(--toolwind-toggle-j7HGGXmZWl, auto);
 }
-    html, body, #__next, .Editor-wrap{
+    html, body, #__next, #root, .Editor-wrap{
     position: relative;
     height: 100lvh;
     max-height: 100lvh;
@@ -549,6 +549,31 @@ video {
     overflow: scroll;
 }
 
+
+    html.Editor-widget{
+    height: -moz-max-content;
+    height: max-content;
+    max-height: -moz-max-content;
+    max-height: max-content;
+    min-height: -moz-max-content;
+    min-height: max-content;
+    background-color: transparent;
+}
+
+        html.Editor-widget body, html.Editor-widget #__next, html.Editor-widget #root, html.Editor-widget .Editor-wrap{
+    height: -moz-max-content;
+    height: max-content;
+    max-height: -moz-max-content;
+    max-height: max-content;
+    min-height: -moz-max-content;
+    min-height: max-content;
+    background-color: transparent;
+}
+
+        html.Editor-widget nextjs-portal {
+            display: none !important;
+        }
+
     /* colors: light mode */
     html, *.light-mode {
         --color-background: 247 250 252;
@@ -5996,10 +6021,10 @@ img.nd-Visual-image {
 .anchored\/\[--nd-popup-anchor\]:where(.anchored\/\[--nd-popup-anchor\]){
     position: absolute;
     view-transition-name: --tw-anchor-view-transition-2j1919322s193433343934192p322r2w33362l;
-    --toolwind-toggle-IyQVWbKn7P: auto;
-    --toolwind-toggle-Cc5fWPeHR5: transparent;
-    --toolwind-toggle-hEv1MMrg0B: inherit;
-    --toolwind-toggle-ZXuFruRg3i: 0px;
+    --toolwind-toggle-JZbcB7Gi7r: auto;
+    --toolwind-toggle-BCaXoftPtT: transparent;
+    --toolwind-toggle-JbSxTBifE3: inherit;
+    --toolwind-toggle-j7HGGXmZWl: 0px;
 }
 .counter-l1{
     counter-reset: l1;

package/dist/styles/tailwind.js

@@ -15,6 +15,7 @@ exports.EditorTailwindConfig = {
     content: [
         './src/**/*.{tsx,jsx,ts,js}',
         '../core/src/**/*.{tsx,jsx,ts,js}',
+        '../editor-contentful/src/**/*.{tsx,jsx,ts,js}',
         '../ui/src/**/*.{tsx,jsx,ts,js}'
     ],
     safelist: [

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@nascentdigital/funnel-editor",
-  "version": "5.0.1",
+  "version": "5.0.3",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
-    "access": "restricted"
+    "access": "public"
   },
   "repository": {
     "url": "git+https://github.com/nascentdigital/funnel.git",
@@ -91,5 +91,5 @@
     "ts-jest": "^29",
     "type-fest": "^4"
   },
-  "gitHead": "6ac66e04e5d6d10b959826b84cf3827422ddf47b"
+  "gitHead": "0d1cc7d78504e8819998d928ffb342d622f75690"
 }

package/dist/core/components/fields/media/MediaPicker.d.ts

@@ -1,15 +0,0 @@
-import { Language, Schema } from '@nascentdigital/funnel-core';
-import { ICollection } from '../../../domain';
-export declare const MediaPicker: import("react").ForwardRefExoticComponent<MediaPicker.Props & import("react").RefAttributes<MediaPicker.Ref>>;
-export declare namespace MediaPicker {
-    type Props = {
-        language: Language;
-    };
-    interface Ref {
-        pick(options?: Options): Promise<Result>;
-    }
-    type Options = {
-        schema: Schema.CollectionField;
-    };
-    type Result = ICollection.Ref | undefined;
-}

package/dist/core/components/fields/media/MediaPicker.js

@@ -1,251 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.MediaPicker = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const funnel_core_1 = require("@nascentdigital/funnel-core");
-const classnames_1 = __importDefault(require("classnames"));
-const framer_motion_1 = require("framer-motion");
-const react_1 = require("react");
-const hooks_1 = require("../../../hooks");
-const feedback_1 = require("../../feedback");
-const interaction_1 = require("../../interaction");
-const transitions_1 = require("../../transitions");
-// component
-exports.MediaPicker = (0, react_1.forwardRef)(function MediaPicker({ language }, ref) {
-    // bind props + hooks
-    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
-    const [result, setResult] = (0, react_1.useState)();
-    const [schema, setSchema] = (0, react_1.useState)();
-    const [collectionGroups, setCollectionGroups] = (0, react_1.useState)();
-    const [collectionGroup, setCollectionGroup] = (0, react_1.useState)();
-    const [collections, setCollections] = (0, react_1.useState)();
-    const [tagOptions, setTagOptions] = (0, react_1.useState)();
-    const [tagFilters, setTagFilters] = (0, react_1.useState)([]);
-    const [tagTooltip, setTagTooltip] = (0, react_1.useState)();
-    const [fetching, setFetching] = (0, react_1.useState)(false);
-    const [error, setError] = (0, react_1.useState)();
-    const repo = (0, hooks_1.useCollectionRepository)();
-    const siteCollections = (0, hooks_1.useCollections)();
-    const collectionStore = (0, hooks_1.useCollectionStore)();
-    // export service
-    (0, react_1.useImperativeHandle)(ref, () => ({
-        pick: async ({ schema }) => {
-            // reset state
-            setSchema(schema);
-            setCollectionGroups(undefined);
-            setCollectionGroup(undefined);
-            setTagOptions(undefined);
-            setTagFilters([]);
-            setTagTooltip(undefined);
-            setCollections(undefined);
-            setError(undefined);
-            // create deferral
-            const deferral = new funnel_core_1.Deferral();
-            setDeferral(deferral);
-            setResult(undefined);
-            // wait until deferral is resolved
-            return deferral.promise;
-        }
-    }), []);
-    // fetch collection groups when schema changes
-    (0, react_1.useEffect)(() => {
-        // skip if there's no deferral
-        if (!schema || !deferral) {
-            return;
-        }
-        // reset error (if any)
-        setError(undefined);
-        // sync site
-        siteCollections.sync()
-            // bind groups, filtering out types that aren't part of the set
-            .then(() => {
-            // determine group list
-            const { collections } = schema;
-            const collectionGroups = collections.length === 0
-                ? siteCollections.items
-                : siteCollections.items
-                    .filter(group => collections.some(collection => collection.type === group.type));
-            setCollectionGroups(collectionGroups);
-            // bind first group as in initial selection
-            const [collectionGroup] = collectionGroups;
-            setCollectionGroup(collectionGroup);
-            // short-circuit collections if none are present
-            if (!collectionGroup) {
-                setCollections([]);
-                setTagOptions([]);
-                setTagFilters([]);
-            }
-        })
-            // handle error
-            .catch(e => {
-            console.error('[MediaPicker/sync] sync failed', e);
-            setError(feedback_1.ErrorMessage.coerce(e));
-        });
-    }, [siteCollections, deferral, schema]);
-    // fetch collection items when group changes
-    (0, react_1.useEffect)(() => {
-        // ignore if not ready
-        if (!collectionGroup) {
-            return;
-        }
-        console.debug('[MediaPicker/sync] syncing group', collectionGroup);
-        // clear collections
-        setCollections(undefined);
-        setTagOptions(undefined);
-        setTagFilters([]);
-        // sync group
-        collectionGroup.sync()
-            // then update filters
-            .then(() => {
-            // transform items
-            const collections = collectionGroup.items
-                .map(summary => summary.getClosestCollectionRef(language, collectionGroup.defaultLanguage))
-                .filter(funnel_core_1.Value.isDefined);
-            // set collections
-            setCollections(collections);
-            // setup tags (if there are items in group)
-            if (collections.length > 0) {
-                const { tags: tagGroups } = collectionGroup.template;
-                const tagOptions = tagGroups
-                    .map(tagGroup => {
-                    // get all tags in group
-                    const tags = Object.values(tagGroup.tags).reduce((tags, tag) => {
-                        // add tag if it matches
-                        if (collections.some(collection => collection.tags.includes(tag))) {
-                            tags.add(tag);
-                        }
-                        // keep reducing
-                        return tags;
-                    }, new Set());
-                    // create filter group (if there are items)
-                    return tags.size > 0
-                        ? { group: tagGroup, tags }
-                        : undefined;
-                })
-                    .filter(funnel_core_1.Value.isDefined);
-                // set options
-                setTagOptions(tagOptions);
-            }
-            // or clear tags
-            else {
-                setTagOptions([]);
-            }
-        })
-            // or capture error
-            .catch(e => setError(feedback_1.ErrorMessage.coerce(e)));
-    }, [language, collectionGroup]);
-    // helpers
-    const onPick = async (collectionRef) => {
-        // clear tooltips
-        setTagTooltip(undefined);
-        // fetch ref (or fail)
-        const { template, id, name } = collectionRef;
-        const collection = await repo.get({ id, version: 'draft' });
-        if (!collection) {
-            setFetching(false);
-            setError({
-                title: `Unable to find ${template.name}`,
-                message: `We ran into an issue while trying to fetch the "${name}" collection item.  Please refresh your browser and try again.`
-            });
-            return;
-        }
-        // add collection
-        collectionStore.addCollection(collection.data);
-        // set result (triggers picker to close)
-        setResult(collectionRef);
-    };
-    const onCancel = () => {
-        // clear tooltips
-        setTagTooltip(undefined);
-        // set result (triggers picker to close)
-        setResult(null);
-    };
-    const onPickerClosed = () => {
-        // skip if missing or already completed
-        if (!deferral || deferral.isComplete) {
-            return;
-        }
-        // complete deferral
-        deferral.resolve(result !== null && result !== void 0 ? result : undefined);
-    };
-    // render
-    return ((0, jsx_runtime_1.jsxs)(interaction_1.Picker, { className: "flex", open: deferral && result === undefined, disableDismiss: fetching, onClose: onCancel, onClosed: onPickerClosed, children: [(0, jsx_runtime_1.jsxs)("section", { className: "shrink-0 w-[206px] flex flex-col gap-l8 p-l8 bg-modal-background", children: [(0, jsx_runtime_1.jsx)("h1", { className: "heading-md text-content-primary", children: "Select Collection" }), (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Site Collections", options: collectionGroups, selectedOptions: collectionGroup && [collectionGroup], onToggle: (collectionGroup, selected) => selected && setCollectionGroup(collectionGroup), renderLabel: collectionGroup => collectionGroup.template.name, disabled: fetching })] }), (0, jsx_runtime_1.jsxs)("section", { className: "flex-1 flex flex-col", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex-1 p-l8 overflow-y-scroll", tabIndex: -1, children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ language, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) }) }), (0, jsx_runtime_1.jsx)("div", { className: "flex justify-end items-center p-l8 border-t border-solid border-border-l1", children: (0, jsx_runtime_1.jsx)(interaction_1.Button, { variant: "secondary", size: "sm", onClick: onCancel, disabled: fetching, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: (0, classnames_1.default)('max-w-[200px] bg-surface2 rounded-md p-l5', 'border border-solid border-border-l1 shadow-tooltip', 'flex flex-wrap items-center gap-l4'), open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", disableOverlay: true, onClose: () => setTagTooltip(undefined), children: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.tags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)) })] })] }));
-});
-function renderPicker({ language, schema, error, collectionGroups, collectionGroup, collections, tagOptions, tagFilters, onPick, setTagTooltip, fetching }) {
-    // show error if we have one
-    if (error) {
-        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(feedback_1.ErrorMessage, { error: error }) }, "error"));
-    }
-    // or show loader if filters aren't loaded (or if fetching)
-    else if (fetching || !collectionGroups || !collections || !tagOptions) {
-        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "w-full h-full flex flex-col justify-center items-center", children: (0, jsx_runtime_1.jsx)(interaction_1.Loader, { size: "lg" }) }, "loader"));
-    }
-    // show empty state if there are no pages
-    else if (!collectionGroup || collections.length === 0) {
-        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "h-full flex flex-wrap justify-center items-center", children: (0, jsx_runtime_1.jsxs)(feedback_1.EmptyState, { variant: "missing", size: "sm", children: [(0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "There are no collections available that match your criteria." }), (0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "Create a new collection." })] }) }, "pages.empty"));
-    }
-    // or show pages (filtered)
-    else {
-        // get tags that are available (no tags at all means "all" of the group is chosen)
-        const collectionSchema = collectionGroup.template;
-        const schemaTags = collectionSchema.tags.flatMap(tagGroup => Object.values(tagGroup.tags));
-        const activeTagFilters = tagFilters.filter(tag => schemaTags.includes(tag));
-        const tags = tagOptions
-            .filter(({ group }) => collectionSchema.tags.includes(group))
-            .flatMap(({ tags }) => {
-            const filteredTags = activeTagFilters.filter(tag => tags.has(tag));
-            return filteredTags.length > 0 ? filteredTags : tags.values().toArray();
-        });
-        const filteredCollections = activeTagFilters.length > 0
-            ? collections.filter(collection => collection.tags.some(tag => tags.includes(tag)))
-            : collections;
-        // render empty list if there are no items
-        if (filteredCollections.length === 0) {
-            return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "h-full flex flex-col items-center justify-center gap-l5 px-l10", variant: "blur", children: (0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "Sorry, but no collections match your filters." }) }, "pages.dyanmic.empty"));
-        }
-        // or render items
-        else {
-            return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "flex flex-col gap-l3", children: filteredCollections.map(ref => renderCollectionRef({
-                    language,
-                    template: ref.template,
-                    ref,
-                    onPick,
-                    setTagTooltip
-                })) }, "pages.dynamic"));
-        }
-    }
-}
-function renderCollectionRef({ language, template, ref, onPick, setTagTooltip }) {
-    var _a;
-    // resolve props
-    const title = (_a = ref.name) !== null && _a !== void 0 ? _a : template.name;
-    const tags = ref ? ref.tags : [];
-    const visibleTags = tags.slice(0, Math.min(tags.length, 2));
-    const tooltipTags = tags.length > 2
-        ? tags.slice(2)
-        : [];
-    const disabled = ref.language !== language;
-    // helpers
-    const onClick = () => {
-        // ignore if disabled
-        if (disabled) {
-            return;
-        }
-        // otherwise, pick
-        else {
-            onPick(ref);
-        }
-    };
-    // render
-    const anchorId = `col-pick-tip-${ref.id}`;
-    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)('flex items-center px-l7 py-l4 select-none interpolate', 'even:bg-modal-background rounded-md', {
-            'hover:bg-modal-surface2/tint2 cursor-pointer': !disabled,
-            'cursor-default': disabled
-        }), onClick: onClick, tabIndex: disabled ? undefined : 0, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)('w-full flex items-center gap-l8 select-none interpolate', {
-                'opacity-disabled': disabled
-            }), onClick: onClick, children: [(0, jsx_runtime_1.jsx)("h3", { className: "flex-1 label-sm text-content-primary ellipsis", children: title }), tags.length > 0 &&
-                    (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l4", children: [visibleTags.map(tag => (0, jsx_runtime_1.jsx)(feedback_1.Badge, { variant: "outlinedTiny", status: "draft", label: tag.name }, tag.data)), tooltipTags.length > 0 && ((0, jsx_runtime_1.jsx)(feedback_1.Badge, { anchorId: anchorId, variant: "outlinedTiny", status: "draft", label: `+${tooltipTags.length}`, onPointerEnter: e => setTagTooltip({ anchor: anchorId, tags: tooltipTags }), onPointerLeave: () => setTagTooltip(undefined) }))] })] }) }, ref.id));
-}