fix editors

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

@@ -12,10 +12,10 @@ export const initialState = {}
 
 export const reducerActions = (models = initialState, action: Action) => {
   const monaco = action.monaco
-  const editor = action.editor
+  const editors = action.editor as any[]
   switch (action.type) {
     case 'ADD_MODEL': {
-    if (!editor) return models
+      if (!editors) return models
       const uri = action.payload.uri
       const value = action.payload.value
       const language = action.payload.language
@@ -40,11 +40,11 @@ export const reducerActions = (models = initialState, action: Action) => {
       return models
     }
     case 'ADD_DIFF': {
-    if (!editor) return models
+      if (!editors) return models
       return models
     }
     case 'SET_VALUE': {
-    if (!editor) return models
+      if (!editors) return models
       const uri = action.payload.uri
       const value = action.payload.value
       const model = models[uri]?.model
@@ -54,15 +54,17 @@ export const reducerActions = (models = initialState, action: Action) => {
       return models
     }
     case 'REVEAL_LINE': {
-    if (!editor) return models
+      if (!editors) return models
       const line = action.payload.line
       const column = action.payload.column
+      editors.map((editor) => {
         editor.revealLine(line)
         editor.setPosition({ column, lineNumber: line })
+      })
       return models
     }
     case 'REVEAL_RANGE': {
-    if (!editor) return models
+      if (!editors) return models
       const range: monacoTypes.IRange = {
         startLineNumber: action.payload.startLineNumber + 1,
         startColumn: action.payload.startColumn,
@@ -71,48 +73,51 @@ export const reducerActions = (models = initialState, action: Action) => {
       }
       // reset to start of line
       if (action.payload.startColumn < 100) {
-      editor.revealRange({
+        editors.map(editor => editor.revealRange({
           startLineNumber: range.startLineNumber,
           startColumn: 1,
           endLineNumber: range.endLineNumber,
           endColumn: 1
-      })
+        }))
       } else {
-      editor.revealRangeInCenter(range)
+        editors.map(editor => editor.revealRangeInCenter(range))
       }
       return models
     }
     case 'FOCUS': {
-    if (!editor) return models
-    editor.focus()
+      if (!editors) return models
+      editors.map(editor => editor.focus())
       return models
     }
     case 'SET_FONTSIZE': {
-    if (!editor) return models
+      if (!editors) return models
       const size = action.payload.size
+      editors.map((editor) => {
         if (size === 1) {
           editor.trigger('keyboard', 'editor.action.fontZoomIn', {});
         } else {
           editor.trigger('keyboard', 'editor.action.fontZoomOut', {});
         }
+      })
       return models
     }
     case 'SET_WORDWRAP': {
-    if (!editor) return models
+      if (!editors) return models
       const wrap = action.payload.wrap
-    editor.updateOptions({ wordWrap: wrap ? 'on' : 'off' })
+      editors.map(editor =>
+        editor.updateOptions({ wordWrap: wrap ? 'on' : 'off' }))
       return models
     }
   }
 }
 
-export const reducerListener = (plugin, dispatch, monaco, editor, events) => {
+export const reducerListener = (plugin, dispatch, monaco, editors: any[], events) => {
   plugin.on('editor', 'addModel', (value, language, uri, readOnly) => {
     dispatch({
       type: 'ADD_MODEL',
       payload: { uri, value, language, readOnly, events },
       monaco,
-      editor
+      editors
     })
   })
 
@@ -121,7 +126,7 @@ export const reducerListener = (plugin, dispatch, monaco, editor, events) => {
       type: 'ADD_DIFF',
       payload: { value },
       monaco,
-      editor
+      editors
     })
   })
 
@@ -130,7 +135,7 @@ export const reducerListener = (plugin, dispatch, monaco, editor, events) => {
       type: 'DISPOSE_MODEL',
       payload: { uri },
       monaco,
-      editor
+      editors
     })
   })
 
@@ -139,7 +144,7 @@ export const reducerListener = (plugin, dispatch, monaco, editor, events) => {
       type: 'SET_VALUE',
       payload: { uri, value },
       monaco,
-      editor
+      editors
     })
   })
 
@@ -148,7 +153,7 @@ export const reducerListener = (plugin, dispatch, monaco, editor, events) => {
       type: 'REVEAL_LINE',
       payload: { line, column },
       monaco,
-      editor
+      editors
     })
   })
 
@@ -162,7 +167,7 @@ export const reducerListener = (plugin, dispatch, monaco, editor, events) => {
         endColumn
       },
       monaco,
-      editor
+      editors
     })
   })
 
@@ -171,7 +176,7 @@ export const reducerListener = (plugin, dispatch, monaco, editor, events) => {
       type: 'FOCUS',
       payload: {},
       monaco,
-      editor
+      editors
     })
   })
 
@@ -180,7 +185,7 @@ export const reducerListener = (plugin, dispatch, monaco, editor, events) => {
       type: 'SET_FONTSIZE',
       payload: { size },
       monaco,
-      editor
+      editors
     })
   })
 
@@ -189,7 +194,7 @@ export const reducerListener = (plugin, dispatch, monaco, editor, events) => {
       type: 'SET_WORDWRAP',
       payload: { wrap },
       monaco,
-      editor
+      editors
     })
   })
 }

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

@@ -535,6 +535,7 @@ export const EditorUI = (props: EditorUIProps) => {
     for (const filePath in allMarkersPerfile) {
       const model = editorModelsState[filePath]?.model
       if (model) {
+        console.log('MONACO REF CURRENT', monacoRef.current)
         monacoRef.current.editor.setModelMarkers(model, from, allMarkersPerfile[filePath])
       }
     }
@@ -629,18 +630,24 @@ export const EditorUI = (props: EditorUIProps) => {
     }
   }
 
+  function setReducerListener() {
+    if(diffEditorRef.current && diffEditorRef.current.getModifiedEditor() && editorRef.current){
+      reducerListener(props.plugin, dispatch, monacoRef.current, [diffEditorRef.current.getModifiedEditor(), editorRef.current], props.events)
+    }
+  }
+
   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)
+    setReducerListener()
     props.events.onEditorMounted()
   }
 
   function handleEditorDidMount(editor) {
     editorRef.current = editor
     defineAndSetTheme(monacoRef.current)
-    reducerListener(props.plugin, dispatch, monacoRef.current, editorRef.current, props.events)
+    setReducerListener()
     props.events.onEditorMounted()
     editor.onMouseUp((e) => {
       // see https://microsoft.github.io/monaco-editor/typedoc/enums/editor.MouseTargetType.html