Browse Source

feat: add monokai theme to code editor

master
smallstonesk 4 years ago
parent
commit
945ff513fb
  1. 2
      packages/core/package.json
  2. 35
      packages/core/src/components/codeEditor/index.tsx
  3. 144
      packages/core/src/components/codeEditor/theme-monokai.ts
  4. 43
      packages/core/src/mods/settingBar/components/code/index.tsx
  5. 39
      packages/core/src/mods/settingBar/components/json/index.tsx

2
packages/core/package.json

@ -40,13 +40,11 @@
"@antv/x6": "^1.3.0",
"@imove/compile-code": "^0.0.1",
"@monaco-editor/react": "^3.7.4",
"ace-builds": "^1.4.12",
"antd": "^4.5.3",
"axios": "^0.21.0",
"jszip": "^3.5.0",
"lodash.merge": "^4.6.2",
"query-string": "^6.13.7",
"react-ace": "^9.1.3",
"react-color": "^2.18.1",
"react-json-view": "^1.19.1"
},

35
packages/core/src/components/codeEditor/index.tsx

@ -0,0 +1,35 @@
import React, {useMemo} from 'react';
import {
monaco,
ControlledEditor,
ControlledEditorProps
} from '@monaco-editor/react';
import monokaiTheme from './theme-monokai';
monaco.init().then((monaco) => {
monaco.editor.defineTheme('monokai', monokaiTheme);
});
const CODE_EDITOR_OPTIONS = {
fontSize: 14
};
export const CodeEditor: React.FC<ControlledEditorProps> = (props) => {
const {options, ...rest} = props;
const editorOptions = useMemo(() => {
return Object.assign({}, CODE_EDITOR_OPTIONS, options);
}, [options]);
return (
<ControlledEditor
theme={'monokai'}
language={'javascript'}
options={editorOptions}
{...rest}
/>
);
};
export default CodeEditor;

144
packages/core/src/components/codeEditor/theme-monokai.ts

@ -0,0 +1,144 @@
export default {
"base": "vs-dark",
"inherit": true,
"rules": [
{
"background": "272822",
"token": ""
},
{
"foreground": "75715e",
"token": "comment"
},
{
"foreground": "e6db74",
"token": "string"
},
{
"foreground": "ae81ff",
"token": "constant.numeric"
},
{
"foreground": "ae81ff",
"token": "constant.language"
},
{
"foreground": "ae81ff",
"token": "constant.character"
},
{
"foreground": "ae81ff",
"token": "constant.other"
},
{
"foreground": "f92672",
"token": "keyword"
},
{
"foreground": "f92672",
"token": "storage"
},
{
"foreground": "66d9ef",
"fontStyle": "italic",
"token": "storage.type"
},
{
"foreground": "a6e22e",
"fontStyle": "underline",
"token": "entity.name.class"
},
{
"foreground": "a6e22e",
"fontStyle": "italic underline",
"token": "entity.other.inherited-class"
},
{
"foreground": "a6e22e",
"token": "entity.name.function"
},
{
"foreground": "fd971f",
"fontStyle": "italic",
"token": "variable.parameter"
},
{
"foreground": "f92672",
"token": "entity.name.tag"
},
{
"foreground": "a6e22e",
"token": "entity.other.attribute-name"
},
{
"foreground": "66d9ef",
"token": "support.function"
},
{
"foreground": "66d9ef",
"token": "support.constant"
},
{
"foreground": "66d9ef",
"fontStyle": "italic",
"token": "support.type"
},
{
"foreground": "66d9ef",
"fontStyle": "italic",
"token": "support.class"
},
{
"foreground": "f8f8f0",
"background": "f92672",
"token": "invalid"
},
{
"foreground": "f8f8f0",
"background": "ae81ff",
"token": "invalid.deprecated"
},
{
"foreground": "cfcfc2",
"token": "meta.structure.dictionary.json string.quoted.double.json"
},
{
"foreground": "75715e",
"token": "meta.diff"
},
{
"foreground": "75715e",
"token": "meta.diff.header"
},
{
"foreground": "f92672",
"token": "markup.deleted"
},
{
"foreground": "a6e22e",
"token": "markup.inserted"
},
{
"foreground": "e6db74",
"token": "markup.changed"
},
{
"foreground": "ae81ffa0",
"token": "constant.numeric.line-number.find-in-files - match"
},
{
"foreground": "e6db74",
"token": "entity.name.filename.find-in-files"
}
],
"colors": {
"editor.foreground": "#F8F8F2",
"editor.background": "#272822",
"editor.selectionBackground": "#49483E",
"editor.lineHighlightBackground": "#3E3D32",
"editorCursor.foreground": "#F8F8F0",
"editorWhitespace.foreground": "#3B3A32",
"editorIndentGuide.activeBackground": "#9D550FB0",
"editor.selectionHighlightBorder": "#222218"
}
}

