@yuntijs/ui 1.0.0-beta.82 → 1.0.0-beta.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Mentions/plugins/mention-node/replacement.js +1 -0
- package/es/Mentions/plugins/mention-node/utils.js +6 -1
- package/es/Mentions/plugins/mention-picker/hooks.js +27 -8
- package/es/Mentions/plugins/mention-picker/index.js +2 -1
- package/es/Mentions/plugins/mention-picker/menu-item.d.ts +1 -0
- package/es/Mentions/plugins/mention-picker/menu-item.js +4 -2
- package/es/Mentions/plugins/mention-picker/utils.d.ts +3 -1
- package/es/Mentions/plugins/mention-picker/utils.js +9 -3
- package/es/MonacoEditor/base/style.js +4 -4
- package/package.json +1 -1
- package/umd/index.min.js +1 -1
- package/umd/index.min.js.map +1 -1
|
@@ -31,6 +31,7 @@ export var MentionNodePluginReplacement = /*#__PURE__*/memo(function (_ref) {
|
|
|
31
31
|
};
|
|
32
32
|
}, []);
|
|
33
33
|
var transformListener = useCallback(function (textNode) {
|
|
34
|
+
MENTION_REGEX.lastIndex = 0;
|
|
34
35
|
return decoratorTransform(textNode, getMatch, createMentionNode);
|
|
35
36
|
}, [createMentionNode, getMatch]);
|
|
36
37
|
useEffect(function () {
|
|
@@ -2,4 +2,9 @@ import { createCommand } from 'lexical';
|
|
|
2
2
|
export var INSERT_MENTION_COMMAND = createCommand('INSERT_MENTION_COMMAND');
|
|
3
3
|
export var DELETE_MENTION_COMMAND = createCommand('DELETE_MENTION_COMMAND');
|
|
4
4
|
export var CLEAR_HIDE_MENU_TIMEOUT = createCommand('CLEAR_HIDE_MENU_TIMEOUT');
|
|
5
|
-
|
|
5
|
+
|
|
6
|
+
// export const MENTION_REGEX = /{{([\w-]{1,50}(\.[_a-z]\w{0,29}){1,10})}}/gi;
|
|
7
|
+
// export const MENTION_REGEX = /{{(.+?)}}/g;
|
|
8
|
+
// {{plugin-m67m66l8-794.json."id"}}
|
|
9
|
+
// {{plugin-m67m66l8-794.json."tags"[0]."id"}}
|
|
10
|
+
export var MENTION_REGEX = /{{([\w-]{1,50}(\."?[_a-z][\w"[\]]*){1,10})}}/gi;
|
|
@@ -4,13 +4,31 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
|
|
|
4
4
|
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; }
|
|
5
5
|
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
|
|
6
6
|
import { escapeRegExp } from 'lodash-es';
|
|
7
|
-
import { useMemo } from 'react';
|
|
7
|
+
import { useCallback, useMemo } from 'react';
|
|
8
8
|
import { INSERT_MENTION_COMMAND } from "../mention-node";
|
|
9
9
|
import { MentionMenuOption } from "./utils";
|
|
10
|
+
var filterOptionWithChildren = function filterOptionWithChildren(option, filterOption) {
|
|
11
|
+
var _option$children;
|
|
12
|
+
option.children = (_option$children = option.children) === null || _option$children === void 0 ? void 0 : _option$children.filter(function (o) {
|
|
13
|
+
if (!o.children) {
|
|
14
|
+
return filterOption(o);
|
|
15
|
+
}
|
|
16
|
+
var newO = filterOptionWithChildren(o, filterOption);
|
|
17
|
+
return filterOption(o) || (newO.children || []).length > 0;
|
|
18
|
+
});
|
|
19
|
+
return option;
|
|
20
|
+
};
|
|
10
21
|
export var useOptions = function useOptions(allOptions, queryString) {
|
|
11
22
|
var _useLexicalComposerCo = useLexicalComposerContext(),
|
|
12
23
|
_useLexicalComposerCo2 = _slicedToArray(_useLexicalComposerCo, 1),
|
|
13
24
|
editor = _useLexicalComposerCo2[0];
|
|
25
|
+
var filterOption = useCallback(function (option) {
|
|
26
|
+
var _option$keywords;
|
|
27
|
+
var regex = new RegExp(escapeRegExp(queryString), 'i');
|
|
28
|
+
return regex.test(option.label) || ((_option$keywords = option.keywords) === null || _option$keywords === void 0 ? void 0 : _option$keywords.some(function (keyword) {
|
|
29
|
+
return regex.test(keyword);
|
|
30
|
+
})) || false;
|
|
31
|
+
}, [queryString]);
|
|
14
32
|
var options = useMemo(function () {
|
|
15
33
|
var _addOnselect = function _addOnselect(option) {
|
|
16
34
|
var menuOption = _objectSpread(_objectSpread({}, option), {}, {
|
|
@@ -32,14 +50,15 @@ export var useOptions = function useOptions(allOptions, queryString) {
|
|
|
32
50
|
if (!queryString) {
|
|
33
51
|
return menuOptions;
|
|
34
52
|
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
53
|
+
return menuOptions.map(function (o) {
|
|
54
|
+
if (!o.children) {
|
|
55
|
+
return o;
|
|
56
|
+
}
|
|
57
|
+
return filterOptionWithChildren(o, filterOption);
|
|
58
|
+
}).filter(function (o) {
|
|
59
|
+
return filterOption(o) || (o.children || []).length > 0;
|
|
41
60
|
});
|
|
42
|
-
}, [allOptions, queryString, editor]);
|
|
61
|
+
}, [allOptions, queryString, editor, filterOption]);
|
|
43
62
|
return {
|
|
44
63
|
options: options
|
|
45
64
|
};
|
|
@@ -90,7 +90,8 @@ export var MentionPickerPlugin = /*#__PURE__*/memo(function (_ref) {
|
|
|
90
90
|
return /*#__PURE__*/_jsx(MentionMenuItem, {
|
|
91
91
|
isSelected: ((_options = options[selectedIndex]) === null || _options === void 0 ? void 0 : _options.value) === option.value,
|
|
92
92
|
option: option,
|
|
93
|
-
queryString: queryString
|
|
93
|
+
queryString: queryString,
|
|
94
|
+
showIcon: !option.isChild
|
|
94
95
|
});
|
|
95
96
|
},
|
|
96
97
|
treeData: options
|
|
@@ -12,7 +12,9 @@ export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
|
|
|
12
12
|
_onClick = _ref.onClick,
|
|
13
13
|
_onMouseEnter = _ref.onMouseEnter,
|
|
14
14
|
option = _ref.option,
|
|
15
|
-
queryString = _ref.queryString
|
|
15
|
+
queryString = _ref.queryString,
|
|
16
|
+
_ref$showIcon = _ref.showIcon,
|
|
17
|
+
showIcon = _ref$showIcon === void 0 ? true : _ref$showIcon;
|
|
16
18
|
var _useStyles = useStyles({
|
|
17
19
|
isSelected: isSelected,
|
|
18
20
|
disabled: option.disabled
|
|
@@ -53,7 +55,7 @@ export var MentionMenuItem = /*#__PURE__*/memo(function (_ref) {
|
|
|
53
55
|
},
|
|
54
56
|
ref: option.setRefElement,
|
|
55
57
|
tabIndex: -1,
|
|
56
|
-
children: [/*#__PURE__*/_jsx(Flex, {
|
|
58
|
+
children: [showIcon && /*#__PURE__*/_jsx(Flex, {
|
|
57
59
|
className: styles.menuItemIcon,
|
|
58
60
|
children: option.icon
|
|
59
61
|
}), /*#__PURE__*/_jsxs("div", {
|
|
@@ -10,6 +10,7 @@ export interface MentionMenuOptionInitParams {
|
|
|
10
10
|
keyboardShortcut?: string;
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
onSelect: (queryString: string) => void;
|
|
13
|
+
isChild?: boolean;
|
|
13
14
|
children?: MentionMenuOptionInitParams[];
|
|
14
15
|
}
|
|
15
16
|
export declare class MentionMenuOption extends MenuOption {
|
|
@@ -25,5 +26,6 @@ export declare class MentionMenuOption extends MenuOption {
|
|
|
25
26
|
disabled?: boolean;
|
|
26
27
|
data?: any;
|
|
27
28
|
children?: MentionMenuOption[];
|
|
28
|
-
|
|
29
|
+
isChild?: boolean;
|
|
30
|
+
constructor({ label, value, data, icon, extraElement, keywords, keyboardShortcut, disabled, onSelect, children, isChild, }: MentionMenuOptionInitParams);
|
|
29
31
|
}
|
|
@@ -5,6 +5,8 @@ import _inherits from "@babel/runtime/helpers/esm/inherits";
|
|
|
5
5
|
import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
|
|
6
6
|
import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
|
|
7
7
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
8
|
+
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; }
|
|
9
|
+
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; }
|
|
8
10
|
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); }; }
|
|
9
11
|
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; } }
|
|
10
12
|
import { MenuOption } from '@lexical/react/LexicalTypeaheadMenuPlugin';
|
|
@@ -22,7 +24,8 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
|
|
|
22
24
|
keyboardShortcut = _ref.keyboardShortcut,
|
|
23
25
|
disabled = _ref.disabled,
|
|
24
26
|
onSelect = _ref.onSelect,
|
|
25
|
-
children = _ref.children
|
|
27
|
+
children = _ref.children,
|
|
28
|
+
isChild = _ref.isChild;
|
|
26
29
|
_classCallCheck(this, MentionMenuOption);
|
|
27
30
|
_this = _super.call(this, value);
|
|
28
31
|
_defineProperty(_assertThisInitialized(_this), "label", void 0);
|
|
@@ -39,6 +42,7 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
|
|
|
39
42
|
_defineProperty(_assertThisInitialized(_this), "disabled", void 0);
|
|
40
43
|
_defineProperty(_assertThisInitialized(_this), "data", void 0);
|
|
41
44
|
_defineProperty(_assertThisInitialized(_this), "children", void 0);
|
|
45
|
+
_defineProperty(_assertThisInitialized(_this), "isChild", void 0);
|
|
42
46
|
_this.value = value;
|
|
43
47
|
_this.label = label;
|
|
44
48
|
_this.title = label;
|
|
@@ -50,9 +54,11 @@ export var MentionMenuOption = /*#__PURE__*/function (_MenuOption) {
|
|
|
50
54
|
_this.onSelect = onSelect.bind(_assertThisInitialized(_this));
|
|
51
55
|
_this.disabled = disabled;
|
|
52
56
|
_this.data = data;
|
|
57
|
+
_this.isChild = isChild !== null && isChild !== void 0 ? isChild : false;
|
|
53
58
|
_this.children = children === null || children === void 0 ? void 0 : children.map(function (m) {
|
|
54
|
-
|
|
55
|
-
|
|
59
|
+
return new MentionMenuOption(_objectSpread(_objectSpread({}, m), {}, {
|
|
60
|
+
isChild: true
|
|
61
|
+
}));
|
|
56
62
|
});
|
|
57
63
|
return _this;
|
|
58
64
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
3
3
|
import { createStyles, keyframes } from 'antd-style';
|
|
4
4
|
/**
|
|
5
5
|
* styles from https://github.com/alibaba/lowcode-plugins/blob/main/packages/base-monaco-editor/src/index.scss
|
|
@@ -34,9 +34,9 @@ export var useStyles = createStyles(function (_ref, _ref2) {
|
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
return {
|
|
37
|
-
base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n\n box-sizing: content-box;\n min-height: 100px;\n\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n &:hover {\n border-color: ", ";\n ", "\n }\n\n &.ve-focused {\n ", "\n ", "\n }\n\n &.ve-outline {\n border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.05)) !important;\n }\n\n & > .react-monaco-editor-container {\n width: 100%;\n height: 100%;\n min-height: 100px;\n background: transparent;\n\n ", "\n\n .monaco-editor,\n .monaco-editor-background,\n .monaco-editor .inputarea.ime-input,\n .monaco-editor .margin {\n
|
|
38
|
-
fullScreenBtn: css(
|
|
39
|
-
loading: css(
|
|
37
|
+
base: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n position: relative;\n\n box-sizing: content-box;\n min-height: 100px;\n\n background-color: ", ";\n border: 1px solid ", ";\n border-radius: ", "px;\n &:hover {\n border-color: ", ";\n ", "\n }\n\n &.ve-focused {\n ", "\n ", "\n }\n\n &.ve-outline {\n border: 1px solid var(--color-field-border, rgba(31, 56, 88, 0.05)) !important;\n }\n\n & > .react-monaco-editor-container {\n width: 100%;\n height: 100%;\n min-height: 100px;\n background: transparent;\n\n ", "\n\n .monaco-editor,\n .monaco-editor-background,\n .monaco-editor .inputarea.ime-input,\n .monaco-editor .margin {\n ", "\n }\n\n & > .monaco-editor {\n border-radius: ", "px;\n .overflow-guard,\n .margin {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n }\n .monaco-scrollable-element {\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n }\n .monaco-diff-editor {\n border-radius: ", "px;\n & > .original > .monaco-editor {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n .overflow-guard,\n .margin {\n border-top-left-radius: ", "px;\n border-bottom-left-radius: ", "px;\n }\n }\n .diffViewport {\n border-top-right-radius: ", "px;\n border-bottom-right-radius: ", "px;\n }\n }\n }\n\n .syntaxTips {\n position: absolute;\n bottom: 0;\n left: 0;\n\n box-sizing: border-box;\n width: 100%;\n max-height: 0;\n margin: 0;\n padding: 10px 30px;\n\n color: ", ";\n\n background: ", ";\n\n transition: 0.2s ease max-height;\n }\n\n .syntaxTips:hover {\n overflow: auto;\n max-height: 50%;\n }\n\n .syntaxTips .infoIcon {\n position: absolute;\n top: 2px;\n right: 5px;\n transform: rotateY(180deg);\n\n width: 20px;\n height: 16px;\n }\n "])), getBgColor(), variant === 'outlined' ? token.colorBorder : 'transparent', token.borderRadius, variant === 'outlined' ? token.colorPrimaryHover : 'transparent', variant === 'filled' && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), token.colorFillSecondary), variant === 'filled' && css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n background-color: ", ";\n "])), token.colorBgBase), variant !== 'borderless' && css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n border-color: ", ";\n "])), token.colorPrimaryActive), isFullScreen && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n position: fixed;\n z-index: 9998;\n inset: 0;\n\n width: auto !important;\n height: auto !important;\n "]))), !isFullScreen && css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n background-color: transparent;\n "]))), token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius, token.borderRadius - 1, token.borderRadius - 1, token.colorErrorText, token.colorErrorBg),
|
|
38
|
+
fullScreenBtn: css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n &.", "-btn {\n position: absolute;\n top: 20px;\n color: ", ";\n transition: none;\n ", "\n }\n "])), prefixCls, token.colorTextSecondary, isFullScreen ? css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n z-index: 9999;\n right: ", "px;\n "])), diff ? 64 : 138) : css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n right: ", "px;\n "])), minimapEnabled || diff ? 64 : 20)),
|
|
39
|
+
loading: css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n position: absolute;\n inset: 0;\n\n display: flex;\n align-items: center;\n justify-content: center;\n\n font-size: ", "px;\n color: ", ";\n\n background-color: transparent;\n\n &::after {\n content: '';\n width: 16px;\n /* display: inline; */\n animation: ", " steps(3) 1s infinite;\n }\n "])), token.fontSizeSM, token.colorTextTertiary, dots)
|
|
40
40
|
};
|
|
41
41
|
}, {
|
|
42
42
|
hashPriority: 'low'
|