@yuntijs/ui 1.0.0-beta.115 → 1.0.0-beta.117

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.
Files changed (9) hide show
  1. package/es/MonacoEditor/base/helper.d.ts +2 -0
  2. package/es/MonacoEditor/base/helper.js +8 -3
  3. package/es/MonacoEditor/base/index.d.ts +2 -2
  4. package/es/MonacoEditor/base/index.js +18 -5
  5. package/es/MonacoEditor/base/style.js +1 -1
  6. package/es/MonacoEditor/index.js +1 -1
  7. package/package.json +2 -2
  8. package/umd/index.min.js +1 -1
  9. package/umd/index.min.js.map +1 -1
package/es/MonacoEditor/base/helper.d.ts CHANGED
@@ -38,9 +38,11 @@ export interface IGeneralManacoEditorProps {
38
38
  /** style of wrapper */
39
39
  style?: CSSProperties;
40
40
  enhancers?: EditorEnhancer[];
41
+ placeholder?: string;
41
42
  }
42
43
  export interface ISingleMonacoEditorProps extends IGeneralManacoEditorProps {
43
44
  onChange?: (input: string, event: IEditor.IModelContentChangedEvent) => void;
45
+ onBlur?: (input: string, event: any) => void;
44
46
  supportFullScreen?: boolean;
45
47
  onFullScreenChange?: (isFullScreen: boolean) => void;
46
48
  }
package/es/MonacoEditor/base/helper.js CHANGED
@@ -90,7 +90,8 @@ export var useEditor = function useEditor(type, props) {
90
90
  language = props.language,
91
91
  saveViewState = props.saveViewState,
92
92
  defaultValue = props.defaultValue,
93
- enhancers = props.enhancers;
93
+ enhancers = props.enhancers,
94
+ placeholder = props.placeholder;
94
95
  var _useState = useState(false),
95
96
  _useState2 = _slicedToArray(_useState, 2),
96
97
  isEditorReady = _useState2[0],
@@ -164,14 +165,18 @@ export var useEditor = function useEditor(type, props) {
164
165
  var model = getOrCreateModel(monaco, (_ref = (_valueRef$current = valueRef.current) !== null && _valueRef$current !== void 0 ? _valueRef$current : defaultValueRef.current) !== null && _ref !== void 0 ? _ref : '', languageRef.current, pathRef.current);
165
166
  editor = monaco.editor.create(containerRef.current, _objectSpread(_objectSpread({
166
167
  automaticLayout: true
167
- }, INITIAL_OPTIONS), optionRef.current));
168
+ }, INITIAL_OPTIONS), {}, {
169
+ placeholder: placeholder
170
+ }, optionRef.current));
168
171
  editor.setModel(model);
