@yuntijs/ui 1.0.0-beta.8 → 1.0.0-beta.80

package/es/Mentions/index.js

@@ -0,0 +1,136 @@
+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 { $getRoot, TextNode } from 'lexical';
+import React, { useMemo } from 'react';
+import { isBrowser } from "../utils/tools";
+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 { 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,
+    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]);
+  if (!isBrowser) {
+    return /*#__PURE__*/_jsxs("div", {
+      className: cx(styles.wrapper, wrapperClassname),
+      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, wrapperClassname),
+        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")
+          })
+        }), /*#__PURE__*/_jsx(MentionPickerPlugin, {
+          allowSpaces: allowSpaces,
+          onSelect: onSelect,
+          options: options,
+          preTriggerChars: preTriggerChars,
+          punctuation: punctuation,
+          triggers: triggers
+        }), /*#__PURE__*/_jsx(MentionNodePlugin, {}), /*#__PURE__*/_jsx(MentionNodePluginReplacement, {}), /*#__PURE__*/_jsx(HistoryPlugin, {}), /*#__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,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.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,23 @@
+/// <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;
+};
+export declare class MentionNode extends DecoratorNode<JSX.Element> {
+    __variable: string;
+    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;
+    getTextContent(): string;
+}
+export declare function $createMentionNode(variable: string): MentionNode;
+export declare function $isMentionNode(node: MentionNode | LexicalNode | null | undefined): node is MentionNode;

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

@@ -0,0 +1,97 @@
+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);
+    _this.__variable = variable;
+    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';
+      return div;
+    }
+  }, {
+    key: "updateDOM",
+    value: function updateDOM() {
+      return false;
+    }
+  }, {
+    key: "decorate",
+    value: function decorate() {
+      return /*#__PURE__*/_jsx(MentionNodeComponent, {
+        nodeKey: this.getKey(),
+        variable: this.__variable
+      });
+    }
+  }, {
+    key: "exportJSON",
+    value: function exportJSON() {
+      return {
+        type: 'mention-node',
+        version: 1,
+        variable: this.getVariable()
+      };
+    }
+  }, {
+    key: "getVariable",
+    value: function getVariable() {
+      var self = this.getLatest();
+      return self.__variable;
+    }
+  }, {
+    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);
+    }
+  }, {
+    key: "importJSON",
+    value: function importJSON(serializedNode) {
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      var node = $createMentionNode(serializedNode.variable);
+      return node;
+    }
+  }]);
+  return MentionNode;
+}(DecoratorNode);
+export function $createMentionNode(variable) {
+  return new MentionNode(variable);
+}
+export function $isMentionNode(node) {
+  return node instanceof MentionNode;
+}

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

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

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

