How do I make it work with React ?

[chethan-devopsnow]

I am currently using
https://www.npmjs.com/package/@monaco-editor/react

[Pranomvignesh]

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

[UrielJavier]

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;

[Pranomvignesh]

@UrielJavier Thanks for the suggestion.
@chethan-devopsnow I request you to try this snippet, and if it works please consider closing this issue

[HC-47]

Hi, I came down to the same code, and I confirm it works as expected.

[Pranomvignesh]

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.

[Pranomvignesh]

This issue was closed because it has been stalled for 7 days with no activity.

[shrinidhinhegde]

I can confirm this method works very well!

Just a small suggestion... please include this in the documentation somewhere

Thanks

This is really amazing!!

[polmann]

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';