Closed rhumbertgz closed 11 months ago
Hi @rhumbertgz thank you for reporting this. Using updateModel
is the correct approach. The underlying monaco-editor-wrapper
does not require a restart in this case.
It may be the case that componentDidUpdate
in monaco-editor-react
has an unidentified problem in the mustReInit
detection logic. I will try to re-produce the problem with your example.
@kaisalmen thanks!
@rhumbertgz I have reproduced your issue and the restart detection logic is bad at one point as I suspected. Will work on a fix now...
@kaisalmen thanks for the update 👌
@rhumbertgz #47 is open. There is still a thing that needs to be fixed.
@rhumbertgz #47 is ready for review now. The fixes and others are included in a new preview versions: https://www.npmjs.com/package/monaco-editor-wrapper/v/3.1.0-next.0
Hello,
The
UserConfig
property of theMonacoEditorReactComp
allows us to initialise the content of the editor usingwrapperConfig
/editorAppConfig
/ code property.For example:
I would like to push an external update to the current editor code, let's consider a button that add a new
console.log('Hello')
to the editor.My first attempt was using the
useState
hook:const [content, setContent ] = useState(initialCode);
And then call the
setContent
inside of theonClickHandler
of the button, but this cause a restart of the editor getting a flickering in the UI.Then I found that I can access the current value of the editor as follow:
and I tried to update the value of the editor inside of a useEffect with
content
as dependency. In this case, I initialised thewrapperConfig
/editorAppConfig
/ code property with an empty stringeditor?.setValue(content);
That approach was worst fully crashing the editor.
My third attempt was to try to update it via the
updateModel
of theMonacoEditorWrapper
but it raised an error so the editor was restarted again.My code
The new error
When I looked at the
editorAppBase.ts
Line 109 the exception is raised because the editor is null/undefined.editorAppBase.ts
I updated my code as follows, but although the error is gone, the editor still is restarted.
In the bellow gif you can see the flickering issue using my first approach. Due to the quality of the gif only on the four addition of the
console.log
you can see the flickering of the strings.Does anyone know the right way to update the code of the editor in a programatically/manual way?
Here is the code of my demo. It is basically a modification of the
reactTs.ts
example available inmonaco-components
repositoryreactTs.ts
EditorDemo.ts