Forem: Pranom Vignesh

Extend Language Configuration in Monaco Editor

Pranom Vignesh — Tue, 15 Sep 2020 19:00:01 +0000

Monaco editor is an online editor with syntax highlighting. It offers syntax highlighting support for many languages by default.
But we might need custom syntax highlighting to match our real life use-cases.
Unfortunately, there is no API available to extend the language configuration, Refer this comment

As per the advice, I have overwritten the output of the built-in tokenizer

How I Approached
Actual Code
Advantages
Limitations
Take Away
Github Link
Running the App

How I Approached

I took all the language configurations that is available in the monaco editor using the API monaco.languages.getLanguages()
Then i filtered out my desired language (in my case, I took javascript)
There will a method named loader(), which will be available for most of the registered languages
On executing the loader, it will return an object containing 2 keys named ,the configuration and language
This language will hold the tokenizer data
I took this tokenizer and modified the certain parts with my custom tokens
The modification is done in such a way, that the base object reference is unaffected

Actual Code

const allLangs = await monaco.languages.getLanguages();
const { conf, language: jsLang } = allLangs.find(({ id }) => id ==='javascript').loader();
for (let key in customTokenizer) {
  const value = customTokenizer[key];
  if (key === 'tokenizer') {
    for (let category in value) {
      const tokenDefs = value[category];
      if (!jsLang.tokenizer.hasOwnProperty(category)) {
        jsLang.tokenizer[category] = [];
      }
      if (Array.isArray(tokenDefs)) {
        jsLang.tokenizer[category].unshift.apply(jsLang.tokenizer[category], tokenDefs)
      }
    }
  } else if (Array.isArray(value)) {
    if (!jsLang.hasOwnProperty(key)) {
      jsLang[key] = [];
    }
    jsLang[key].unshift.apply(jsLang[key], value)
  }
}

Advantages

In monaco-editor, the javascript worker provides excellent code completions, If we create a new language tokenizer, we might lose this suggestions. This method avoids the need for a new language, thus preserves the code completions
This custom tokenizer follows the monaco editor’s monarch pattern, So if you have already written custom tokenizers, it will be easy for migration
The tokens are added in such a way that custom tokens are given high priority and this can also be modified by altering the unshift to push in jsLang keys

Limitations

As monaco editor some how stores the language configuration inside monaco instance, We have to overwrite the language configuration before creation of any model (or) editor in that desired language

Take Away

This method is possible only because of monaco editor’s lazy loading feature (thanks to monaco editor team), where it loads the language configuration only when a model (or) editor instance is created for that language

So if we can change the configuration of the language before monaco uses it we can achieve the desired customization

Github Link

Profile Link : PranomVignesh

Repository Link : Extend Language Configuration in Monaco Editor

Restrict Editable Area in Monaco Editor - Part 2

Pranom Vignesh — Thu, 20 Aug 2020 12:14:41 +0000

Intro
What's new?
Demo - click here
Instructions
- Fallback Content
- ID
Under the hood
Future ideas

Intro

This post is continuation of the previous post, which you can see here

Restrict Editable Area in Monaco Editor

Pranom Vignesh ・ Aug 17 '20

#javascript #vscode #monacoeditor

What's new?

This time granular editing is made possible by giving set of instructions to the script, which then creates a regex in runtime to validate the output

Process is simple; if regex is matched , output will be left as such, if not then content will be set to its previous state (undo operation)

Demo - click here

Instructions

There are 2 types of instructions that can provided to the script

editableArea - space defined to edit a portion of single line
multiLineEditableArea - space defined to edit multiple lines

Fallback Content

This content can be given as so that when the output is rendered default content will be present in place of the editable area comment

eg : /* editableArea=fallbackContent */

ID

This id can be used to reference the output and whenever the editor content changes, a mapping object is generated

eg : /* editableArea#id */

This fallback content and id is applicable for both single line and multiline editable

Thus, places other than the editable area are not allowed to be edited by the user

Under the hood