169
172
  } else {
170
173
  var originalModel = monaco.editor.createModel(valueRef.current, languageRef.current);
171
174
  var modifiedModel = monaco.editor.createModel(valueRef.current, languageRef.current);
172
175
  editor = monaco.editor.createDiffEditor(containerRef.current, _objectSpread(_objectSpread({
173
176
  automaticLayout: true
174
- }, DIFF_EDITOR_INITIAL_OPTIONS), optionRef.current));
177
+ }, DIFF_EDITOR_INITIAL_OPTIONS), {}, {
178
+ placeholder: placeholder
179
+ }, optionRef.current));
175
180
  editor.setModel({
176
181
  original: originalModel,
177
182
  modified: modifiedModel
package/es/MonacoEditor/base/index.d.ts CHANGED
@@ -8,7 +8,7 @@ export declare const SingleMonacoEditorComponent: React.FC<ISingleMonacoEditorPr
8
8
  variant?: "filled" | "borderless" | "outlined" | undefined;
9
9
  }> & {
10
10
  displayName: string;
11
- defaultProps: {
11
+ default: {
12
12
  width: string;
13
13
  height: number;
14
14
  defaultValue: string;
@@ -23,7 +23,7 @@ export declare const SingleMonacoEditorComponent: React.FC<ISingleMonacoEditorPr
23
23
  variant?: "filled" | "borderless" | "outlined" | undefined;
24
24
  }> & {
25
25
  displayName: string;
26
- defaultProps: {
26
+ default: {
27
27
  width: string;
28
28
  height: number;
29
29
  defaultValue: string;
package/es/MonacoEditor/base/index.js CHANGED
@@ -12,6 +12,7 @@ function noop() {}
12
12
  var SingleMonacoEditor = function SingleMonacoEditor(props) {
13
13
  var _props$options;
14
14
  var onChange = props.onChange,
15
+ onBlur = props.onBlur,
15
16
  enableOutline = props.enableOutline,
16
17
  width = props.width,
17
18
  height = props.height,
@@ -19,6 +20,7 @@ var SingleMonacoEditor = function SingleMonacoEditor(props) {
19
20
  supportFullScreen = props.supportFullScreen,
20
21
  onFullScreenChange = props.onFullScreenChange;
21
22
  var onChangeRef = useRef(onChange);
23
+ var onBlurRef = useRef(onBlur);
22
24
  var _useEditor = useEditor('single', props),
23
25
  isEditorReady = _useEditor.isEditorReady,
24
26
  focused = _useEditor.focused,
@@ -28,6 +30,7 @@ var SingleMonacoEditor = function SingleMonacoEditor(props) {
28
30
  editorRef = _useEditor.editorRef,
29
31
  valueRef = _useEditor.valueRef;
30
32
  var subscriptionRef = useRef();
33
+ var subscriptionBlurRef = useRef();
31
34
  var _useFullScreen = useFullScreen(editorRef === null || editorRef === void 0 ? void 0 : editorRef.current),
32
35
  isFullScreen = _useFullScreen.isFullScreen,
33
36
  fullScreen = _useFullScreen.fullScreen;
@@ -51,9 +54,12 @@ var SingleMonacoEditor = function SingleMonacoEditor(props) {
51
54
  useEffect(function () {
52
55
  onChangeRef.current = onChange;
53
56
  }, [onChange]);
57
+ useEffect(function () {
58
+ onBlurRef.current = onBlur;
59
+ }, [onBlur]);
54
60
  useEffect(function () {
55
61
  if (isEditorReady) {
56
- var _subscriptionRef$curr;
62
+ var _subscriptionRef$curr, _subscriptionBlurRef$;
57
63
  var editorInstance = editorRef.current;
58
64
  (_subscriptionRef$curr = subscriptionRef.current) === null || _subscriptionRef$curr === void 0 || _subscriptionRef$curr.dispose();
59
65
  subscriptionRef.current = editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.onDidChangeModelContent(function (event) {
@@ -64,14 +70,21 @@ var SingleMonacoEditor = function SingleMonacoEditor(props) {
64
70
  (_onChangeRef$current = onChangeRef.current) === null || _onChangeRef$current === void 0 || _onChangeRef$current.call(onChangeRef, editorValue, event);
65
71
  }
66
72
  });
73
+ (_subscriptionBlurRef$ = subscriptionBlurRef.current) === null || _subscriptionBlurRef$ === void 0 || _subscriptionBlurRef$.dispose();
74
+ subscriptionBlurRef.current = editorInstance === null || editorInstance === void 0 ? void 0 : editorInstance.onDidBlurEditorText(function (event) {
75
+ var _editorInstance$getMo2, _onBlurRef$current;
76
+ var editorValue = editorInstance === null || editorInstance === void 0 || (_editorInstance$getMo2 = editorInstance.getModel()) === null || _editorInstance$getMo2 === void 0 ? void 0 : _editorInstance$getMo2.getValue();
77
+ (_onBlurRef$current = onBlurRef.current) === null || _onBlurRef$current === void 0 || _onBlurRef$current.call(onBlurRef, editorValue, event);
78
+ });
67
79
  }
68
80
  }, [editorRef, isEditorReady, subscriptionRef, valueRef]);
69
81
  useEffect(function () {
70
82
  return function () {
71
- var _subscriptionRef$curr2, _editorInstance$getMo2, _editorRef$current;
83
+ var _subscriptionRef$curr2, _subscriptionBlurRef$2, _editorInstance$getMo3, _editorRef$current;
72
84
  var editorInstance = editorRef.current;
73
85
  (_subscriptionRef$curr2 = subscriptionRef.current) === null || _subscriptionRef$curr2 === void 0 || _subscriptionRef$curr2.dispose();
74
- editorInstance === null || editorInstance === void 0 || (_editorInstance$getMo2 = editorInstance.getModel()) === null || _editorInstance$getMo2 === void 0 || _editorInstance$getMo2.dispose();
86
+ (_subscriptionBlurRef$2 = subscriptionBlurRef.current) === null || _subscriptionBlurRef$2 === void 0 || _subscriptionBlurRef$2.dispose();
87
+ editorInstance === null || editorInstance === void 0 || (_editorInstance$getMo3 = editorInstance.getModel()) === null || _editorInstance$getMo3 === void 0 || _editorInstance$getMo3.dispose();
75
88
  // eslint-disable-next-line react-hooks/exhaustive-deps
76
89
  (_editorRef$current = editorRef.current) === null || _editorRef$current === void 0 || _editorRef$current.dispose();
77
90
  };
@@ -218,7 +231,7 @@ var DiffMonacoEditor = function DiffMonacoEditor(props) {
218
231
  };
219
232
  var DiffMonacoEditorComponent = Object.assign(DiffMonacoEditor, {
220
233
  displayName: 'DiffMonacoEditor',
221
- defaultProps: {
234
+ default: {
222
235
  width: '100%',
223
236
  height: 150,
224
237
  defaultValue: '',
@@ -232,7 +245,7 @@ var DiffMonacoEditorComponent = Object.assign(DiffMonacoEditor, {
232
245
  });
233
246
  export var SingleMonacoEditorComponent = Object.assign(SingleMonacoEditor, {
234
247
  displayName: 'SingleMonacoEditor',
235
- defaultProps: {
248
+ default: {
236
249
  width: '100%',
237
250
  height: 150,
238
251
  defaultValue: '',
package/es/MonacoEditor/base/style.js CHANGED
@@ -34,7 +34,7 @@ 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 ", "\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),
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 outline: none;\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
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
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
  };
package/es/MonacoEditor/index.js CHANGED
@@ -28,7 +28,7 @@ export var BaseMonacoEditor = function BaseMonacoEditor(props) {
28
28
  _props$minimapEnabled = props.minimapEnabled,
29
29
  minimapEnabled = _props$minimapEnabled === void 0 ? false : _props$minimapEnabled,
30
30
  _props$version = props.version,
31
- version = _props$version === void 0 ? '0.45.0' : _props$version,
31
+ version = _props$version === void 0 ? '0.52.2' : _props$version,
32
32
  _props$requireConfig = props.requireConfig,
33
33
  requireConfigFromProps = _props$requireConfig === void 0 ? {} : _props$requireConfig,
34
34
  options = props.options,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yuntijs/ui",
3
- "version": "1.0.0-beta.115",
3
+ "version": "1.0.0-beta.117",
4
4
  "description": "☁️ Yunti UI - an open-source UI component library for building Cloud Native web apps",
5
5
  "keywords": [
6
6
  "yuntijs",
@@ -130,7 +130,7 @@
130
130
  "jsdom": "^22",
131
131
  "lint-staged": "^15",
132
132
  "mdast-util-to-markdown": "^2.1.2",
133
- "monaco-editor": "^0.45.0",
133
+ "monaco-editor": "^0.52.2",
134
134
  "prettier": "^3",
135
135
  "react": "^18",
136
136
  "react-dom": "^18",