0
423
ViewsHow to remove minimap, scrollbar in Monaco editor and how to disable writing in Monaco editor in react js?
I am using Monaco editor with react. It's working fine. But I want to remove the minimap and scrollbar in it. How can I remove them? And I want to disable editing in it. How can I achieve these functionalities?
Please check the image for reference -
Code:
import Editor from "@monaco-editor/react";
export default function TwoSum() {
return (
<div>
{/* Coding Page Content */}
<div className="lg:flex h-full lg:w-12/12 lg:mx-2 mt-12 lg:py-4">
{/* Coding Main Content Start */}
<div className="lg:w-6/12 lg:pr-6 fixed overflow-scroll h-full pb-40">
// social
</div>
{/* Coding Main Content End */}
{/* Coding Right Sidebar Start */}
<div className="lg:w-6/12 lg:pl-4 h-full px-2 mt-2 lg:mt-0 lg:px-0 absolute right-0">
<Editor
height="80vh"
defaultLanguage="javascript"
defaultValue= {code}
className=" overflow-hidden"
readOnly = {true}
// minimap={enabled = false}
// scrollbar={vertical = "hidden"}
/>
</div>
{/* Coding Rightsidebar End */}
</div>
</div>
)
}
const code =
`Here is my code ...
`
·
Juan Pablo Isaza
1 answers
Answer question0
When you create the editor, you can specify many options that control the behaviour and display of it:
const options: Monaco.IStandaloneEditorConstructionOptions = {
readOnly: false,
minimap: { enabled: false },
...
};
this.editor = Monaco.create(this.hostRef.current, options);
This is using Monaco directly. For @monaco-editor/react you can specify the options as property:
const options: Monaco.IStandaloneEditorConstructionOptions = {
readOnly: false,
minimap: { enabled: false },
...
};
<Editor
height="80vh"
defaultLanguage="javascript"
defaultValue= {code}
className=" overflow-hidden"
options = {options}
/>
See also: https://www.npmjs.com/package/@monaco-editor/react#editor.
·
Juan Pablo Isaza
Report
Answer question