@nascentdigital/funnel-editor 4.4.18

package/dist/core/components/fields/page/PagePicker.js

@@ -0,0 +1,289 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PagePicker = 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 classnames_1 = __importDefault(require("classnames"));
+const framer_motion_1 = require("framer-motion");
+const react_1 = require("react");
+const domain_1 = require("../../../domain");
+const hooks_1 = require("../../../hooks");
+const feedback_1 = require("../../feedback");
+const interaction_1 = require("../../interaction");
+const transitions_1 = require("../../transitions");
+// component
+exports.PagePicker = (0, react_1.forwardRef)(function PagePicker({ language }, ref) {
+    // bind props + hooks
+    const [deferral, setDeferral] = (0, react_1.useState)(undefined);
+    const [result, setResult] = (0, react_1.useState)();
+    const [pageTypes, setPageTypes] = (0, react_1.useState)([]);
+    const [tags, setTags] = (0, react_1.useState)([]);
+    const [disabledIds, setDisabledIds] = (0, react_1.useState)([]);
+    const [pageFilters, setPageFilters] = (0, react_1.useState)();
+    const [pageFilterOptions, setPageFilterOptions] = (0, react_1.useState)([]);
+    const [pageFilter, setPageFilter] = (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 [pagesSchema, setPagesSchema] = (0, react_1.useState)();
+    const [pages, setPages] = (0, react_1.useState)();
+    const [error, setError] = (0, react_1.useState)();
+    const site = (0, hooks_1.useSite)();
+    const pageRefStore = (0, hooks_1.usePossiblePageRefStore)();
+    // export service
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        available: !!pageRefStore,
+        pick: async ({ pageTypes = [], tags = [], disabledIds = [] } = {}) => {
+            // reset state
+            setPageTypes(pageTypes === 'all' ? [] : pageTypes);
+            setTags(tags);
+            setDisabledIds(disabledIds);
+            setPageFilters(undefined);
+            setPageFilterOptions([]);
+            setPageFilter(undefined);
+            setTagOptions(undefined);
+            setTagFilters([]);
+            setTagTooltip(undefined);
+            setPagesSchema(undefined);
+            setPages(undefined);
+            setError(undefined);
+            // create deferral
+            const deferral = new funnel_core_1.Deferral();
+            setDeferral(deferral);
+            setResult(undefined);
+            // wait until deferral is resolved
+            return deferral.promise;
+        }
+    }), [pageRefStore]);
+    // sync site
+    (0, react_1.useEffect)(() => {
+        // skip if already fetched OR if there's no deferral
+        if (!deferral) {
+            return;
+        }
+        // reset error (if any)
+        setError(undefined);
+        console.debug('[PagePicker] syncing site');
+        // sync site
+        site.sync()
+            // bind overviews, filtering out types that aren't part of the set
+            .then(() => {
+            console.debug('[PagePicker] filtering overview', { overviews: site.overviews, pageTypes });
+            // filter overviews
+            let { overviews } = site;
+            if (pageTypes.length > 0) {
+                overviews = overviews.filter(overview => pageTypes.includes(overview.type));
+            }
+            // reduce into page filters
+            const pageFilters = overviews.reduce((pageFilters, overview) => {
+                // add if it's in the included set
+                if (pageTypes.length === 0 || pageTypes.includes(overview.type)) {
+                    if (overview instanceof domain_1.StaticPageOverview) {
+                        pageFilters.static.push(overview);
+                    }
+                    else {
+                        pageFilters.dynamic.push(overview);
+                    }
+                }
+                // keep reducing
+                return pageFilters;
+            }, { static: [], dynamic: [] });
+            console.debug('[PagePicker] created page filters', pageFilters);
+            // capture options
+            setPageFilters(pageFilters);
+            // set options
+            const hasStatic = pageFilters.static.length > 0;
+            const hasDynamic = pageFilters.dynamic.length > 0;
+            const pageFilterOptions = [];
+            if (hasStatic) {
+                pageFilterOptions.push('static');
+            }
+            if (hasDynamic) {
+                pageFilterOptions.push(...pageFilters.dynamic);
+            }
+            setPageFilterOptions(pageFilterOptions);
+            // select selected static/dynamic filter (if any)
+            if (hasStatic) {
+                setPageFilter('static');
+            }
+            else if (hasDynamic) {
+                setPageFilter(pageFilters.dynamic[0]);
+            }
+            else {
+                setPageFilter(undefined);
+            }
+        })
+            // handle error
+            .catch(e => setError(feedback_1.ErrorMessage.coerce(e)));
+    }, [site, deferral, pageTypes]);
+    // switch page when filters are set
+    (0, react_1.useEffect)(() => {
+        // ignore if not ready
+        if (!pageFilter) {
+            return;
+        }
+        // ignore if it's a static filter
+        else if (pageFilter === 'static') {
+            setTagOptions(undefined);
+            setTagFilters([]);
+            setPagesSchema(undefined);
+            setPages(undefined);
+        }
+        // or load dynamic pages
+        else {
+            const pages = site.getPages(pageFilter.type);
+            pages.sync()
+                .then(() => {
+                setPagesSchema(pages.template);
+                setPages(pages.items.map(page => page.getClosestPageRef(language, site.defaultLanguage)));
+            })
+                .catch(e => setError(feedback_1.ErrorMessage.coerce(e)));
+        }
+    }, [language, site, pageFilters, pageFilter]);
+    // update tag options when page is ready
+    (0, react_1.useEffect)(() => {
+        // reset options/tags if not ready
+        if (!pagesSchema || !pages || pages.length === 0) {
+            setTagOptions([]);
+            setTagFilters([]);
+            return;
+        }
+        // group tags
+        const { tags: tagGroups } = pagesSchema;
+        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 (pages.some(page => page.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);
+    }, [pagesSchema, pages]);
+    // helpers
+    const onPick = (pageRef) => {
+        // throw if there's no store (shouldn't happen)
+        if (!pageRefStore) {
+            throw new funnel_core_1.IllegalStateError('Cannot pick page without accessible store');
+        }
+        // clear tooltips
+        setTagTooltip(undefined);
+        // store ref
+        pageRefStore.addPageRef(pageRef);
+        // set result (triggers picker to close)
+        setResult(pageRef);
+    };
+    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, 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 Page" }), (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: "Site Pages", options: pageFilterOptions, selectedOptions: pageFilter && [pageFilter], onToggle: (pageFilter, selected) => selected && setPageFilter(pageFilter), renderLabel: filter => filter === 'static'
+                            ? 'Primary'
+                            : filter.template.name }), tagOptions === null || tagOptions === void 0 ? void 0 : tagOptions.map(({ group, tags: groupTags }) => (0, jsx_runtime_1.jsx)(interaction_1.ChipFilters, { title: group.name, multiselect: true, options: groupTags.values().toArray(), selectedOptions: tagFilters.filter(tag => groupTags.has(tag)), onToggle: (tag, selected) => setTagFilters(tags => selected
+                            ? [...tags, tag]
+                            : tags.filter(t => t !== tag)), onToggleAll: () => setTagFilters(tags => tags.filter(tag => !groupTags.has(tag))), renderLabel: tag => tag.name }, group.id))] }), (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", children: (0, jsx_runtime_1.jsx)(framer_motion_1.AnimatePresence, { mode: "wait", initial: false, children: renderPicker({ site, language, disabledIds, error, pageFilters, pageFilter, tagOptions, tagFilters, pagesSchema, pages, onPick, setTagTooltip }) }) }), (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, children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(client_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'), level: "l2", open: !!tagTooltip, anchor: tagTooltip === null || tagTooltip === void 0 ? void 0 : tagTooltip.anchor, anchorOffset: 4, placement: "top", 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({ site, language, disabledIds, error, pageFilters, pageFilter, tagOptions, tagFilters, pagesSchema, pages, onPick, setTagTooltip }) {
+    // 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
+    else if (!pageFilters) {
+        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 static pages if selected
+    else if (pageFilter === 'static') {
+        return ((0, jsx_runtime_1.jsx)(transitions_1.FadeIn, { className: "flex flex-col gap-l3", children: pageFilters.static.map(page => {
+                const ref = page.getClosestPageRef(language, site.defaultLanguage);
+                return renderPageRef({ site, language, disabledIds, template: page.template, ref, onPick, setTagTooltip });
+            }) }, "pages.static"));
+    }
+    // or show loader if still getting pages
+    else if (!pagesSchema || !pages || !tagOptions || !tagFilters) {
+        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 (pages.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 pages available that match the criteria." }), (0, jsx_runtime_1.jsx)("p", { className: "body-md text-content-secondary text-pretty", children: "Create a new page." })] }) }, "pages.empty"));
+    }
+    // or show pages (filtered)
+    else {
+        // get tags that are available (no tags at all means "all" of the group is chosen)
+        const schemaTags = pagesSchema.tags.flatMap(tagGroup => Object.values(tagGroup.tags));
+        const activeTagFilters = tagFilters.filter(tag => schemaTags.includes(tag));
+        const tags = tagOptions
+            .filter(({ group }) => pagesSchema.tags.includes(group))
+            .flatMap(({ tags }) => {
+            const filteredTags = activeTagFilters.filter(tag => tags.has(tag));
+            return filteredTags.length > 0 ? filteredTags : tags.values().toArray();
+        });
+        const filteredPages = activeTagFilters.length > 0
+            ? pages.filter(page => page.tags.some(tag => tags.includes(tag)))
+            : pages;
+        // render empty list if there are no items
+        if (filteredPages.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 pages 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: filteredPages.map(ref => renderPageRef({ site, language, disabledIds, template: ref.template, ref, onPick, setTagTooltip })) }, "pages.dynamic"));
+        }
+    }
+}
+function renderPageRef({ language, template, disabledIds, ref, onPick, setTagTooltip }) {
+    var _a, _b;
+    // resolve props
+    const title = (_a = ref === null || ref === void 0 ? void 0 : ref.name) !== null && _a !== void 0 ? _a : template.name;
+    const path = (ref === null || ref === void 0 ? void 0 : ref.slug) ? `/${ref.slug}` : funnel_core_1.Localized.Maybe.get(template.route, language);
+    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 || ref.language !== language || disabledIds.includes(ref.id);
+    // helpers
+    const onClick = () => {
+        // ignore if disabled
+        if (disabled) {
+            return;
+        }
+        // otherwise, pick
+        else {
+            onPick(ref);
+        }
+    };
+    // render
+    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.jsxs)("div", { className: "flex-1 shrink-0 flex flex-col", children: [(0, jsx_runtime_1.jsx)("h3", { className: "label-sm text-content-primary ellipsis", children: title }), (0, jsx_runtime_1.jsx)("span", { className: "label-xs text-content-tertiary ellipsis", children: path })] }), 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, { variant: "outlinedTiny", status: "draft", label: `+${tooltipTags.length}`, onPointerEnter: e => setTagTooltip({ anchor: e.currentTarget, tags: tooltipTags }), onPointerLeave: () => setTagTooltip(undefined) }))] })] }) }, (_b = ref === null || ref === void 0 ? void 0 : ref.id) !== null && _b !== void 0 ? _b : template.type));
+}