function restrictEditArea (value) {
    const editable = (() => {
        const regexObjects = {};
        const labels = [];
        const generateRegexUsing = (label, consumeSpace = false) => new RegExp((consumeSpace?"\\^\\s*":"")+"\\/\\*\\s*(" + label + ")(#([^#]+?))?\\s*(=\\s*(.+?))?\\s*\\*\\/"+(consumeSpace?"\\s*\\$"+"\\"+"\\n":""), "g")
        return {
            add: (name, label, regexReplacer, { consumeSpace } = {}) => {
                regexObjects[name] = {
                    valueRegex : generateRegexUsing(label),
                    regex: generateRegexUsing(label, consumeSpace),
                    idIndex: 3,
                    fallbackContentIndex: 5,
                    regexReplacer: regexReplacer
                }
                labels.indexOf(label) === -1 && labels.push(label);
                return regexObjects[name];
            },
            getAll: () => regexObjects,
            getIdReplacerRegex: () => generateRegexUsing(labels.join('|'))
        }
    })();
    editable.add('singleLine', 'editableArea', '(.*?)')
    editable.add('multiLine', 'multiLineEditableArea', '(^.*?$\\n)*', { consumeSpace: true })
    const generateRegexFromValue = (string, {
        singleLine,
        multiLine
    }, idReplacer) => {
        let valueToSet = string;
        let regexString = string;
        let map = {};
        let matchCount = 0;
        const regexFor = {
            brackets: /(\(|\)|\{|\}|\[|\])/g,
            newLine: /\n/g,
            blankSpace: /\s/g
        }
        valueToSet = valueToSet.replace(singleLine.valueRegex, "$" + singleLine.fallbackContentIndex)
        valueToSet = valueToSet.replace(multiLine.valueRegex, "$" + multiLine.fallbackContentIndex)
        regexString = regexString.replace(regexFor.brackets, '\\$1'); //! This order matters
        regexString = '^'+regexString.split(regexFor.newLine).join('$\\n^')+'$';
        regexString = regexString.replace(singleLine.regex, singleLine.regexReplacer)
        regexString = regexString.replace(multiLine.regex, multiLine.regexReplacer)
        string.replace(idReplacer, function (...matches) {
            map[matchCount++] = matches[3];
        })
        return {
            valueToSet: valueToSet,
            regexForValidation: new RegExp(regexString, 'm'),
            map: map
        }
    }
    return generateRegexFromValue(value, editable.getAll(), editable.getIdReplacerRegex())
}

This can be a workaround to solve this issue

Provide ability to block editing specific lines #953

sinaa posted on Jul 10, 2018

Monaco is a great editor for providing programmatic interfaces for users to an application.

One feature that'd significantly help with the user experience is to make specific lines read-only, such that user can enter their code within a specific block (e.g., between a function block).

Would it be possible to include this as a core features/API of the editor?

View on GitHub

Future ideas

Will try to publish this as an npm package so that it will be accessible for everyone

Actual Code available in

Pranomvignesh / constrained-editor-plugin

This project is to restrict the editable area in the monaco-editor

Restrict Editable Area in Monaco Editor

Pranom Vignesh — Mon, 17 Aug 2020 19:39:52 +0000

This application shows how we can restrict editing of certain places in monaco editor.
To see the repository click here

Actual Code
Why this snippet is needed ?
How this is achieved ?
So, What it does ?
Pros
Cons
Use Cases
See Part 2
Might Solve this

Actual Code

