phx-react 1.3.1569 → 1.3.1571

package/dist/cjs/components/TextEditorV2/plugins/CollapsiblePlugin/CollapsibleContentNode.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleContentNode = void 0;
+exports.convertCollapsibleContentElement = convertCollapsibleContentElement;
+exports.$createCollapsibleContentNode = $createCollapsibleContentNode;
+exports.$isCollapsibleContentNode = $isCollapsibleContentNode;
+var tslib_1 = require("tslib");
+var lexical_1 = require("lexical");
+function convertCollapsibleContentElement() {
+    var node = $createCollapsibleContentNode();
+    return {
+        node: node,
+    };
+}
+var CollapsibleContentNode = /** @class */ (function (_super) {
+    tslib_1.__extends(CollapsibleContentNode, _super);
+    function CollapsibleContentNode() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CollapsibleContentNode.getType = function () {
+        return 'collapsible-content';
+    };
+    CollapsibleContentNode.clone = function (node) {
+        return new CollapsibleContentNode(node.__key);
+    };
+    CollapsibleContentNode.prototype.createDOM = function () {
+        var dom = document.createElement('div');
+        dom.classList.add('Collapsible__content');
+        return dom;
+    };
+    CollapsibleContentNode.prototype.updateDOM = function () {
+        return false;
+    };
+    CollapsibleContentNode.importDOM = function () {
+        return {
+            div: function (domNode) {
+                if (!domNode.hasAttribute('data-lexical-collapsible-content')) {
+                    return null;
+                }
+                return {
+                    conversion: convertCollapsibleContentElement,
+                    priority: 2,
+                };
+            },
+        };
+    };
+    CollapsibleContentNode.prototype.exportDOM = function () {
+        var element = document.createElement('div');
+        element.setAttribute('data-lexical-collapsible-content', 'true');
+        return { element: element };
+    };
+    CollapsibleContentNode.importJSON = function () {
+        return $createCollapsibleContentNode();
+    };
+    CollapsibleContentNode.prototype.isShadowRoot = function () {
+        return true;
+    };
+    CollapsibleContentNode.prototype.exportJSON = function () {
+        return tslib_1.__assign(tslib_1.__assign({}, _super.prototype.exportJSON.call(this)), { type: 'collapsible-content', version: 1 });
+    };
+    return CollapsibleContentNode;
+}(lexical_1.ElementNode));
+exports.CollapsibleContentNode = CollapsibleContentNode;
+function $createCollapsibleContentNode() {
+    return new CollapsibleContentNode();
+}
+function $isCollapsibleContentNode(node) {
+    return node instanceof CollapsibleContentNode;
+}
+//# sourceMappingURL=CollapsibleContentNode.js.map

package/dist/cjs/components/TextEditorV2/plugins/CollapsiblePlugin/CollapsibleContentNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleContentNode.js","sourceRoot":"","sources":["../../../../../../src/components/TextEditorV2/plugins/CollapsiblePlugin/CollapsibleContentNode.ts"],"names":[],"mappings":";;;AAWA,4EAKC;AA0DD,sEAEC;AAED,8DAEC;;AAhFD,mCAOgB;AAIhB,SAAgB,gCAAgC;IAC9C,IAAM,IAAI,GAAG,6BAA6B,EAAE,CAAA;IAC5C,OAAO;QACL,IAAI,MAAA;KACL,CAAA;AACH,CAAC;AAED;IAA4C,kDAAW;IAAvD;;IAsDA,CAAC;IArDe,8BAAO,GAArB;QACE,OAAO,qBAAqB,CAAA;IAC9B,CAAC;IAEa,4BAAK,GAAnB,UAAoB,IAA4B;QAC9C,OAAO,IAAI,sBAAsB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAC/C,CAAC;IAEM,0CAAS,GAAhB;QACE,IAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QACzC,GAAG,CAAC,SAAS,CAAC,GAAG,CAAC,sBAAsB,CAAC,CAAA;QACzC,OAAO,GAAG,CAAA;IACZ,CAAC;IAEM,0CAAS,GAAhB;QACE,OAAO,KAAK,CAAA;IACd,CAAC;IAEa,gCAAS,GAAvB;QACE,OAAO;YACL,GAAG,EAAE,UAAC,OAAoB;gBACxB,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,kCAAkC,CAAC,EAAE,CAAC;oBAC9D,OAAO,IAAI,CAAA;gBACb,CAAC;gBACD,OAAO;oBACL,UAAU,EAAE,gCAAgC;oBAC5C,QAAQ,EAAE,CAAC;iBACZ,CAAA;YACH,CAAC;SACF,CAAA;IACH,CAAC;IAEM,0CAAS,GAAhB;QACE,IAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;QAC7C,OAAO,CAAC,YAAY,CAAC,kCAAkC,EAAE,MAAM,CAAC,CAAA;QAChE,OAAO,EAAE,OAAO,SAAA,EAAE,CAAA;IACpB,CAAC;IAEa,iCAAU,GAAxB;QACE,OAAO,6BAA6B,EAAE,CAAA;IACxC,CAAC;IAEM,6CAAY,GAAnB;QACE,OAAO,IAAI,CAAA;IACb,CAAC;IAEM,2CAAU,GAAjB;QACE,6CACK,gBAAK,CAAC,UAAU,WAAE,KACrB,IAAI,EAAE,qBAAqB,EAC3B,OAAO,EAAE,CAAC,IACX;IACH,CAAC;IACH,6BAAC;AAAD,CAAC,AAtDD,CAA4C,qBAAW,GAsDtD;AAtDY,wDAAsB;AAwDnC,SAAgB,6BAA6B;IAC3C,OAAO,IAAI,sBAAsB,EAAE,CAAA;AACrC,CAAC;AAED,SAAgB,yBAAyB,CAAC,IAAoC;IAC5E,OAAO,IAAI,YAAY,sBAAsB,CAAA;AAC/C,CAAC"}

