@easyv/biz-components 0.0.56 → 1.0.1
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/dist/_virtual/index.es2.js +2 -2
- package/dist/_virtual/index.es3.js +2 -2
- package/dist/_virtual/index.es4.js +2 -2
- package/dist/components/easyv-monaco-editor/easyv-monaco-editor.d.ts +3 -2
- package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js +79 -21
- package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js.map +1 -1
- package/dist/components/easyv-monaco-editor/types.d.ts +17 -8
- package/dist/node_modules/.pnpm/classnames@2.3.2/node_modules/classnames/index.es.js +1 -1
- package/dist/node_modules/.pnpm/co-web-worker@1.0.1/node_modules/co-web-worker/index.es.js +1 -1
- package/dist/node_modules/.pnpm/prop-types@15.8.1/node_modules/prop-types/index.es.js +1 -1
- package/dist/stats.html +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
import { EasyvMonacoEditorProps, EasyvMonacoEditorRef } from './types';
|
|
2
3
|
|
|
3
|
-
export declare
|
|
4
|
+
export declare const EasyvMonacoEditor: React.ForwardRefExoticComponent<EasyvMonacoEditorProps & React.RefAttributes<EasyvMonacoEditorRef>>;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { j as jsxRuntimeExports } from "../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.es.js";
|
|
2
|
-
import { useRef } from "react";
|
|
2
|
+
import { forwardRef, useRef, useState, useImperativeHandle } from "react";
|
|
3
3
|
import useLatest from "../../node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useLatest/index.es.js";
|
|
4
4
|
import useMemoizedFn from "../../node_modules/.pnpm/ahooks@3.8.5_react@18.2.0/node_modules/ahooks/es/useMemoizedFn/index.es.js";
|
|
5
5
|
import classNames from "../../node_modules/.pnpm/classnames@2.5.1/node_modules/classnames/index.es.js";
|
|
6
6
|
import { useInitialized } from "../../hooks/use-initialized.es.js";
|
|
7
7
|
import { useWatchValue } from "../../hooks/use-watch-value/use-watch-value.es.js";
|
|
8
|
-
function
|
|
8
|
+
function EasyvMonacoEditorCpn(props, ref) {
|
|
9
9
|
const {
|
|
10
10
|
className,
|
|
11
11
|
style,
|
|
@@ -16,20 +16,40 @@ function EasyvMonacoEditor(props) {
|
|
|
16
16
|
monaco,
|
|
17
17
|
onChange: propsOnChange,
|
|
18
18
|
onCodeMark: propsOnCodeMark,
|
|
19
|
+
onFocus: propsOnFocus,
|
|
19
20
|
onBlur: propsOnBlur,
|
|
21
|
+
formatOnBlur,
|
|
20
22
|
ignoreErrorCodes,
|
|
21
23
|
initJSCompilerOptions,
|
|
22
24
|
constructionOptions,
|
|
23
25
|
customTheme,
|
|
24
|
-
onEditorMounted: propsOnEditorMounted
|
|
26
|
+
onEditorMounted: propsOnEditorMounted,
|
|
27
|
+
onError
|
|
25
28
|
} = props;
|
|
26
29
|
const editorRef = useRef(null);
|
|
27
30
|
const editorInstanceRef = useRef();
|
|
28
31
|
const globalDataLibRef = useRef();
|
|
32
|
+
const [isFocus, setIsFocus] = useState(false);
|
|
29
33
|
const onChangeRef = useLatest(propsOnChange);
|
|
30
34
|
const onCodeMarkRef = useLatest(propsOnCodeMark);
|
|
35
|
+
const onFocusRef = useLatest(propsOnFocus);
|
|
31
36
|
const onBlurRef = useLatest(propsOnBlur);
|
|
32
37
|
const onEditorMountedRef = useLatest(propsOnEditorMounted);
|
|
38
|
+
const formatFn = async () => {
|
|
39
|
+
var _a, _b, _c;
|
|
40
|
+
try {
|
|
41
|
+
await ((_b = (_a = editorInstanceRef.current) == null ? void 0 : _a.getAction("editor.action.formatDocument")) == null ? void 0 : _b.run());
|
|
42
|
+
return (_c = editorInstanceRef.current) == null ? void 0 : _c.getValue();
|
|
43
|
+
} catch (error) {
|
|
44
|
+
onError == null ? void 0 : onError(error);
|
|
45
|
+
}
|
|
46
|
+
};
|
|
47
|
+
useImperativeHandle(ref, () => {
|
|
48
|
+
return {
|
|
49
|
+
editor: editorInstanceRef.current,
|
|
50
|
+
format: formatFn
|
|
51
|
+
};
|
|
52
|
+
});
|
|
33
53
|
const initFn = useMemoizedFn(() => {
|
|
34
54
|
var _a;
|
|
35
55
|
monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
|
|
@@ -93,15 +113,29 @@ function EasyvMonacoEditor(props) {
|
|
|
93
113
|
(_a2 = onCodeMarkRef.current) == null ? void 0 : _a2.call(onCodeMarkRef, markers);
|
|
94
114
|
});
|
|
95
115
|
}
|
|
96
|
-
const
|
|
116
|
+
const focusDisposable = editorInstanceRef.current.onDidFocusEditorText(() => {
|
|
97
117
|
var _a2;
|
|
98
|
-
|
|
99
|
-
(_a2 =
|
|
118
|
+
setIsFocus(true);
|
|
119
|
+
(_a2 = onFocusRef.current) == null ? void 0 : _a2.call(onFocusRef);
|
|
120
|
+
});
|
|
121
|
+
const blurDisposable = editorInstanceRef.current.onDidBlurEditorText(async () => {
|
|
122
|
+
var _a2, _b;
|
|
123
|
+
setIsFocus(false);
|
|
124
|
+
if (formatOnBlur) {
|
|
125
|
+
const currentValue = await formatFn();
|
|
126
|
+
(_a2 = onBlurRef.current) == null ? void 0 : _a2.call(onBlurRef, currentValue || "");
|
|
127
|
+
} else {
|
|
128
|
+
const currentValue = editorInstanceRef.current.getValue();
|
|
129
|
+
(_b = onBlurRef.current) == null ? void 0 : _b.call(onBlurRef, currentValue);
|
|
130
|
+
}
|
|
100
131
|
});
|
|
132
|
+
addGlobalType();
|
|
101
133
|
return () => {
|
|
102
|
-
var _a2;
|
|
103
|
-
|
|
134
|
+
var _a2, _b;
|
|
135
|
+
focusDisposable.dispose();
|
|
136
|
+
blurDisposable.dispose();
|
|
104
137
|
(_a2 = editorInstanceRef.current) == null ? void 0 : _a2.dispose();
|
|
138
|
+
(_b = globalDataLibRef.current) == null ? void 0 : _b.dispose();
|
|
105
139
|
};
|
|
106
140
|
});
|
|
107
141
|
useInitialized(initFn);
|
|
@@ -128,26 +162,37 @@ function EasyvMonacoEditor(props) {
|
|
|
128
162
|
}
|
|
129
163
|
});
|
|
130
164
|
useWatchValue({
|
|
131
|
-
value: monacoEditorOptions,
|
|
165
|
+
value: { monacoEditorOptions, isFocus },
|
|
132
166
|
callback: () => {
|
|
133
167
|
var _a;
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
168
|
+
(_a = editorInstanceRef.current) == null ? void 0 : _a.updateOptions({
|
|
169
|
+
wordWrap: "on",
|
|
170
|
+
/** 让下面不显示空白区域 */
|
|
171
|
+
scrollBeyondLastLine: false,
|
|
172
|
+
tabSize: 2,
|
|
173
|
+
...monacoEditorOptions,
|
|
174
|
+
scrollbar: {
|
|
175
|
+
// 默认让聚焦时,内部滚动,失焦时不滚动
|
|
176
|
+
handleMouseWheel: isFocus ? true : false,
|
|
177
|
+
...monacoEditorOptions == null ? void 0 : monacoEditorOptions.scrollbar
|
|
178
|
+
}
|
|
179
|
+
});
|
|
138
180
|
},
|
|
139
181
|
options: { immediate: true }
|
|
140
182
|
});
|
|
183
|
+
const addGlobalType = () => {
|
|
184
|
+
if (languageMode !== "javascript") {
|
|
185
|
+
return;
|
|
186
|
+
}
|
|
187
|
+
globalDataLibRef.current = monaco.languages.typescript.javascriptDefaults.addExtraLib(
|
|
188
|
+
globalVarType,
|
|
189
|
+
"global-data.d.ts"
|
|
190
|
+
);
|
|
191
|
+
};
|
|
141
192
|
useWatchValue({
|
|
142
193
|
value: globalVarType,
|
|
143
194
|
callback() {
|
|
144
|
-
|
|
145
|
-
globalDataLibRef.current.dispose();
|
|
146
|
-
}
|
|
147
|
-
globalDataLibRef.current = monaco.languages.typescript.javascriptDefaults.addExtraLib(
|
|
148
|
-
globalVarType,
|
|
149
|
-
"global-data.d.ts"
|
|
150
|
-
);
|
|
195
|
+
addGlobalType();
|
|
151
196
|
},
|
|
152
197
|
options: {
|
|
153
198
|
immediate: true
|
|
@@ -167,8 +212,21 @@ function EasyvMonacoEditor(props) {
|
|
|
167
212
|
immediate: true
|
|
168
213
|
}
|
|
169
214
|
});
|
|
170
|
-
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
215
|
+
return /* @__PURE__ */ jsxRuntimeExports.jsx(
|
|
216
|
+
"div",
|
|
217
|
+
{
|
|
218
|
+
ref: editorRef,
|
|
219
|
+
className: classNames("biz-min-h-[200px]", className),
|
|
220
|
+
style: {
|
|
221
|
+
border: "1px solid #393b4a",
|
|
222
|
+
width: "100%",
|
|
223
|
+
height: "100%",
|
|
224
|
+
...style
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
);
|
|
171
228
|
}
|
|
229
|
+
const EasyvMonacoEditor = forwardRef(EasyvMonacoEditorCpn);
|
|
172
230
|
export {
|
|
173
231
|
EasyvMonacoEditor
|
|
174
232
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"easyv-monaco-editor.es.js","sources":["../../../src/components/easyv-monaco-editor/easyv-monaco-editor.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useLatest, useMemoizedFn } from 'ahooks';\nimport classNames from 'classnames';\nimport type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';\nimport { useInitialized, useWatchValue } from '@/hooks';\nimport { EasyvMonacoEditorProps } from './types';\n\nexport function EasyvMonacoEditor(props: EasyvMonacoEditorProps) {\n const {\n className,\n style,\n languageMode,\n code,\n monacoEditorOptions,\n globalVarType = '',\n monaco,\n onChange: propsOnChange,\n onCodeMark: propsOnCodeMark,\n onBlur: propsOnBlur,\n ignoreErrorCodes,\n initJSCompilerOptions,\n constructionOptions,\n customTheme,\n onEditorMounted: propsOnEditorMounted,\n } = props;\n const editorRef = useRef<HTMLDivElement | null>(null);\n const editorInstanceRef = useRef<monacoType.editor.IStandaloneCodeEditor>();\n const globalDataLibRef = useRef<monacoType.IDisposable>();\n\n const onChangeRef = useLatest(propsOnChange);\n const onCodeMarkRef = useLatest(propsOnCodeMark);\n const onBlurRef = useLatest(propsOnBlur);\n const onEditorMountedRef = useLatest(propsOnEditorMounted);\n\n const initFn = useMemoizedFn(() => {\n // 配置 JavaScript 语言服务\n monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n target: monaco.languages.typescript.ScriptTarget.ESNext,\n allowNonTsExtensions: true,\n allowJs: true,\n checkJs: true, // 关键:启用 JS 校验\n noLib: false,\n lib: ['esnext', 'dom'], // dom 会带上浏览器里可使用的方法 如 console, window\n typeRoots: ['node_modules/@types'],\n ...initJSCompilerOptions,\n });\n\n monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n noSemanticValidation: false, // 启用语义校验\n noSyntaxValidation: false, // 启用语法校验\n diagnosticCodesToIgnore: ignoreErrorCodes ?? [], // 忽略特定错误\n });\n\n if (editorRef.current) {\n editorInstanceRef.current = monaco.editor.create(editorRef.current, {\n value: code,\n language: languageMode,\n theme: 'vs-dark',\n automaticLayout: true,\n minimap: {\n enabled: false,\n },\n // 启用智能提示的关键设置\n suggest: {\n showKeywords: true, // 关键字建议\n showSnippets: true, // 代码片段建议\n },\n quickSuggestions: true, // 在输入时自动显示建议列表\n suggestOnTriggerCharacters: true, // 当输入触发字符(如点号.)时自动显示建议\n hover: { enabled: true }, // 必须启用 hover\n renderValidationDecorations: 'on', // 确保错误渲染开启\n ...constructionOptions,\n });\n if (!editorInstanceRef.current) {\n return;\n }\n onEditorMountedRef.current?.(editorInstanceRef.current);\n editorInstanceRef.current.onDidChangeModelContent(() => {\n const currentValue = editorInstanceRef.current!.getValue();\n // 更新状态\n onChangeRef.current?.(currentValue);\n });\n\n // 监听诊断变化\n monaco.editor.onDidChangeMarkers(() => {\n const markers = monaco.editor.getModelMarkers({});\n onCodeMarkRef.current?.(markers);\n });\n }\n // 添加失焦事件监听\n const disposable = editorInstanceRef.current!.onDidBlurEditorText(() => {\n const currentValue = editorInstanceRef.current!.getValue();\n onBlurRef.current?.(currentValue);\n });\n return () => {\n disposable.dispose();\n editorInstanceRef.current?.dispose();\n };\n });\n\n useInitialized(initFn);\n\n useWatchValue({\n value: code,\n callback: () => {\n if (editorInstanceRef.current) {\n // 获取当前编辑器的值\n const currentValue = editorInstanceRef.current.getValue();\n // 如果状态中的value和编辑器的当前值不同,则更新编辑器\n if (currentValue !== code) {\n editorInstanceRef.current.setValue(code);\n }\n }\n },\n });\n\n useWatchValue({\n value: languageMode,\n callback(newLanguage) {\n const model = editorInstanceRef.current?.getModel();\n if (!model) {\n return;\n }\n monaco.editor.setModelLanguage(model, newLanguage);\n },\n });\n\n useWatchValue({\n value: monacoEditorOptions,\n callback: () => {\n if (!monacoEditorOptions) {\n return;\n }\n editorInstanceRef.current?.updateOptions(monacoEditorOptions);\n },\n options: { immediate: true },\n });\n\n useWatchValue({\n value: globalVarType,\n callback() {\n if (globalDataLibRef.current) {\n globalDataLibRef.current.dispose();\n }\n globalDataLibRef.current = monaco.languages.typescript.javascriptDefaults.addExtraLib(\n globalVarType,\n 'global-data.d.ts',\n );\n },\n options: {\n immediate: true,\n },\n });\n\n useWatchValue({\n value: customTheme,\n callback() {\n if (!customTheme) {\n return;\n }\n const themeName = 'customTheme';\n monaco.editor.defineTheme(themeName, customTheme);\n monaco.editor.setTheme(themeName);\n },\n options: {\n immediate: true,\n },\n });\n\n return (\n <div ref={editorRef} className={classNames('biz-min-h-[200px]', className)} style={style} />\n );\n}\n"],"names":["_a","jsx"],"mappings":";;;;;;;AAOO,SAAS,kBAAkB,OAA+B;AACzD,QAAA;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB;AAAA,IACA,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,iBAAiB;AAAA,EAAA,IACf;AACE,QAAA,YAAY,OAA8B,IAAI;AACpD,QAAM,oBAAoB,OAAgD;AAC1E,QAAM,mBAAmB,OAA+B;AAElD,QAAA,cAAc,UAAU,aAAa;AACrC,QAAA,gBAAgB,UAAU,eAAe;AACzC,QAAA,YAAY,UAAU,WAAW;AACjC,QAAA,qBAAqB,UAAU,oBAAoB;AAEnD,QAAA,SAAS,cAAc,MAAM;;AAE1B,WAAA,UAAU,WAAW,mBAAmB,mBAAmB;AAAA,MAChE,QAAQ,OAAO,UAAU,WAAW,aAAa;AAAA,MACjD,sBAAsB;AAAA,MACtB,SAAS;AAAA,MACT,SAAS;AAAA;AAAA,MACT,OAAO;AAAA,MACP,KAAK,CAAC,UAAU,KAAK;AAAA;AAAA,MACrB,WAAW,CAAC,qBAAqB;AAAA,MACjC,GAAG;AAAA,IAAA,CACJ;AAEM,WAAA,UAAU,WAAW,mBAAmB,sBAAsB;AAAA,MACnE,sBAAsB;AAAA;AAAA,MACtB,oBAAoB;AAAA;AAAA,MACpB,yBAAyB,oBAAoB,CAAA;AAAA;AAAA,IAAC,CAC/C;AAED,QAAI,UAAU,SAAS;AACrB,wBAAkB,UAAU,OAAO,OAAO,OAAO,UAAU,SAAS;AAAA,QAClE,OAAO;AAAA,QACP,UAAU;AAAA,QACV,OAAO;AAAA,QACP,iBAAiB;AAAA,QACjB,SAAS;AAAA,UACP,SAAS;AAAA,QACX;AAAA;AAAA,QAEA,SAAS;AAAA,UACP,cAAc;AAAA;AAAA,UACd,cAAc;AAAA;AAAA,QAChB;AAAA,QACA,kBAAkB;AAAA;AAAA,QAClB,4BAA4B;AAAA;AAAA,QAC5B,OAAO,EAAE,SAAS,KAAK;AAAA;AAAA,QACvB,6BAA6B;AAAA;AAAA,QAC7B,GAAG;AAAA,MAAA,CACJ;AACG,UAAA,CAAC,kBAAkB,SAAS;AAC9B;AAAA,MAAA;AAEiB,+BAAA,YAAA,4CAAU,kBAAkB;AAC7B,wBAAA,QAAQ,wBAAwB,MAAM;;AAChD,cAAA,eAAe,kBAAkB,QAAS,SAAS;AAEzD,SAAAA,MAAA,YAAY,YAAZ,gBAAAA,IAAA,kBAAsB;AAAA,MAAY,CACnC;AAGM,aAAA,OAAO,mBAAmB,MAAM;;AACrC,cAAM,UAAU,OAAO,OAAO,gBAAgB,CAAA,CAAE;AAChD,SAAAA,MAAA,cAAc,YAAd,gBAAAA,IAAA,oBAAwB;AAAA,MAAO,CAChC;AAAA,IAAA;AAGH,UAAM,aAAa,kBAAkB,QAAS,oBAAoB,MAAM;;AAChE,YAAA,eAAe,kBAAkB,QAAS,SAAS;AACzD,OAAAA,MAAA,UAAU,YAAV,gBAAAA,IAAA,gBAAoB;AAAA,IAAY,CACjC;AACD,WAAO,MAAM;;AACX,iBAAW,QAAQ;AACnB,OAAAA,MAAA,kBAAkB,YAAlB,gBAAAA,IAA2B;AAAA,IAC7B;AAAA,EAAA,CACD;AAED,iBAAe,MAAM;AAEP,gBAAA;AAAA,IACZ,OAAO;AAAA,IACP,UAAU,MAAM;AACd,UAAI,kBAAkB,SAAS;AAEvB,cAAA,eAAe,kBAAkB,QAAQ,SAAS;AAExD,YAAI,iBAAiB,MAAM;AACP,4BAAA,QAAQ,SAAS,IAAI;AAAA,QAAA;AAAA,MACzC;AAAA,IACF;AAAA,EACF,CACD;AAEa,gBAAA;AAAA,IACZ,OAAO;AAAA,IACP,SAAS,aAAa;;AACd,YAAA,SAAQ,uBAAkB,YAAlB,mBAA2B;AACzC,UAAI,CAAC,OAAO;AACV;AAAA,MAAA;AAEK,aAAA,OAAO,iBAAiB,OAAO,WAAW;AAAA,IAAA;AAAA,EACnD,CACD;AAEa,gBAAA;AAAA,IACZ,OAAO;AAAA,IACP,UAAU,MAAM;;AACd,UAAI,CAAC,qBAAqB;AACxB;AAAA,MAAA;AAEgB,8BAAA,YAAA,mBAAS,cAAc;AAAA,IAC3C;AAAA,IACA,SAAS,EAAE,WAAW,KAAK;AAAA,EAAA,CAC5B;AAEa,gBAAA;AAAA,IACZ,OAAO;AAAA,IACP,WAAW;AACT,UAAI,iBAAiB,SAAS;AAC5B,yBAAiB,QAAQ,QAAQ;AAAA,MAAA;AAEnC,uBAAiB,UAAU,OAAO,UAAU,WAAW,mBAAmB;AAAA,QACxE;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb,CACD;AAEa,gBAAA;AAAA,IACZ,OAAO;AAAA,IACP,WAAW;AACT,UAAI,CAAC,aAAa;AAChB;AAAA,MAAA;AAEF,YAAM,YAAY;AACX,aAAA,OAAO,YAAY,WAAW,WAAW;AACzC,aAAA,OAAO,SAAS,SAAS;AAAA,IAClC;AAAA,IACA,SAAS;AAAA,MACP,WAAW;AAAA,IAAA;AAAA,EACb,CACD;AAGC,SAAAC,sCAAC,SAAI,KAAK,WAAW,WAAW,WAAW,qBAAqB,SAAS,GAAG,MAAc,CAAA;AAE9F;"}
|
|
1
|
+
{"version":3,"file":"easyv-monaco-editor.es.js","sources":["../../../src/components/easyv-monaco-editor/easyv-monaco-editor.tsx"],"sourcesContent":["import React, { forwardRef, Ref, useImperativeHandle, useRef, useState } from 'react';\nimport { useLatest, useMemoizedFn } from 'ahooks';\nimport classNames from 'classnames';\nimport type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';\nimport { useInitialized, useWatchValue } from '@/hooks';\nimport { EasyvMonacoEditorProps, EasyvMonacoEditorRef } from './types';\n\nfunction EasyvMonacoEditorCpn(props: EasyvMonacoEditorProps, ref: Ref<EasyvMonacoEditorRef>) {\n const {\n className,\n style,\n languageMode,\n code,\n monacoEditorOptions,\n globalVarType = '',\n monaco,\n onChange: propsOnChange,\n onCodeMark: propsOnCodeMark,\n onFocus: propsOnFocus,\n onBlur: propsOnBlur,\n formatOnBlur,\n ignoreErrorCodes,\n initJSCompilerOptions,\n constructionOptions,\n customTheme,\n onEditorMounted: propsOnEditorMounted,\n onError,\n } = props;\n const editorRef = useRef<HTMLDivElement | null>(null);\n const editorInstanceRef = useRef<monacoType.editor.IStandaloneCodeEditor>();\n const globalDataLibRef = useRef<monacoType.IDisposable>();\n const [isFocus, setIsFocus] = useState(false);\n\n const onChangeRef = useLatest(propsOnChange);\n const onCodeMarkRef = useLatest(propsOnCodeMark);\n const onFocusRef = useLatest(propsOnFocus);\n const onBlurRef = useLatest(propsOnBlur);\n const onEditorMountedRef = useLatest(propsOnEditorMounted);\n\n const formatFn = async () => {\n try {\n await editorInstanceRef.current?.getAction('editor.action.formatDocument')?.run();\n return editorInstanceRef.current?.getValue();\n } catch (error) {\n onError?.(error as Error);\n }\n };\n\n useImperativeHandle(ref, () => {\n return {\n editor: editorInstanceRef.current,\n format: formatFn,\n };\n });\n\n const initFn = useMemoizedFn(() => {\n // 配置 JavaScript 语言服务\n monaco.languages.typescript.javascriptDefaults.setCompilerOptions({\n target: monaco.languages.typescript.ScriptTarget.ESNext,\n allowNonTsExtensions: true,\n allowJs: true,\n checkJs: true, // 关键:启用 JS 校验\n noLib: false,\n lib: ['esnext', 'dom'], // dom 会带上浏览器里可使用的方法 如 console, window\n typeRoots: ['node_modules/@types'],\n ...initJSCompilerOptions,\n });\n\n monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({\n noSemanticValidation: false, // 启用语义校验\n noSyntaxValidation: false, // 启用语法校验\n diagnosticCodesToIgnore: ignoreErrorCodes ?? [], // 忽略特定错误\n });\n\n if (editorRef.current) {\n editorInstanceRef.current = monaco.editor.create(editorRef.current, {\n value: code,\n language: languageMode,\n theme: 'vs-dark',\n automaticLayout: true,\n minimap: {\n enabled: false,\n },\n // 启用智能提示的关键设置\n suggest: {\n showKeywords: true, // 关键字建议\n showSnippets: true, // 代码片段建议\n },\n quickSuggestions: true, // 在输入时自动显示建议列表\n suggestOnTriggerCharacters: true, // 当输入触发字符(如点号.)时自动显示建议\n hover: { enabled: true }, // 必须启用 hover\n renderValidationDecorations: 'on', // 确保错误渲染开启\n ...constructionOptions,\n });\n if (!editorInstanceRef.current) {\n return;\n }\n onEditorMountedRef.current?.(editorInstanceRef.current);\n editorInstanceRef.current.onDidChangeModelContent(() => {\n const currentValue = editorInstanceRef.current!.getValue();\n // 更新状态\n onChangeRef.current?.(currentValue);\n });\n\n // 监听诊断变化\n monaco.editor.onDidChangeMarkers(() => {\n const markers = monaco.editor.getModelMarkers({});\n onCodeMarkRef.current?.(markers);\n });\n }\n // 添加聚焦焦事件监听\n const focusDisposable = editorInstanceRef.current!.onDidFocusEditorText(() => {\n setIsFocus(true);\n onFocusRef.current?.();\n });\n // 添加失焦事件监听\n const blurDisposable = editorInstanceRef.current!.onDidBlurEditorText(async () => {\n setIsFocus(false);\n if (formatOnBlur) {\n const currentValue = await formatFn();\n onBlurRef.current?.(currentValue || '');\n } else {\n const currentValue = editorInstanceRef.current!.getValue();\n onBlurRef.current?.(currentValue);\n }\n });\n addGlobalType();\n return () => {\n focusDisposable.dispose();\n blurDisposable.dispose();\n editorInstanceRef.current?.dispose();\n globalDataLibRef.current?.dispose();\n };\n });\n\n useInitialized(initFn);\n\n useWatchValue({\n value: code,\n callback: () => {\n if (editorInstanceRef.current) {\n // 获取当前编辑器的值\n const currentValue = editorInstanceRef.current.getValue();\n // 如果状态中的value和编辑器的当前值不同,则更新编辑器\n if (currentValue !== code) {\n editorInstanceRef.current.setValue(code);\n }\n }\n },\n });\n\n useWatchValue({\n value: languageMode,\n callback(newLanguage) {\n const model = editorInstanceRef.current?.getModel();\n if (!model) {\n return;\n }\n monaco.editor.setModelLanguage(model, newLanguage);\n },\n });\n\n useWatchValue({\n value: { monacoEditorOptions, isFocus },\n callback: () => {\n editorInstanceRef.current?.updateOptions({\n wordWrap: 'on',\n /** 让下面不显示空白区域 */\n scrollBeyondLastLine: false,\n tabSize: 2,\n ...monacoEditorOptions,\n scrollbar: {\n // 默认让聚焦时,内部滚动,失焦时不滚动\n handleMouseWheel: isFocus ? true : false,\n ...monacoEditorOptions?.scrollbar,\n },\n });\n },\n options: { immediate: true },\n });\n\n const addGlobalType = () => {\n if (languageMode !== 'javascript') {\n return;\n }\n globalDataLibRef.current = monaco.languages.typescript.javascriptDefaults.addExtraLib(\n globalVarType,\n 'global-data.d.ts',\n );\n };\n useWatchValue({\n value: globalVarType,\n callback() {\n addGlobalType();\n },\n options: {\n immediate: true,\n },\n });\n\n useWatchValue({\n value: customTheme,\n callback() {\n if (!customTheme) {\n return;\n }\n const themeName = 'customTheme';\n monaco.editor.defineTheme(themeName, customTheme);\n monaco.editor.setTheme(themeName);\n },\n options: {\n immediate: true,\n },\n });\n\n return (\n <div\n ref={editorRef}\n className={classNames('biz-min-h-[200px]', className)}\n style={{\n border: '1px solid #393b4a',\n width: '100%',\n height: '100%',\n ...style,\n }}\n />\n );\n}\n\nexport const EasyvMonacoEditor = forwardRef(EasyvMonacoEditorCpn);\n"],"names":["_a","jsx"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type * as
|
|
1
|
+
import type * as monacoType from 'monaco-editor/esm/vs/editor/editor.api';
|
|
2
2
|
export interface EasyvMonacoEditorProps {
|
|
3
3
|
className?: string;
|
|
4
4
|
style?: React.CSSProperties;
|
|
@@ -66,17 +66,26 @@ export interface EasyvMonacoEditorProps {
|
|
|
66
66
|
],
|
|
67
67
|
```
|
|
68
68
|
*/
|
|
69
|
-
monaco: typeof
|
|
69
|
+
monaco: typeof monacoType;
|
|
70
70
|
/** monaco 对代码检查时的错误或者警告等等。 */
|
|
71
|
-
onCodeMark?: (errors:
|
|
71
|
+
onCodeMark?: (errors: monacoType.editor.IMarker[]) => void;
|
|
72
|
+
onFocus?: () => void;
|
|
72
73
|
onBlur?: (code: string) => void;
|
|
74
|
+
/** 是否在失焦时格式化代码 */
|
|
75
|
+
formatOnBlur?: boolean;
|
|
73
76
|
/** 校验时,要忽略的错误码。 只在初始化生效 */
|
|
74
77
|
ignoreErrorCodes?: number[];
|
|
75
78
|
/** 初始化时,对 ts/js 语言的编译选项,具体选项可查看类型 */
|
|
76
|
-
initJSCompilerOptions?:
|
|
79
|
+
initJSCompilerOptions?: monacoType.languages.typescript.CompilerOptions;
|
|
77
80
|
/** 新建 monaco-editor 时,传入的配置选项,具体选项可查看类型, 大部分的配置 可以通过传递 monacoEditorOptions 来更新 */
|
|
78
|
-
constructionOptions?: Parameters<typeof
|
|
79
|
-
monacoEditorOptions?:
|
|
80
|
-
customTheme?:
|
|
81
|
-
onEditorMounted?: (editor:
|
|
81
|
+
constructionOptions?: Parameters<typeof monacoType.editor.create>[1];
|
|
82
|
+
monacoEditorOptions?: monacoType.editor.IEditorOptions & monacoType.editor.IGlobalEditorOptions;
|
|
83
|
+
customTheme?: monacoType.editor.IStandaloneThemeData;
|
|
84
|
+
onEditorMounted?: (editor: monacoType.editor.IStandaloneCodeEditor) => void;
|
|
85
|
+
onError?: (error: Error) => void;
|
|
82
86
|
}
|
|
87
|
+
export type MonacoEditorInstance = monacoType.editor.IStandaloneCodeEditor | undefined;
|
|
88
|
+
export type EasyvMonacoEditorRef = {
|
|
89
|
+
editor?: MonacoEditorInstance;
|
|
90
|
+
format: () => Promise<string | undefined>;
|
|
91
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from "../../../../../_virtual/_commonjsHelpers.es.js";
|
|
2
|
-
import { __module as classnames$1 } from "../../../../../_virtual/index.
|
|
2
|
+
import { __module as classnames$1 } from "../../../../../_virtual/index.es3.js";
|
|
3
3
|
/*!
|
|
4
4
|
Copyright (c) 2018 Jed Watson.
|
|
5
5
|
Licensed under the MIT License (MIT), see
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from "../../../../../_virtual/_commonjsHelpers.es.js";
|
|
2
|
-
import { __module as coWebWorker } from "../../../../../_virtual/index.
|
|
2
|
+
import { __module as coWebWorker } from "../../../../../_virtual/index.es4.js";
|
|
3
3
|
class CrossOriginWorker extends Worker {
|
|
4
4
|
constructor(scriptUrl) {
|
|
5
5
|
const b = new Blob([`importScripts('${new URL(scriptUrl).toString()}')`], { type: "application/javascript" });
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { getDefaultExportFromCjs } from "../../../../../_virtual/_commonjsHelpers.es.js";
|
|
2
|
-
import { __module as propTypes } from "../../../../../_virtual/index.
|
|
2
|
+
import { __module as propTypes } from "../../../../../_virtual/index.es2.js";
|
|
3
3
|
import { __require as requireReactIs } from "../../../react-is@16.13.1/node_modules/react-is/index.es.js";
|
|
4
4
|
import { __require as requireFactoryWithTypeCheckers } from "./factoryWithTypeCheckers.es.js";
|
|
5
5
|
import { __require as requireFactoryWithThrowingShims } from "./factoryWithThrowingShims.es.js";
|