How do I create a controlled Editor?

[rasmus-hvid]

Given the following

import React from "react";
import Editor from "@monaco-editor/react";

export default function App() {
  const [code, setCode] = React.useState("let foo = 1;");

  return (
    <div className="App">
      <Editor height="500px" value={code} language="javascript" />
    </div>
  );
}

... I would intuitively expect that I would not be able to update the contents of the editor, since I do not update the value of code. But as it can be seen here I can in fact change the contents of the editor without changing the value of code.

Therefore my question, how do I make a controlled editor? I can see that older versions had a ControlledEditor component, but as far as I can tell this is not the case anymore.

[suren-atoyan]

@rasmus-hvid

It's not a usual React component, the monaco has its own internal state that is being maintained by itself, and we try not to interact/prevent that logic as much as it is possible. We just get/set the value, but we won't prevent the typing. Plus it would be hard to achieve and not recommended. However, you can try something like this