package/dist/cjs/components/TextEditorV2/plugins/CollapsiblePlugin/CollapsibleTitleNode.d.ts

@@ -0,0 +1,18 @@
+import { DOMConversionMap, DOMConversionOutput, DOMExportOutput, ElementNode, LexicalNode, RangeSelection, SerializedElementNode } from 'lexical';
+type SerializedCollapsibleTitleNode = SerializedElementNode;
+export declare function convertSummaryElement(): DOMConversionOutput | null;
+export declare class CollapsibleTitleNode extends ElementNode {
+    static getType(): string;
+    static clone(node: CollapsibleTitleNode): CollapsibleTitleNode;
+    createDOM(): HTMLElement;
+    updateDOM(): boolean;
+    static importDOM(): DOMConversionMap | null;
+    static importJSON(): CollapsibleTitleNode;
+    exportDOM(): DOMExportOutput;
+    exportJSON(): SerializedCollapsibleTitleNode;
+    collapseAtStart(_selection: RangeSelection): boolean;
+    insertNewAfter(_: RangeSelection, restoreSelection?: boolean): ElementNode;
+}
+export declare function $createCollapsibleTitleNode(): CollapsibleTitleNode;
+export declare function $isCollapsibleTitleNode(node: LexicalNode | null | undefined): node is CollapsibleTitleNode;
+export {};

