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!

Answer 1

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
        });
    }
});

Answer 2

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
});