chore: ace

libs/remix-ui/editor/src/lib/actions/ace-editor.ts

+import { Ace } from 'ace-builds'
+
+export interface Action {
+  type: string;
+  payload: Record<string, any>
+  ace: Ace.Editor,
+  editor: any
+}
+
+export const initialState:{[uri: string]: {
+    readOnly?: boolean;
+    uri?: string;
+    language?: string;
+    model?: Ace.Editor;
+  }}  = {}
+
+export const reducerActions = (models= initialState, action: Action) => {
+  const ace = action.ace
+  const editor = action.editor
+  switch (action.type) {
+    case 'ADD_MODEL': {
+      if (!editor) return models
+      const uri = action.payload.uri
+      const value = action.payload.value
+      const language = action.payload.language
+      const readOnly = action.payload.readOnly
+      if (models[uri]) return models // already existing
+      debugger
+      models[uri] = { language, uri, readOnly }
+      ace.setValue(value)
+      models[uri].model = ace
+      ace.on('change', () => action.payload.events.onDidChangeContent(uri))
+      return models
+    }
+    case 'DISPOSE_MODEL': {
+      const uri = action.payload.uri
+      const model = models[uri]?.model
+      // if (model) model.dispose()
+      delete models[uri]
+      return models
+    }
+    case 'SET_VALUE': {
+      if (!editor) return models
+      const uri = action.payload.uri
+      const value = action.payload.value
+      const model = models[uri]?.model
+      if (model) {
+        model.setValue(value)
+      }
+      return models
+    }
+    case 'REVEAL_LINE': {
+      if (!editor) return models
+      const line = action.payload.line
+      const column = action.payload.column
+      editor.revealLine(line)
+      editor.setPosition({ column, lineNumber: line })
+      return models
+    }
+    case 'FOCUS': {
+      if (!editor) return models
+      editor.focus()
+      return models
+    }
+    case 'SET_FONTSIZE': {
+      if (!editor) return models
+      const size = action.payload.size
+      editor.updateOptions({ fontSize: size })
+      return models
+    }
+    case 'SET_WORDWRAP': {
+      if (!editor) return models
+      const wrap = action.payload.wrap
+      editor.updateOptions({ wordWrap: wrap ? 'on' : 'off' })
+      return models
+    }
+  }
+}
+
+export const reducerListener = (plugin, dispatch, ace, editor, events) => {
+  plugin.on('editor', 'addModel', (value, language, uri, readOnly) => {
+    debugger
+    dispatch({
+      type: 'ADD_MODEL',
+      payload: { uri, value, language, readOnly, events },
+      ace,
+      editor
+    })
+  })
+
+  plugin.on('editor', 'disposeModel', (uri) => {
+    debugger
+    dispatch({
+      type: 'DISPOSE_MODEL',
+      payload: { uri },
+      ace,
+      editor
+    })
+  })
+
+  plugin.on('editor', 'setValue', (uri, value) => {
+    debugger
+    dispatch({
+      type: 'SET_VALUE',
+      payload: { uri, value },
+      ace,
+      editor
+    })
+  })
+
+  plugin.on('editor', 'revealLine', (line, column) => {
+    debugger
+    dispatch({
+      type: 'REVEAL_LINE',
+      payload: { line, column },
+      ace,
+      editor
+    })
+  })
+
+  plugin.on('editor', 'focus', () => {
+    debugger
+    dispatch({
+      type: 'FOCUS',
+      payload: {},
+      ace,
+      editor
+    })
+  })
+
+  plugin.on('editor', 'setFontSize', (size) => {
+    debugger
+    dispatch({
+      type: 'SET_FONTSIZE',
+      payload: { size },
+      ace,
+      editor
+    })
+  })
+
+  plugin.on('editor', 'setWordWrap', (wrap) => {
+    debugger
+    dispatch({
+      type: 'SET_WORDWRAP',
+      payload: { wrap },
+      ace,
+      editor
+    })
+  })
+}

libs/remix-ui/editor/src/lib/remix-ui-editor.tsx

 import React, { useState, useRef, useEffect, useReducer } from 'react' // eslint-disable-line
-// import Editor from '@monaco-editor/react'
-import { reducerActions, reducerListener, initialState } from './actions/editor'
+import Editor from '@monaco-editor/react'
+import { reducerActions, reducerListener, initialState } from './actions/ace-editor'
 
 import './remix-ui-editor.css'
 