package/dist/cjs/components/TextEditorV2/plugins/CollapsiblePlugin/CollapsibleTitleNode.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsibleTitleNode = void 0;
+exports.convertSummaryElement = convertSummaryElement;
+exports.$createCollapsibleTitleNode = $createCollapsibleTitleNode;
+exports.$isCollapsibleTitleNode = $isCollapsibleTitleNode;
+var tslib_1 = require("tslib");
+var lexical_1 = require("lexical");
+var CollapsibleContainerNode_1 = require("./CollapsibleContainerNode");
+var CollapsibleContentNode_1 = require("./CollapsibleContentNode");
+function convertSummaryElement() {
+    var node = $createCollapsibleTitleNode();
+    return {
+        node: node,
+    };
+}
+var CollapsibleTitleNode = /** @class */ (function (_super) {
+    tslib_1.__extends(CollapsibleTitleNode, _super);
+    function CollapsibleTitleNode() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    CollapsibleTitleNode.getType = function () {
+        return 'collapsible-title';
+    };
+    CollapsibleTitleNode.clone = function (node) {
+        return new CollapsibleTitleNode(node.__key);
+    };
+    CollapsibleTitleNode.prototype.createDOM = function () {
+        var dom = document.createElement('summary');
+        dom.classList.add('Collapsible__title');
+        return dom;
+    };
+    CollapsibleTitleNode.prototype.updateDOM = function () {
+        return false;
+    };
+    CollapsibleTitleNode.importDOM = function () {
+        return {
+            summary: function () { return ({
+                conversion: convertSummaryElement,
+                priority: 1,
+            }); },
+        };
+    };
+    CollapsibleTitleNode.importJSON = function () {
+        return $createCollapsibleTitleNode();
+    };
+    CollapsibleTitleNode.prototype.exportDOM = function () {
+        var element = document.createElement('summary');
+        return { element: element };
+    };
+    CollapsibleTitleNode.prototype.exportJSON = function () {
+        return tslib_1.__assign(tslib_1.__assign({}, _super.prototype.exportJSON.call(this)), { type: 'collapsible-title', version: 1 });
+    };
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    CollapsibleTitleNode.prototype.collapseAtStart = function (_selection) {
+        this.getParentOrThrow().insertBefore(this);
+        return true;
+    };
+    CollapsibleTitleNode.prototype.insertNewAfter = function (_, restoreSelection) {
+        if (restoreSelection === void 0) { restoreSelection = true; }
+        var containerNode = this.getParentOrThrow();
+        if (!(0, CollapsibleContainerNode_1.$isCollapsibleContainerNode)(containerNode)) {
+            throw new Error('CollapsibleTitleNode expects to be child of CollapsibleContainerNode');
+        }
+        if (containerNode.getOpen()) {
+            var contentNode = this.getNextSibling();
+            if (!(0, CollapsibleContentNode_1.$isCollapsibleContentNode)(contentNode)) {
+                throw new Error('CollapsibleTitleNode expects to have CollapsibleContentNode sibling');
+            }
+            var firstChild = contentNode.getFirstChild();
+            if ((0, lexical_1.$isElementNode)(firstChild)) {
+                return firstChild;
+            }
+            else {
+                var paragraph = (0, lexical_1.$createParagraphNode)();
+                contentNode.append(paragraph);
+                return paragraph;
+            }
+        }
+        else {
+            var paragraph = (0, lexical_1.$createParagraphNode)();
+            containerNode.insertAfter(paragraph, restoreSelection);
+            return paragraph;
+        }
+    };
+    return CollapsibleTitleNode;
+}(lexical_1.ElementNode));
+exports.CollapsibleTitleNode = CollapsibleTitleNode;
+function $createCollapsibleTitleNode() {
+    return new CollapsibleTitleNode();
+}
+function $isCollapsibleTitleNode(node) {
+    return node instanceof CollapsibleTitleNode;
+}
+//# sourceMappingURL=CollapsibleTitleNode.js.map

package/dist/cjs/components/TextEditorV2/plugins/CollapsiblePlugin/CollapsibleTitleNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CollapsibleTitleNode.js","sourceRoot":"","sources":["../../../../../../src/components/TextEditorV2/plugins/CollapsiblePlugin/CollapsibleTitleNode.ts"],"names":[],"mappings":"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"}

package/dist/cjs/components/TextEditorV2/plugins/CollapsiblePlugin/index.d.ts

@@ -0,0 +1,3 @@
+export declare const INSERT_COLLAPSIBLE_COMMAND: import("lexical").LexicalCommand<void>;
+export declare const TOGGLE_COLLAPSIBLE_COMMAND: import("lexical").LexicalCommand<string>;
+export default function CollapsiblePlugin(): null;

package/dist/cjs/components/TextEditorV2/plugins/CollapsiblePlugin/index.js

