@nascentdigital/funnel-editor 4.4.18

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

@@ -0,0 +1,382 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toolbar = Toolbar;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const link_1 = require("@lexical/link");
+const list_1 = require("@lexical/list");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const LexicalHorizontalRuleNode_1 = require("@lexical/react/LexicalHorizontalRuleNode");
+const rich_text_1 = require("@lexical/rich-text");
+const selection_1 = require("@lexical/selection");
+const utils_1 = require("@lexical/utils");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const classnames_1 = __importDefault(require("classnames"));
+const lexical_1 = require("lexical");
+const react_1 = require("react");
+const interaction_1 = require("../../interaction");
+const LinkEditor_1 = require("./LinkEditor");
+// component
+function Toolbar({ className, options, enableHistory = false, onInteractionChange = funnel_core_1.Fn.NoOp }) {
+    // bind state + hooks
+    const [interactionState, setInteractionState] = (0, react_1.useState)('none');
+    const [canUndo, setCanUndo] = (0, react_1.useState)(false);
+    const [canRedo, setCanRedo] = (0, react_1.useState)(false);
+    const [typography, setTypography] = (0, react_1.useState)('normal');
+    const [isBold, setIsBold] = (0, react_1.useState)(false);
+    const [isItalic, setIsItalic] = (0, react_1.useState)(false);
+    const [isUnderline, setIsUnderline] = (0, react_1.useState)(false);
+    const [isStrikethrough, setIsStrikethrough] = (0, react_1.useState)(false);
+    const [isSuperscript, setIsSuperscript] = (0, react_1.useState)(false);
+    const [isSubscript, setIsSubscript] = (0, react_1.useState)(false);
+    const [listType, setListType] = (0, react_1.useState)(undefined);
+    const [listDepth, setListDepth] = (0, react_1.useState)(0);
+    const [isQuote, setIsQuote] = (0, react_1.useState)(false);
+    const [isHr, setIsHr] = (0, react_1.useState)(false);
+    const [linkState, setLinkState] = (0, react_1.useState)('unavailable');
+    const [editingLink, setEditingLink] = (0, react_1.useState)(false);
+    const [style, setStyle] = (0, react_1.useState)(undefined);
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const $updateToolbar = (0, react_1.useCallback)(() => {
+        var _a;
+        // skip if there's no selection
+        const selection = (0, lexical_1.$getSelection)();
+        if (!selection) {
+            return;
+        }
+        // get selected nodes
+        const selectedNodes = selection.getNodes();
+        let rangeSelection;
+        let focusNode;
+        // handle range selection (ideal)
+        if ((0, lexical_1.$isRangeSelection)(selection)) {
+            rangeSelection = selection;
+            focusNode = selection.focus.getNode();
+        }
+        // or coerce with point selection
+        else if (selectedNodes.length > 0) {
+            focusNode = funnel_core_1.ArrayUtils.last(selectedNodes);
+        }
+        // update typography
+        const selectedTypography = funnel_core_1.LexicalUtils.findContainer(focusNode, [rich_text_1.HeadingNode, lexical_1.ParagraphNode]);
+        setTypography(!selectedTypography || (0, lexical_1.$isParagraphNode)(selectedTypography)
+            ? 'normal'
+            : (0, rich_text_1.$isHeadingNode)(selectedTypography)
+                ? selectedTypography.getTag()
+                : 'blockquote');
+        // update format
+        const selectedText = selection.getTextContent();
+        const hasSelection = selectedText.length > 0;
+        const hasFormat = (format) => rangeSelection !== undefined
+            && rangeSelection.hasFormat(format);
+        setIsBold(hasFormat('bold'));
+        setIsItalic(hasFormat('italic'));
+        setIsUnderline(hasFormat('underline'));
+        setIsStrikethrough(hasFormat('strikethrough'));
+        setIsSuperscript(hasFormat('superscript'));
+        setIsSubscript(hasFormat('subscript'));
+        // update link
+        setLinkState(funnel_core_1.LexicalUtils.findContainer(focusNode, [link_1.LinkNode])
+            ? 'active'
+            : hasSelection
+                ? 'available'
+                : 'unavailable');
+        // update list
+        const listNode = funnel_core_1.LexicalUtils.findContainer(focusNode, [list_1.ListNode]);
+        const listType = listNode === null || listNode === void 0 ? void 0 : listNode.getListType();
+        setListType(!listType || listType === 'check'
+            ? undefined
+            : listType === 'bullet'
+                ? 'unordered'
+                : 'ordered');
+        setListDepth(listNode ? (0, list_1.$getListDepth)(listNode) : 0);
+        // update quote
+        setIsQuote(!!funnel_core_1.LexicalUtils.findContainer(focusNode, [rich_text_1.QuoteNode]));
+        // update hr
+        setIsHr((_a = (0, LexicalHorizontalRuleNode_1.$isHorizontalRuleNode)(focusNode)) !== null && _a !== void 0 ? _a : false);
+        // update style
+        const selectedStyledText = selectedNodes.find(node => funnel_core_1.StyledTextNode.$isStyledTextNode(node));
+        setStyle(selectedStyledText === null || selectedStyledText === void 0 ? void 0 : selectedStyledText.getStyleFormat());
+    }, []);
+    // bind editor updates
+    (0, react_1.useEffect)(() => {
+        // sync initial update
+        editor.read($updateToolbar);
+        // register for ingoing updates
+        return (0, utils_1.mergeRegister)(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read($updateToolbar);
+        }), editor.registerCommand(lexical_1.SELECTION_CHANGE_COMMAND, (_payload, _newEditor) => {
+            $updateToolbar();
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.CAN_UNDO_COMMAND, (payload) => {
+            setCanUndo(payload);
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.CAN_REDO_COMMAND, (payload) => {
+            setCanRedo(payload);
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(LinkEditor_1.LinkEditor.OPENED_COMMAND, () => {
+            setEditingLink(true);
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(LinkEditor_1.LinkEditor.CLOSED_COMMAND, () => {
+            setEditingLink(false);
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW));
+    }, [editor, $updateToolbar]);
+    // helpers
+    const addInteractionState = (state) => {
+        // determine new state
+        let newState;
+        switch (state) {
+            case 'hover':
+                newState = interactionState === 'focus'
+                    ? 'hover+focus'
+                    : 'hover';
+                break;
+            case 'focus':
+                newState = interactionState === 'hover'
+                    ? 'hover+focus'
+                    : 'focus';
+                break;
+        }
+        // update state
+        setInteractionState(newState);
+        // raise change
+        onInteractionChange(newState);
+    };
+    const removeInteractionState = (state) => {
+        // determine new state
+        let newState;
+        switch (state) {
+            case 'hover':
+                newState = interactionState === 'hover+focus'
+                    ? 'focus'
+                    : 'none';
+                break;
+            case 'focus':
+                newState = interactionState === 'hover+focus'
+                    ? 'hover'
+                    : 'none';
+                break;
+        }
+        // update state
+        setInteractionState(newState);
+        // raise change
+        onInteractionChange(newState);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(className, 'flex flex-wrap justify-start items-center gap-l6'), onPointerEnter: () => addInteractionState('hover'), onPointerLeave: () => removeInteractionState('hover'), onFocus: () => addInteractionState('focus'), onBlur: () => removeInteractionState('focus'), children: [enableHistory && renderHistoryControls({ editor, canUndo, canRedo }), renderTypographyControls(({
+                editor,
+                typography,
+                isBold, isItalic, isUnderline, isStrikethrough,
+                linkState, editingLink,
+                isSuperscript, isSubscript,
+                options
+            })), renderBlockControls({ editor, listType, listDepth, maxListDepth: 3, isQuote, isHr, options }), renderStyleControls({ editor, style, options })] }));
+}
+var Typography;
+(function (Typography) {
+    let Tag;
+    (function (Tag) {
+        // values
+        Tag.values = [
+            'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+            'blockquote'
+        ];
+        // methods
+        function getName(tag) {
+            switch (tag) {
+                case 'h1':
+                    return 'Title';
+                case 'h2':
+                    return 'Subtitle';
+                case 'h3':
+                    return 'Heading 1';
+                case 'h4':
+                    return 'Heading 2';
+                case 'h5':
+                    return 'Heading 3';
+                case 'h6':
+                    return 'Heading 4';
+                case 'blockquote':
+                    return 'Quote';
+            }
+        }
+        Tag.getName = getName;
+    })(Tag = Typography.Tag || (Typography.Tag = {}));
+})(Typography || (Typography = {}));
+var List;
+(function (List) {
+    let Type;
+    (function (Type) {
+        // values
+        Type.values = [
+            'unordered', 'ordered'
+        ];
+        // methods
+        function getName(type) {
+            switch (type) {
+                case 'unordered':
+                    return 'Bulleted list';
+                case 'ordered':
+                    return 'Numbered list';
+            }
+        }
+        Type.getName = getName;
+    })(Type = List.Type || (List.Type = {}));
+})(List || (List = {}));
+function renderHistoryControls({ editor, canUndo, canRedo }) {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l6", children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", size: "sm", icon: "Undo", disabled: !canUndo, onClick: () => {
+                    editor.dispatchCommand(lexical_1.UNDO_COMMAND, undefined);
+                }, "aria-label": "Undo" }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", size: "sm", icon: "Redo", disabled: !canRedo, onClick: () => {
+                    editor.dispatchCommand(lexical_1.REDO_COMMAND, undefined);
+                }, "aria-label": "Redo" })] }));
+}
+function renderTypographyControls({ editor, typography, isBold, isItalic, isUnderline, isStrikethrough, isSuperscript, isSubscript, linkState, editingLink, options }) {
+    // skip if there are no valid options
+    const { headings, bold, italics, underline, strikethrough, superscript, subscript, links } = options;
+    const hasHeadings = !!headings && !funnel_core_1.Schema.RichTextField.Capabilities.Headings.isEmpty(headings);
+    if (!hasHeadings && !bold && !italics && !underline && !strikethrough && !superscript && !superscript && !links) {
+        return null;
+    }
+    // helpers
+    const onChangeTypography = (tag) => {
+        editor.update(() => {
+            // ignore if there's no selection
+            const selection = (0, lexical_1.$getSelection)();
+            if (!(0, lexical_1.$isRangeSelection)(selection)) {
+                return;
+            }
+            // reset if normal
+            if (tag === 'normal') {
+                (0, selection_1.$setBlocksType)(selection, () => (0, lexical_1.$createParagraphNode)());
+            }
+            // set as quote
+            else if (tag === 'blockquote') {
+                (0, selection_1.$setBlocksType)(selection, () => (0, rich_text_1.$createQuoteNode)());
+            }
+            // or set as heading
+            else {
+                (0, selection_1.$setBlocksType)(selection, () => (0, rich_text_1.$createHeadingNode)(tag));
+            }
+        });
+    };
+    const onToggleLink = async () => {
+        // close popup on toggle
+        if (editingLink) {
+            console.debug('[Toolbar] cancelling link edit');
+            editor.dispatchCommand(LinkEditor_1.LinkEditor.CLOSE_COMMAND, undefined);
+        }
+        // open link if it's active
+        else if (linkState === 'active' || linkState === 'available') {
+            console.debug('[Toolbar] editing link');
+            editor.dispatchCommand(LinkEditor_1.LinkEditor.OPEN_COMMAND, undefined);
+        }
+        // or ignore
+        else {
+            console.debug('[Toolbar] links need a selection');
+        }
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderDivider(), hasHeadings &&
+                (0, jsx_runtime_1.jsx)(interaction_1.Combobox, { maxRows: Typography.Tag.values.length + 1, noSelectionText: "Normal text", selectedOption: typography, options: [
+                        { id: 'normal', label: 'Normal' },
+                        ...funnel_core_1.Schema.RichTextField.Capabilities.Headings.toArray(headings)
+                    ], onSelect: onChangeTypography }), (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l6", children: [bold &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", icon: "Bold", active: isBold, onClick: () => {
+                                editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'bold');
+                            }, "aria-label": "Format Bold" }), italics &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", icon: "Italic", active: isItalic, onClick: () => {
+                                editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'italic');
+                            }, "aria-label": "Format Italics" }), underline &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", icon: "Underline", active: isUnderline, onClick: () => {
+                                editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'underline');
+                            }, "aria-label": "Format Underline" }), strikethrough &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", icon: "Strikethrough", active: isStrikethrough, onClick: () => {
+                                editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'strikethrough');
+                            }, "aria-label": "Format Underline" }), links &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", active: linkState === 'active', icon: "Link", onClick: () => onToggleLink(), "aria-label": "Link" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l6", children: [superscript &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", icon: "Superscript", active: isSuperscript, onClick: () => {
+                                editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'superscript');
+                            }, "aria-label": "Format Superscript" }), subscript &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", icon: "Subscript", active: isSubscript, onClick: () => {
+                                editor.dispatchCommand(lexical_1.FORMAT_TEXT_COMMAND, 'subscript');
+                            }, "aria-label": "Format Subscript" })] })] }));
+}
+function renderBlockControls({ editor, listType, listDepth, maxListDepth, isQuote, isHr, options }) {
+    // skip if there are no options
+    const { lists, quotes, hr } = options;
+    if (!lists && !quotes && !hr) {
+        return null;
+    }
+    // helpers
+    const onToggleList = (type) => {
+        // reset if the same
+        if (type === listType) {
+            editor.dispatchCommand(list_1.REMOVE_LIST_COMMAND, undefined);
+        }
+        // set as unordered lists (bulleted)
+        else if (type === 'unordered') {
+            editor.dispatchCommand(list_1.INSERT_UNORDERED_LIST_COMMAND, undefined);
+        }
+        // or set ordered lists (numbered)
+        else {
+            editor.dispatchCommand(list_1.INSERT_ORDERED_LIST_COMMAND, undefined);
+        }
+    };
+    const onToggleQuote = () => {
+        editor.update(() => {
+            // ignore if there's no selection
+            const selection = (0, lexical_1.$getSelection)();
+            if (!(0, lexical_1.$isRangeSelection)(selection)) {
+                return;
+            }
+            // reset to normal if already a quote
+            if (isQuote) {
+                (0, selection_1.$setBlocksType)(selection, () => (0, lexical_1.$createParagraphNode)());
+            }
+            // or set as quote
+            else {
+                (0, selection_1.$setBlocksType)(selection, () => (0, rich_text_1.$createQuoteNode)());
+            }
+        });
+    };
+    const onToggleHr = () => {
+        // reset drop rule
+        if (isHr) {
+            console.debug('[RenderHr] removing HR');
+        }
+        // or add rule
+        else {
+            console.debug('[RenderHr] adding HR');
+            editor.dispatchCommand(LexicalHorizontalRuleNode_1.INSERT_HORIZONTAL_RULE_COMMAND, undefined);
+        }
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderDivider(), (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l6", children: [lists &&
+                        (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", active: listType === 'unordered', icon: "List", onClick: () => onToggleList('unordered'), "aria-label": List.Type.getName('unordered') }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", active: listType === 'ordered', icon: "ListOrdered", onClick: () => onToggleList('ordered'), "aria-label": List.Type.getName('ordered') }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", icon: "ListIndentDecrease", disabled: !listType || listDepth < 2, onClick: () => editor.dispatchCommand(lexical_1.OUTDENT_CONTENT_COMMAND, undefined), "aria-label": "Decrease list level" }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", icon: "ListIndentIncrease", disabled: !listType || listDepth >= maxListDepth, onClick: () => editor.dispatchCommand(lexical_1.INDENT_CONTENT_COMMAND, undefined), "aria-label": "Increase list level" })] }), quotes &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", active: isQuote, icon: "MessageSquareQuote", onClick: () => onToggleQuote(), "aria-label": "Quote" }), hr &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", active: isHr, icon: "Minus", onClick: () => onToggleHr(), "aria-label": "Horizontal Rule" })] })] }));
+}
+function renderStyleControls({ editor, style, options }) {
+    // skip if there are no valid options
+    const { priority, accent, subtle } = options;
+    if (!priority && !accent && !subtle) {
+        return null;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [renderDivider(), (0, jsx_runtime_1.jsxs)("div", { className: "shrink-0 flex items-center gap-l6", children: [priority &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", icon: "Goal", active: style === 'priority', onClick: () => {
+                                editor.dispatchCommand(funnel_core_1.StyledTextNode.FORMAT_STYLED_TEXT_COMMAND, 'priority');
+                            }, "aria-label": "Format Priority" }), accent &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", icon: "Highlighter", active: style === 'accent', onClick: () => {
+                                editor.dispatchCommand(funnel_core_1.StyledTextNode.FORMAT_STYLED_TEXT_COMMAND, 'accent');
+                            }, "aria-label": "Format Accent" }), subtle &&
+                        (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { variant: "toolbar", icon: "HatGlasses", active: style === 'subtle', onClick: () => {
+                                editor.dispatchCommand(funnel_core_1.StyledTextNode.FORMAT_STYLED_TEXT_COMMAND, 'subtle');
+                            }, "aria-label": "Format Subtle" })] })] }));
+}
+function renderDivider() {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "first:hidden divider-y h-32 my-l3" }));
+}

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