require.config({
    paths: {
        vs: "./monaco-editor/min/vs"
    }
})
require(["vs/editor/editor.main"], initEditor)
const startPhrase = `// Start of editable area`
const endPhrase = `// End of editable area`
const editableArea = ((startPhrase,endPhrase) => {
    return {
        includes : function(changes,model){
            const fullRange = model.getFullModelRange();
            let { range : startRange } = model.findMatches(startPhrase,fullRange).shift() || {};
            let { range : endRange } = model.findMatches(endPhrase,fullRange).pop() || {};
            const {
                startLineNumber,
                endLineNumber,
                startColumn,
                endColumn
            } = fullRange;
            const isEmpty = text => text === ''; // ? refers to backspace and delete
            const isEnter = text => /\n/.test(text);
            if(startRange && endRange){
                startRange = startRange.setStartPosition(startLineNumber,startColumn);
                endRange = endRange.setEndPosition(endLineNumber,endColumn);
                return changes
                        .every(({ text,range }) => {
                            const specialCases = () => {
                                /*
                                 ? This is done for my use case
                                 ? This allows enter at the end of the start Range and 
                                 ? This allows the enter and backspace on the start of the end Range
                                 ? This is an optional case
                                 */
                                return ( 
                                    ( isEnter(text) || range.startLineNumber > startRange.endLineNumber) &&
                                    ( isEnter(text) || isEmpty(text) || range.endLineNumber < endRange.startLineNumber)
                                );
                            }
                            return  !startRange.strictContainsRange(range) && 
                                    !endRange.strictContainsRange(range) && 
                                    specialCases();

                        })
            }
            return false;
        }
    }
})(startPhrase,endPhrase);
function initEditor(){
    const sampleJs = `
/**
 * This place cannot be edited
 */
// Start of editable area
function editable(){
    console.log('This part can be edited and all stuff can be done here')
}
// End of editable area
/**
 * This place cannot be edited
 */`
    const jsModel = monaco.editor.createModel(sampleJs,"javascript");
    const editorDiv = document.querySelector('.editorDiv');
    const jsContainer = monaco.editor.create(editorDiv);
    jsContainer.setModel(jsModel);
    jsModel.onDidChangeContentFast(({ changes,isUndoing }) => {
        if(!isUndoing){
            if(!editableArea.includes(changes,jsModel)){
                /*
                 * This Promise.resolve() sends the code to the micro task queue 
                 * And it gets called before the event queue ( micro task queue has more priority than event queue)
                 * Thus, Promise.resolve() will be better than a setTimeout(fn,0) here
                 * If we do it synchronously, it affects some of monaco editor's functions
                 */
                Promise.resolve().then(() => jsContainer.trigger('someIdString','undo'))
            }
        }
    })
}

Why this snippet is needed ?

Monaco editor is one of the best online javascript editors, But recently setEditableRange functionality was removed from it. Refer this.

This snippets tries to establish the restriction in editable area

How this is achieved ?

This snippet needs the start and end phrases, to which the editable restriction has to be implemented
The onDidChangeContentFast hooks is watched for the changes and if that change is not happening in the allowed area the undo will be triggered, which nullifies the content which is typed/pasted
Promise.resolve() - is used to move the undoing function to the microtask queue , by this monaco editor is allowed to do its stuff and once it gets completed, this undoing function gets triggered
The area above the start phrase and end phrase will be restricted

Note : Microtask queue is having more priority than Event queue, thus Promise.resolve becomes a better option than setTimeout(fn,0) in this scenario

So, What it does ?

By this, we can create an illusionlike, nothing is allowed to type in the restricted area, but what actually happens is all the typed values are getting undo once it is getting typed in the restricted area

Pros

Advantage of using this snippet is there will not be any UI lag while undoing, Previously when using setTimeout, the undoing operation will be visible to the user
Autocompletion suggestions from the restricted area will be available

Cons

This requires starting and ending phrase
I haven't tested this code with large amount of pasting of texts, So it may break at that stage. This will work fine for typing

Use Cases

If you are trying to design an online coding interview platform using monaco editor and you wish to allow the candidates to edit only certain places, This can be used

Forem: Pranom Vignesh

Extend Language Configuration in Monaco Editor

Table of contents

How I Approached

Actual Code

Advantages

Limitations

Take Away

Github Link

Restrict Editable Area in Monaco Editor - Part 2

Table of contents

Intro

Restrict Editable Area in Monaco Editor

Pranom Vignesh ・ Aug 17 '20

What's new?

Demo - click here

Instructions

Fallback Content

ID

Under the hood

Provide ability to block editing specific lines #953

Future ideas

Pranomvignesh / constrained-editor-plugin

This project is to restrict the editable area in the monaco-editor

Restrict Editable Area in Monaco Editor

Table of Contents

Actual Code

Why this snippet is needed ?

How this is achieved ?

So, What it does ?

Pros

Cons

Use Cases

See Part 2

Restrict Editable Area in Monaco Editor - Part 2

Pranom Vignesh ・ Aug 20 '20 ・ 2 min read

Might Solve this