@@ -0,0 +1,148 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TOGGLE_COLLAPSIBLE_COMMAND = exports.INSERT_COLLAPSIBLE_COMMAND = void 0;
+exports.default = CollapsiblePlugin;
+var LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+var utils_1 = require("@lexical/utils");
+var lexical_1 = require("lexical");
+var react_1 = require("react");
+var CollapsibleContainerNode_1 = require("./CollapsibleContainerNode");
+var CollapsibleContentNode_1 = require("./CollapsibleContentNode");
+var CollapsibleTitleNode_1 = require("./CollapsibleTitleNode");
+exports.INSERT_COLLAPSIBLE_COMMAND = (0, lexical_1.createCommand)();
+exports.TOGGLE_COLLAPSIBLE_COMMAND = (0, lexical_1.createCommand)();
+function CollapsiblePlugin() {
+    var editor = (0, LexicalComposerContext_1.useLexicalComposerContext)()[0];
+    (0, react_1.useEffect)(function () {
+        if (!editor.hasNodes([CollapsibleContainerNode_1.CollapsibleContainerNode, CollapsibleTitleNode_1.CollapsibleTitleNode, CollapsibleContentNode_1.CollapsibleContentNode])) {
+            throw new Error('CollapsiblePlugin: CollapsibleContainerNode, CollapsibleTitleNode, or CollapsibleContentNode not registered on editor');
+        }
+        var onEscapeUp = function () {
+            var _a;
+            var selection = (0, lexical_1.$getSelection)();
+            if ((0, lexical_1.$isRangeSelection)(selection) && selection.isCollapsed() && selection.anchor.offset === 0) {
+                var container = (0, utils_1.$findMatchingParent)(selection.anchor.getNode(), CollapsibleContainerNode_1.$isCollapsibleContainerNode);
+                if ((0, CollapsibleContainerNode_1.$isCollapsibleContainerNode)(container)) {
+                    var parent_1 = container.getParent();
+                    if (parent_1 !== null &&
+                        parent_1.getFirstChild() === container &&
+                        selection.anchor.key === ((_a = container.getFirstDescendant()) === null || _a === void 0 ? void 0 : _a.getKey())) {
+                        container.insertBefore((0, lexical_1.$createParagraphNode)());
+                    }
+                }
+            }
+            return false;
+        };
+        var onEscapeDown = function () {
+            var selection = (0, lexical_1.$getSelection)();
+            if ((0, lexical_1.$isRangeSelection)(selection) && selection.isCollapsed()) {
+                var container = (0, utils_1.$findMatchingParent)(selection.anchor.getNode(), CollapsibleContainerNode_1.$isCollapsibleContainerNode);
+                if ((0, CollapsibleContainerNode_1.$isCollapsibleContainerNode)(container)) {
+                    var parent_2 = container.getParent();
+                    if (parent_2 !== null && parent_2.getLastChild() === container) {
+                        var lastDescendant = container.getLastDescendant();
+                        if (lastDescendant !== null &&
+                            selection.anchor.key === lastDescendant.getKey() &&
+                            selection.anchor.offset === lastDescendant.getTextContentSize()) {
+                            container.insertAfter((0, lexical_1.$createParagraphNode)());
+                        }
+                    }
+                }
+            }
+            return false;
+        };
+        return (0, utils_1.mergeRegister)(
+        // Structure enforcing transformers for each node type. In case nesting structure is not
+        // "Container > Title + Content" it'll unwrap nodes and convert it back
+        // to regular content.
+        editor.registerNodeTransform(CollapsibleContentNode_1.CollapsibleContentNode, function (node) {
+            var parent = node.getParent();
+            if (!(0, CollapsibleContainerNode_1.$isCollapsibleContainerNode)(parent)) {
+                var children = node.getChildren();
+                for (var _i = 0, children_1 = children; _i < children_1.length; _i++) {
+                    var child = children_1[_i];
+                    node.insertBefore(child);
+                }
+                node.remove();
+            }
+        }), editor.registerNodeTransform(CollapsibleTitleNode_1.CollapsibleTitleNode, function (node) {
+            var _a;
+            var parent = node.getParent();
+            if (!(0, CollapsibleContainerNode_1.$isCollapsibleContainerNode)(parent)) {
+                node.replace((_a = (0, lexical_1.$createParagraphNode)()).append.apply(_a, node.getChildren()));
+                return;
+            }
+        }), editor.registerNodeTransform(CollapsibleContainerNode_1.CollapsibleContainerNode, function (node) {
+            var children = node.getChildren();
+            if (children.length !== 2 || !(0, CollapsibleTitleNode_1.$isCollapsibleTitleNode)(children[0]) || !(0, CollapsibleContentNode_1.$isCollapsibleContentNode)(children[1])) {
+                for (var _i = 0, children_2 = children; _i < children_2.length; _i++) {
+                    var child = children_2[_i];
+                    node.insertBefore(child);
+                }
+                node.remove();
+            }
+        }), 
+        // This handles the case when container is collapsed and we delete its previous sibling
+        // into it, it would cause collapsed content deleted (since it's display: none, and selection
+        // swallows it when deletes single char). Instead we expand container, which is although
+        // not perfect, but avoids bigger problem
+        editor.registerCommand(lexical_1.DELETE_CHARACTER_COMMAND, function () {
+            var selection = (0, lexical_1.$getSelection)();
+            if (!(0, lexical_1.$isRangeSelection)(selection) || !selection.isCollapsed() || selection.anchor.offset !== 0) {
+                return false;
+            }
+            var anchorNode = selection.anchor.getNode();
+            var topLevelElement = anchorNode.getTopLevelElement();
+            if (topLevelElement === null) {
+                return false;
+            }
+            // @ts-ignore
+            var container = topLevelElement.getPreviousSibling();
+            if (!(0, CollapsibleContainerNode_1.$isCollapsibleContainerNode)(container) || container.getOpen()) {
+                return false;
+            }
+            container.setOpen(true);
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_LOW), 
+        // When collapsible is the last child pressing down/right arrow will insert paragraph
+        // below it to allow adding more content. It's similar what $insertBlockNode
+        // (mainly for decorators), except it'll always be possible to continue adding
+        // new content even if trailing paragraph is accidentally deleted
+        editor.registerCommand(lexical_1.KEY_ARROW_DOWN_COMMAND, onEscapeDown, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ARROW_RIGHT_COMMAND, onEscapeDown, lexical_1.COMMAND_PRIORITY_LOW), 
+        // When collapsible is the first child pressing up/left arrow will insert paragraph
+        // above it to allow adding more content. It's similar what $insertBlockNode
+        // (mainly for decorators), except it'll always be possible to continue adding
+        // new content even if leading paragraph is accidentally deleted
+        editor.registerCommand(lexical_1.KEY_ARROW_UP_COMMAND, onEscapeUp, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ARROW_LEFT_COMMAND, onEscapeUp, lexical_1.COMMAND_PRIORITY_LOW), 
+        // Handling CMD+Enter to toggle collapsible element collapsed state
+        editor.registerCommand(lexical_1.INSERT_PARAGRAPH_COMMAND, function () {
+            var _a;
+            // @ts-ignore
+            var windowEvent = (_a = editor._window) === null || _a === void 0 ? void 0 : _a.event;
+            if (windowEvent && (windowEvent.ctrlKey || windowEvent.metaKey) && windowEvent.key === 'Enter') {
+                var selection = (0, lexical_1.$getPreviousSelection)();
+                if ((0, lexical_1.$isRangeSelection)(selection) && selection.isCollapsed()) {
+                    var parent_3 = (0, utils_1.$findMatchingParent)(selection.anchor.getNode(), function (node) { return (0, lexical_1.$isElementNode)(node) && !node.isInline(); });
+                    if ((0, CollapsibleTitleNode_1.$isCollapsibleTitleNode)(parent_3)) {
+                        var container = parent_3.getParent();
+                        if ((0, CollapsibleContainerNode_1.$isCollapsibleContainerNode)(container)) {
+                            container.toggleOpen();
+                            (0, lexical_1.$setSelection)(selection.clone());
+                            return true;
+                        }
+                    }
+                }
+            }
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(exports.INSERT_COLLAPSIBLE_COMMAND, function () {
+            editor.update(function () {
+                var title = (0, CollapsibleTitleNode_1.$createCollapsibleTitleNode)();
+                (0, utils_1.$insertNodeToNearestRoot)((0, CollapsibleContainerNode_1.$createCollapsibleContainerNode)(true).append(title, (0, CollapsibleContentNode_1.$createCollapsibleContentNode)().append((0, lexical_1.$createParagraphNode)())));
+                title.select();
+            });
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_LOW));
+    }, [editor]);
+    return null;
+}
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/TextEditorV2/plugins/CollapsiblePlugin/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../src/components/TextEditorV2/plugins/CollapsiblePlugin/index.ts"],"names":[],"mappings":"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"}

package/dist/cjs/components/TextEditorV2/plugins/ComponentPickerPlugin/index.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export default function ComponentPickerMenuPlugin(): React.JSX.Element;

package/dist/cjs/components/TextEditorV2/plugins/ComponentPickerPlugin/index.js

@@ -0,0 +1,264 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = ComponentPickerMenuPlugin;
+var tslib_1 = require("tslib");
+var code_1 = require("@lexical/code");
+var list_1 = require("@lexical/list");
+var LexicalAutoEmbedPlugin_1 = require("@lexical/react/LexicalAutoEmbedPlugin");
+var LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+var LexicalHorizontalRuleNode_1 = require("@lexical/react/LexicalHorizontalRuleNode");
+var LexicalTypeaheadMenuPlugin_1 = require("@lexical/react/LexicalTypeaheadMenuPlugin");
+var rich_text_1 = require("@lexical/rich-text");
+var selection_1 = require("@lexical/selection");
+var table_1 = require("@lexical/table");
+var lexical_1 = require("lexical");
+var react_1 = require("react");
+var React = tslib_1.__importStar(require("react"));
+var ReactDOM = tslib_1.__importStar(require("react-dom"));
+var useModal_1 = tslib_1.__importDefault(require("../../hooks/useModal"));
+var AutoEmbedPlugin_1 = require("../AutoEmbedPlugin");
+var CollapsiblePlugin_1 = require("../CollapsiblePlugin");
+var EquationsPlugin_1 = require("../EquationsPlugin");
+var ExcalidrawPlugin_1 = require("../ExcalidrawPlugin");
+var ImagesPlugin_1 = require("../ImagesPlugin");
+var InsertLayoutDialog_1 = tslib_1.__importDefault(require("../LayoutPlugin/InsertLayoutDialog"));
+var PageBreakPlugin_1 = require("../PageBreakPlugin");
+var PollPlugin_1 = require("../PollPlugin");
+var TablePlugin_1 = require("../TablePlugin");
+var ComponentPickerOption = /** @class */ (function (_super) {
+    tslib_1.__extends(ComponentPickerOption, _super);
+    function ComponentPickerOption(title, options) {
+        var _this = _super.call(this, title) || this;
+        _this.title = title;
+        _this.keywords = options.keywords || [];
+        _this.icon = options.icon;
+        _this.keyboardShortcut = options.keyboardShortcut;
+        _this.onSelect = options.onSelect.bind(_this);
+        return _this;
+    }
+    return ComponentPickerOption;
+}(LexicalTypeaheadMenuPlugin_1.MenuOption));
+function ComponentPickerMenuItem(_a) {
+    var index = _a.index, isSelected = _a.isSelected, onClick = _a.onClick, onMouseEnter = _a.onMouseEnter, option = _a.option;
+    var className = 'item';
+    if (isSelected) {
+        className += ' selected';
+    }
+    return (React.createElement("li", { key: option.key, ref: option.setRefElement, "aria-selected": isSelected, className: className, id: 'typeahead-item-' + index, onClick: onClick, onMouseEnter: onMouseEnter, role: 'option', tabIndex: -1 },
+        option.icon,
+        React.createElement("span", { className: 'text' }, option.title)));
+}
+function getDynamicOptions(editor, queryString) {
+    var options = [];
+    if (queryString == null) {
+        return options;
+    }
+    var tableMatch = queryString.match(/^([1-9]\d?)(?:x([1-9]\d?)?)?$/);
+    if (tableMatch !== null) {
+        var rows_1 = tableMatch[1];
+        var colOptions = tableMatch[2] ? [tableMatch[2]] : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(String);
+        options.push.apply(options, colOptions.map(function (columns) {
+            return new ComponentPickerOption("".concat(rows_1, "x").concat(columns, " Table"), {
+                icon: React.createElement("i", { className: 'icon table' }),
+                keywords: ['table'],
+                onSelect: function () { return editor.dispatchCommand(table_1.INSERT_TABLE_COMMAND, { columns: columns, rows: rows_1 }); },
+            });
+        }));
+    }
+    return options;
+}
+function getBaseOptions(editor, showModal) {
+    return tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray(tslib_1.__spreadArray([
+        new ComponentPickerOption('Paragraph', {
+            icon: React.createElement("i", { className: 'icon paragraph' }),
+            keywords: ['normal', 'paragraph', 'p', 'text'],
+            onSelect: function () {
+                return editor.update(function () {
+                    var selection = (0, lexical_1.$getSelection)();
+                    if ((0, lexical_1.$isRangeSelection)(selection)) {
+                        (0, selection_1.$setBlocksType)(selection, function () { return (0, lexical_1.$createParagraphNode)(); });
+                    }
+                });
+            },
+        })
+    ], [1, 2, 3].map(function (n) {
+        return new ComponentPickerOption("Heading ".concat(n), {
+            icon: React.createElement("i", { className: "icon h".concat(n) }),
+            keywords: ['heading', 'header', "h".concat(n)],
+            onSelect: function () {
+                return editor.update(function () {
+                    var selection = (0, lexical_1.$getSelection)();
+                    if ((0, lexical_1.$isRangeSelection)(selection)) {
+                        (0, selection_1.$setBlocksType)(selection, function () { return (0, rich_text_1.$createHeadingNode)("h".concat(n)); });
+                    }
+                });
+            },
+        });
+    }), true), [
+        new ComponentPickerOption('Table', {
+            icon: React.createElement("i", { className: 'icon table' }),
+            keywords: ['table', 'grid', 'spreadsheet', 'rows', 'columns'],
+            onSelect: function () {
+                return showModal('Insert Table', function (onClose) { return React.createElement(TablePlugin_1.InsertTableDialog, { activeEditor: editor, onClose: onClose }); });
+            },
+        }),
+        new ComponentPickerOption('Numbered List', {
+            icon: React.createElement("i", { className: 'icon number' }),
+            keywords: ['numbered list', 'ordered list', 'ol'],
+            onSelect: function () { return editor.dispatchCommand(list_1.INSERT_ORDERED_LIST_COMMAND, undefined); },
+        }),
+        new ComponentPickerOption('Bulleted List', {
+            icon: React.createElement("i", { className: 'icon bullet' }),
+            keywords: ['bulleted list', 'unordered list', 'ul'],
+            onSelect: function () { return editor.dispatchCommand(list_1.INSERT_UNORDERED_LIST_COMMAND, undefined); },
+        }),
+        new ComponentPickerOption('Check List', {
+            icon: React.createElement("i", { className: 'icon check' }),
+            keywords: ['check list', 'todo list'],
+            onSelect: function () { return editor.dispatchCommand(list_1.INSERT_CHECK_LIST_COMMAND, undefined); },
+        }),
+        new ComponentPickerOption('Quote', {
+            icon: React.createElement("i", { className: 'icon quote' }),
+            keywords: ['block quote'],
+            onSelect: function () {
+                return editor.update(function () {
+                    var selection = (0, lexical_1.$getSelection)();
+                    if ((0, lexical_1.$isRangeSelection)(selection)) {
+                        (0, selection_1.$setBlocksType)(selection, function () { return (0, rich_text_1.$createQuoteNode)(); });
+                    }
+                });
+            },
+        }),
+        new ComponentPickerOption('Code', {
+            icon: React.createElement("i", { className: 'icon code' }),
+            keywords: ['javascript', 'python', 'js', 'codeblock'],
+            onSelect: function () {
+                return editor.update(function () {
+                    var selection = (0, lexical_1.$getSelection)();
+                    if ((0, lexical_1.$isRangeSelection)(selection)) {
+                        if (selection.isCollapsed()) {
+                            (0, selection_1.$setBlocksType)(selection, function () { return (0, code_1.$createCodeNode)(); });
+                        }
+                        else {
+                            // Will this ever happen?
+                            var textContent = selection.getTextContent();
+                            var codeNode = (0, code_1.$createCodeNode)();
+                            selection.insertNodes([codeNode]);
+                            selection.insertRawText(textContent);
+                        }
+                    }
+                });
+            },
+        }),
+        new ComponentPickerOption('Divider', {
+            icon: React.createElement("i", { className: 'icon horizontal-rule' }),
+            keywords: ['horizontal rule', 'divider', 'hr'],
+            onSelect: function () { return editor.dispatchCommand(LexicalHorizontalRuleNode_1.INSERT_HORIZONTAL_RULE_COMMAND, undefined); },
+        }),
+        new ComponentPickerOption('Page Break', {
+            icon: React.createElement("i", { className: 'icon page-break' }),
+            keywords: ['page break', 'divider'],
+            onSelect: function () { return editor.dispatchCommand(PageBreakPlugin_1.INSERT_PAGE_BREAK, undefined); },
+        }),
+        new ComponentPickerOption('Excalidraw', {
+            icon: React.createElement("i", { className: 'icon diagram-2' }),
+            keywords: ['excalidraw', 'diagram', 'drawing'],
+            onSelect: function () { return editor.dispatchCommand(ExcalidrawPlugin_1.INSERT_EXCALIDRAW_COMMAND, undefined); },
+        }),
+        new ComponentPickerOption('Poll', {
+            icon: React.createElement("i", { className: 'icon poll' }),
+            keywords: ['poll', 'vote'],
+            onSelect: function () {
+                return showModal('Insert Poll', function (onClose) { return React.createElement(PollPlugin_1.InsertPollDialog, { activeEditor: editor, onClose: onClose }); });
+            },
+        })
+    ], false), AutoEmbedPlugin_1.EmbedConfigs.map(function (embedConfig) {
+        return new ComponentPickerOption("Embed ".concat(embedConfig.contentName), {
+            icon: embedConfig.icon,
+            keywords: tslib_1.__spreadArray(tslib_1.__spreadArray([], embedConfig.keywords, true), ['embed'], false),
+            onSelect: function () { return editor.dispatchCommand(LexicalAutoEmbedPlugin_1.INSERT_EMBED_COMMAND, embedConfig.type); },
+        });
+    }), true), [
+        new ComponentPickerOption('Equation', {
+            icon: React.createElement("i", { className: 'icon equation' }),
+            keywords: ['equation', 'latex', 'math'],
+            onSelect: function () {
+                return showModal('Insert Equation', function (onClose) { return React.createElement(EquationsPlugin_1.InsertEquationDialog, { activeEditor: editor, onClose: onClose }); });
+            },
+        }),
+        new ComponentPickerOption('GIF', {
+            icon: React.createElement("i", { className: 'icon gif' }),
+            keywords: ['gif', 'animate', 'image', 'file'],
+            onSelect: function () {
+                return editor.dispatchCommand(ImagesPlugin_1.INSERT_IMAGE_COMMAND, {
+                    altText: 'Cat typing on a laptop',
+                    src: '',
+                });
+            },
+        }),
+        // new ComponentPickerOption('Image', {
+        //   icon: <i className="icon image" />,
+        //   keywords: ['image', 'photo', 'picture', 'file'],
+        //   onSelect: () =>
+        //     showModal('Insert Image', (onClose) => (
+        //       <InsertImageDialog activeEditor={editor} onClose={onClose} />
+        //     ))
+        // }),
+        new ComponentPickerOption('Collapsible', {
+            icon: React.createElement("i", { className: 'icon caret-right' }),
+            keywords: ['collapse', 'collapsible', 'toggle'],
+            onSelect: function () { return editor.dispatchCommand(CollapsiblePlugin_1.INSERT_COLLAPSIBLE_COMMAND, undefined); },
+        }),
+        new ComponentPickerOption('Columns Layout', {
+            icon: React.createElement("i", { className: 'icon columns' }),
+            keywords: ['columns', 'layout', 'grid'],
+            onSelect: function () {
+                return showModal('Insert Columns Layout', function (onClose) { return React.createElement(InsertLayoutDialog_1.default, { activeEditor: editor, onClose: onClose }); });
+            },
+        })
+    ], false), ['left', 'center', 'right', 'justify'].map(function (alignment) {
+        return new ComponentPickerOption("Align ".concat(alignment), {
+            icon: React.createElement("i", { className: "icon ".concat(alignment, "-align") }),
+            keywords: ['align', 'justify', alignment],
+            onSelect: function () { return editor.dispatchCommand(lexical_1.FORMAT_ELEMENT_COMMAND, alignment); },
+        });
+    }), true);
+}
+function ComponentPickerMenuPlugin() {
+    var editor = (0, LexicalComposerContext_1.useLexicalComposerContext)()[0];
+    var _a = (0, useModal_1.default)(), modal = _a[0], showModal = _a[1];
+    var _b = (0, react_1.useState)(null), queryString = _b[0], setQueryString = _b[1];
+    var checkForTriggerMatch = (0, LexicalTypeaheadMenuPlugin_1.useBasicTypeaheadTriggerMatch)('/', {
+        minLength: 0,
+    });
+    var options = (0, react_1.useMemo)(function () {
+        var baseOptions = getBaseOptions(editor, showModal);
+        if (!queryString) {
+            return baseOptions;
+        }
+        var regex = new RegExp(queryString, 'i');
+        return tslib_1.__spreadArray(tslib_1.__spreadArray([], getDynamicOptions(editor, queryString), true), baseOptions.filter(function (option) { return regex.test(option.title) || option.keywords.some(function (keyword) { return regex.test(keyword); }); }), true);
+    }, [editor, queryString, showModal]);
+    var onSelectOption = (0, react_1.useCallback)(function (selectedOption, nodeToRemove, closeMenu, matchingString) {
+        editor.update(function () {
+            nodeToRemove === null || nodeToRemove === void 0 ? void 0 : nodeToRemove.remove();
+            selectedOption.onSelect(matchingString);
+            closeMenu();
+        });
+    }, [editor]);
+    return (React.createElement(React.Fragment, null,
+        modal,
+        React.createElement(LexicalTypeaheadMenuPlugin_1.LexicalTypeaheadMenuPlugin, { menuRenderFn: function (anchorElementRef, _a) {
+                var selectOptionAndCleanUp = _a.selectOptionAndCleanUp, selectedIndex = _a.selectedIndex, setHighlightedIndex = _a.setHighlightedIndex;
+                return anchorElementRef.current && options.length > 0
+                    ? ReactDOM.createPortal(React.createElement("div", { className: 'typeahead-popover component-picker-menu' },
+                        React.createElement("ul", null, options.map(function (option, i) { return (React.createElement(ComponentPickerMenuItem, { key: option.key, index: i, isSelected: selectedIndex === i, onClick: function () {
+                                setHighlightedIndex(i);
+                                selectOptionAndCleanUp(option);
+                            }, onMouseEnter: function () {
+                                setHighlightedIndex(i);
+                            }, option: option })); }))), anchorElementRef.current)
+                    : null;
+            }, onQueryChange: setQueryString, onSelectOption: onSelectOption, options: options, triggerFn: checkForTriggerMatch })));
+}
+//# sourceMappingURL=index.js.map