@yuntijs/ui 1.0.0-beta.31 → 1.0.0-beta.33

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,19 @@
+import React from 'react';
+import { type MentionPickerPluginProps } from './plugins/mention-picker';
+import type { AutoSize } from './types';
+export interface MentionsProps extends MentionPickerPluginProps {
+    className?: 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,120 @@
+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 { OnChangePlugin } from '@lexical/react/LexicalOnChangePlugin';
+import { RichTextPlugin } from '@lexical/react/LexicalRichTextPlugin';
+import { $getRoot, TextNode } from 'lexical';
+import React, { useMemo } from 'react';
+import { CustomTextNode } from "./plugins/custom-text/node";
+import { MentionNode, MentionNodePlugin, MentionNodePluginReplacement } from "./plugins/mention-node";
+import { MentionPickerPlugin } from "./plugins/mention-picker";
+import OnBlurBlock from "./plugins/on-blur-or-focus-block";
+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 _cx;
+  var className = _ref.className,
+    wrapperClassname = _ref.wrapperClassname,
+    placeholder = _ref.placeholder,
+    style = _ref.style,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _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 _useStyles = useStyles({
+      autoSize: autoSize
+    }),
+    styles = _useStyles.styles,
+    cx = _useStyles.cx;
+  var editable = !readOnly && !disabled;
+  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 () {
+    return options.reduce(function (acc, option) {
+      acc[option.value] = option;
+      return acc;
+    }, {});
+  }, [options]);
+  return /*#__PURE__*/_jsx(LexicalComposer, {
+    initialConfig: _objectSpread(_objectSpread({}, initialConfig), {}, {
+      editable: editable
+    }),
+    children: /*#__PURE__*/_jsxs("div", {
+      className: cx(styles.wrapper, wrapperClassname),
+      children: [/*#__PURE__*/_jsx(RichTextPlugin, {
+        ErrorBoundary: LexicalErrorBoundary,
+        contentEditable: /*#__PURE__*/_jsx(ContentEditable, {
+          className: cx((_cx = {}, _defineProperty(_cx, styles.root, true), _defineProperty(_cx, styles.filled, variant === 'filled'), _defineProperty(_cx, styles.borderless, variant === 'borderless'), _defineProperty(_cx, styles.disabled, disabled), _cx), className),
+          style: style || {}
+        }),
+        placeholder: /*#__PURE__*/_jsx("div", {
+          className: styles.placeholder,
+          children: placeholder || "\u8F93\u5165 ".concat(triggers.join(' 或 '), " \u63D2\u5165\u5F15\u7528")
+        })
+      }), /*#__PURE__*/_jsx(MentionPickerPlugin, {
+        allowSpaces: allowSpaces,
+        onSelect: onSelect,
+        options: options,
+        preTriggerChars: preTriggerChars,
+        punctuation: punctuation,
+        triggers: triggers
+      }), /*#__PURE__*/_jsx(MentionNodePlugin, {
+        optionsMap: optionsMap
+      }), /*#__PURE__*/_jsx(MentionNodePluginReplacement, {
+        optionsMap: optionsMap
+      }), /*#__PURE__*/_jsx(OnChangePlugin, {
+        onChange: handleEditorChange
+      }), /*#__PURE__*/_jsx(OnBlurBlock, {
+        onBlur: onBlur,
+        onFocus: onFocus
+      })]
+    })
+  });
+};

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/mention-node/component.d.ts

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

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

