@easyv/biz-components 1.0.3 → 1.0.5

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/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js +4 -3
  2. package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js.map +1 -1
  3. package/dist/components/easyv-monaco-editor/types.d.ts +2 -0
  4. package/dist/stats.html +1 -1
  5. package/dist/style.pkg.css +1 -1
  6. package/dist/tailwindcss.pkg.css +1 -1
  7. package/package.json +1 -1
  8. package/dist/components/easyv-monaco-editor/index.less.es.js +0 -2
  9. package/dist/components/easyv-monaco-editor/index.less.es.js.map +0 -1
package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js CHANGED
@@ -3,7 +3,7 @@ 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
- import "./index.less.es.js";
6
+ /* empty css */
7
7
  import { useInitialized } from "../../hooks/use-initialized.es.js";
8
8
  import { useWatchValue } from "../../hooks/use-watch-value/use-watch-value.es.js";
9
9
  function EasyvMonacoEditorCpn(props, ref) {
@@ -26,6 +26,7 @@ function EasyvMonacoEditorCpn(props, ref) {
26
26
  customTheme,
27
27
  onEditorMounted: propsOnEditorMounted,
28
28
  globalVarTypeName = "default",
29
+ isDomEnv = true,
29
30
  onError
30
31
  } = props;
31
32
  const editorRef = useRef(null);
@@ -61,7 +62,7 @@ function EasyvMonacoEditorCpn(props, ref) {
61
62
  checkJs: true,
62
63
  // 关键：启用 JS 校验
63
64
  noLib: false,
64
- lib: ["esnext", "dom"],
65
+ lib: isDomEnv ? ["esnext", "dom"] : ["esnext"],
65
66
  // dom 会带上浏览器里可使用的方法 如 console, window
66
67
  typeRoots: ["node_modules/@types"],
67
68
  ...initJSCompilerOptions
@@ -217,7 +218,7 @@ function EasyvMonacoEditorCpn(props, ref) {
217
218
  "div",
218
219
  {
219
220
  ref: editorRef,
220
- className: classNames("biz-min-h-[200px] easyv-monaco-editor", className),
221
+ className: classNames("easyv-monaco-editor", className),
221
222
  style: {
222
223
  border: "1px solid #393b4a",
223
224
  width: "100%",
package/dist/components/easyv-monaco-editor/easyv-monaco-editor.es.js.map CHANGED
@@ -1 +1 @@
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';\nimport './index.less';\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 globalVarTypeName = 'default',\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 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-${globalVarTypeName}.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 className='biz-components-dom' style={{ display: 'contents' }}>\n <div\n ref={editorRef}\n className={classNames('biz-min-h-[200px] easyv-monaco-editor', className)}\n style={{\n border: '1px solid #393b4a',\n width: '100%',\n height: '100%',\n ...style,\n }}\n />\n </div>\n );\n}\n\nexport const EasyvMonacoEditor = forwardRef(EasyvMonacoEditorCpn);\n"],"names":["_a","jsx"],"mappings":"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"}
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';\nimport './index.less';\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 globalVarTypeName = 'default',\n isDomEnv = true,\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: isDomEnv ? ['esnext', 'dom'] : ['esnext'], // 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 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-${globalVarTypeName}.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 className='biz-components-dom' style={{ display: 'contents' }}>\n <div\n ref={editorRef}\n className={classNames('easyv-monaco-editor', className)}\n style={{\n border: '1px solid #393b4a',\n width: '100%',\n height: '100%',\n ...style,\n }}\n />\n </div>\n );\n}\n\nexport const EasyvMonacoEditor = forwardRef(EasyvMonacoEditorCpn);\n"],"names":["_a","jsx"],"mappings":"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"}
package/dist/components/easyv-monaco-editor/types.d.ts CHANGED
@@ -81,6 +81,8 @@ export interface EasyvMonacoEditorProps {
81
81
  customTheme?: monacoType.editor.IStandaloneThemeData;
82
82
  onEditorMounted?: (editor: monacoType.editor.IStandaloneCodeEditor) => void;
83
83
  onError?: (error: Error) => void;
84
+ /** 是否浏览器环境。浏览器环境会 增加 dom 相关的类型 */
85
+ isDomEnv?: boolean;
84
86
  }
85
87
  export type MonacoEditorInstance = monacoType.editor.IStandaloneCodeEditor | undefined;
86
88
  export type EasyvMonacoEditorRef = {