|
|
|
|
@ -47,7 +47,7 @@ type sourceMarkerMap = { |
|
|
|
|
/* eslint-disable-next-line */ |
|
|
|
|
export interface EditorUIProps { |
|
|
|
|
activated: boolean |
|
|
|
|
theme: string |
|
|
|
|
themeType: string |
|
|
|
|
currentFile: string |
|
|
|
|
sourceAnnotationsPerFile: sourceAnnotationMap |
|
|
|
|
markerPerFile: sourceMarkerMap |
|
|
|
|
@ -60,7 +60,7 @@ export interface EditorUIProps { |
|
|
|
|
plugin: { |
|
|
|
|
on: (plugin: string, event: string, listener: any) => void |
|
|
|
|
} |
|
|
|
|
editorAPI:{ |
|
|
|
|
editorAPI: { |
|
|
|
|
findMatches: (uri: string, value: string) => any |
|
|
|
|
getFontSize: () => number, |
|
|
|
|
getValue: (uri: string) => string |
|
|
|
|
@ -78,38 +78,122 @@ export const EditorUI = (props: EditorUIProps) => { |
|
|
|
|
|
|
|
|
|
const [editorModelsState, dispatch] = useReducer(reducerActions, initialState) |
|
|
|
|
|
|
|
|
|
const defineAndSetDarkTheme = (monaco) => { |
|
|
|
|
const formatColor = (name) => { |
|
|
|
|
let color = window.getComputedStyle(document.documentElement).getPropertyValue(name).trim() |
|
|
|
|
if (color.length === 4) { |
|
|
|
|
color = color.concat(color.substr(1)) |
|
|
|
|
} |
|
|
|
|
return color |
|
|
|
|
} |
|
|
|
|
const defineAndSetTheme = (monaco) => { |
|
|
|
|
const themeType = props.themeType === 'dark' ? 'vs-dark' : 'vs' |
|
|
|
|
const themeName = props.themeType === 'dark' ? 'remix-dark' : 'remix-light' |
|
|
|
|
// see https://microsoft.github.io/monaco-editor/playground.html#customizing-the-appearence-exposed-colors
|
|
|
|
|
const lightColor = window.getComputedStyle(document.documentElement).getPropertyValue('--light').trim() |
|
|
|
|
const infoColor = window.getComputedStyle(document.documentElement).getPropertyValue('--info').trim() |
|
|
|
|
const darkColor = window.getComputedStyle(document.documentElement).getPropertyValue('--dark').trim() |
|
|
|
|
const grayColor = window.getComputedStyle(document.documentElement).getPropertyValue('--gray-dark').trim() |
|
|
|
|
monaco.editor.defineTheme('remix-dark', { |
|
|
|
|
base: 'vs-dark', |
|
|
|
|
const lightColor = formatColor('--light') |
|
|
|
|
const infoColor = formatColor('--info') |
|
|
|
|
const darkColor = formatColor('--dark') |
|
|
|
|
const secondaryColor = formatColor('--secondary') |
|
|
|
|
const textColor = formatColor('--text') || darkColor |
|
|
|
|
const textbackground = formatColor('--text-background') || lightColor |
|
|
|
|
|
|
|
|
|
const blueColor = formatColor('--blue') |
|
|
|
|
const successColor = formatColor('--success') |
|
|
|
|
const warningColor = formatColor('--warning') |
|
|
|
|
const yellowColor = formatColor('--yellow') |
|
|
|
|
const pinkColor = formatColor('--pink') |
|
|
|
|
const locationColor = '#9e7e08' |
|
|
|
|
const purpleColor = formatColor('--purple') |
|
|
|
|
const dangerColor = formatColor('--danger') |
|
|
|
|
|
|
|
|
|
monaco.editor.defineTheme(themeName, { |
|
|
|
|
base: themeType, |
|
|
|
|
inherit: true, // can also be false to completely replace the builtin rules
|
|
|
|
|
rules: [ |
|
|
|
|
{ background: darkColor.replace('#', '') }, |
|
|
|
|
{ token: 'keyword.external', foreground: infoColor } |
|
|
|
|
{ foreground: textColor.replace('#', '') }, |
|
|
|
|
|
|
|
|
|
// global variables
|
|
|
|
|
{ token: 'keyword.abi', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.block', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.bytes', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.msg', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.tx', foreground: blueColor }, |
|
|
|
|
|
|
|
|
|
// global functions
|
|
|
|
|
{ token: 'keyword.assert', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.require', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.revert', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.blockhash', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.keccak256', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.sha256', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.ripemd160', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.ecrecover', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.addmod', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.mulmod', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.selfdestruct', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.type ', foreground: blueColor }, |
|
|
|
|
{ token: 'keyword.gasleft', foreground: blueColor }, |
|
|
|
|
|
|
|
|
|
// specials
|
|
|
|
|
{ token: 'keyword.super', foreground: infoColor }, |
|
|
|
|
{ token: 'keyword.this', foreground: infoColor }, |
|
|
|
|
|
|
|
|
|
// for state variables
|
|
|
|
|
{ token: 'keyword.constants', foreground: warningColor }, |
|
|
|
|
{ token: 'keyword.override', foreground: warningColor }, |
|
|
|
|
{ token: 'keyword.immutable', foreground: warningColor }, |
|
|
|
|
|
|
|
|
|
// data location
|
|
|
|
|
{ token: 'keyword.memory', foreground: locationColor }, |
|
|
|
|
{ token: 'keyword.storage', foreground: locationColor }, |
|
|
|
|
{ token: 'keyword.calldata', foreground: locationColor }, |
|
|
|
|
|
|
|
|
|
// // forf functions and modifiers
|
|
|
|
|
{ token: 'keyword.virtual', foreground: purpleColor }, |
|
|
|
|
|
|
|
|
|
// // for Events
|
|
|
|
|
{ token: 'keyword.indexed', foreground: yellowColor }, |
|
|
|
|
{ token: 'keyword.anonymous', foreground: yellowColor }, |
|
|
|
|
|
|
|
|
|
// // for functions
|
|
|
|
|
{ token: 'keyword.external', foreground: successColor }, |
|
|
|
|
{ token: 'keyword.internal', foreground: successColor }, |
|
|
|
|
{ token: 'keyword.private', foreground: successColor }, |
|
|
|
|
{ token: 'keyword.public', foreground: successColor }, |
|
|
|
|
{ token: 'keyword.view', foreground: successColor }, |
|
|
|
|
{ token: 'keyword.pure', foreground: successColor }, |
|
|
|
|
{ token: 'keyword.payable', foreground: successColor }, |
|
|
|
|
{ token: 'keyword.nonpayable', foreground: successColor }, |
|
|
|
|
|
|
|
|
|
// Errors
|
|
|
|
|
{ token: 'keyword.Error', foreground: dangerColor }, |
|
|
|
|
{ token: 'keyword.Panic', foreground: dangerColor }, |
|
|
|
|
|
|
|
|
|
// special functions
|
|
|
|
|
{ token: 'keyword.fallback', foreground: pinkColor }, |
|
|
|
|
{ token: 'keyword.receive', foreground: pinkColor }, |
|
|
|
|
{ token: 'keyword.constructor', foreground: pinkColor } |
|
|
|
|
|
|
|
|
|
], |
|
|
|
|
colors: { |
|
|
|
|
'editor.background': darkColor, |
|
|
|
|
// see https://code.visualstudio.com/api/references/theme-color for more settings
|
|
|
|
|
'editor.background': textbackground, |
|
|
|
|
'editorSuggestWidget.background': lightColor, |
|
|
|
|
'editorSuggestWidget.selectedBackground': lightColor, |
|
|
|
|
'editorSuggestWidget.highlightForeground': infoColor, |
|
|
|
|
'editor.lineHighlightBorder': lightColor, |
|
|
|
|
'editor.lineHighlightBackground': grayColor, |
|
|
|
|
'editorGutter.background': lightColor |
|
|
|
|
'editor.lineHighlightBorder': secondaryColor, |
|
|
|
|
'editor.lineHighlightBackground': textbackground === darkColor ? lightColor : secondaryColor, |
|
|
|
|
'editorGutter.background': lightColor, |
|
|
|
|
'minimap.background': lightColor |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
monacoRef.current.editor.setTheme('remix-dark') |
|
|
|
|
monacoRef.current.editor.setTheme(themeName) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
|
if (!monacoRef.current) return |
|
|
|
|
if (props.theme === 'remix-dark') { |
|
|
|
|
defineAndSetDarkTheme(monacoRef.current) |
|
|
|
|
} else monacoRef.current.editor.setTheme(props.theme) |
|
|
|
|
}, [props.theme]) |
|
|
|
|
defineAndSetTheme(monacoRef.current) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
const setAnnotationsbyFile = (uri) => { |
|
|
|
|
if (props.sourceAnnotationsPerFile[uri]) { |
|
|
|
|
@ -236,9 +320,7 @@ export const EditorUI = (props: EditorUIProps) => { |
|
|
|
|
|
|
|
|
|
function handleEditorDidMount (editor) { |
|
|
|
|
editorRef.current = editor |
|
|
|
|
if (props.theme === 'remix-dark') { |
|
|
|
|
defineAndSetDarkTheme(monacoRef.current) |
|
|
|
|
} else monacoRef.current.editor.setTheme(props.theme) |
|
|
|
|
defineAndSetTheme(monacoRef.current) |
|
|
|
|
reducerListener(props.plugin, dispatch, monacoRef.current, editorRef.current, props.events) |
|
|
|
|
props.events.onEditorMounted() |
|
|
|
|
editor.onMouseUp((e) => { |
|
|
|
|
@ -270,7 +352,7 @@ export const EditorUI = (props: EditorUIProps) => { |
|
|
|
|
language={editorModelsState[props.currentFile] ? editorModelsState[props.currentFile].language : 'text'} |
|
|
|
|
onMount={handleEditorDidMount} |
|
|
|
|
beforeMount={handleEditorWillMount} |
|
|
|
|
options= { { glyphMargin: true } } |
|
|
|
|
options={{ glyphMargin: true }} |
|
|
|
|
/> |
|
|
|
|
) |
|
|
|
|
} |
|
|
|
|
|
Liana Husikyan
3 years ago
committed by
GitHub