search

suren-atoyan / monaco-react

Monaco Editor for React - use the monaco-editor in any React application without needing to use webpack (or rollup/parcel/etc) configuration files / plugins
https://monaco-react.surenatoyan.com/
MIT License
3.75k stars 266 forks source link

How to stop the text being selected/highlighted? #286

Open jiunyuchen opened 3 years ago

jiunyuchen commented 3 years ago

I used readOnly from the option and hide the contextmenu but users can still select the text and Ctrl+C to copy the text. I want to stop users from selecting the text and copying the text themselves since I already build a copy to clipboard for users to copy the text. There are some great options in Monaco editor Icodeeditor. Am I able to access it? or is there any other way to do so?

hogpilot commented 3 years ago

@jiunyuchen Any Monaco constructor options can be included in the options property of the Editor or DiffEditor component. So, if you can achieve your desired result with a Monaco IStandaloneEditorConstructionOptions, then you should be able to do it with this library as well.

However, I'm not aware of any Monaco options that get your desired behavior (I certainly don't know them all, so I could be wrong). One idea is to follow the pattern of rendering the code into a <pre> element, then using monaco to provide syntax highlighting. You'd just need to add CSS styles to the <pre> element to prevent selection:

pre {
    -webkit-user-select: none; /* Safari */        
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+/Edge */
    user-select: none; /* Standard */    
}

Again, you can do that with this library by using the useMonaco hook to get at the monaco library in React.