@selfcommunity/react-ui 0.7.0-alpha.99 → 0.7.0

package/lib/cjs/components/Editor/plugins/FloatingLinkPlugin.js

@@ -0,0 +1,147 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const link_1 = require("@lexical/link");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const utils_1 = require("@lexical/utils");
+const lexical_1 = require("lexical");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const editor_1 = require("../../../utils/editor");
+const utils_2 = require("@selfcommunity/utils");
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const constants_1 = require("../constants");
+const classes = {
+    root: `${constants_1.PREFIX}-floating-link-plugin-root`
+};
+const Root = (0, styles_1.styled)(material_1.Popper, {
+    name: constants_1.PREFIX,
+    slot: 'FloatingLinkPluginRoot'
+})(() => ({}));
+function FloatingLinkPlugin({ editor, isLink, setIsLink }) {
+    const [anchorEl, setAnchorEl] = (0, react_1.useState)(null);
+    const [linkUrl, setLinkUrl] = (0, react_1.useState)('');
+    const [hideForUrl, setHideForUrl] = (0, react_1.useState)(null);
+    const [lastSelection, setLastSelection] = (0, react_1.useState)(null);
+    const updateLinkEditor = (0, react_1.useCallback)(() => {
+        var _a;
+        const selection = (0, lexical_1.$getSelection)();
+        if ((0, lexical_1.$isRangeSelection)(selection)) {
+            const node = (0, editor_1.getSelectedNode)(selection);
+            const parent = node.getParent();
+            if ((0, link_1.$isLinkNode)(parent)) {
+                setLinkUrl(parent.getURL());
+            }
+            else if ((0, link_1.$isLinkNode)(node)) {
+                setLinkUrl(node.getURL());
+            }
+            else {
+                setLinkUrl('');
+            }
+        }
+        const nativeSelection = window.getSelection();
+        const activeElement = document.activeElement;
+        const rootElement = editor.getRootElement();
+        if (selection !== null &&
+            nativeSelection !== null &&
+            rootElement !== null &&
+            rootElement.contains(nativeSelection.anchorNode) &&
+            editor.isEditable()) {
+            setAnchorEl((_a = nativeSelection.focusNode) === null || _a === void 0 ? void 0 : _a.parentElement);
+            setLastSelection(selection);
+        }
+        else if (!activeElement) {
+            setAnchorEl(null);
+            setLastSelection(null);
+            setLinkUrl('');
+        }
+        return true;
+    }, [editor]);
+    (0, react_1.useEffect)(() => {
+        if (linkUrl != hideForUrl) {
+            setHideForUrl(null);
+        }
+    }, [linkUrl]);
+    (0, react_1.useEffect)(() => {
+        return (0, utils_1.mergeRegister)(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                updateLinkEditor();
+            });
+        }), editor.registerCommand(lexical_1.SELECTION_CHANGE_COMMAND, () => {
+            updateLinkEditor();
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ESCAPE_COMMAND, () => {
+            if (isLink) {
+                setIsLink(false);
+                return true;
+            }
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_HIGH));
+    }, [editor, updateLinkEditor, setIsLink, isLink]);
+    (0, react_1.useEffect)(() => {
+        editor.getEditorState().read(() => {
+            updateLinkEditor();
+        });
+    }, [editor, updateLinkEditor]);
+    const handleLinkSubmission = () => {
+        if (lastSelection !== null) {
+            if (linkUrl !== '') {
+                setHideForUrl(linkUrl);
+                editor.dispatchCommand(link_1.TOGGLE_LINK_COMMAND, (0, utils_2.isValidUrl)(linkUrl) ? linkUrl : 'https://');
+            }
+        }
+    };
+    if (!isLink || linkUrl === hideForUrl) {
+        return null;
+    }
+    return (React.createElement(Root, { className: classes.root, open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right" },
+        React.createElement(material_1.Paper, null,
+            React.createElement(material_1.TextField, { size: "small", value: linkUrl, variant: "outlined", onChange: (event) => {
+                    setLinkUrl(event.target.value);
+                }, InputProps: {
+                    endAdornment: (React.createElement(material_1.InputAdornment, { position: "end" },
+                        React.createElement(material_1.IconButton, { size: "small", tabIndex: 0, onClick: () => {
+                                setIsLink(false);
+                            } },
+                            React.createElement(Icon_1.default, null, "close")),
+                        React.createElement(material_1.IconButton, { size: "small", tabIndex: 1, onClick: handleLinkSubmission },
+                            React.createElement(Icon_1.default, null, "check"))))
+                } }))));
+}
+function useFloatingLinkEditorToolbar(editor) {
+    const [activeEditor, setActiveEditor] = (0, react_1.useState)(editor);
+    const [isLink, setIsLink] = (0, react_1.useState)(false);
+    const updateToolbar = (0, react_1.useCallback)(() => {
+        const selection = (0, lexical_1.$getSelection)();
+        if ((0, lexical_1.$isRangeSelection)(selection)) {
+            const node = (0, editor_1.getSelectedNode)(selection);
+            const linkParent = (0, utils_1.$findMatchingParent)(node, link_1.$isLinkNode);
+            const autoLinkParent = (0, utils_1.$findMatchingParent)(node, link_1.$isAutoLinkNode);
+            // We don't want this menu to open for auto links.
+            if (linkParent != null && autoLinkParent == null) {
+                setIsLink(true);
+            }
+            else {
+                setIsLink(false);
+            }
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        return (0, utils_1.mergeRegister)(editor.registerUpdateListener(({ editorState }) => {
+            editorState.read(() => {
+                updateToolbar();
+            });
+        }), editor.registerCommand(lexical_1.SELECTION_CHANGE_COMMAND, (_payload, newEditor) => {
+            updateToolbar();
+            setActiveEditor(newEditor);
+            return false;
+        }, lexical_1.COMMAND_PRIORITY_CRITICAL));
+    }, [editor, updateToolbar]);
+    return React.createElement(FloatingLinkPlugin, { editor: activeEditor, isLink: isLink, setIsLink: setIsLink });
+}
+exports.default = () => {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    return useFloatingLinkEditorToolbar(editor);
+};

package/lib/cjs/components/Editor/plugins/HashtagPlugin.d.ts

@@ -0,0 +1,3 @@
+export default function HashtagsPlugin({ containerSelector }: {
+    containerSelector?: string;
+}): JSX.Element;

package/lib/cjs/components/Editor/plugins/HashtagPlugin.js

@@ -0,0 +1,416 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_core_1 = require("@selfcommunity/react-core");
+const lexical_1 = require("lexical");
+const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
+const utils_1 = require("@lexical/utils");
+const react_dom_1 = require("react-dom");
+const HashtagNode_1 = require("../nodes/HashtagNode");
+const api_services_1 = require("@selfcommunity/api-services");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const styles_1 = require("@mui/material/styles");
+const constants_1 = require("../constants");
+const PUNCTUATION = '\\.,\\+\\*\\?\\$\\@\\|#{}\\(\\)\\^\\-\\[\\]\\\\/!%\'"~=<>_:;';
+const NAME = '\\b[A-Z][^\\s' + PUNCTUATION + ']';
+const DocumentHashtagsRegex = {
+    NAME,
+    PUNCTUATION
+};
+const CapitalizedNameHashtagsRegex = new RegExp('(^|[^#])((?:' + DocumentHashtagsRegex.NAME + '{' + 1 + ',})$)');
+const PUNC = DocumentHashtagsRegex.PUNCTUATION;
+const TRIGGERS = ['#', '\\uff20'].join('');
+// Chars we expect to see in a hashtag (non-space, non-punctuation).
+const VALID_CHARS = '[^' + TRIGGERS + PUNC + '\\s]';
+// Non-standard series of chars. Each series must be preceded and followed by
+// a valid char.
+const VALID_JOINS = '(?:' +
+    '\\.[ |$]|' + // E.g. "r. " in "Mr. Smith"
+    ' |' + // E.g. " " in "Josh Duck"
+    '[' +
+    PUNC +
+    ']|' + // E.g. "-' in "Salier-Hellendag"
+    ')';
+const LENGTH_LIMIT = 75;
+const HashSignHashtagsRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + VALID_JOINS + '){0,' + LENGTH_LIMIT + '})' + ')$');
+// 50 is the longest alias length limit.
+const ALIAS_LENGTH_LIMIT = 50;
+// Regex used to match alias.
+const HashSignHashtagsRegexAliasRegex = new RegExp('(^|\\s|\\()(' + '[' + TRIGGERS + ']' + '((?:' + VALID_CHARS + '){0,' + ALIAS_LENGTH_LIMIT + '})' + ')$');
+// At most, 5 suggestions are shown in the popup.
+const SUGGESTION_LIST_LENGTH_LIMIT = 5;
+const hashtagsCache = new Map();
+function useHashtagLookupService(hashtagString) {
+    const [results, setResults] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const cachedResults = hashtagsCache.get(hashtagString);
+        if (cachedResults === null) {
+            return;
+        }
+        else if (cachedResults !== undefined) {
+            setResults(cachedResults);
+            return;
+        }
+        hashtagsCache.set(hashtagString, null);
+        api_services_1.CategoryService.searchCategory({ search: hashtagString, limit: 5, active: true }).then((res) => {
+            hashtagsCache.set(hashtagString, res.results);
+            setResults(res.results);
+        });
+    }, [hashtagString]);
+    return results;
+}
+function HashtagsTypeaheadItem({ index, isHovered, isSelected, onClick, onMouseEnter, onMouseLeave, result }) {
+    const liRef = (0, react_1.useRef)(null);
+    return (react_1.default.createElement("li", { key: result.id, tabIndex: -1, className: (0, classnames_1.default)('item', { ['selected']: isSelected, ['hovered']: isHovered }), ref: liRef, role: "option", "aria-selected": isSelected, id: 'typeahead-item-' + index, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, onClick: onClick }, result.name));
+}
+function HashtagsTypeahead({ close, editor, resolution, className = '', containerEl = null }) {
+    const divRef = (0, react_1.useRef)(null);
+    const match = resolution.match;
+    const results = useHashtagLookupService(match.matchingString);
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(null);
+    const [hoveredIndex, setHoveredIndex] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        const div = divRef.current;
+        const rootElement = editor.getRootElement();
+        const parentContainerElement = containerEl ? containerEl : rootElement.parentElement;
+        if (results !== null && div !== null && rootElement !== null) {
+            const range = resolution.range;
+            // Re-calc, relative to the parent container, prevent scroll problems
+            const parentRootPos = parentContainerElement.getBoundingClientRect();
+            const { left, right, top, height } = range.getBoundingClientRect();
+            let relativePosTop = top - parentRootPos.top;
+            let relativePosLeft = right - parentRootPos.left;
+            div.style.position = 'absolute';
+            div.style.top = `${relativePosTop + height + 7}px`;
+            div.style.left = `${relativePosLeft - 14}px`;
+            div.style.display = 'block';
+            rootElement.setAttribute('aria-controls', 'hashtags-typeahead');
+            return () => {
+                div.style.display = 'none';
+                rootElement.removeAttribute('aria-controls');
+            };
+        }
+    }, [editor, resolution, results]);
+    const applyCurrentSelected = (0, react_1.useCallback)((index) => {
+        index = index || selectedIndex;
+        if (results === null || index === null) {
+            return;
+        }
+        const selectedEntry = results[index];
+        close();
+        createHashtagNodeFromSearchResult(editor, selectedEntry, match);
+    }, [close, match, editor, results, selectedIndex]);
+    const updateSelectedIndex = (0, react_1.useCallback)((index) => {
+        const rootElem = editor.getRootElement();
+        if (rootElem !== null) {
+            rootElem.setAttribute('aria-activedescendant', 'typeahead-item-' + index);
+            setSelectedIndex(index);
+        }
+    }, [editor]);
+    (0, react_1.useEffect)(() => {
+        return () => {
+            const rootElem = editor.getRootElement();
+            if (rootElem !== null) {
+                rootElem.removeAttribute('aria-activedescendant');
+            }
+        };
+    }, [editor]);
+    (0, react_core_1.useIsomorphicLayoutEffect)(() => {
+        if (results === null) {
+            setSelectedIndex(null);
+        }
+        else if (selectedIndex === null) {
+            updateSelectedIndex(0);
+        }
+    }, [results, selectedIndex, updateSelectedIndex]);
+    (0, react_1.useEffect)(() => {
+        return (0, utils_1.mergeRegister)(editor.registerCommand(lexical_1.KEY_ARROW_DOWN_COMMAND, (payload) => {
+            const event = payload;
+            if (results !== null && selectedIndex !== null) {
+                if (selectedIndex < SUGGESTION_LIST_LENGTH_LIMIT - 1 && selectedIndex !== results.length - 1) {
+                    updateSelectedIndex(selectedIndex + 1);
+                }
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ARROW_UP_COMMAND, (payload) => {
+            const event = payload;
+            if (results !== null && selectedIndex !== null) {
+                if (selectedIndex !== 0) {
+                    updateSelectedIndex(selectedIndex - 1);
+                }
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ESCAPE_COMMAND, (payload) => {
+            const event = payload;
+            if (results === null || selectedIndex === null) {
+                return false;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            close();
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_TAB_COMMAND, (payload) => {
+            const event = payload;
+            if (results === null || selectedIndex === null) {
+                return false;
+            }
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            applyCurrentSelected();
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_LOW), editor.registerCommand(lexical_1.KEY_ENTER_COMMAND, (event) => {
+            if (results === null || selectedIndex === null) {
+                return false;
+            }
+            if (event !== null) {
+                event.preventDefault();
+                event.stopImmediatePropagation();
+            }
+            applyCurrentSelected();
+            return true;
+        }, lexical_1.COMMAND_PRIORITY_LOW));
+    }, [applyCurrentSelected, close, editor, results, selectedIndex, updateSelectedIndex]);
+    if (results === null) {
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: className, "aria-label": "Suggested hashtags", ref: divRef, role: "listbox" },
+        react_1.default.createElement("ul", null, results.slice(0, SUGGESTION_LIST_LENGTH_LIMIT).map((result, i) => (react_1.default.createElement(HashtagsTypeaheadItem, { index: i, isHovered: i === hoveredIndex, isSelected: i === selectedIndex, onClick: () => {
+                applyCurrentSelected(i);
+            }, onMouseEnter: () => {
+                setHoveredIndex(i);
+            }, onMouseLeave: () => {
+                setHoveredIndex(null);
+            }, key: result.id, result: result }))))));
+}
+function checkForCapitalizedNameHashtags(text, minMatchLength) {
+    const match = CapitalizedNameHashtagsRegex.exec(text);
+    if (match !== null) {
+        // The strategy ignores leading whitespace but we need to know it's
+        // length to add it to the leadOffset
+        const maybeLeadingWhitespace = match[1];
+        const matchingString = match[2];
+        if (matchingString != null && matchingString.length >= minMatchLength) {
+            return {
+                leadOffset: match.index + maybeLeadingWhitespace.length,
+                matchingString,
+                replaceableString: matchingString
+            };
+        }
+    }
+    return null;
+}
+function checkForHashSignHashtags(text, minMatchLength) {
+    let match = HashSignHashtagsRegex.exec(text);
+    if (match === null) {
+        match = HashSignHashtagsRegexAliasRegex.exec(text);
+    }
+    if (match !== null) {
+        // The strategy ignores leading whitespace but we need to know it's
+        // length to add it to the leadOffset
+        const maybeLeadingWhitespace = match[1];
+        const matchingString = match[3];
+        if (matchingString.length >= minMatchLength) {
+            return {
+                leadOffset: match.index + maybeLeadingWhitespace.length,
+                matchingString,
+                replaceableString: match[2]
+            };
+        }
+    }
+    return null;
+}
+function getPossibleHashtagMatch(text) {
+    const match = checkForHashSignHashtags(text, 1);
+    return match === null ? checkForCapitalizedNameHashtags(text, 3) : match;
+}
+function getTextUpToAnchor(selection) {
+    const anchor = selection.anchor;
+    if (anchor.type !== 'text') {
+        return null;
+    }
+    const anchorNode = anchor.getNode();
+    // We should not be attempting to extract hashtags out of nodes
+    // that are already being used for other core things. This is
+    // especially true for immutable nodes, which can't be mutated at all.
+    if (!anchorNode.isSimpleText()) {
+        return null;
+    }
+    const anchorOffset = anchor.offset;
+    return anchorNode.getTextContent().slice(0, anchorOffset);
+}
+function tryToPositionRange(match, range) {
+    const domSelection = window.getSelection();
+    if (domSelection === null || !domSelection.isCollapsed) {
+        return false;
+    }
+    const anchorNode = domSelection.anchorNode;
+    const startOffset = match.leadOffset;
+    const endOffset = domSelection.anchorOffset;
+    try {
+        range.setStart(anchorNode, startOffset);
+        range.setEnd(anchorNode, endOffset);
+    }
+    catch (error) {
+        return false;
+    }
+    return true;
+}
+function getHashtagsTextToSearch(editor) {
+    let text = null;
+    editor.getEditorState().read(() => {
+        const selection = (0, lexical_1.$getSelection)();
+        if (!(0, lexical_1.$isRangeSelection)(selection)) {
+            return;
+        }
+        text = getTextUpToAnchor(selection);
+    });
+    return text;
+}
+/**
+ * Walk backwards along user input and forward through entity title to try
+ * and replace more of the user's text with entity.
+ *
+ * E.g. User types "Hello Sarah Smit" and we match "Smit" to "Sarah Smith".
+ * Replacing just the match would give us "Hello Sarah Sarah Smith".
+ * Instead we find the string "Sarah Smit" and replace all of it.
+ */
+function getHashtagOffset(documentText, entryText, offset) {
+    let triggerOffset = offset;
+    for (let ii = triggerOffset; ii <= entryText.length; ii++) {
+        if (documentText.substr(-ii) === entryText.substr(0, ii)) {
+            triggerOffset = ii;
+        }
+    }
+    return triggerOffset;
+}
+/**
+ * From a Typeahead Search Result, replace plain text from search offset and
+ * render a newly created HashtagNode.
+ */
+function createHashtagNodeFromSearchResult(editor, category, match) {
+    editor.update(() => {
+        const selection = (0, lexical_1.$getSelection)();
+        if (!(0, lexical_1.$isRangeSelection)(selection) || !selection.isCollapsed()) {
+            return;
+        }
+        const anchor = selection.anchor;
+        if (anchor.type !== 'text') {
+            return;
+        }
+        const anchorNode = anchor.getNode();
+        // We should not be attempting to extract hashtags out of nodes
+        // that are already being used for other core things. This is
+        // especially true for immutable nodes, which can't be mutated at all.
+        if (!anchorNode.isSimpleText()) {
+            return;
+        }
+        const selectionOffset = anchor.offset;
+        const textContent = anchorNode.getTextContent().slice(0, selectionOffset);
+        const characterOffset = match.replaceableString.length;
+        // Given a known offset for the hashtag match, look backward in the
+        // text to see if there's a longer match to replace.
+        const hashtagOffset = getHashtagOffset(textContent, category.name, characterOffset);
+        const startOffset = selectionOffset - hashtagOffset;
+        if (startOffset < 0) {
+            return;
+        }
+        let nodeToReplace;
+        if (startOffset === 0) {
+            [nodeToReplace] = anchorNode.splitText(selectionOffset);
+        }
+        else {
+            [, nodeToReplace] = anchorNode.splitText(startOffset, selectionOffset);
+        }
+        const hashtagNode = (0, HashtagNode_1.createHashtagNode)(category);
+        nodeToReplace.replace(hashtagNode);
+        hashtagNode.select();
+    });
+}
+function isSelectionOnEntityBoundary(editor, offset) {
+    if (offset !== 0) {
+        return false;
+    }
+    return editor.getEditorState().read(() => {
+        const selection = (0, lexical_1.$getSelection)();
+        if ((0, lexical_1.$isRangeSelection)(selection)) {
+            const anchor = selection.anchor;
+            const anchorNode = anchor.getNode();
+            const prevSibling = anchorNode.getPreviousSibling();
+            // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+            // @ts-ignore
+            return (0, lexical_1.$isTextNode)(prevSibling) && prevSibling.isTextEntity();
+        }
+        return false;
+    });
+}
+const classes = {
+    root: `${constants_1.PREFIX}-hashtag-plugin-root`
+};
+const Root = (0, styles_1.styled)(HashtagsTypeahead, {
+    name: constants_1.PREFIX,
+    slot: 'HashtagPluginRoot'
+})(() => ({}));
+function useHashtags(editor, containerSelector = null) {
+    const [resolution, setResolution] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!editor.hasNodes([HashtagNode_1.HashtagNode])) {
+            throw new Error('HashtagsPlugin: HashtagNode not registered on editor');
+        }
+    }, [editor]);
+    (0, react_1.useEffect)(() => {
+        let activeRange = document.createRange();
+        let previousText = null;
+        const updateListener = ({ prevEditorState }) => {
+            if (prevEditorState.isEmpty()) {
+                return;
+            }
+            const range = activeRange;
+            const text = getHashtagsTextToSearch(editor);
+            if (text === previousText || range === null) {
+                return;
+            }
+            previousText = text;
+            if (text === null) {
+                return;
+            }
+            const match = getPossibleHashtagMatch(text);
+            if (match !== null && !isSelectionOnEntityBoundary(editor, match.leadOffset)) {
+                const isRangePositioned = tryToPositionRange(match, range);
+                if (isRangePositioned !== null) {
+                    setResolution({
+                        match,
+                        range
+                    });
+                    return;
+                }
+            }
+            setResolution(null);
+        };
+        const removeUpdateListener = editor.registerUpdateListener(updateListener);
+        return () => {
+            activeRange = null;
+            removeUpdateListener();
+        };
+    }, [editor]);
+    const closeTypeahead = (0, react_1.useCallback)(() => {
+        setResolution(null);
+    }, []);
+    if (resolution === null || editor === null) {
+        return null;
+    }
+    // Set portal container
+    const portalContainer = containerSelector
+        ? editor.getRootElement().parentElement.closest(containerSelector)
+        : editor.getRootElement().parentElement;
+    return (0, react_dom_1.createPortal)(react_1.default.createElement(Root, { close: closeTypeahead, resolution: resolution, editor: editor, className: classes.root, containerEl: portalContainer }), portalContainer);
+}
+function HashtagsPlugin({ containerSelector = 'body' }) {
+    const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
+    return useHashtags(editor, containerSelector);
+}
+exports.default = HashtagsPlugin;

package/lib/cjs/components/Editor/plugins/ImagePlugin.d.ts

@@ -7,4 +7,3 @@ export interface InsertImagePayload {
 }
 export declare const INSERT_IMAGE_COMMAND: LexicalCommand<InsertImagePayload>;
 export default function ImagePlugin(): JSX.Element;
-//# sourceMappingURL=ImagePlugin.d.ts.map