Monaco Editor - Как сделать некоторые области доступными только для чтения

Question

Я пытаюсь настроить Monaco Editor таким образом, чтобы определенные области текстового содержимого были доступны только для чтения. Точнее, я хочу, чтобы первая и последняя строка были только для чтения. Пример ниже:

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

Я уже делал нечто похожее с Ace Editor, но не могу придумать, как это сделать с Монако. E сть ModelContentChangedEvent что вы можете зарегистрировать слушателя, но он срабатывает после изменения (слишком поздно, чтобы что-либо предотвратить). Кто-то с большим опытом работы с Монако понял, как это сделать?

Заранее спасибо!

Answer 1

Я создал плагин для добавления ограничений диапазона в редакторе monaco. Этот плагин создан для решения проблемы #953 редактора monaco.

Подробная документация и игровая площадка для этого плагина доступны здесь.

Пакет NPM

      npm install constrained-editor-plugin@latest

Зависимости

      <!-- 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>

Образец фрагмента

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

Answer 2

Просто меняйте положение курсора, когда он попадает в диапазон только для чтения:

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