suren-atoyan/monaco-react

onValidate in multiple editors

sujinleeme opened this issue · 8 comments

sujinleeme commented

Describe the bug
Hello, I have been using two editors with the same language setting and so on. If there are multiple editor components and one of them has broken input, only onValidate of the last component is executed and it has the other component's markers values.

To Reproduce
CodeSandbox: https://codesandbox.io/s/onvalidate-forked-tpxst?file=/src/App.js:123-130

suren-atoyan commented

Hi @sujinleeme

Thank you for providing codesandbox link. You are right, there is a bug related to onValidate. I'll fix it at the end of this week. Now I can suggest some workarounds. But before one note: if you use multiple Editor components, consider the fact, that you'll use the same model, it can lead unexpected problems. To avoid that you can use path prop to identify Editors. We call it multi-model editor.

Here is a workaround to solve your problem. The getModelMarker doesn't provide an updated range. check this. That's why setTimeouts are used in the example. I overcame that in the library, and with the fix you will be able to use it like before in onValidate.

  • 👍1
  • ❤️1
suren-atoyan commented

Hey @sujinleeme

I couldn't manage to solve it at the end of the week. The absence of the API for live model makers makes it harder to provide an alternative approach. I'll continue to look for alternative ways to solve it, let this issue be open. I'll keep you up to date.

  • 👍1
Etheryte commented

Sadly, the timeout-based workaround isn't reliable — on some systems a short timeout is sufficient, on others a longer one, and there doesn't seem to be a reliable way to consistently get the current markers short of periodically polling for them.

Etheryte commented

Since this feature was a go-no-go for us, we ended up using monaco manually as outlined over here. For anyone else running into this issue, beware that it's a fair bit more work than this wrapper library, but it does allow you to avoid the above problem.

suren-atoyan commented

Since this feature was a go-no-go for us, we ended up using monaco manually as outlined over here. For anyone else running into this issue, beware that it's a fair bit more work than this wrapper library, but it does allow you to avoid the above problem.

you also can create your own Editor component based on the @monac-editor/loder. Read about it here

jerryrat2016 commented

I have also been troubled by this problem. But I solved it by saving which editor was changed in the onChange handler, then found the changed editor when onValidate is trigered

suren-atoyan commented

Hello everyone @sujinleeme @Etheryte @jerryrat2016

onDidChangeMarkers method was introduced on the v0.22.0 (29.01.2021) that overcomes all obstacles we had before to make this feature work stable. Now, onValidate is based on onDidChangeMarkers and it works as expected without any workarounds. Check v4.2.2 to try it. And let's thank @a-sam-randall for the PR 🙂

  • 🎉3
sujinleeme commented

@suren-atoyan Wow. Thanks for updating exciting news! 👍

  • 🎉2
  • 🚀2