Is there any clean way to change the editor value from code while restrictions are in place? When I try to do so, it immediately gets reset by the constrained instance, and I cannot edit the value.

I managed to do it by:

1. Save existing restriction ranges

   const range = constrainedInstance._uriRestrictionMap[model?.uri].getCurrentEditableRanges().state.range;

2. Remove restrictions

   constrainedInstance.removeRestrictionsIn(model);

3. Update value

   setEditorValue(newValue); // React value

4. Reapply restrictions from previously saved value

   constrainedInstance.addRestrictionsTo(model, [
     {
       range: [
         range.startLineNumber,
         range.startColumn,
         range.endLineNumber,
         range.endColumn,
       ],
       label: "state",
       allowMultiline: true,
     },
   ]);

   But I am wondering if there's a better way, as my approach is a little hacky. Thanks!

If you add the restriction interactively (i.e. after onMount), the selected line is not restricted, but everything before and after it is.
`
interface AdminCodeEditorProps {
initialRestrictions: [];
initialCode: string;
}

const AdminCodeEditor: React.FC<AdminCodeEditorProps> = ({
  initialRestrictions,
  initialCode,
}) => {
  const [code, setCode] = useState(
    "const hello = 'world'; \n const hello2 = 'world'; \n "
  );
  const monacoRef = React.useRef<monaco.editor.IStandaloneCodeEditor | null>(
    null
  );
  const editorRef = React.useRef<any>(null);
  const constrainedInstanceRef = React.useRef<any>(null);

  let restrictions = [];

  const handleEditorDidMount: OnMount = (editor, monaco) => {
    monacoRef.current = editor;
    const constrainedInstance = constrainedEditor(monaco);
    const model = editor.getModel();

    constrainedInstance.initializeIn(editor);
    // restrictions.push({
    //   range: [1, 1, 1, 1],
    //   allowMultiline: true,
    // });

    // constrainedInstance.addRestrictionsTo(model, restrictions);
    constrainedInstanceRef.current = constrainedInstance;
  };

  const addRestriction = () => {
    if (monacoRef.current) {
      const model = monacoRef.current.getModel();
      const selection = monacoRef.current.getSelection();

      if (selection) {
        const newRestriction = {
          range: [
            selection.startLineNumber,
            selection.startColumn,
            selection.endLineNumber,
            selection.endColumn,
          ],
          allowMultiline: true,
          label: "test",
        };

        console.warn("newRestriction", newRestriction);

        constrainedInstanceRef.current.addRestrictionsTo(model, [
          newRestriction,
        ]);
      } else {
        console.warn("No selection found");
      }
    }
  };
  return (
    <ContextMenu>
      <ContextMenuTrigger>
        <MonacoEditor
          language="javascript"
          onMount={handleEditorDidMount}
          onChange={(newValue) => setCode(newValue || "")}
          value={code}
          options={{
            minimap: { enabled: false },
            contextmenu: false,
          }}
        />
      </ContextMenuTrigger>
      <ContextMenuContent>
        <ContextMenuItem onClick={addRestriction}>
          Add Restriction
        </ContextMenuItem>
      </ContextMenuContent>
    </ContextMenu>
  );
};

export default AdminCodeEditor;

`

I'm trying to create constrained editor for multiple files. Restricted editor works fine till I change file and update restrictions. After that, undo event firing, when I'm trying to remove character fires with previously removed characters (for example "'ca" instead of "'", which fired before changing files). This events creates a bug, that slowly shortens restrictions (subtracting from endColumn number of extra characters). You can see this behaviour in attached video.
Link to repo