43
packages/core/src/mods/settingBar/components/code/index.tsx

@ -4,14 +4,9 @@ import 'antd/es/modal/style';
import 'antd/es/button/style';
import styles from './index.module.less';
// import AceEditor from 'react-ace';
import { ControlledEditor } from "@monaco-editor/react";
import { Button, Modal } from 'antd';
import { Graph } from '@antv/x6';
// import 'ace-builds/src-noconflict/theme-dracula';
// import 'ace-builds/src-noconflict/mode-javascript';
// import 'ace-builds/src-noconflict/snippets/javascript';
// import 'ace-builds/src-noconflict/ext-language_tools';
import { Button, Modal } from 'antd';
import CodeEditor from '../../../../components/codeEditor';
interface IProps {
value: any;
@ -66,15 +61,6 @@ interface IEditorModalProps {
onCancel: () => void;
}
const CODE_EDITOR_STYLE = {
width: '100%',
height: 600,
};
const CODE_EDITOR_OPTIONS = {
fontSize: 14,
useWorker: false,
};
const EditModal: React.FC<IEditorModalProps> = (props) => {
const { visible, title, value, onOk, onCancel } = props;
const [code, setCode] = useState<string>(value);
@ -94,7 +80,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
const onClickOk = (): void => {
onOk(code);
};
const onChangeCode = (ev: any, newCode: string): void => {
const onChangeCode = (ev: any, newCode: string | undefined = ''): void => {
if (newCode !== code) {
setCode(newCode);
}
@ -111,29 +97,12 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onClickOk}
onCancel={onCancel}
>
<ControlledEditor
width="100%"
height="600px"
<CodeEditor
value={code}
// @ts-ignore
width={'100%'}
height={'600px'}
onChange={onChangeCode}
language="javascript"
theme="dark"
/>
{/* <AceEditor
style={CODE_EDITOR_STYLE}
tabSize={2}
value={code}
focus={true}
theme={'dracula'}
mode={'javascript'}
name={'code-editor'}
enableSnippets={true}
enableLiveAutocompletion={true}
enableBasicAutocompletion={true}
setOptions={CODE_EDITOR_OPTIONS}
onChange={onChangeCode}
/> */}
</Modal>
);
};

39
packages/core/src/mods/settingBar/components/json/index.tsx

@ -5,15 +5,10 @@ import 'antd/es/button/style';
import 'antd/es/message/style';
import styles from './index.module.less';
// import AceEditor from 'react-ace';
import { ControlledEditor } from "@monaco-editor/react";
import JsonView from 'react-json-view';
import { Button, Modal, message } from 'antd';
import { safeParse } from '../../../../utils';
// import 'ace-builds/src-noconflict/mode-json';
// import 'ace-builds/src-noconflict/theme-dracula';
// import 'ace-builds/src-noconflict/snippets/json';
// import 'ace-builds/src-noconflict/ext-language_tools';
import CodeEditor from '../../../../components/codeEditor';
interface IJsonProps {
value: any;
@ -71,14 +66,6 @@ interface IEditorModalProps {
onCancel: () => void;
}
const CODE_EDITOR_STYLE = {
width: '100%',
height: 400,
};
const CODE_EDITOR_OPTIONS = {
useWorker: false,
};
const EditModal: React.FC<IEditorModalProps> = (props) => {
const { visible, title, value, onOk, onCancel } = props;
const [json, setJson] = useState<string>('');
@ -104,7 +91,7 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
console.log('save failed, the error is:', error.message);
}
};
const onChangeJson = (ev: any, newJson: string): void => {
const onChangeJson = (ev: any, newJson: string | undefined = ''): void => {
if (newJson !== json) {
setJson(newJson);
}
@ -120,28 +107,12 @@ const EditModal: React.FC<IEditorModalProps> = (props) => {
onOk={onClickOk}
onCancel={onCancel}
>
<ControlledEditor
width="100%"
height="400px"
<CodeEditor
value={json}
// @ts-ignore
width={'100%'}
height={'600px'}
onChange={onChangeJson}
language="javascript"
theme="dark"
/>
{/* <AceEditor
style={CODE_EDITOR_STYLE}
tabSize={2}
value={json}
focus={true}
mode={'json'}
theme={'dracula'}
name={'json-editor'}
enableSnippets={true}
enableBasicAutocompletion={true}
setOptions={CODE_EDITOR_OPTIONS}
onChange={onChangeJson}
/> */}
</Modal>
);
};

Loading…
Cancel
Save