Monaco Editor - How to make some areas readonly

Question

I'm trying to configure the Monaco Editor in a way that certain regions of the textcontent are readonly. More precise, I want the first and last line to be readonly. Example below:

public something(someArgument) { // This is readonly
// This is where the user can put his code
// more user code...
} // readonly again

I already did something similar with the Ace Editor but I can't figure out a way to do this with Monaco. There is a ModelContentChangedEvent that you can register a listener on but it's fired after the change happened (so too late to prevent anything). Does someone with more experience with Monaco got a idea how to do this?

Thanks in advance!

Cirque

Did you find a solution for this question? – Costumer

github.com/Microsoft/monaco-editor/issues/953 – Toby

Did you find a solution for this question? – Cytochemistry

Answer 1

I have created a plugin for adding range restrictions in the monaco editor. This plugin is created to solve this issue #953 of monaco editor.

Detailed Documentation and Playground for this plugin is available here

NPM Package

npm install constrained-editor-plugin@latest

Dependencies

<!-- Optional Dependency -->
<link rel="stylesheet" href="./node_modules/constrained-editor-plugin/constrained-editor-plugin.css">
<!-- Required Dependency -->
<script src="./node_modules/constrained-editor-plugin/constrainedEditorPlugin.js" ></script>

Sample Snippet

require.config({ paths: { vs: '../node_modules/monaco-editor/min/vs' } });
require(['vs/editor/editor.main'], function () {
  const container = document.getElementById('container')
  const editorInstance = monaco.editor.create(container, {
    value: [
      'const utils = {};',
      'function addKeysToUtils(){',
      '',
      '}',
      'addKeysToUtils();'
    ].join('\n'),
    language: 'javascript'
  });
  const model = editorInstance.getModel();

  // - Configuration for the Constrained Editor : Starts Here
  const constrainedInstance = constrainedEditor(monaco);
  constrainedInstance.initializeIn(editorInstance);
  constrainedInstance.addRestrictionsTo(model, [{
    // range : [ startLine, startColumn, endLine, endColumn ]
    range: [1, 7, 1, 12], // Range of Util Variable name
    label: 'utilName',
    validate: function (currentlyTypedValue, newRange, info) {
      const noSpaceAndSpecialChars = /^[a-z0-9A-Z]*$/;
      return noSpaceAndSpecialChars.test(currentlyTypedValue);
    }
  }, {
    range: [3, 1, 3, 1], // Range of Function definition
    allowMultiline: true,
    label: 'funcDefinition'
  }]);
  // - Configuration for the Constrained Editor : Ends Here
});

Concierge

Need something like that. Just tried it in the playground, looks awesome! Thank you for your effort and sharing. – Qualify

Do you want a typescript implementation pull request? Also, where do you get this type "Array<RangeRestrictionObject>" from? It's mentioned in the constrainedEditor.js file, but I can't find in the editor.api.d.ts file. – Schiff

@Schiff Thanks for your suggestion, I would be happy to have a typescript version of the package. Feel free to create a pull request. Also the documentation link for the datatype of RangeRestrictionObject you asked for is here – Concierge

Alright, sir you'll see a pr soon. I made some small changes to clean it up a little, but functionally it is the same. Ohhh, its your own type docs. Nice. – Schiff

Answer 2

Just change cursor position whenever it hits your readonly range:

// line 1 & 2 is readonly:
editor.onDidChangeCursorPosition(function (e) {
    if (e.position.lineNumber < 3) {
        this.editor.setPosition({
            lineNumber:3,
            column: 1
        });
    }
});

Broach

Quite like this answer but you can still ctrl-a / del or just backspace through lines one and 2 – Reproductive

This doesn't protect the lines, just protects clicking on them. You could highlight over them yes? You could do other commands to destroy the lines. – Concomitant

Any other alternative? – Cytochemistry