[DiffEditor] Missing onChange property/functionality

[avalenti89]

Monaco Editor allows the use of the right-side panel in DiffEditor to edit the code viewing changes in realtime.

Steps to reproduce the behavior:

1. Go to any playground/sandbox
2. Change the default editor with DiffEditor
3. Adds an onChange props with some console.log (following specs from Editor)
4. Click on right-side panel and types some texts
5. No logs were write on console

Use this codesandbox as base to reproduce steps codesandbox.

Expected behavior I expext that "onChange" will be triggered as happens with Editor, and as happens with other monaco-editor wrapper libraries.

DiffEditor missing "onChange" type too, so typescript complaints about it.

[suren-atoyan]

Hello @avalenti89, you are right, there is no onChange for DiffEditor. I'll add it in the next version, but before that, you are able to add it manually; check this

[cwtuan]

need onChange props too

[Ni55aN]

up

[eugeniol]

You could use something like this,

  function handleEditorDidMount(editor, monaco) {
    console.log('handleEditorDidMount')
    // here is another way to get monaco instance
    // you can also store it in `useRef` for further usage
    monacoRef.current = monaco;
    const ed = editor.getModel().modified;
    ed.onDidChangeContent((event) => {
      onChange(ed.getValue());
    });
  }

Note that this can cause memory leak since too many listeners can be added with onDidChangeContent

[Ni55aN]

this is how it was implemented in my project https://github.com/retejs/rete-studio/blob/e23b692e3d6af1541f8d1eb5f3c9187cac2cca28/src/Lab.tsx#L79