@@ -0,0 +1,72 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { Icon } from '@lobehub/ui';
+import { Flex, Tooltip } from 'antd';
+import { COMMAND_PRIORITY_EDITOR } from 'lexical';
+import { CircleAlert } from 'lucide-react';
+import React, { memo, useEffect, useState } from 'react';
+import { useSelectOrDelete } from "../../hooks";
+import { MentionNode } from "./node";
+import { useStyles } from "./style";
+import { DELETE_MENTION_COMMAND, UPDATE_MENTIONS_OPTIONS } 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,
+    _ref$optionsMap = _ref.optionsMap,
+    optionsMap = _ref$optionsMap === void 0 ? {} : _ref$optionsMap;
+  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 _useState = useState(optionsMap),
+    _useState2 = _slicedToArray(_useState, 2),
+    localMentionsOptionsMap = _useState2[0],
+    setLocalMentionsOptionsMap = _useState2[1];
+  var option = localMentionsOptionsMap === null || localMentionsOptionsMap === void 0 ? void 0 : localMentionsOptionsMap[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');
+    return mergeRegister(editor.registerCommand(UPDATE_MENTIONS_OPTIONS, function (newOptionsMap) {
+      setLocalMentionsOptionsMap(newOptionsMap);
+      return true;
+    }, COMMAND_PRIORITY_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.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,11 @@
+import React from 'react';
+import { MentionsOptionsMap } from '../../types';
+export * from './node';
+export * from './replacement';
+export * from './utils';
+export interface MentionNodePluginProps {
+    onInsert?: () => void;
+    onDelete?: () => void;
+    optionsMap: MentionsOptionsMap;
+}
+export declare const MentionNodePlugin: React.FC<MentionNodePluginProps>;

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

@@ -0,0 +1,39 @@
+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, UPDATE_MENTIONS_OPTIONS } from "./utils";
+export * from "./node";
+export * from "./replacement";
+export * from "./utils";
+export var MentionNodePlugin = /*#__PURE__*/memo(function (_ref) {
+  var optionsMap = _ref.optionsMap,
+    onInsert = _ref.onInsert,
+    onDelete = _ref.onDelete;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  useEffect(function () {
+    editor.update(function () {
+      editor.dispatchCommand(UPDATE_MENTIONS_OPTIONS, optionsMap);
+    });
+  }, [editor, optionsMap]);
+  useEffect(function () {
+    if (!editor.hasNodes([MentionNode])) throw new Error('MentionsNodePlugin: MentionNode not registered on editor');
+    return mergeRegister(editor.registerCommand(INSERT_MENTION_COMMAND, function (variable) {
+      // eslint-disable-next-line unicorn/no-useless-undefined
+      editor.dispatchCommand(CLEAR_HIDE_MENU_TIMEOUT, undefined);
+      var mentionNode = $createMentionNode(variable, optionsMap);
+      $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, optionsMap]);
+  return null;
+});
+MentionNodePlugin.displayName = 'MentionNodePlugin';

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

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

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

@@ -0,0 +1,110 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+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 { DecoratorNode } from 'lexical';
+import React from 'react';
+import { MentionNodeComponent } from "./component";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var MentionNode = /*#__PURE__*/function (_DecoratorNode) {
+  _inherits(MentionNode, _DecoratorNode);
+  var _super = _createSuper(MentionNode);
+  function MentionNode(variable, optionsMap, key) {
+    var _this;
+    _classCallCheck(this, MentionNode);
+    _this = _super.call(this, key);
+    _defineProperty(_assertThisInitialized(_this), "__variable", void 0);
+    _defineProperty(_assertThisInitialized(_this), "__optionsMap", void 0);
+    _this.__variable = variable;
+    _this.__optionsMap = optionsMap;
+    return _this;
+  }
+  _createClass(MentionNode, [{
+    key: "isInline",
+    value: function isInline() {
+      return true;
+    }
+  }, {
+    key: "createDOM",
+    value: function createDOM() {
+      var div = document.createElement('div');
+      div.style.display = 'inline-flex';
+      div.style.alignItems = 'center';
+      div.style.verticalAlign = 'middle';
+      // div.style['align-items'] = 'center';
+      // div.style['vertical-align'] = 'middle';
+
+      return div;
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM() {
+      return false;
+    }
+  }, {
+    key: "decorate",
+    value: function decorate() {
+      return /*#__PURE__*/_jsx(MentionNodeComponent, {
+        nodeKey: this.getKey(),
+        optionsMap: this.__optionsMap,
+        variable: this.__variable
+      });
+    }
+  }, {
+    key: "exportJSON",
+    value: function exportJSON() {
+      return {
+        type: 'mention-node',
+        version: 1,
+        variable: this.getVariable(),
+        optionsMap: this.getOptionsMap()
+      };
+    }
+  }, {
+    key: "getVariable",
+    value: function getVariable() {
+      var self = this.getLatest();
+      return self.__variable;
+    }
+  }, {
+    key: "getOptionsMap",
+    value: function getOptionsMap() {
+      var self = this.getLatest();
+      return self.__optionsMap;
+    }
+  }, {
+    key: "getTextContent",
+    value: function getTextContent() {
+      return "{{".concat(this.getVariable(), "}}");
+    }
+  }], [{
+    key: "getType",
+    value: function getType() {
+      return 'mention-node';
+    }
+  }, {
+    key: "clone",
+    value: function clone(node) {
+      return new MentionNode(node.__variable, node.__optionsMap);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      var node = $createMentionNode(serializedNode.variable, serializedNode.optionsMap);
+      return node;
+    }
+  }]);
+  return MentionNode;
+}(DecoratorNode);
+export function $createMentionNode(variable, workflowNodesMap) {
+  return new MentionNode(variable, workflowNodesMap);
+}
+export function $isMentionNode(node) {
+  return node instanceof MentionNode;
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import { MentionsOptionsMap } from '../../types';
+export interface MentionNodePluginReplacementProps {
+    optionsMap: MentionsOptionsMap;
+    onInsert?: () => void;
+}
+export declare const MentionNodePluginReplacement: React.FC<MentionNodePluginReplacementProps>;