@@ -0,0 +1,42 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { mergeRegister } from '@lexical/utils';
+import { $applyNodeReplacement } from 'lexical';
+import { memo, useCallback, useEffect } from 'react';
+import { decoratorTransform } from "../../utils";
+import { CustomTextNode } from "../custom-text/node";
+import { $createMentionNode, MentionNode } from "./node";
+import { MENTION_REGEX } from "./utils";
+export var MentionNodePluginReplacement = /*#__PURE__*/memo(function (_ref) {
+  var onInsert = _ref.onInsert;
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  useEffect(function () {
+    if (!editor.hasNodes([MentionNode])) throw new Error('MentionNodePlugin: MentionNode not registered on editor');
+  }, [editor]);
+  var createMentionNode = useCallback(function (textNode) {
+    if (onInsert) onInsert();
+    var nodePathString = textNode.getTextContent().slice(2, -2);
+    return $applyNodeReplacement($createMentionNode(nodePathString));
+  }, [onInsert]);
+  var getMatch = useCallback(function (text) {
+    var matchArr = MENTION_REGEX.exec(text);
+    if (matchArr === null) return null;
+    var startOffset = matchArr.index;
+    var endOffset = startOffset + matchArr[0].length;
+    return {
+      end: endOffset,
+      start: startOffset
+    };
+  }, []);
+  var transformListener = useCallback(function (textNode) {
+    return decoratorTransform(textNode, getMatch, createMentionNode);
+  }, [createMentionNode, getMatch]);
+  useEffect(function () {
+    MENTION_REGEX.lastIndex = 0;
+    return mergeRegister(editor.registerNodeTransform(CustomTextNode, transformListener));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return null;
+});

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

@@ -0,0 +1,8 @@
+export declare const useStyles: (props?: {
+    isSelected?: boolean | undefined;
+    isError?: boolean | undefined;
+} | undefined) => import("antd-style").ReturnStyles<{
+    root: import("antd-style").SerializedStyles;
+    text: import("antd-style").SerializedStyles;
+    error: import("antd-style").SerializedStyles;
+}>;

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

@@ -0,0 +1,47 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+export var useStyles = createStyles(function (_ref, _ref2) {
+  var css = _ref.css,
+    token = _ref.token,
+    prefixCls = _ref.prefixCls;
+  var isSelected = _ref2.isSelected,
+    isError = _ref2.isError;
+  var getColors = function getColors() {
+    if (isError) {
+      if (isSelected) {
+        return {
+          background: token.colorErrorBgActive,
+          border: token.colorErrorBorderHover,
+          color: token.colorErrorTextActive
+        };
+      }
+      return {
+        background: token.colorErrorBg,
+        border: token.colorErrorBorder,
+        color: token.colorErrorText
+      };
+    }
+    if (isSelected) {
+      return {
+        background: token.colorInfoBgHover,
+        border: token.colorInfoBorder,
+        color: token.colorInfoText
+      };
+    }
+    return {
+      background: token.colorFillTertiary,
+      border: 'transparent',
+      color: token.colorInfoText
+    };
+  };
+  var _getColors = getColors(),
+    background = _getColors.background,
+    border = _getColors.border,
+    color = _getColors.color;
+  return {
+    root: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        user-select: none;\n\n        margin: 1px 2px;\n        padding: 0 4px;\n\n        font-family: ", ";\n        color: ", ";\n\n        background-color: ", ";\n        border: 1px solid ", ";\n        border-radius: ", "px;\n      "])), token.fontFamilyCode, color, background, border, token.borderRadius),
+    text: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        overflow: hidden;\n        display: inline-block;\n\n        max-width: 200px;\n\n        color: ", ";\n        text-overflow: ellipsis;\n        white-space: nowrap;\n      "])), token.colorTextSecondary),
+    error: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        color: ", ";\n      "])), token.colorErrorText)
+  };
+});

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

@@ -0,0 +1,4 @@
+export declare const INSERT_MENTION_COMMAND: import("lexical").LexicalCommand<unknown>;
+export declare const DELETE_MENTION_COMMAND: import("lexical").LexicalCommand<unknown>;
+export declare const CLEAR_HIDE_MENU_TIMEOUT: import("lexical").LexicalCommand<unknown>;
+export declare const MENTION_REGEX: RegExp;

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

@@ -0,0 +1,5 @@
+import { createCommand } from 'lexical';
+export var INSERT_MENTION_COMMAND = createCommand('INSERT_MENTION_COMMAND');
+export var DELETE_MENTION_COMMAND = createCommand('DELETE_MENTION_COMMAND');
+export var CLEAR_HIDE_MENU_TIMEOUT = createCommand('CLEAR_HIDE_MENU_TIMEOUT');
+export var MENTION_REGEX = /{{([\w-]{1,50}(\.[_a-z]\w{0,29}){1,10})}}/gi;

package/es/Mentions/plugins/mention-picker/hooks.d.ts

@@ -0,0 +1,5 @@
+import type { MentionOption } from '../../types';
+import { MentionMenuOption } from './utils';
+export declare const useOptions: (allOptions: MentionOption[], queryString: string | null) => {
+    options: MentionMenuOption[];
+};

package/es/Mentions/plugins/mention-picker/hooks.js

@@ -0,0 +1,39 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
+import { escapeRegExp } from 'lodash-es';
+import { useMemo } from 'react';
+import { INSERT_MENTION_COMMAND } from "../mention-node";
+import { MentionMenuOption } from "./utils";
+export var useOptions = function useOptions(allOptions, queryString) {
+  var _useLexicalComposerCo = useLexicalComposerContext(),
+    _useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
+    editor = _useLexicalComposerCo2[0];
+  var options = useMemo(function () {
+    var menuOptions = allOptions.map(function (o) {
+      return new MentionMenuOption(o.value, o.label, {
+        icon: o.icon,
+        onSelect: function onSelect() {
+          editor.dispatchCommand(INSERT_MENTION_COMMAND, o.value);
+        },
+        disabled: o.disabled,
+        data: o.data,
+        extraElement: o.extraElement,
+        keywords: o.keywords,
+        keyboardShortcut: o.keyboardShortcut
+      });
+    });
+    if (!queryString) {
+      return menuOptions;
+    }
+    var regex = new RegExp(escapeRegExp(queryString), 'i');
+    return menuOptions.filter(function (o) {
+      var _o$keywords;
+      return regex.test(o.label) || ((_o$keywords = o.keywords) === null || _o$keywords === void 0 ? void 0 : _o$keywords.some(function (keyword) {
+        return regex.test(keyword);
+      }));
+    });
+  }, [allOptions, queryString, editor]);
+  return {
+    options: options
+  };
+};

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { MentionOption } from '../../types';
+import { type MentionMenuOption } from './utils';
+export interface MentionPickerPluginProps {
+    options?: MentionOption[];
+    /**
+     * The characters that trigger the mention menu. Needed to tell the plugin
+     * when to call the query function.
+     */
+    triggers: string[];
+    /**
+     * If `true`, mentions can contain spaces.
+     * @default true
+     */
+    allowSpaces?: boolean;
+    /**
+     * Regular expression that matches punctuation characters when looking for
+     * mentions.
+     *
+     * In addition to spaces, these characters can appear directly after a mention.
+     * E.g. `@John!` or `@John,`.
+     * @default \.,\*\?\$\|#{}\(\)\^\[\]\/!%'\"~=<>_:;
+     */
+    punctuation?: string;
+    /**
+     * Regular expression that matches characters that can appear directly
+     * before the trigger character.
+     * @default \(
+     */
+    preTriggerChars?: string;
+    /**
+     * When mention selected, this func will be called
+     */
+    onSelect?: (option: MentionMenuOption, trigger: string | null, queryString: string | null) => void;
+}
+export declare const MentionPickerPlugin: React.FC<MentionPickerPluginProps>;