package/dist/core/components/fields/page/index.d.ts

@@ -0,0 +1,2 @@
+export * from './PageCard';
+export * from './PagePicker';

package/dist/core/components/fields/page/index.js

@@ -0,0 +1,18 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./PageCard"), exports);
+__exportStar(require("./PagePicker"), exports);

package/dist/core/components/fields/richtext/FloatingToolbarPlugin.d.ts

@@ -0,0 +1,10 @@
+import { Schema } from '@nascentdigital/funnel-core';
+import { LexicalCommand } from 'lexical';
+export declare function FloatingToolbarPlugin({ options }: FloatingToolbarPlugin.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace FloatingToolbarPlugin {
+    type Props = {
+        options: Schema.RichTextField.Capabilities.Options;
+    };
+    const OPENED_COMMAND: LexicalCommand<undefined>;
+    const CLOSED_COMMAND: LexicalCommand<undefined>;
+}

package/dist/core/components/fields/richtext/FloatingToolbarPlugin.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FloatingToolbarPlugin = FloatingToolbarPlugin;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const utils_1 = require("@lexical/utils");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const lexical_1 = require("lexical");
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+const interaction_1 = require("../../interaction");
+const Toolbar_1 = require("./Toolbar");
+// plugin
+function FloatingToolbarPlugin({ options }) {
+    const openEvent$ = (0, react_1.useMemo)(() => new rxjs_1.Subject(), []);
+    const [open, setOpen] = (0, react_1.useState)(false);
+    const [anchorRect, setAnchorRect] = (0, react_1.useState)();
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const toolbarActiveRef = (0, react_1.useRef)(false);
+    // register commands
+    (0, react_1.useEffect)(() => {
+        return (0, utils_1.mergeRegister)(
+        // show/hide toolbar based on selection
+        editor.registerCommand(lexical_1.SELECTION_CHANGE_COMMAND, () => {
+            // ignore if the toolbar is active
+            if (toolbarActiveRef.current) {
+                return false;
+            }
+            // get anchor from selection (if possible)
+            const selection = (0, lexical_1.$getSelection)();
+            const anchor = funnel_core_1.LexicalUtils.getSelectionRect({ editor, selection });
+            // push event
+            openEvent$.next(anchor
+                ? { open: true, anchor }
+                : { open: false });
+            // continue processing
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), 
+        // hide on blur
+        editor.registerCommand(lexical_1.BLUR_COMMAND, () => {
+            // ignore if the toolbar is active
+            if (toolbarActiveRef.current) {
+                return false;
+            }
+            // hide on blur
+            openEvent$.next({ open: false });
+            // continue processing
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW));
+    }, [openEvent$, editor]);
+    // sync open event after debounce
+    (0, react_1.useEffect)(() => {
+        // subscribe to open events and forward after debounce
+        let wasOpen = false;
+        const subscription = openEvent$
+            .pipe((0, rxjs_1.debounce)(({ open }) => open ? (0, rxjs_1.interval)(200) : (0, rxjs_1.interval)(0)))
+            .subscribe(({ open, anchor }) => {
+            // update open state
+            setAnchorRect(anchor);
+            setOpen(open);
+            // ignore command if unchanged
+            if (wasOpen !== open) {
+                // sync tracker
+                wasOpen = open;
+                // raise command
+                if (open) {
+                    editor.dispatchCommand(FloatingToolbarPlugin.OPENED_COMMAND, undefined);
+                }
+                else {
+                    editor.dispatchCommand(FloatingToolbarPlugin.CLOSED_COMMAND, undefined);
+                }
+            }
+        });
+        // unsubscribe on unmount
+        return () => subscription.unsubscribe();
+    }, [editor, openEvent$]);
+    // render nothing
+    return ((0, jsx_runtime_1.jsx)(interaction_1.Popup, { className: "bg-surface2 p-l5 border border-solid border-border-l2 rounded-full shadow-popup", open: open, anchor: anchorRect, anchorOffset: 8, placement: "top", disableOverlay: true, onClose: () => openEvent$.next({ open: false }), children: (0, jsx_runtime_1.jsx)(Toolbar_1.Toolbar, { options: options, onInteractionChange: state => toolbarActiveRef.current = state !== 'none' }) }));
+}
+// extension
+(function (FloatingToolbarPlugin) {
+    // commands
+    FloatingToolbarPlugin.OPENED_COMMAND = (0, lexical_1.createCommand)();
+    FloatingToolbarPlugin.CLOSED_COMMAND = (0, lexical_1.createCommand)();
+})(FloatingToolbarPlugin || (exports.FloatingToolbarPlugin = FloatingToolbarPlugin = {}));

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

@@ -0,0 +1,9 @@
+import { LexicalCommand } from 'lexical';
+export declare function LinkEditor(): import("react/jsx-runtime").JSX.Element;
+export declare namespace LinkEditor {
+    const OPEN_COMMAND: LexicalCommand<undefined>;
+    const OPENED_COMMAND: LexicalCommand<undefined>;
+    const CLOSE_COMMAND: LexicalCommand<undefined>;
+    const CLOSED_COMMAND: LexicalCommand<undefined>;
+    const DELETE_COMMAND: LexicalCommand<undefined>;
+}

package/dist/core/components/fields/richtext/LinkEditor.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkEditor = LinkEditor;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link_1 = require("@lexical/link");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const utils_1 = require("@lexical/utils");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const lexical_1 = require("lexical");
+const react_1 = require("react");
+const interaction_1 = require("../../interaction");
+// component
+function LinkEditor() {
+    // bind state + hooks
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const linkInputRef = (0, react_1.useRef)(null);
+    // handle listener
+    (0, react_1.useEffect)(() => {
+        return (0, utils_1.mergeRegister)(editor.registerCommand(LinkEditor.OPEN_COMMAND, () => {
+            var _a;
+            // skip if ref isn't bound (should never happen)
+            const linkInput = linkInputRef.current;
+            if (!linkInput) {
+                return true;
+            }
+            // get anchor from selection (or stop if we cant)
+            const selection = (0, lexical_1.$getSelection)();
+            const [selectedNode] = (_a = selection === null || selection === void 0 ? void 0 : selection.getNodes()) !== null && _a !== void 0 ? _a : [];
+            let anchorNode = selectedNode && funnel_core_1.LexicalUtils.findContainer(selectedNode, [link_1.LinkNode]);
+            const anchorUrl = anchorNode === null || anchorNode === void 0 ? void 0 : anchorNode.getURL();
+            const anchor = funnel_core_1.LexicalUtils.getSelectionRect({ editor, selection, coerce: true, allowEmpty: true });
+            if (!anchor) {
+                return true;
+            }
+            // raise opened
+            editor.dispatchCommand(LinkEditor.OPENED_COMMAND, undefined);
+            // open link input
+            linkInput
+                .open({
+                schema: linkSchema,
+                anchor,
+                initialValue: anchorUrl,
+                placement: 'top',
+                anchorOffset: 2
+            })
+                // handle change (might be none)
+                .then(uri => {
+                // skip if there's no url
+                if (!uri) {
+                    return;
+                }
+                // resolve url
+                const url = funnel_core_1.UrlUtils.coerce(uri);
+                // create link from selection
+                editor.update(() => {
+                    // update existing node
+                    if (anchorNode) {
+                        anchorNode = anchorNode.getWritable();
+                        anchorNode.setURL(url);
+                        anchorNode.select();
+                    }
+                    // or create new one
+                    else {
+                        (0, link_1.$toggleLink)({ url, target: '_blank' });
+                    }
+                });
+            })
+                // raise close
+                .finally(() => {
+                // raise command
+                editor.dispatchCommand(LinkEditor.CLOSED_COMMAND, undefined);
+                // re-focus editor
+                editor.focus();
+            });
+            // mark handled
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_EDITOR), editor.registerCommand(LinkEditor.CLOSE_COMMAND, () => {
+            var _a;
+            (_a = linkInputRef.current) === null || _a === void 0 ? void 0 : _a.close();
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_EDITOR), editor.registerCommand(LinkEditor.DELETE_COMMAND, () => {
+            var _a;
+            // get anchor from selection (or stop if we cant)
+            const selection = (0, lexical_1.$getSelection)();
+            const [selectedNode] = (_a = selection === null || selection === void 0 ? void 0 : selection.getNodes()) !== null && _a !== void 0 ? _a : [];
+            const anchorNode = selectedNode && funnel_core_1.LexicalUtils.findContainer(selectedNode, [link_1.LinkNode]);
+            // delete node if found
+            if (anchorNode) {
+                (0, link_1.$toggleLink)(null);
+            }
+            // mark handled
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_EDITOR));
+    }, [editor]);
+    // render
+    return ((0, jsx_runtime_1.jsx)(interaction_1.QuickInput, { ref: linkInputRef }));
+}
+// extension
+(function (LinkEditor) {
+    // commands
+    LinkEditor.OPEN_COMMAND = (0, lexical_1.createCommand)();
+    LinkEditor.OPENED_COMMAND = (0, lexical_1.createCommand)();
+    LinkEditor.CLOSE_COMMAND = (0, lexical_1.createCommand)();
+    LinkEditor.CLOSED_COMMAND = (0, lexical_1.createCommand)();
+    LinkEditor.DELETE_COMMAND = (0, lexical_1.createCommand)();
+})(LinkEditor || (exports.LinkEditor = LinkEditor = {}));
+// helpers
+const linkSchema = funnel_core_1.Schema.Field.uri({
+    name: 'URL',
+    hint: 'URL, email, or phone number',
+    required: true
+});

package/dist/core/components/fields/richtext/LinkPopup.d.ts

@@ -0,0 +1,6 @@
+import { LexicalCommand } from 'lexical';
+export declare function LinkPopup(): import("react/jsx-runtime").JSX.Element;
+export declare namespace LinkPopup {
+    const OPENED_COMMAND: LexicalCommand<undefined>;
+    const CLOSED_COMMAND: LexicalCommand<undefined>;
+}