Thank you for publishing this plugin!
I just played around a bit in your playground. During that, I noticed that when I do some changes to the second range (// Enter the content for the function here), I am not able to edit the second range (utils) anymore.
Is this some special case and actually meant to be or is it a bug? In the first case, it would be nice to have some information in the documentation.

I am currently working with the Monaco Editor & the Constrained Editor Plugin.

I have defined some code like so, including the use of a tab character:

I want to set the editable area to a single line starting from the 5th column onwards:

Error

Does the use of a tab character (when manually setting the value with setValue) not get recognised by the Monaco editor? I was expecting the max column count for line 2 to be 5 after \t and a space

Hey. Thanks for the plugin!

I have some challenges to solve. Please check code above

function onMessage(msg={name: "", age: 0, arr: [ {k:1}, {k:2}],sub: {test: 32}}): StateObject {
    return {
        CapitalCity: "22",
        Population: msg.arr[0].k,
        ZipCodes:[],
    }
}

All looks great like autocompletion of the msg properties. But I really would like to make it look like below:

function onMessage(msg): StateObject {
    return {
        CapitalCity: "22",
        Population: msg.arr[0].k,
        ZipCodes:[],
    }
}

Any chance to do that with this plugin?
Many thanks in advance!

I am using Monaco editor react to use the monaco editor in my react project. I am intrested into adding freezed ranges(non-editable ranges) in my editor and I have found your plugin, however I am not able to use it in a React component. Is there a way to do that, or maybe there is another similar package?

First of all, thank you for this great library!

We have an Angular project and we are using the ngx-monaco-editor library from https://github.com/materiahq/ngx-monaco-editor . We managed to make the constrained-editor-plugin work with it but not in a pleasant way. Are you considering adding TypeScript support?

It is stated in the README that this plugin can be used in coding tutorial applications. I think that for this use case it is almost necessary to indicate to the user in a nice way, which areas he can actually edit. In issue #4 it got mentioned that the highlighting is a dev feature.
In my opinion, it would be nice if the end user could see the restricted areas in like a pale color or maybe a red. Another option could be, to give the user of the library the possibility, to easily adapt the style of the restricted and unristricted areas. Or is that even easily possible already?
Is a feature like this already planned?

I think it's fairly common to use Monaco in its react form, as I am now. Looking through your documentation, there's no quick-start for applying the plugin to a <MonacoEditor/> JSX element. This would make using it a lot easier in this context.

Hello!

How can I change the background color of editable multi-line text if it is selected? Because currently, it is near impossible to understand if it is selected or not. As an example:

I have selected the 4th line as you can see from the light colored dots in this line but it is really hard to understand if it is selected. I want to do something like this:

Thanks!

Such as the title

When I turned on the restriction of the editing area, the formatting failed. Is there any way to solve it? I thought about the following solutions. I need help and advice

1. Re-customize the built-in Formatting method
2. Overwrite frozen row restrictions

I had a use case where it makes more sense to highlight the non editable zone.

I solved my issue like this:

and I've redefined the css style to make .editableArea--multi-line transparent and .editableArea--single-line to be blue.

But I feel those should be a feature:

• Allow to highlight the non-editable part instead of the editable.
• Allow to define a class to a range in order to maximize the customization (maybe under the form .editableArea--myClass)

Anyway thank you for your work.

When I edit any area using multi-caret: an error is thrown saying, "rangeMap" is not defined:

Hey! Very good job with your implementiation. It seems really solid. But still I found a way to change the highlighted sections:

https://www.youtube.com/watch?v=MhQWv1Gmnr4

To reproduce: Click into an editable area. Press Cmd+A, then press backspace.

Environment: Mac OS Big Sur + Chrome latest

Package json also sould be updated(npm version 1.2.1). packaje.json - 1.2.0

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

I'm using the following packages:

vite
vue3
@guolao/vue-monaco-editor:v1.4.1
constrained-editor-plugin:v1.3.0

It works fine with Monaco version 0.33, but starting from version 0.34, I'm encountering an issue where if I input text in a constrained area, the cursor moves to the start of the line (line 1, column 1).

Is there any way to resolve this issue?

Use case: providing some extra handmade function for the tutorial. At the same time I also want the auto completion.

Let's say

def uploadToServer(text):
    # some pretty complex function here I'd like to hide

# The visible part
result = computation by the user
uploadToServer(result)

1. I would use addExtraLib if possible. But it seems it's only available for js/ts and it seems hard to implement for other languages (maybe it depends on the native capability of typescript names are global by default?).
2. And I also tried provideCompletionItems etc. But it will break the language protocol server linting & completion.
3. In the end I guess hiding is the best option?

https://www.npmjs.com/package/@monaco-editor/react#simple-usage

There's no 'UpdateValueInEditableRanges' method in model object.

It would be nice if there were a way to delete all editable code in the editor. So when you click ctr + a it selects all the code in the editor and if you click delete or backspace it removes all editable code.

Steps

1. Add an event listener for delete or backspace
2. Check the selection range on the editor, if all selected
3. Remove all content in editable space

Good evening,

thank you for this amazing project!

It seems as though version 1.2.0 has not been released to NPM, is that on purpose?

I'm still stuck on the onDidChangeContentFast bug.

Thanks again and best,
Nicolai