Skip to content

Commit

Permalink
feat(monaco-editor): support auto-switch light/dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
Carrotzpc committed Jan 23, 2024
1 parent 321ef89 commit e1e4969
Show file tree
Hide file tree
Showing 7 changed files with 26 additions and 55 deletions.
12 changes: 6 additions & 6 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 () => (
<ThemeProvider>
<Button>Hello YuntiUI</Button>
</ThemeProvider>
<ConfigProvider>
<Logo />
</ConfigProvider>
);
```

Expand Down Expand Up @@ -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
42 changes: 0 additions & 42 deletions src/MonacoEditor/demos/SpecifyVersion copy.tsx

This file was deleted.

1 change: 0 additions & 1 deletion src/MonacoEditor/demos/SpecifyVersion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export default () => {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
background: '#fff',
height: '100vh',
}}
>
Expand Down
2 changes: 1 addition & 1 deletion src/MonacoEditor/demos/playground/DiffEditor2.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default () => {
},
theme: {
options: ['vs', 'vs-dark', 'hc-light', 'hc-black'],
value: 'vs',
value: '',
},
supportFullScreen: true,
enableOutline: false,
Expand Down
2 changes: 1 addition & 1 deletion src/MonacoEditor/demos/playground/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default () => {
},
theme: {
options: ['vs', 'vs-dark', 'hc-light', 'hc-black'],
value: 'vs',
value: '',
},
supportFullScreen: true,
enableOutline: false,
Expand Down
2 changes: 1 addition & 1 deletion src/MonacoEditor/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
20 changes: 17 additions & 3 deletions src/MonacoEditor/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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. */
Expand Down Expand Up @@ -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 = {},
Expand All @@ -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<IEditorInstance>();
const handleEditorDidMount: BaseMonacoEditorProps['editorDidMount'] = (monaco, editor) => {
setEditorInstance(editor);
Expand All @@ -64,7 +78,6 @@ export const BaseMonacoEditor: React.FC<
}
};

// @Todo: auto change light/dark theme
const editorOptions = useMemo(() => {
const newOps = Object.assign({}, options, {
readOnly,
Expand Down Expand Up @@ -105,6 +118,7 @@ export const BaseMonacoEditor: React.FC<
onChange={onChange}
options={editorOptions}
requireConfig={requireConfig}
theme={theme}
{...otherProps}
/>
);
Expand Down

0 comments on commit e1e4969

Please sign in to comment.