@nascentdigital/funnel-editor 4.4.18

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

@@ -0,0 +1,168 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkPopup = LinkPopup;
+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 client_1 = require("@nascentdigital/funnel-ui/client");
+const classnames_1 = __importDefault(require("classnames"));
+const lexical_1 = require("lexical");
+const link_2 = __importDefault(require("next/link"));
+const react_1 = require("react");
+const interaction_1 = require("../../interaction");
+const FloatingToolbarPlugin_1 = require("./FloatingToolbarPlugin");
+const LinkEditor_1 = require("./LinkEditor");
+const useEditorActive_1 = require("./useEditorActive");
+// component
+function LinkPopup() {
+    var _a, _b;
+    // bind state + hooks
+    const [linkContext, setLinkContext] = (0, react_1.useState)();
+    const [editingLink, setEditingLink] = (0, react_1.useState)(false);
+    const [toolbarVisible, setToolbarVisible] = (0, react_1.useState)(false);
+    const [ready, setReady] = (0, react_1.useState)(false);
+    const { activeRef, active } = (0, useEditorActive_1.useEditorActive)();
+    const linkContextRef = (0, react_1.useRef)(linkContext);
+    linkContextRef.current = linkContext;
+    const [lastLinkKey, setLastLinkKey] = (0, react_1.useState)();
+    const lastLinkKeyRef = (0, react_1.useRef)(lastLinkKey);
+    lastLinkKeyRef.current = lastLinkKey;
+    const scrolled = (0, client_1.useWindowScrolled)({ throttle: '500ms' });
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const $updatePopup = (0, react_1.useCallback)((editor) => {
+        var _a;
+        // skip if there's no selection
+        const selection = (0, lexical_1.$getSelection)();
+        if (!selection) {
+            return;
+        }
+        // ignore if not a range
+        const selectedNodes = selection.getNodes();
+        let focusNode;
+        // handle range selection (ideal)
+        if ((0, lexical_1.$isRangeSelection)(selection)) {
+            focusNode = selection.focus.getNode();
+        }
+        // or coerce with point selection
+        else if (selectedNodes.length > 0) {
+            focusNode = funnel_core_1.ArrayUtils.last(selectedNodes);
+        }
+        // set link context if we have a link node
+        const linkNode = funnel_core_1.LexicalUtils.findContainer(focusNode, [link_1.LinkNode]);
+        if (linkNode) {
+            // get anchor (should be there)
+            const anchor = funnel_core_1.LexicalUtils.getSelectionRect({ editor, selection, coerce: true, allowEmpty: true });
+            if (!anchor) {
+                return;
+            }
+            // set if the link is not the same as the last one that was close OR if it's already open
+            const linkKey = linkNode.getKey();
+            const linkContext = linkContextRef.current;
+            if (linkKey !== lastLinkKeyRef.current || !!linkContext) {
+                setLastLinkKey(linkKey);
+                setLinkContext({
+                    anchor: linkKey === lastLinkKeyRef.current
+                        ? (_a = linkContext === null || linkContext === void 0 ? void 0 : linkContext.anchor) !== null && _a !== void 0 ? _a : anchor
+                        : anchor,
+                    url: linkNode.getURL(),
+                    label: linkNode.getTextContent()
+                });
+            }
+        }
+        // or close/clear
+        else {
+            setLinkContext(undefined);
+            setLastLinkKey(undefined);
+        }
+    }, []);
+    // track selection (show/hide popup accordingly)
+    (0, react_1.useEffect)(() => {
+        // register for ingoing updates
+        return (0, utils_1.mergeRegister)(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => $updatePopup(editor));
+        }), editor.registerCommand(lexical_1.SELECTION_CHANGE_COMMAND, (_, editor) => {
+            $updatePopup(editor);
+            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.registerCommand(FloatingToolbarPlugin_1.FloatingToolbarPlugin.OPENED_COMMAND, () => {
+            setToolbarVisible(true);
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(FloatingToolbarPlugin_1.FloatingToolbarPlugin.CLOSED_COMMAND, () => {
+            setToolbarVisible(false);
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ESCAPE_COMMAND, event => {
+            // close opened and no modifiers are used
+            if (linkContextRef.current && !event.shiftKey && !event.ctrlKey && !event.altKey && !event.metaKey) {
+                setLinkContext(undefined);
+                return true;
+            }
+            // otherwise, ignore
+            else {
+                return false;
+            }
+        }, lexical_1.COMMAND_PRIORITY_HIGH));
+    }, [editor, $updatePopup]);
+    // close on blur
+    (0, react_1.useEffect)(() => {
+        if (!active) {
+            setLastLinkKey(undefined);
+            setLinkContext(undefined);
+        }
+    }, [active]);
+    // close on scroll
+    (0, react_1.useEffect)(() => {
+        if (scrolled) {
+            setLastLinkKey(undefined);
+            setLinkContext(undefined);
+        }
+    }, [scrolled]);
+    // helpers
+    const onEdit = () => {
+        // close
+        onClose();
+        // invoke open on editor
+        editor.dispatchCommand(LinkEditor_1.LinkEditor.OPEN_COMMAND, undefined);
+    };
+    const onDelete = () => {
+        // close
+        onClose();
+        // invoke delete on editor
+        editor.dispatchCommand(LinkEditor_1.LinkEditor.DELETE_COMMAND, undefined);
+    };
+    const onOpened = () => {
+        // mark ready
+        setReady(true);
+        // raise command
+        editor.dispatchCommand(LinkPopup.OPENED_COMMAND, undefined);
+    };
+    const onClose = () => {
+        setLinkContext(undefined);
+    };
+    const onClosed = () => {
+        // clear ready
+        setReady(false);
+        // raise command
+        editor.dispatchCommand(LinkPopup.CLOSED_COMMAND, undefined);
+    };
+    // render
+    return ((0, jsx_runtime_1.jsxs)(interaction_1.Popup, { className: (0, classnames_1.default)('glass-overlay h-36 w-[330px] flex items-center gap-l5 px-l5 interpolate', 'border-t border-solid border-glass-stroke-l1 rounded-full', {
+            'opacity-none': !ready,
+            'opacity-full': ready
+        }), open: !!linkContext && !editingLink && !toolbarVisible, anchor: linkContext === null || linkContext === void 0 ? void 0 : linkContext.anchor, anchorOffset: 4, placement: "top", animation: "out", disableOverlay: true, onOpened: onOpened, onClosed: onClosed, children: [(0, jsx_runtime_1.jsx)(link_2.default, { className: (0, classnames_1.default)('flex-1 self-stretch flex items-center cursor-pointer', 'body-sm text-content-tertiary align-middle ellipsis'), href: (_a = linkContext === null || linkContext === void 0 ? void 0 : linkContext.url) !== null && _a !== void 0 ? _a : '#', target: "_blank", children: (_b = linkContext === null || linkContext === void 0 ? void 0 : linkContext.url) !== null && _b !== void 0 ? _b : '' }), (0, jsx_runtime_1.jsx)("div", { className: "h-20 divider-y" }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "Pencil", size: "xs", onClick: onEdit }), (0, jsx_runtime_1.jsx)(interaction_1.IconButton, { icon: "Trash", size: "xs", onClick: onDelete })] }));
+}
+// extension
+(function (LinkPopup) {
+    // command
+    LinkPopup.OPENED_COMMAND = (0, lexical_1.createCommand)();
+    LinkPopup.CLOSED_COMMAND = (0, lexical_1.createCommand)();
+})(LinkPopup || (exports.LinkPopup = LinkPopup = {}));

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

@@ -0,0 +1,8 @@
+import { Schema } from '@nascentdigital/funnel-core';
+export declare function SanitizerPlugin({ capabilities: capabilitiesRaw, maxParagraphs }: SanitizerPlugin.Props): null;
+export declare namespace SanitizerPlugin {
+    type Props = {
+        capabilities: Partial<Schema.RichTextField.Capabilities.Options>;
+        maxParagraphs?: number;
+    };
+}

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

@@ -0,0 +1,66 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SanitizerPlugin = SanitizerPlugin;
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const utils_1 = require("@lexical/utils");
+const client_1 = require("@nascentdigital/funnel-ui/client");
+const lexical_1 = require("lexical");
+const react_1 = require("react");
+// plugin
+function SanitizerPlugin({ capabilities: capabilitiesRaw, maxParagraphs }) {
+    // bind hooks
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    const capabilities = (0, client_1.useLatestValue)(capabilitiesRaw);
+    // register commands
+    (0, react_1.useEffect)(() => {
+        // create handler array
+        const unsubscribes = [];
+        // control newlines (if required)
+        if (maxParagraphs) {
+            // prevent more lines than allowed from being added
+            unsubscribes.push(editor.registerNodeTransform(lexical_1.RootNode, (node) => {
+                const childCount = node.getChildrenSize();
+                if (childCount > maxParagraphs) {
+                    node.splice(maxParagraphs, childCount - maxParagraphs, []);
+                }
+            }));
+            // prevent line breaks (if single-line)
+            if (maxParagraphs === 1) {
+                // stop enter key
+                unsubscribes.push(editor.registerCommand(lexical_1.KEY_ENTER_COMMAND, e => {
+                    e === null || e === void 0 ? void 0 : e.preventDefault();
+                    return true;
+                }, lexical_1.COMMAND_PRIORITY_CRITICAL));
+                // strip linebreak
+                unsubscribes.push(editor.registerNodeTransform(lexical_1.LineBreakNode, (node) => {
+                    node.remove();
+                }));
+            }
+        }
+        // block text formating shortcuts that aren't allowed
+        unsubscribes.push(editor.registerCommand(lexical_1.FORMAT_TEXT_COMMAND, format => isTextFormatDisabled(format, capabilities), lexical_1.COMMAND_PRIORITY_CRITICAL));
+        // return group unregister on unmount
+        return (0, utils_1.mergeRegister)(...unsubscribes);
+    }, [editor, maxParagraphs, capabilities]);
+    // render nothing
+    return null;
+}
+// helpers
+function isTextFormatDisabled(format, capabilities) {
+    switch (format) {
+        case 'bold':
+            return !capabilities.bold;
+        case 'italic':
+            return !capabilities.italics;
+        case 'underline':
+            return !capabilities.underline;
+        case 'strikethrough':
+            return !capabilities.strikethrough;
+        case 'superscript':
+            return !capabilities.superscript;
+        case 'subscript':
+            return !capabilities.subscript;
+        default:
+            return false;
+    }
+}

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

@@ -0,0 +1 @@
+export declare function StyledTextPlugin(): null;

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTextPlugin = StyledTextPlugin;
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const funnel_core_1 = require("@nascentdigital/funnel-core");
+const lexical_1 = require("lexical");
+const react_1 = require("react");
+// plugin
+function StyledTextPlugin() {
+    // bind hooks
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    // register commands
+    (0, react_1.useEffect)(() => {
+        // fail if nodes aren't bound
+        if (!editor.hasNodes([funnel_core_1.StyledTextNode])) {
+            throw new Error('StyledTextPlugin: StyledTextNode not registered on editor (initialConfig.nodes)');
+        }
+        // register command
+        return editor.registerCommand(funnel_core_1.StyledTextNode.FORMAT_STYLED_TEXT_COMMAND, style => {
+            // process selection
+            const selection = (0, lexical_1.$getSelection)();
+            funnel_core_1.LexicalUtils.replaceTextNodes({
+                selection,
+                onReplaceNode: original => {
+                    // toggle off if it's already that style
+                    let replacement;
+                    if (funnel_core_1.StyledTextNode.$isStyledTextNode(original) && original.getStyleFormat() === style) {
+                        original.replace(replacement = (0, lexical_1.$createTextNode)(original.__text));
+                    }
+                    // or replace with styled node
+                    else {
+                        original.replace(replacement = funnel_core_1.StyledTextNode.$createStyledTextNode(original.__text, style));
+                    }
+                    // return node
+                    return replacement;
+                }
+            });
+            // stop processing
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_EDITOR);
+    }, [editor]);
+    // render nothing
+    return null;
+}

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

@@ -0,0 +1,6 @@
+import { Schema } from '@nascentdigital/funnel-core';
+import { EditorThemeClasses } from 'lexical';
+import { RichTextEditor } from '../RichTextEditor';
+export declare const listClassname: string;
+export declare const listItemClassname: string;
+export declare function getTheme(variant: RichTextEditor.Variant, options: Schema.RichTextField.Capabilities.Options): EditorThemeClasses;

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

@@ -0,0 +1,65 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.listItemClassname = exports.listClassname = void 0;
+exports.getTheme = getTheme;
+const classnames_1 = __importDefault(require("classnames"));
+// constants
+exports.listClassname = (0, classnames_1.default)('list w-full list-outside flex flex-col', 'body-sm text-pretty');
+exports.listItemClassname = (0, classnames_1.default)('flex *:flex-1', 'before:shrink-0 before:pr-l3', 'before:flex before:justify-center before:items-center', 'has-[.list]:before:content-none', '[&>br]:min-w-px [&>br]:inline-block');
+// theme
+function getTheme(variant, options) {
+    // return theme
+    return {
+        // headings
+        heading: {
+            h1: 'heading-lg text-[48px] mb-l5',
+            h2: 'heading-lg mb-l5',
+            h3: 'heading-md mb-l5',
+            h4: 'heading-sm mb-l5',
+            h5: 'heading-xs mb-l4',
+            h6: 'label-sm label-strong mb-l4'
+        },
+        // text
+        paragraph: (0, classnames_1.default)('block min-h-body-sm last:mb-0', {
+            'mb-l5': variant === 'area',
+            'mb-l8': variant === 'editor',
+        }),
+        quote: 'block pl-l6 mb-l8 last:mb-0 border-l-3 border-solid border-border-l1',
+        text: {
+            bold: 'font-bold',
+            code: '',
+            hashtag: '',
+            italic: 'italic',
+            overflowed: '',
+            strikethrough: 'line-through',
+            subscript: 'text-[7.5px]',
+            superscript: 'text-[7.5px]',
+            underline: 'underline',
+            underlineStrikethrough: 'underline line-through'
+        },
+        // lists
+        list: {
+            ul: (0, classnames_1.default)(exports.listClassname, '*:before:w-20'),
+            ulDepth: [
+                `pl-l4 *:before:content-['•']`,
+                `pl-l9 *:before:content-['◦']`,
+                `pl-l9 *:before:content-['⁃']`,
+            ],
+            ol: (0, classnames_1.default)(exports.listClassname, '*:before:justify-end'),
+            olDepth: [
+                `counter-l1 [&>li:not(:has(.list))]:counter-increment-l1 *:before:content-[counter(l1)_"."] *:before:w-32 pl-l3`,
+                `counter-l2 [&>li:not(:has(.list))]:counter-increment-l2 *:before:content-[counter(l2,lower-alpha)_"."] *:before:w-32 pl-l9`,
+                `counter-l3 *:has-[:not(.list)]:counter-increment-l3 *:before:content-[counter(l3,lower-roman)_"."] *:before:w-32 pl-l7`,
+            ],
+            listitem: exports.listItemClassname
+        },
+        // links
+        link: (0, classnames_1.default)('text-ix-primary cursor-pointer interpolate', 'hover:ix-primary-hover hover:underline', 'hover:ix-primary-press/tint2 active:no-underline'),
+        // rule
+        hr: (0, classnames_1.default)('py-l4 my-l6 border-none appearance-none cursor-pointer interpolate-fast', 'before:content-empty before:block before:h-px before:bg-border-l1', 'hover:before:bg-border-l2'),
+        hrSelected: 'bg-surface2'
+    };
+}

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

@@ -0,0 +1,11 @@
+import { Callback, Schema } from '@nascentdigital/funnel-core';
+export declare function Toolbar({ className, options, enableHistory, onInteractionChange }: Toolbar.Props): import("react/jsx-runtime").JSX.Element;
+export declare namespace Toolbar {
+    type Props = {
+        className?: string;
+        options: Schema.RichTextField.Capabilities.Options;
+        enableHistory?: boolean;
+        onInteractionChange?: Callback<InteractionState>;
+    };
+    type InteractionState = 'none' | 'hover' | 'focus' | 'hover+focus';
+}