Constrained Editor Plugin

A Plugin which adds restrictions to the model of monaco-editor, so that only some parts of the code are editable and rest will become read-only. Please click here for Demo and click here for Documentation

Stats

Table of Contents

• Demo
• How to install using NPM
• Problem Statement
• Sample code
• Walkthrough of Sample code
• Sample Code for monaco-editor/react
• Potential Applications
  • Coding Tutorial Applications
  • Interviewing applications
• Contributions and Issues
• License

Demo

Demo.mov

How to install using NPM

npm i constrained-editor-plugin

Problem Statement

Monaco Editor is one of the most popular code editors in the market. It is developed by Microsoft.The Monaco Editor is the code editor that powers VS Code. Although it is packed with lot of features, it didn't have the feature to constrain the editable area, which is to basically allow editing in only certain parts of the content.

This plugin solves this issue, and will help you add that functionality into your monaco editor instance, without any performance issues.

Sample code

// Include constrainedEditorPlugin.js in your html.
require.config({ paths: { vs: '../node_modules/monaco-editor/dev/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
});

Walkthrough of Sample code

• constrainedEditor is the globally available class to create an instance of the ConstrainedEditor. This instance has to be created by sending in the monaco variable as an argument.

• constrainedEditor.initializeIn(editorInstance) is where the constrained editor will add the necessary functions into the editor instance. The Editor returned by the monaco editor during the monaco.editor.create() call should be sent here.

• constrainedEditor.addRestrictionsTo(model,restrictions) is where the constrained editor will add restrictions to the model.

For detailed documentation on available APIs, click here

Sample Code for monaco-editor react

import { useRef } from "react";
import Editor from "@monaco-editor/react";
import { constrainedEditor } from "constrained-editor-plugin";

function App() {
  const editorRef = useRef(null);
  let restrictions = [];

  function handleEditorDidMount(editor, monaco) {
    editorRef.current = editor;
    const constrainedInstance = constrainedEditor(monaco);
    const model = editor.getModel();
    constrainedInstance.initializeIn(editor);
    restrictions.push({
      range: [1, 1, 2, 10],
      allowMultiline: true
    });
    constrainedInstance.addRestrictionsTo(model, restrictions);
  }

  return (
    <div className="App">
      <Editor
        onMount={handleEditorDidMount}
      />
    </div>
  );
}

export default App;

Thanks @chethan-devopsnow for the sample code : Click here to view discussion about this code

Potential Applications

Coding Tutorial Applications

This plugin can be used in applications which teach programming tutorials, where the application can be made in such as way that it allows users to edit in only certain places

Interviewing applications

This can be used to prevent the candidate to accidentally mess up the boilerplate code given to them.

Contributions and Issues

This project is open source and you are welcome to add more features to this plugin.

If your find any issue, please raise it here

License

Licensed under the MIT License.