@@ -0,0 +1,7 @@
+export * from './FloatingToolbarPlugin';
+export * from './LinkEditor';
+export * from './LinkPopup';
+export * from './SanitizerPlugin';
+export * from './StyledTextNodePlugin';
+export * from './Theme';
+export * from './Toolbar';

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

@@ -0,0 +1,23 @@
+"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("./FloatingToolbarPlugin"), exports);
+__exportStar(require("./LinkEditor"), exports);
+__exportStar(require("./LinkPopup"), exports);
+__exportStar(require("./SanitizerPlugin"), exports);
+__exportStar(require("./StyledTextNodePlugin"), exports);
+__exportStar(require("./Theme"), exports);
+__exportStar(require("./Toolbar"), exports);

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

@@ -0,0 +1,4 @@
+export declare function useEditorActive(): {
+    activeRef: import("react").RefObject<boolean>;
+    active: boolean;
+};

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEditorActive = useEditorActive;
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const utils_1 = require("@lexical/utils");
+const lexical_1 = require("lexical");
+const react_1 = require("react");
+const rxjs_1 = require("rxjs");
+// hook
+function useEditorActive() {
+    // bind state + hooks
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const [active, setActive] = (0, react_1.useState)(() => editor.getRootElement() === document.activeElement);
+    const activeRef = (0, react_1.useRef)(active);
+    activeRef.current = active;
+    // track selection (show/hide popup accordingly)
+    (0, react_1.useEffect)(() => {
+        // setup reactive subscription (de-bounces blur)
+        const active$ = new rxjs_1.BehaviorSubject(editor.getRootElement() === document.activeElement);
+        const activeSubscription = active$
+            .pipe((0, rxjs_1.debounce)(active => active ? (0, rxjs_1.interval)(0) : (0, rxjs_1.interval)(100)), (0, rxjs_1.distinctUntilChanged)())
+            .subscribe(active => setActive(active));
+        // sync initial with current state
+        setActive(active$.getValue());
+        // register for ingoing updates
+        const unsubscribeRegistration = (0, utils_1.mergeRegister)(editor.registerCommand(lexical_1.FOCUS_COMMAND, () => {
+            active$.next(true);
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.BLUR_COMMAND, () => {
+            active$.next(false);
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW));
+        // unsubscribe on unmount
+        return () => {
+            activeSubscription.unsubscribe();
+            unsubscribeRegistration();
+        };
+    }, [editor]);
+    // return context
+    return {
+        activeRef,
+        active
+    };
+}

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

@@ -0,0 +1,12 @@
+export * from './feedback';
+export * from './fields';
+export * from './interaction';
+export * from './languageDialog';
+export * from './layout';
+export * from './transitions';
+export * from './visuals';
+export * from './AutoSave';
+export * from './ColorModeToggle';
+export * from './Header';
+export * from './TagEditor';
+export * from './UserEditor';

package/dist/core/components/index.js

@@ -0,0 +1,28 @@
+"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("./feedback"), exports);
+__exportStar(require("./fields"), exports);
+__exportStar(require("./interaction"), exports);
+__exportStar(require("./languageDialog"), exports);
+__exportStar(require("./layout"), exports);
+__exportStar(require("./transitions"), exports);
+__exportStar(require("./visuals"), exports);
+__exportStar(require("./AutoSave"), exports);
+__exportStar(require("./ColorModeToggle"), exports);
+__exportStar(require("./Header"), exports);
+__exportStar(require("./TagEditor"), exports);
+__exportStar(require("./UserEditor"), exports);

package/dist/core/components/interaction/Animate.d.ts

@@ -0,0 +1,13 @@
+import { Variants } from 'motion/react';
+import { PropsWithChildren } from 'react';
+export declare function Animate({ className, present, layout, effect, children }: Animate.Props): import("react/jsx-runtime").JSX.Element | undefined;
+export declare namespace Animate {
+    type Props = PropsWithChildren & {
+        className?: string;
+        present?: boolean;
+        layout?: boolean;
+        effect?: Effect;
+    };
+    type Effect = 'fade';
+}
+export declare const variants: Readonly<Record<Animate.Effect, Variants>>;

package/dist/core/components/interaction/Animate.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.variants = void 0;
+exports.Animate = Animate;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("motion/react");
+// component
+function Animate({ className, present = false, layout = false, effect = 'fade', children }) {
+    // skip if not present
+    if (!present) {
+        return undefined;
+    }
+    // render
+    return ((0, jsx_runtime_1.jsx)(react_1.motion.div, { className: className, variants: exports.variants[effect], initial: "initial", animate: "animate", exit: "exit", layout: layout, children: children }));
+}
+// helpers
+exports.variants = {
+    fade: {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 }
+    }
+};

package/dist/core/components/interaction/AvatarButton.d.ts

@@ -0,0 +1,9 @@
+import { User } from '@nascentdigital/funnel-cms';
+import { HTMLAttributes } from 'react';
+export declare function AvatarButton({ className, user, disabled, ...props }: AvatarButton.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace AvatarButton {
+    type Props = Omit<HTMLAttributes<HTMLButtonElement>, 'children'> & {
+        user: User;
+        disabled?: boolean;
+    };
+}

package/dist/core/components/interaction/AvatarButton.js

@@ -0,0 +1,28 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AvatarButton = AvatarButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+// component
+function AvatarButton(_a) {
+    var { className, user, disabled = false } = _a, props = __rest(_a, ["className", "user", "disabled"]);
+    // bind memos
+    const initials = (0, react_1.useMemo)(() => user.username.substring(0, 1).toUpperCase() || '?', [user]);
+    // render
+    return ((0, jsx_runtime_1.jsx)("button", Object.assign({ className: (0, classnames_1.default)(className, 'iconbutton iconbutton-avatar iconbutton-sm'), disabled: disabled }, props, { children: (0, jsx_runtime_1.jsx)("span", { className: "heading-xs", children: initials }) })));
+}

package/dist/core/components/interaction/Button.d.ts

@@ -0,0 +1,31 @@
+import { HTMLAttributes } from 'react';
+import { Icon } from '../visuals';
+export declare const Button: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLButtonElement> & {
+    variant?: Button.Variant;
+    size?: Button.Size;
+    iconLeft?: Icon.Variant;
+    iconRight?: Icon.Variant;
+    loading?: boolean;
+    disabled?: boolean;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare namespace Button {
+    type Props = HTMLAttributes<HTMLButtonElement> & {
+        variant?: Variant;
+        size?: Size;
+        iconLeft?: Icon.Variant;
+        iconRight?: Icon.Variant;
+        loading?: boolean;
+        disabled?: boolean;
+    };
+    type Variant = 'primary' | 'secondary' | 'destructive' | 'text';
+    type Size = 'md' | 'sm' | 'xs';
+}
+export type GetButtonClassnameArgs = {
+    variant: Button.Variant;
+    size: Button.Size;
+    iconLeft?: Icon.Variant;
+    iconRight?: Icon.Variant;
+    loading: boolean;
+    disabled: boolean;
+};
+export declare function getButtonClassnames({ variant, size, loading, disabled }: GetButtonClassnameArgs): string;