@yuntijs/ui
Version:
☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps
195 lines (193 loc) • 9.1 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
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 { AutoFocusPlugin } from '@lexical/react/LexicalAutoFocusPlugin';
import { ClearEditorPlugin } from '@lexical/react/LexicalClearEditorPlugin';
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';
// @Todo: 升级 0.25.0 后，ops-console 使用的时候出现了只输入 / 无法触发的问题
import { $getRoot, TextNode } from 'lexical';
import React, { forwardRef, useCallback, useMemo } from 'react';
import { isBrowser } from "../utils/tools";
import { CustomTextNode } from "./plugins/custom-text/node";
import { EditablePlugin } from "./plugins/editable";
import { EditorRefPlugin } from "./plugins/editor-ref";
import { MentionNode, MentionNodePlugin, MentionNodePluginReplacement } from "./plugins/mention-node";
import { MentionPickerPlugin } from "./plugins/mention-picker";
import { OnBlurBlockPlugin } from "./plugins/on-blur-block";
import { OnKeyDownPlugin } from "./plugins/on-key-down";
import { ShiftEnterKeyPlugin } from "./plugins/shift-enter-key";
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 * from "./types";
export * from "./utils";
export { CLEAR_EDITOR_COMMAND } from 'lexical';
export var Mentions = /*#__PURE__*/forwardRef(function (_ref, 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,
_ref$code = _ref.code,
code = _ref$code === void 0 ? false : _ref$code,
getPopContainer = _ref.getPopContainer,
onPressEnter = _ref.onPressEnter,
onKeyDown = _ref.onKeyDown,
onTrigger = _ref.onTrigger,
autoFocus = _ref.autoFocus,
children = _ref.children,
_ref$extraNodes = _ref.extraNodes,
extraNodes = _ref$extraNodes === void 0 ? [] : _ref$extraNodes;
var _ConfigProvider$useCo = ConfigProvider.useConfig(),
componentDisabled = _ConfigProvider$useCo.componentDisabled;
var _useStyles = useStyles({
autoSize: autoSize,
code: code
}),
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);
},
withKlass: CustomTextNode
}, MentionNode].concat(_toConsumableArray(extraNodes)),
editorState: textToEditorState(value || defaultValue || '', triggers, {
punctuation: punctuation
}),
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]);
var parent = useMemo(function () {
if (!isBrowser) {
return;
}
if (getPopContainer) {
return getPopContainer();
}
if (document.fullscreenElement) {
return document.fullscreenElement;
}
}, [getPopContainer]);
var onMentionPickerOpen = useCallback(function (resolution) {
var _resolution$match$rep, _resolution$match;
var _trigger = (_resolution$match$rep = (_resolution$match = resolution.match) === null || _resolution$match === void 0 ? void 0 : _resolution$match.replaceableString) !== null && _resolution$match$rep !== void 0 ? _resolution$match$rep : triggers[0];
onTrigger === null || onTrigger === void 0 || onTrigger(_trigger);
}, [onTrigger, triggers]);
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,
onOpen: onMentionPickerOpen,
onSelect: onSelect,
options: options,
overlayClassName: classNames === null || classNames === void 0 ? void 0 : classNames.menuOverlay,
parent: parent,
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
}), /*#__PURE__*/_jsx(EditorRefPlugin, {
editorRef: ref
}), /*#__PURE__*/_jsx(ClearEditorPlugin, {}), onPressEnter && /*#__PURE__*/_jsx(ShiftEnterKeyPlugin, {
onPressEnter: onPressEnter
}), onKeyDown && /*#__PURE__*/_jsx(OnKeyDownPlugin, {
onKeyDown: onKeyDown
}), autoFocus && /*#__PURE__*/_jsx(AutoFocusPlugin, {
defaultSelection: autoFocus
}), children]
})
})
});
});