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!

Did you find a solution for this question? – Sajith Edirisinghe Dec 11 '17 at 05:28 — Sajith Edirisinghe, Dec 11 '17 at 05:28
https://github.com/Microsoft/monaco-editor/issues/953 – Murat Karagöz Sep 27 '18 at 10:50 — Murat Karagöz, Sep 27 '18 at 10:50
Did you find a solution for this question? – G Naga Subrahmanyam Jul 12 '20 at 11:19 — G Naga Subrahmanyam, Jul 12 '20 at 11:19

Rizky Ramadhan · Answer 1 · 2017-12-21T23:39:34.817

4

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

edited Dec 21 '17 at 23:39

answered Dec 21 '17 at 22:52

Rizky Ramadhan

7,360
4
27
31

2

Quite like this answer but you can still ctrl-a / del or just backspace through lines one and 2 – Jonny Feb 23 '18 at 13:53
1

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. – Jayson Minard Oct 01 '18 at 04:00
Any other alternative? – G Naga Subrahmanyam Jul 12 '20 at 11:39

Vignesh Prakash · Answer 2 · 2022-05-13T12:12:40.890

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

Need something like that. Just tried it in the playground, looks awesome! Thank you for your effort and sharing. — burkay, Jan 13 '23 at 16:34
Do you want a typescript implementation pull request? Also, where do you get this type "Array" from? It's mentioned in the constrainedEditor.js file, but I can't find in the editor.api.d.ts file. — specifically_user3827668, Jul 26 '23 at 19:46
@specifically_user3827668 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](https://constrained-editor-plugin.vercel.app/docs/TypeDefinitions/available-type-definitions#rangerestrictionobject) — Vignesh Prakash, Jul 27 '23 at 23:22
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. — specifically_user3827668, Jul 28 '23 at 06:19

Monaco Editor - How to make some areas readonly

2 Answers2

NPM Package

Dependencies

Sample Snippet