Search code examples
reactjsmonaco-editor

Implement word wrap in Monaco Editor, React


I am using Monaco editor in my project for yml code typing. Is there any option to add word wrapper in Monaco editor in React.

Code:

import Editor from "@monaco-editor/react"; //how imported

//Calling editor like this
<Editor
   theme="vs-dark"
   defaultLanguage="yaml"
   onChange={handleChangeMetho}
   value={value}
/>

Solution

  • Saving this for posterity as line-wrapping, as well as all other non-top-level props are available in the options prop:

                <MonacoEditor
                  height="50vh"
                  options={{
                    wordWrap: "on",
                  }}
                  width={"50vw"}
                  theme="vs-dark"
                  defaultLanguage="javascript"
                  defaultValue='console.log("the lines wrap now!")'
                />