@yuntijs/ui 1.0.0-beta.9 → 1.0.0-beta.90

package/es/Mentions/hooks.js

@@ -0,0 +1,133 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+/* eslint-disable unicorn/no-useless-undefined */
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useLexicalNodeSelection } from '@lexical/react/useLexicalNodeSelection';
+import { mergeRegister } from '@lexical/utils';
+import { $getNodeByKey, $getSelection, $isDecoratorNode, $isNodeSelection, COMMAND_PRIORITY_LOW, KEY_BACKSPACE_COMMAND, KEY_DELETE_COMMAND } from 'lexical';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { LENGTH_LIMIT, TRIGGERS, VALID_CHARS, VALID_JOINS } from "./constants";
+export var useSelectOrDelete = function useSelectOrDelete(nodeKey, command) {
+  var ref = useRef(null);
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useLexicalNodeSelect = useLexicalNodeSelection(nodeKey),
+    _useLexicalNodeSelect2 = _slicedToArray(_useLexicalNodeSelect, 3),
+    isSelected = _useLexicalNodeSelect2[0],
+    setSelected = _useLexicalNodeSelect2[1],
+    clearSelection = _useLexicalNodeSelect2[2];
+  var handleDelete = useCallback(function (event) {
+    var selection = $getSelection();
+    var nodes = selection === null || selection === void 0 ? void 0 : selection.getNodes();
+    if (!isSelected && (nodes === null || nodes === void 0 ? void 0 : nodes.length) === 1) {
+      editor.dispatchCommand(command, undefined);
+    }
+    if (isSelected && $isNodeSelection(selection)) {
+      event.preventDefault();
+      var node = $getNodeByKey(nodeKey);
+      if ($isDecoratorNode(node)) {
+        if (command) {
+          editor.dispatchCommand(command, undefined);
+        }
+        node.remove();
+        return true;
+      }
+    }
+    return false;
+  }, [isSelected, nodeKey, command, editor]);
+  var handleSelect = useCallback(function (e) {
+    e.stopPropagation();
+    clearSelection();
+    setSelected(true);
+  }, [setSelected, clearSelection]);
+  useEffect(function () {
+    var ele = ref.current;
+    if (ele) ele.addEventListener('click', handleSelect);
+    return function () {
+      if (ele) ele.removeEventListener('click', handleSelect);
+    };
+  }, [handleSelect]);
+  useEffect(function () {
+    return mergeRegister(editor.registerCommand(KEY_DELETE_COMMAND, handleDelete, COMMAND_PRIORITY_LOW), editor.registerCommand(KEY_BACKSPACE_COMMAND, handleDelete, COMMAND_PRIORITY_LOW));
+  }, [editor, clearSelection, handleDelete]);
+  return [ref, isSelected];
+};
+export var useTrigger = function useTrigger() {
+  var triggerRef = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    open = _useState2[0],
+    setOpen = _useState2[1];
+  var handleOpen = useCallback(function (e) {
+    e.stopPropagation();
+    setOpen(function (v) {
+      return !v;
+    });
+  }, []);
+  useEffect(function () {
+    var trigger = triggerRef.current;
+    if (trigger) trigger.addEventListener('click', handleOpen);
+    return function () {
+      if (trigger) trigger.removeEventListener('click', handleOpen);
+    };
+  }, [handleOpen]);
+  return [triggerRef, open, setOpen];
+};
+
+// Regex used to trigger the mention menu.
+function createMentionsRegex(triggers, preTriggerChars, punctuation, allowSpaces) {
+  return new RegExp((preTriggerChars ? "(^|\\s|".concat(preTriggerChars, ")(") : '(^|\\s)(') + TRIGGERS(triggers) + '((?:' + VALID_CHARS(triggers, punctuation) + (allowSpaces ? VALID_JOINS(punctuation) : '') + '){0,' + LENGTH_LIMIT + '})' + ')$');
+}
+export function checkForMentions(text, triggers, preTriggerChars, punctuation, allowSpaces) {
+  var match = createMentionsRegex(triggers, preTriggerChars, punctuation, allowSpaces).exec(text);
+  if (match !== null) {
+    // The strategy ignores leading whitespace, but we need to know its
+    // length to add it to the leadOffset
+    var maybeLeadingWhitespace = match[1];
+    var matchingStringWithTrigger = match[2];
+    var matchingString = match[3];
+    if (matchingStringWithTrigger.length > 0) {
+      return {
+        leadOffset: match.index + maybeLeadingWhitespace.length,
+        matchingString: matchingString,
+        replaceableString: matchingStringWithTrigger
+      };
+    }
+  }
+  return null;
+}
+export var useCheckForMentionMatch = function useCheckForMentionMatch(triggers, _ref) {
+  var punctuation = _ref.punctuation,
+    preTriggerChars = _ref.preTriggerChars,
+    allowSpaces = _ref.allowSpaces;
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    trigger = _useState4[0],
+    setTrigger = _useState4[1];
+  var checkForMentionMatch = useCallback(function (text) {
+    // Don't show the menu if the next character is a word character
+    // const selectionInfo = $getSelectionInfo(triggers, punctuation);
+    // if (selectionInfo?.isTextNode && selectionInfo.wordCharAfterCursor) {
+    //   return null;
+    // }
+
+    var queryMatch = checkForMentions(text, triggers, preTriggerChars, punctuation, allowSpaces);
+    if (queryMatch) {
+      var replaceableString = queryMatch.replaceableString,
+        matchingString = queryMatch.matchingString;
+      var index = replaceableString.lastIndexOf(matchingString);
+      var _trigger = index === -1 ? replaceableString : replaceableString.slice(0, Math.max(0, index)) + replaceableString.slice(Math.max(0, index + matchingString.length));
+      setTrigger(_trigger || null);
+      if (queryMatch.replaceableString) {
+        return queryMatch;
+      }
+    } else {
+      setTrigger(null);
+    }
+    return null;
+  }, [preTriggerChars, allowSpaces, punctuation, triggers]);
+  return {
+    trigger: trigger,
+    checkForMentionMatch: checkForMentionMatch
+  };
+};

