fix editors

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

@@ -12,107 +12,112 @@ 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': {
+    case 'ADD_MODEL': {
-    if (!editor) return models
+      if (!editors) return models
-    const uri = action.payload.uri
+      const uri = action.payload.uri
-    const value = action.payload.value
+      const value = action.payload.value
-    const language = action.payload.language
+      const language = action.payload.language
-    const readOnly = action.payload.readOnly
+      const readOnly = action.payload.readOnly
-    if (models[uri]) return models // already existing
+      if (models[uri]) return models // already existing
-    models[uri] = { language, uri, readOnly }
+      models[uri] = { language, uri, readOnly }
-    let model
+      let model
-    try {
+      try {
-      model = monaco.editor.createModel(value, language, monaco.Uri.parse(uri))
+        model = monaco.editor.createModel(value, language, monaco.Uri.parse(uri))
-    } catch (e) {
+      } catch (e) {
 
+      }
+      models[uri].model = model
+      model.onDidChangeContent(() => action.payload.events.onDidChangeContent(uri))
+      return models
     }
-    models[uri].model = model
+    case 'DISPOSE_MODEL': {
-    model.onDidChangeContent(() => action.payload.events.onDidChangeContent(uri))
+      const uri = action.payload.uri
-    return models
+      const model = models[uri]?.model
-  }
+      if (model) model.dispose()
-  case 'DISPOSE_MODEL': {
+      delete models[uri]
-    const uri = action.payload.uri
+      return models
-    const model = models[uri]?.model
-    if (model) model.dispose()
-    delete models[uri]
-    return models
-  }
-  case 'ADD_DIFF': {
-    if (!editor) return models
-    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 'ADD_DIFF': {
-  }
+      if (!editors) return models
-  case 'REVEAL_LINE': {
+      return models
-    if (!editor) return models
+    }
-    const line = action.payload.line
+    case 'SET_VALUE': {
-    const column = action.payload.column
+      if (!editors) return models
-    editor.revealLine(line)
+      const uri = action.payload.uri
-    editor.setPosition({ column, lineNumber: line })
+      const value = action.payload.value
-    return models
+      const model = models[uri]?.model
-  }
+      if (model) {
-  case 'REVEAL_RANGE': {
+        model.setValue(value)
-    if (!editor) return models
+      }
-    const range: monacoTypes.IRange = {
+      return models
-      startLineNumber: action.payload.startLineNumber + 1,
-      startColumn: action.payload.startColumn,
-      endLineNumber: action.payload.endLineNumber + 1,
-      endColumn: action.payload.endColumn
     }
-    // reset to start of line
+    case 'REVEAL_LINE': {
-    if (action.payload.startColumn < 100) {
+      if (!editors) return models
-      editor.revealRange({
+      const line = action.payload.line
-        startLineNumber: range.startLineNumber,
+      const column = action.payload.column
-        startColumn: 1,
+      editors.map((editor) => {
-        endLineNumber: range.endLineNumber,
+        editor.revealLine(line)
-        endColumn: 1
+        editor.setPosition({ column, lineNumber: line })
       })
-    } else {
+      return models
-      editor.revealRangeInCenter(range)
     }
-    return models
+    case 'REVEAL_RANGE': {
-  }
+      if (!editors) return models
-  case 'FOCUS': {
+      const range: monacoTypes.IRange = {
-    if (!editor) return models
+        startLineNumber: action.payload.startLineNumber + 1,
-    editor.focus()
+        startColumn: action.payload.startColumn,
-    return models
+        endLineNumber: action.payload.endLineNumber + 1,
-  }
+        endColumn: action.payload.endColumn
-  case 'SET_FONTSIZE': {
+      }
-    if (!editor) return models
+      // reset to start of line
-    const size = action.payload.size
+      if (action.payload.startColumn < 100) {
-    if (size === 1) {
+        editors.map(editor => editor.revealRange({
-      editor.trigger('keyboard', 'editor.action.fontZoomIn', {});
+          startLineNumber: range.startLineNumber,
-    } else {
+          startColumn: 1,
-      editor.trigger('keyboard', 'editor.action.fontZoomOut', {});
+          endLineNumber: range.endLineNumber,
+          endColumn: 1
+        }))
+      } else {
+        editors.map(editor => editor.revealRangeInCenter(range))
+      }
+      return models
+    }
+    case 'FOCUS': {
+      if (!editors) return models
+      editors.map(editor => editor.focus())
+      return models
+    }
+    case 'SET_FONTSIZE': {
+      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 (!editors) return models
+      const wrap = action.payload.wrap
+      editors.map(editor =>
+        editor.updateOptions({ wordWrap: wrap ? 'on' : 'off' }))
+      return models
     }
-    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, 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