How do I make it work with React ?
chethan-devopsnow opened this issue ยท 9 comments
I am currently using
https://www.npmjs.com/package/@monaco-editor/react
Hi @chethan-devopsnow,
I haven't used this package https://www.npmjs.com/package/@monaco-editor/react, So I'm not able to help you with this now.
You can refer the documentation of constrained editor plugin here
Everything is written in plain JS, so it will work in React.
I will try to add usage examples for this package in the documentation in the future
I did something like this @chethan-devopsnow
import { useRef } from "react";
import Editor from "@monaco-editor/react";
import { constrainedEditor } from "constrained-editor-plugin";
function App() {
const editorRef = useRef(null);
let blocked = [];
function handleEditorDidMount(editor, monaco) {
editorRef.current = editor;
const constrainedInstance = constrainedEditor(monaco);
const model = editor.getModel();
constrainedInstance.initializeIn(editor);
blocked.push(
{
range: [1, 1, 2, 10],
allowMultiline: true
}
);
constrainedInstance.addRestrictionsTo(model, blocked);
}
return (
<div className="App" >
<Editor
onMount={handleEditorDidMount}
/>
</div>
);
}
export default App;
@UrielJavier Thanks for the suggestion.
@chethan-devopsnow I request you to try this snippet, and if it works please consider closing this issue
Hi, I came down to the same code, and I confirm it works as expected.
This issue is stale because it has been open 30 days with no activity. Add required comments or this will be closed in 7 days.
This issue was closed because it has been stalled for 7 days with no activity.
I can confirm this method works very well!
Just a small suggestion... please include this in the documentation somewhere
Thanks
This is really amazing!!
import { constrainedEditor } from "constrained-editor-plugin";
so that import didn't work for me, I had to import it from dist for it to work:
import { constrainedEditor } from 'constrained-editor-plugin/dist/esm/constrainedEditor';
can you help with angular 14? any sample snippets to use?