package/es/Mentions/index.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { type MentionPickerPluginProps } from './plugins/mention-picker';
+import type { AutoSize } from './types';
+export interface MentionsProps extends MentionPickerPluginProps {
+    className?: string;
+    classNames?: {
+        wrapper?: string;
+        menuOverlay?: string;
+    };
+    wrapperClassname?: string;
+    placeholder?: string;
+    style?: React.CSSProperties;
+    value?: string;
+    defaultValue?: string;
+    readOnly?: boolean;
+    disabled?: boolean;
+    onChange?: (text: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+    variant?: 'outlined' | 'filled' | 'borderless';
+    autoSize?: AutoSize;
+}
+export declare const Mentions: React.FC<MentionsProps>;

package/es/Mentions/index.js

@@ -0,0 +1,157 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { LexicalComposer } from '@lexical/react/LexicalComposer';
+import { ContentEditable } from '@lexical/react/LexicalContentEditable';
+import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
+import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
+import { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { ConfigProvider } from 'antd';
+import { $getRoot, TextNode } from 'lexical';
+import React, { useMemo } from 'react';
+import { isBrowser } from "../utils/tools";
+import { OnBlurBlockPlugin } from "./plugins/OnBlurBlockPlugin";
+import { CustomTextNode } from "./plugins/custom-text/node";
+import { EditablePlugin } from "./plugins/editable";
+import { MentionNode, MentionNodePlugin, MentionNodePluginReplacement } from "./plugins/mention-node";
+import { MentionPickerPlugin } from "./plugins/mention-picker";
+import { MentionsConfigProvider } from "./provider";
+import { useStyles } from "./style";
+import { textToEditorState } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var Mentions = function Mentions(_ref) {
+  var className = _ref.className,
+    classNames = _ref.classNames,
+    placeholder = _ref.placeholder,
+    style = _ref.style,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    customDisabled = _ref.disabled,
+    onChange = _ref.onChange,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'outlined' : _ref$variant,
+    _ref$options = _ref.options,
+    options = _ref$options === void 0 ? [] : _ref$options,
+    autoSize = _ref.autoSize,
+    _ref$triggers = _ref.triggers,
+    triggers = _ref$triggers === void 0 ? ['@'] : _ref$triggers,
+    allowSpaces = _ref.allowSpaces,
+    punctuation = _ref.punctuation,
+    preTriggerChars = _ref.preTriggerChars,
+    onSelect = _ref.onSelect;
+  var _ConfigProvider$useCo = ConfigProvider.useConfig(),
+    componentDisabled = _ConfigProvider$useCo.componentDisabled;
+  var _useStyles = useStyles({
+      autoSize: autoSize
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var disabled = useMemo(function () {
+    return customDisabled !== null && customDisabled !== void 0 ? customDisabled : componentDisabled;
+  }, [componentDisabled, customDisabled]);
+  var editable = useMemo(function () {
+    return !readOnly && !disabled;
+  }, [disabled, readOnly]);
+  var initialConfig = useMemo(function () {
+    return {
+      namespace: 'mentions',
+      nodes: [CustomTextNode, {
+        replace: TextNode,
+        with: function _with(node) {
+          return new CustomTextNode(node.__text);
+        }
+      }, MentionNode],
+      editorState: textToEditorState(value || defaultValue || ''),
+      onError: function onError(error) {
+        throw error;
+      }
+    };
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  var handleEditorChange = function handleEditorChange(editorState) {
+    var text = editorState.read(function () {
+      return $getRoot().getTextContent();
+    });
+    onChange === null || onChange === void 0 || onChange(text.replaceAll('\n\n', '\n'));
+  };
+
+  // @Todo: set value when value change
+  // useEffect(() => {
+  //   //
+  // }, [value])
+
+  var optionsMap = useMemo(function () {
+    var buildMap = function buildMap(_options, parentIcon) {
+      return _options.reduce(function (acc, option) {
+        acc[option.value] = option;
+        if (!acc[option.value].icon) {
+          acc[option.value].icon = parentIcon;
+        }
+        if (option.children && option.children.length > 0) {
+          var childrenMap = buildMap(option.children, option.icon);
+          Object.assign(acc, childrenMap);
+        }
+        return acc;
+      }, {});
+    };
+    return buildMap(options);
+  }, [options]);
+  if (!isBrowser) {
+    return /*#__PURE__*/_jsxs("div", {
+      className: cx(styles.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
+      children: [/*#__PURE__*/_jsx("div", {
+        className: cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.root, true), styles.filled, variant === 'filled'), styles.borderless, variant === 'borderless'), styles.disabled, disabled), className),
+        style: style || {}
+      }), /*#__PURE__*/_jsx("div", {
+        className: styles.placeholder,
+        children: placeholder || "\u8F93\u5165 ".concat(triggers.join(' 或 '), " \u63D2\u5165\u5F15\u7528")
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(LexicalComposer, {
+    initialConfig: _objectSpread(_objectSpread({}, initialConfig), {}, {
+      editable: editable
+    }),
+    children: /*#__PURE__*/_jsx(MentionsConfigProvider, {
+      value: {
+        optionsMap: optionsMap
+      },
+      children: /*#__PURE__*/_jsxs("div", {
+        className: cx(styles.wrapper, classNames === null || classNames === void 0 ? void 0 : classNames.wrapper),
+        children: [/*#__PURE__*/_jsx(RichTextPlugin, {
+          ErrorBoundary: LexicalErrorBoundary,
+          contentEditable: /*#__PURE__*/_jsx(ContentEditable, {
+            className: cx(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles.root, true), styles.filled, variant === 'filled'), styles.borderless, variant === 'borderless'), styles.disabled, disabled), className),
+            style: style || {}
+          }),
+          placeholder: /*#__PURE__*/_jsx("div", {
+            className: styles.placeholder,
+            children: placeholder || "\u8F93\u5165 ".concat(triggers.join(' 或 '), " \u63D2\u5165\u5F15\u7528")
+          })
+        }), editable && /*#__PURE__*/_jsx(MentionPickerPlugin, {
+          allowSpaces: allowSpaces,
+          onSelect: onSelect,
+          options: options,
+          overlayClassName: classNames === null || classNames === void 0 ? void 0 : classNames.menuOverlay,
+          preTriggerChars: preTriggerChars,
+          punctuation: punctuation,
+          triggers: triggers
+        }), /*#__PURE__*/_jsx(MentionNodePlugin, {}), /*#__PURE__*/_jsx(MentionNodePluginReplacement, {}), /*#__PURE__*/_jsx(HistoryPlugin, {}), /*#__PURE__*/_jsx(OnChangePlugin, {
+          onChange: handleEditorChange
+        }), /*#__PURE__*/_jsx(OnBlurBlockPlugin, {
+          onBlur: onBlur,
+          onFocus: onFocus
+        }), /*#__PURE__*/_jsx(EditablePlugin, {
+          editable: editable
+        })]
+      })
+    })
+  });
+};

package/es/Mentions/plugins/OnBlurBlockPlugin.d.ts

@@ -0,0 +1,7 @@
+import type { FC } from 'react';
+type OnBlurBlockPluginProps = {
+    onBlur?: () => void;
+    onFocus?: () => void;
+};
+export declare const OnBlurBlockPlugin: FC<OnBlurBlockPluginProps>;
+export {};

package/es/Mentions/plugins/OnBlurBlockPlugin.js

@@ -0,0 +1,35 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { BLUR_COMMAND, COMMAND_PRIORITY_EDITOR, FOCUS_COMMAND, KEY_ESCAPE_COMMAND } from 'lexical';
+import { useEffect, useRef } from 'react';
+import { CLEAR_HIDE_MENU_TIMEOUT } from "./mention-node";
+export var OnBlurBlockPlugin = function OnBlurBlockPlugin(_ref) {
+  var onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var ref = useRef(null);
+  useEffect(function () {
+    return mergeRegister(editor.registerCommand(CLEAR_HIDE_MENU_TIMEOUT, function () {
+      if (ref.current) {
+        clearTimeout(ref.current);
+        ref.current = null;
+      }
+      return true;
+    }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(BLUR_COMMAND, function (_payload, _editor) {
+      ref.current = setTimeout(function () {
+        editor.dispatchCommand(KEY_ESCAPE_COMMAND, new KeyboardEvent('keydown', {
+          key: 'Escape'
+        }));
+      }, 200);
+      if (onBlur) onBlur();
+      return true;
+    }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(FOCUS_COMMAND, function () {
+      if (onFocus) onFocus();
+      return true;
+    }, COMMAND_PRIORITY_EDITOR));
+  }, [editor, onBlur, onFocus]);
+  return null;
+};

package/es/Mentions/plugins/custom-text/node.d.ts

@@ -0,0 +1,11 @@
+import type { EditorConfig, SerializedTextNode } from 'lexical';
+import { TextNode } from 'lexical';
+export declare class CustomTextNode extends TextNode {
+    static getType(): string;
+    static clone(node: CustomTextNode): CustomTextNode;
+    createDOM(config: EditorConfig): HTMLElement;
+    static importJSON(serializedNode: SerializedTextNode): TextNode;
+    exportJSON(): SerializedTextNode;
+    isSimpleText(): boolean;
+}
+export declare function $createCustomTextNode(text: string): CustomTextNode;

package/es/Mentions/plugins/custom-text/node.js

@@ -0,0 +1,72 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _get from "@babel/runtime/helpers/esm/get";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+import { $createTextNode, TextNode } from 'lexical';
+export var CustomTextNode = /*#__PURE__*/function (_TextNode) {
+  _inherits(CustomTextNode, _TextNode);
+  var _super = _createSuper(CustomTextNode);
+  function CustomTextNode() {
+    _classCallCheck(this, CustomTextNode);
+    return _super.apply(this, arguments);
+  }
+  _createClass(CustomTextNode, [{
+    key: "createDOM",
+    value:
+    // constructor(text: string, key?: NodeKey) {
+    //   super(text, key)
+    // }
+
+    function createDOM(config) {
+      var dom = _get(_getPrototypeOf(CustomTextNode.prototype), "createDOM", this).call(this, config);
+      dom.classList.add('align-middle');
+      return dom;
+    }
+  }, {
+    key: "exportJSON",
+    value: function exportJSON() {
+      return {
+        detail: this.getDetail(),
+        format: this.getFormat(),
+        mode: this.getMode(),
+        style: this.getStyle(),
+        text: this.getTextContent(),
+        type: 'custom-text',
+        version: 1
+      };
+    }
+  }, {
+    key: "isSimpleText",
+    value: function isSimpleText() {
+      return (this.__type === 'text' || this.__type === 'custom-text') && this.__mode === 0;
+    }
+  }], [{
+    key: "getType",
+    value: function getType() {
+      return 'custom-text';
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new CustomTextNode(node.__text, node.__key);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      var node = $createTextNode(serializedNode.text);
+      node.setFormat(serializedNode.format);
+      node.setDetail(serializedNode.detail);
+      node.setMode(serializedNode.mode);
+      node.setStyle(serializedNode.style);
+      return node;
+    }
+  }]);
+  return CustomTextNode;
+}(TextNode);
+export function $createCustomTextNode(text) {
+  return new CustomTextNode(text);
+}

package/es/Mentions/plugins/editable.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const EditablePlugin: React.FC<{
+    editable: boolean;
+}>;

package/es/Mentions/plugins/editable.js

@@ -0,0 +1,13 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { useEffect } from 'react';
+export var EditablePlugin = function EditablePlugin(_ref) {
+  var editable = _ref.editable;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  useEffect(function () {
+    editor.setEditable(editable);
+  }, [editable, editor]);
+  return null;
+};

package/es/Mentions/plugins/mention-node/component.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface MentionNodeComponentProps {
+    nodeKey: string;
+    variable: string;
+}
+export declare const MentionNodeComponent: React.FC<MentionNodeComponentProps>;

package/es/Mentions/plugins/mention-node/component.js

@@ -0,0 +1,64 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { Icon } from '@lobehub/ui';
+import { Flex, Tooltip } from 'antd';
+import { CircleAlert } from 'lucide-react';
+import React, { memo, useEffect } from 'react';
+import { useOptionsMap } from "../../provider";
+import { useSelectOrDelete } from "../../hooks";
+import { MentionNode } from "./node";
+import { useStyles } from "./style";
+import { DELETE_MENTION_COMMAND } from "./utils";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var MentionNodeComponent = /*#__PURE__*/memo(function (_ref) {
+  var nodeKey = _ref.nodeKey,
+    variable = _ref.variable;
+  var optionsMap = useOptionsMap();
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var _useSelectOrDelete = useSelectOrDelete(nodeKey, DELETE_MENTION_COMMAND),
+    _useSelectOrDelete2 = _slicedToArray(_useSelectOrDelete, 2),
+    ref = _useSelectOrDelete2[0],
+    isSelected = _useSelectOrDelete2[1];
+  var option = optionsMap === null || optionsMap === void 0 ? void 0 : optionsMap[variable];
+  var _useStyles = useStyles({
+      isSelected: isSelected,
+      isError: !option || !!option.error
+    }),
+    styles = _useStyles.styles;
+  useEffect(function () {
+    if (!editor.hasNodes([MentionNode])) {
+      throw new Error('MentionsNodePlugin: MentionNode not registered on editor');
+    }
+  }, [editor]);
+  var Item = /*#__PURE__*/_jsx(Flex, {
+    className: styles.root,
+    ref: ref,
+    children: /*#__PURE__*/_jsxs(Flex, {
+      align: "center",
+      gap: 2,
+      children: [(!option || option.error) && /*#__PURE__*/_jsx(Icon, {
+        className: styles.error,
+        icon: CircleAlert
+      }), (option === null || option === void 0 ? void 0 : option.icon) && /*#__PURE__*/_jsx(Flex, {
+        children: option.icon
+      }), /*#__PURE__*/_jsx(Flex, {
+        className: styles.text,
+        gap: 2,
+        title: (option === null || option === void 0 ? void 0 : option.label) || variable,
+        children: /*#__PURE__*/_jsx("span", {
+          children: (option === null || option === void 0 ? void 0 : option.selectedLabel) || (option === null || option === void 0 ? void 0 : option.label) || variable
+        })
+      })]
+    })
+  });
+  if (option !== null && option !== void 0 && option.error) {
+    return /*#__PURE__*/_jsx(Tooltip, {
+      title: option === null || option === void 0 ? void 0 : option.error,
+      children: Item
+    });
+  }
+  return Item;
+});

package/es/Mentions/plugins/mention-node/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export * from './node';
+export * from './replacement';
+export * from './utils';
+export interface MentionNodePluginProps {
+    onInsert?: () => void;
+    onDelete?: () => void;
+}
+export declare const MentionNodePlugin: React.FC<MentionNodePluginProps>;

package/es/Mentions/plugins/mention-node/index.js

@@ -0,0 +1,32 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { $insertNodes, COMMAND_PRIORITY_EDITOR } from 'lexical';
+import { memo, useEffect } from 'react';
+import { $createMentionNode, MentionNode } from "./node";
+import { CLEAR_HIDE_MENU_TIMEOUT, DELETE_MENTION_COMMAND, INSERT_MENTION_COMMAND } from "./utils";
+export * from "./node";
+export * from "./replacement";
+export * from "./utils";
+export var MentionNodePlugin = /*#__PURE__*/memo(function (_ref) {
+  var onInsert = _ref.onInsert,
+    onDelete = _ref.onDelete;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  useEffect(function () {
+    if (!editor.hasNodes([MentionNode])) throw new Error('MentionsNodePlugin: MentionNode not registered on editor');
+    return mergeRegister(editor.registerCommand(INSERT_MENTION_COMMAND, function (variable) {
+      editor.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, null);
+      var mentionNode = $createMentionNode(variable);
+      $insertNodes([mentionNode]);
+      if (onInsert) onInsert();
+      return true;
+    }, COMMAND_PRIORITY_EDITOR), editor.registerCommand(DELETE_MENTION_COMMAND, function () {
+      if (onDelete) onDelete();
+      return true;
+    }, COMMAND_PRIORITY_EDITOR));
+  }, [editor, onInsert, onDelete]);
+  return null;
+});
+MentionNodePlugin.displayName = 'MentionNodePlugin';

package/es/Mentions/plugins/mention-node/node.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+import type { LexicalNode, NodeKey, SerializedLexicalNode } from 'lexical';
+import { DecoratorNode } from 'lexical';
+export type SerializedNode = SerializedLexicalNode & {
+    variable: string;
+};
+export declare class MentionNode extends DecoratorNode<JSX.Element> {
+    __variable: string;
+    static getType(): string;
+    static clone(node: MentionNode): MentionNode;
+    isInline(): boolean;
+    constructor(variable: string, key?: NodeKey);
+    createDOM(): HTMLElement;
+    updateDOM(): false;
+    decorate(): JSX.Element;
+    static importJSON(serializedNode: SerializedNode): MentionNode;
+    exportJSON(): SerializedNode;
+    getVariable(): string;
+    getTextContent(): string;
+}
+export declare function $createMentionNode(variable: string): MentionNode;
+export declare function $isMentionNode(node: MentionNode | LexicalNode | null | undefined): node is MentionNode;