From e1e49690fca65e6dd6c356f2f4ff97b12b8bbd98 Mon Sep 17 00:00:00 2001 From: Carrotzpc Date: Tue, 23 Jan 2024 17:47:42 +0800 Subject: [PATCH] feat(monaco-editor): support auto-switch light/dark theme --- README.md | 12 +++--- .../demos/SpecifyVersion copy.tsx | 42 ------------------- src/MonacoEditor/demos/SpecifyVersion.tsx | 1 - .../demos/playground/DiffEditor2.tsx | 2 +- src/MonacoEditor/demos/playground/index.tsx | 2 +- src/MonacoEditor/index.md | 2 +- src/MonacoEditor/index.tsx | 20 +++++++-- 7 files changed, 26 insertions(+), 55 deletions(-) delete mode 100644 src/MonacoEditor/demos/SpecifyVersion copy.tsx diff --git a/README.md b/README.md index cf135137..d0e5acaf 100644 --- a/README.md +++ b/README.md @@ -81,13 +81,13 @@ const nextConfig = { > and it is recommended to use [antd-style](https://ant-design.github.io/antd-style/) as the default css-in-js styling solution. ```tsx -import { ThemeProvider } from '@yuntijs/ui'; -import { Button } from 'antd'; +import { ConfigProvider } from '@yuntijs/ui'; +import { Logo } from 'antd'; export default () => ( - - - + + + ); ``` @@ -174,6 +174,6 @@ This project is [MIT](./LICENSE) licensed. [npm-downloads-shield]: https://img.shields.io/npm/dt/@yuntijs/ui?labelColor=black&style=flat-square [npm-release-link]: https://www.npmjs.com/package/@yuntijs/ui [npm-release-shield]: https://img.shields.io/npm/v/@yuntijs/ui?color=369eff&labelColor=black&logo=npm&logoColor=white&style=flat-square -[pr-welcome-link]: https://github.com/yuntijs/yunti-chat/pulls +[pr-welcome-link]: https://github.com/yuntijs/yunti-ui/pulls [pr-welcome-shield]: https://img.shields.io/badge/☁️_pr_welcome-%E2%86%92-ffcb47?labelColor=black&style=for-the-badge [profile-link]: https://github.com/yuntijs diff --git a/src/MonacoEditor/demos/SpecifyVersion copy.tsx b/src/MonacoEditor/demos/SpecifyVersion copy.tsx deleted file mode 100644 index 0d032243..00000000 --- a/src/MonacoEditor/demos/SpecifyVersion copy.tsx +++ /dev/null @@ -1,42 +0,0 @@ -/** - * iframe: true - * compact: true - */ -import { MonacoEditor } from '@yuntijs/ui'; - -export default () => { - return ( -
- { - return ( - { - // eslint-disable-next-line no-console - console.log(next); - }} - version="0.33.0" - /> - ) - };`} - editorDidMount={(monaco, editor) => { - // eslint-disable-next-line no-console - console.log(monaco, editor); - }} - height={240} - language="javascript" - onChange={next => { - // eslint-disable-next-line no-console - console.log(next); - }} - version="0.19.3" - /> -
- ); -}; diff --git a/src/MonacoEditor/demos/SpecifyVersion.tsx b/src/MonacoEditor/demos/SpecifyVersion.tsx index 6c7e612e..971fc991 100644 --- a/src/MonacoEditor/demos/SpecifyVersion.tsx +++ b/src/MonacoEditor/demos/SpecifyVersion.tsx @@ -14,7 +14,6 @@ export default () => { display: 'flex', alignItems: 'center', justifyContent: 'center', - background: '#fff', height: '100vh', }} > diff --git a/src/MonacoEditor/demos/playground/DiffEditor2.tsx b/src/MonacoEditor/demos/playground/DiffEditor2.tsx index 79a7d590..084655bf 100644 --- a/src/MonacoEditor/demos/playground/DiffEditor2.tsx +++ b/src/MonacoEditor/demos/playground/DiffEditor2.tsx @@ -24,7 +24,7 @@ export default () => { }, theme: { options: ['vs', 'vs-dark', 'hc-light', 'hc-black'], - value: 'vs', + value: '', }, supportFullScreen: true, enableOutline: false, diff --git a/src/MonacoEditor/demos/playground/index.tsx b/src/MonacoEditor/demos/playground/index.tsx index 2d350017..1502d150 100644 --- a/src/MonacoEditor/demos/playground/index.tsx +++ b/src/MonacoEditor/demos/playground/index.tsx @@ -22,7 +22,7 @@ export default () => { }, theme: { options: ['vs', 'vs-dark', 'hc-light', 'hc-black'], - value: 'vs', + value: '', }, supportFullScreen: true, enableOutline: false, diff --git a/src/MonacoEditor/index.md b/src/MonacoEditor/index.md index 1d346171..2ff17884 100644 --- a/src/MonacoEditor/index.md +++ b/src/MonacoEditor/index.md @@ -71,7 +71,7 @@ export default () => { - `language` the initial language of the auto created model in the editor. -- `theme` the theme of the editor. Defaults to `vs`, also supports `vs-dark`, `hc-light`, `hc-black`. +- `theme` the theme of the editor. The default is `vs` or `vs-dark`, which will automatically change with the antd theme according to the antd theme, also supports `vs-dark`, `hc-light`, `hc-black`. If you specify this field, this theme will be fixed. - `readOnly` Should the editor be read only. See also domReadOnly. Defaults to false. diff --git a/src/MonacoEditor/index.tsx b/src/MonacoEditor/index.tsx index 49d179dc..c83ddbf5 100644 --- a/src/MonacoEditor/index.tsx +++ b/src/MonacoEditor/index.tsx @@ -5,13 +5,18 @@ import type { IGeneralManacoEditorProps, ISingleMonacoEditorProps, } from '@alilc/lowcode-plugin-base-monaco-editor/lib/helper'; +import { theme as antdTheme } from 'antd'; import type { editor as IEditor } from 'monaco-editor'; import React, { useMemo, useState } from 'react'; import { useCdnFn } from '..'; -export * from '@alilc/lowcode-plugin-base-monaco-editor/es/controller'; -export * from '@alilc/lowcode-plugin-base-monaco-editor/es/monaco'; +const { useToken } = antdTheme; + +export { + type EditorMeta, + Controller as MonacoController, +} from '@alilc/lowcode-plugin-base-monaco-editor/es/controller'; export interface BaseMonacoEditorProps extends IGeneralManacoEditorProps { /** Should the editor be read only. See also domReadOnly. Defaults to false. */ @@ -43,6 +48,7 @@ export const BaseMonacoEditor: React.FC< lineNumbers = 'on', wordWrap = 'off', contextmenu = true, + theme: themeFromProps, minimapEnabled = false, version = '0.45.0', requireConfig: requireConfigFromProps = {}, @@ -51,6 +57,14 @@ export const BaseMonacoEditor: React.FC< ...otherProps } = props; + const token = useToken(); + const theme = useMemo(() => { + if (themeFromProps) { + return themeFromProps; + } + return token.theme.id === 2 ? 'vs-dark' : 'vs'; + }, [token.theme.id, themeFromProps]); + const [editorInstance, setEditorInstance] = useState(); const handleEditorDidMount: BaseMonacoEditorProps['editorDidMount'] = (monaco, editor) => { setEditorInstance(editor); @@ -64,7 +78,6 @@ export const BaseMonacoEditor: React.FC< } }; - // @Todo: auto change light/dark theme const editorOptions = useMemo(() => { const newOps = Object.assign({}, options, { readOnly, @@ -105,6 +118,7 @@ export const BaseMonacoEditor: React.FC< onChange={onChange} options={editorOptions} requireConfig={requireConfig} + theme={theme} {...otherProps} /> );