@@ -10,6 +10,7 @@ import "ace-builds/src-min-noconflict/ext-language_tools";
 // Custom mode and theme import
 import 'ace-mode-solidity/build/remix-ide/mode-solidity'
 import './utils/theme-solidity';
+import { Ace } from 'ace-builds'
 type cursorPosition = {
   startLineNumber: number,
   startColumn: number,
@@ -78,18 +79,11 @@ export const EditorUI = (props: EditorUIProps) => {
   const [currentAnnotations, setCurrentAnnotations] = useState({})
   const [currentMarkers, setCurrentMarkers] = useState({})
   const editorRef = useRef(null)
-  const monacoRef = useRef(null)
   const currentFileRef = useRef('')
+  const aceRef = useRef(null)
 
   const [editorModelsState, dispatch] = useReducer(reducerActions, initialState)
 
-  useEffect(() => {
-    if (!monacoRef.current) return
-    monacoRef.current.editor.setTheme(props.theme)
-  }, [props.theme])
-
-  if (monacoRef.current) monacoRef.current.editor.setTheme(props.theme)
-
   const setAnnotationsbyFile = (uri) => {
     if (props.sourceAnnotationsPerFile[uri]) {
       const model = editorModelsState[uri]?.model
@@ -97,7 +91,7 @@ export const EditorUI = (props: EditorUIProps) => {
       for (const annotation of props.sourceAnnotationsPerFile[uri]) {
         if (!annotation.hide) {
           newAnnotations.push({
-            range: new monacoRef.current.Range(annotation.row + 1, 1, annotation.row + 1, 1),
+            // range: new monacoRef.current.Range(annotation.row + 1, 1, annotation.row + 1, 1),
             options: {
               isWholeLine: false,
               glyphMarginHoverMessage: { value: (annotation.from ? `from ${annotation.from}:\n` : '') + annotation.text },
@@ -107,7 +101,7 @@ export const EditorUI = (props: EditorUIProps) => {
         }
       }
       setCurrentAnnotations(prevState => {
-        prevState[uri] = model.deltaDecorations(currentAnnotations[uri] || [], newAnnotations)
+        // prevState[uri] = model.deltaDecorations(currentAnnotations[uri] || [], newAnnotations)
         return prevState
       })
     }
@@ -125,7 +119,7 @@ export const EditorUI = (props: EditorUIProps) => {
             isWholeLine = true
           }
           newMarkers.push({
-            range: new monacoRef.current.Range(marker.position.start.line + 1, marker.position.start.column + 1, marker.position.end.line + 1, marker.position.end.column + 1),
+            // range: new monacoRef.current.Range(marker.position.start.line + 1, marker.position.start.column + 1, marker.position.end.line + 1, marker.position.end.column + 1),
             options: {
               isWholeLine,
               inlineClassName: `bg-info highlightLine${marker.position.start.line + 1}`
@@ -134,7 +128,7 @@ export const EditorUI = (props: EditorUIProps) => {
         }
       }
       setCurrentMarkers(prevState => {
-        prevState[uri] = model.deltaDecorations(currentMarkers[uri] || [], newMarkers)
+        // prevState[uri] = model.deltaDecorations(currentMarkers[uri] || [], newMarkers)
         return prevState
       })
     }
@@ -143,8 +137,8 @@ export const EditorUI = (props: EditorUIProps) => {
   useEffect(() => {
     if (!editorRef.current) return
     currentFileRef.current = props.currentFile
-    editorRef.current.setModel(editorModelsState[props.currentFile].model)
-    editorRef.current.updateOptions({ readOnly: editorModelsState[props.currentFile].readOnly })
+    // editorRef.current.setModel(editorModelsState[props.currentFile].model)
+    // editorRef.current.updateOptions({ readOnly: editorModelsState[props.currentFile].readOnly })
     setAnnotationsbyFile(props.currentFile)
     setMarkerbyFile(props.currentFile)
   }, [props.currentFile])
@@ -160,7 +154,7 @@ export const EditorUI = (props: EditorUIProps) => {
   props.editorAPI.findMatches = (uri: string, value: string) => {
     if (!editorRef.current) return
     const model = editorModelsState[uri]?.model
-    if (model) return model.findMatches(value)
+    // if (model) return model.findMatches(value)
   }
 
   props.editorAPI.getValue = (uri: string) => {
@@ -171,13 +165,13 @@ export const EditorUI = (props: EditorUIProps) => {
     }
   }
 
-  props.editorAPI.getCursorPosition = () => {
-    if (!monacoRef.current) return
-    const model = editorModelsState[currentFileRef.current]?.model
-    if (model) {
-      return model.getOffsetAt(editorRef.current.getPosition())
-    }
-  }
+  // props.editorAPI.getCursorPosition = () => {
+  //   // if (!monacoRef.current) return
+  //   const model = editorModelsState[currentFileRef.current]?.model
+  //   if (model) {
+  //     return model.getOffsetAt(editorRef.current.getPosition())
+  //   }
+  // }
 
   props.editorAPI.getFontSize = () => {
     if (!editorRef.current) return
@@ -198,7 +192,7 @@ export const EditorUI = (props: EditorUIProps) => {
         } else {
           props.events.onBreakPointAdded(currentFile, position.lineNumber)
           const decorationIds = model.deltaDecorations([], [{
-            range: new monacoRef.current.Range(position.lineNumber, 1, position.lineNumber, 1),
+            // range: new monacoRef.current.Range(position.lineNumber, 1, position.lineNumber, 1),
             options: {
               isWholeLine: false,
               glyphMarginClassName: 'fas fa-circle text-info'
@@ -211,48 +205,33 @@ export const EditorUI = (props: EditorUIProps) => {
     }
   }
 
-  function handleEditorDidMount (editor) {
+  // function handleEditorDidMount (editor) {
+  //   editorRef.current = editor
+  //   reducerListener(props.plugin, dispatch, monacoRef.current, editorRef.current, props.events)
+  //   props.events.onEditorMounted()
+  //   editor.onMouseUp((e) => {
+  //     if (e && e.target && e.target.toString().startsWith('GUTTER')) {
+  //       (window as any).addRemixBreakpoint(e.target.position)
+  //     }
+  //   })
+  // }
+
+  function onLoad(editor: Ace.Editor) {
     editorRef.current = editor
-    monacoRef.current.editor.setTheme(props.theme)
-    reducerListener(props.plugin, dispatch, monacoRef.current, editorRef.current, props.events)
+    aceRef.current = editor
+    reducerListener(props.plugin, dispatch, aceRef.current, editorRef.current, props.events)
     props.events.onEditorMounted()
-    editor.onMouseUp((e) => {
-      if (e && e.target && e.target.toString().startsWith('GUTTER')) {
-        (window as any).addRemixBreakpoint(e.target.position)
-      }
-    })
+    // editor.onMouseUp((e) => {
+    //   if (e && e.target && e.target.toString().startsWith('GUTTER')) {
+    //     (window as any).addRemixBreakpoint(e.target.position)
+    //   }
+    // })
   }
 
   function handleEditorWillMount (monaco) {
-    monacoRef.current = monaco
-    // 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',
-      inherit: true, // can also be false to completely replace the builtin rules
-      rules: [{ background: darkColor.replace('#', '') }],
-      colors: {
-        'editor.background': darkColor,
-        'editorSuggestWidget.background': lightColor,
-        'editorSuggestWidget.selectedBackground': lightColor,
-        'editorSuggestWidget.highlightForeground': infoColor,
-        'editor.lineHighlightBorder': lightColor,
-        'editor.lineHighlightBackground': grayColor,
-        'editorGutter.background': lightColor
-      }
-    })
   }
 
   ///
-  let highlightActiveLine = true
-  let readOnly = false
-  let theme = 'tomorrow'
-  let setOptions = {
-    fontSize: '1rem',
-  }
   return (
     // <Editor
     //   width="100%"
@@ -267,13 +246,14 @@ export const EditorUI = (props: EditorUIProps) => {
       mode="solidity"
       theme="solidity"
       onChange={console.log}
-      value={'111'}
+      value={''}
       name="solidity-editor"
       enableBasicAutocompletion={true}
       enableLiveAutocompletion={true}
       onCursorChange={console.log}
       editorProps={{ $blockScrolling: true }}
       style={{lineHeight: 1.75}}
+      onLoad={onLoad}
     />
   )
 }