|
|
@ -1,7 +1,7 @@ |
|
|
|
import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
|
|
|
|
import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
|
|
|
|
import { FormattedMessage, useIntl } from 'react-intl' |
|
|
|
import { FormattedMessage, useIntl } from 'react-intl' |
|
|
|
import { isArray } from 'lodash' |
|
|
|
import { isArray } from 'lodash' |
|
|
|
import Editor, { loader, Monaco } from '@monaco-editor/react' |
|
|
|
import Editor, { DiffEditor, loader, Monaco } from '@monaco-editor/react' |
|
|
|
import { AlertModal } from '@remix-ui/app' |
|
|
|
import { AlertModal } from '@remix-ui/app' |
|
|
|
import { ConsoleLogs, QueryParams } from '@remix-project/remix-lib' |
|
|
|
import { ConsoleLogs, QueryParams } from '@remix-project/remix-lib' |
|
|
|
import { reducerActions, reducerListener, initialState } from './actions/editor' |
|
|
|
import { reducerActions, reducerListener, initialState } from './actions/editor' |
|
|
@ -134,6 +134,8 @@ export interface EditorUIProps { |
|
|
|
activated: boolean |
|
|
|
activated: boolean |
|
|
|
themeType: string |
|
|
|
themeType: string |
|
|
|
currentFile: string |
|
|
|
currentFile: string |
|
|
|
|
|
|
|
currentDiffFile: string |
|
|
|
|
|
|
|
isDiff: boolean |
|
|
|
events: { |
|
|
|
events: { |
|
|
|
onBreakPointAdded: (file: string, line: number) => void |
|
|
|
onBreakPointAdded: (file: string, line: number) => void |
|
|
|
onBreakPointCleared: (file: string, line: number) => void |
|
|
|
onBreakPointCleared: (file: string, line: number) => void |
|
|
@ -146,6 +148,8 @@ export interface EditorUIProps { |
|
|
|
export const EditorUI = (props: EditorUIProps) => { |
|
|
|
export const EditorUI = (props: EditorUIProps) => { |
|
|
|
const intl = useIntl() |
|
|
|
const intl = useIntl() |
|
|
|
const [, setCurrentBreakpoints] = useState({}) |
|
|
|
const [, setCurrentBreakpoints] = useState({}) |
|
|
|
|
|
|
|
const [isDiff, setIsDiff] = useState(false) |
|
|
|
|
|
|
|
const [isSplit, setIsSplit] = useState(true) |
|
|
|
const defaultEditorValue = ` |
|
|
|
const defaultEditorValue = ` |
|
|
|
\t\t\t\t\t\t\t ____ _____ __ __ ___ __ __ ___ ____ _____
|
|
|
|
\t\t\t\t\t\t\t ____ _____ __ __ ___ __ __ ___ ____ _____
|
|
|
|
\t\t\t\t\t\t\t| _ \\ | ____| | \\/ | |_ _| \\ \\/ / |_ _| | _ \\ | ____| |
|
|
|
\t\t\t\t\t\t\t| _ \\ | ____| | \\/ | |_ _| \\ \\/ / |_ _| | _ \\ | ____| |
|
|
@ -170,6 +174,8 @@ export const EditorUI = (props: EditorUIProps) => { |
|
|
|
const pasteCodeRef = useRef(false) |
|
|
|
const pasteCodeRef = useRef(false) |
|
|
|
const editorRef = useRef(null) |
|
|
|
const editorRef = useRef(null) |
|
|
|
const monacoRef = useRef<Monaco>(null) |
|
|
|
const monacoRef = useRef<Monaco>(null) |
|
|
|
|
|
|
|
const diffEditorRef = useRef<any>(null) |
|
|
|
|
|
|
|
|
|
|
|
const currentFunction = useRef('') |
|
|
|
const currentFunction = useRef('') |
|
|
|
const currentFileRef = useRef('') |
|
|
|
const currentFileRef = useRef('') |
|
|
|
const currentUrlRef = useRef('') |
|
|
|
const currentUrlRef = useRef('') |
|
|
@ -325,11 +331,20 @@ export const EditorUI = (props: EditorUIProps) => { |
|
|
|
}) |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
|
useEffect(() => { |
|
|
|
if (!editorRef.current || !props.currentFile) return |
|
|
|
console.log(props.isDiff, props.currentFile) |
|
|
|
|
|
|
|
if (!(editorRef.current || diffEditorRef.current ) || !props.currentFile) return |
|
|
|
currentFileRef.current = props.currentFile |
|
|
|
currentFileRef.current = props.currentFile |
|
|
|
props.plugin.call('fileManager', 'getUrlFromPath', currentFileRef.current).then((url) => (currentUrlRef.current = url.file)) |
|
|
|
props.plugin.call('fileManager', 'getUrlFromPath', currentFileRef.current).then((url) => (currentUrlRef.current = url.file)) |
|
|
|
|
|
|
|
|
|
|
|
const file = editorModelsState[props.currentFile] |
|
|
|
const file = editorModelsState[props.currentFile] |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
props.isDiff && diffEditorRef && diffEditorRef.current && diffEditorRef.current.setModel({ |
|
|
|
|
|
|
|
original: editorModelsState[props.currentDiffFile].model, |
|
|
|
|
|
|
|
modified: file.model |
|
|
|
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
props.isDiff && diffEditorRef.current.getModifiedEditor().updateOptions({ readOnly: editorModelsState[props.currentFile].readOnly }) |
|
|
|
|
|
|
|
|
|
|
|
editorRef.current.setModel(file.model) |
|
|
|
editorRef.current.setModel(file.model) |
|
|
|
editorRef.current.updateOptions({ |
|
|
|
editorRef.current.updateOptions({ |
|
|
|
readOnly: editorModelsState[props.currentFile].readOnly, |
|
|
|
readOnly: editorModelsState[props.currentFile].readOnly, |
|
|
@ -345,7 +360,7 @@ export const EditorUI = (props: EditorUIProps) => { |
|
|
|
} else if (file.language === 'circom') { |
|
|
|
} else if (file.language === 'circom') { |
|
|
|
monacoRef.current.editor.setModelLanguage(file.model, 'remix-circom') |
|
|
|
monacoRef.current.editor.setModelLanguage(file.model, 'remix-circom') |
|
|
|
} |
|
|
|
} |
|
|
|
}, [props.currentFile]) |
|
|
|
}, [props.currentFile, props.isDiff]) |
|
|
|
|
|
|
|
|
|
|
|
const convertToMonacoDecoration = (decoration: lineText | sourceAnnotation | sourceMarker, typeOfDecoration: string) => { |
|
|
|
const convertToMonacoDecoration = (decoration: lineText | sourceAnnotation | sourceMarker, typeOfDecoration: string) => { |
|
|
|
if (typeOfDecoration === 'sourceAnnotationsPerFile') { |
|
|
|
if (typeOfDecoration === 'sourceAnnotationsPerFile') { |
|
|
@ -611,6 +626,14 @@ export const EditorUI = (props: EditorUIProps) => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function handleDiffEditorDidMount(editor: any) { |
|
|
|
|
|
|
|
console.log('diff editor mounted') |
|
|
|
|
|
|
|
diffEditorRef.current = editor |
|
|
|
|
|
|
|
defineAndSetTheme(monacoRef.current) |
|
|
|
|
|
|
|
reducerListener(props.plugin, dispatch, monacoRef.current, diffEditorRef.current.getModifiedEditor(), props.events) |
|
|
|
|
|
|
|
props.events.onEditorMounted() |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function handleEditorDidMount(editor) { |
|
|
|
function handleEditorDidMount(editor) { |
|
|
|
editorRef.current = editor |
|
|
|
editorRef.current = editor |
|
|
|
defineAndSetTheme(monacoRef.current) |
|
|
|
defineAndSetTheme(monacoRef.current) |
|
|
@ -923,8 +946,22 @@ export const EditorUI = (props: EditorUIProps) => { |
|
|
|
|
|
|
|
|
|
|
|
return ( |
|
|
|
return ( |
|
|
|
<div className="w-100 h-100 d-flex flex-column-reverse"> |
|
|
|
<div className="w-100 h-100 d-flex flex-column-reverse"> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<DiffEditor |
|
|
|
|
|
|
|
originalLanguage={'remix-solidity'} |
|
|
|
|
|
|
|
modifiedLanguage={'remix-solidity'} |
|
|
|
|
|
|
|
original={''} |
|
|
|
|
|
|
|
modified={''} |
|
|
|
|
|
|
|
onMount={handleDiffEditorDidMount} |
|
|
|
|
|
|
|
beforeMount={handleEditorWillMount} |
|
|
|
|
|
|
|
options={{ readOnly: false, renderSideBySide: isSplit }} |
|
|
|
|
|
|
|
width='100%' |
|
|
|
|
|
|
|
height={props.isDiff ? '100%' : '0%'} |
|
|
|
|
|
|
|
className={props.isDiff ? "d-block" : "d-none"} |
|
|
|
|
|
|
|
/> |
|
|
|
<Editor |
|
|
|
<Editor |
|
|
|
width="100%" |
|
|
|
width="100%" |
|
|
|
|
|
|
|
height={props.isDiff ? '0%' : '100%'} |
|
|
|
path={props.currentFile} |
|
|
|
path={props.currentFile} |
|
|
|
language={editorModelsState[props.currentFile] ? editorModelsState[props.currentFile].language : 'text'} |
|
|
|
language={editorModelsState[props.currentFile] ? editorModelsState[props.currentFile].language : 'text'} |
|
|
|
onMount={handleEditorDidMount} |
|
|
|
onMount={handleEditorDidMount} |
|
|
@ -937,6 +974,7 @@ export const EditorUI = (props: EditorUIProps) => { |
|
|
|
} |
|
|
|
} |
|
|
|
}} |
|
|
|
}} |
|
|
|
defaultValue={defaultEditorValue} |
|
|
|
defaultValue={defaultEditorValue} |
|
|
|
|
|
|
|
className={props.isDiff ? "d-none" : "d-block"} |
|
|
|
/> |
|
|
|
/> |
|
|
|
{editorModelsState[props.currentFile]?.readOnly && ( |
|
|
|
{editorModelsState[props.currentFile]?.readOnly && ( |
|
|
|
<span className="pl-4 h6 mb-0 w-100 alert-info position-absolute bottom-0 end-0"> |
|
|
|
<span className="pl-4 h6 mb-0 w-100 alert-info position-absolute bottom-0 end-0"> |
|
|
|