Skip to main content

Monaco Editor Model

This page will list down all the available methods added by the Constrained Editor Plugin to the monaco editor model.

Available methods#

GetCurrentEditableRanges#

This method will give the current value of the editable ranges

Returns EditableRangeObject

const instanceOfConstrainedEditor = constrainedEditor(monaco);instanceOfConstrainedEditor.initializeIn(monacoEditorInstance);const model = monacoEditorInstance.getModel();console.log(model.getCurrentEditableRanges());
Output in console
{  "utilName": {    "allowMultiline": false,    "index": 0,    "range": {      "startLineNumber": 1,      "startColumn": 7,      "endLineNumber": 1,      "endColumn": 12    },    "originalRange": [1, 7, 1, 12]  },  "funcDefinition": {    "allowMultiline": true,    "index": 1,    "range": {      "startLineNumber": 3,      "startColumn": 1,      "endLineNumber": 3,      "endColumn": 43    },    "originalRange": [3, 1, 3, 43]  }}

GetValueInEditableRanges#

This method will return the current value in the Editable Ranges.

Returns ValueInEditableRange : with RangeLabel as key

console.log(model.getValueInEditableRanges());
Output in console
{  "utilName": "utils",  "funcDefinition": "// Enter the content for the function here"}

DisposeRestrictions#

This method is used to remove all restrictions from the model.

info

monacoEditorInstance.disposeConstrainer will internally call this method

Returns model : with all the methods removed

model.disposeRestrictions(model);

OnDidChangeContentInEditableRange#

This method is used to add the callback for listening the changes happened inside the editable ranges.

Parameters#

model.onDidChangeContentInEditableRange(function (  currentlyChangedContent,  allValuesInEditableRanges,  currentEditableRangeObject) {  // Function to execute on content change inside editable ranges});

UpdateValueInEditableRanges#

This method can be used update the contents inside the editable ranges.

Arguments#

model.updateValueInEditableRanges({  utilName: "New Util Name",  funcDefinition: "Content to update",});

UpdateRestrictions#

This method can be used to change the entire restrictions of the model.

Arguments#

model.updateRestrictions([  {    range: [1, 1, 1, 6],    label: "variableDeclarator"  }]);

ToggleHighlightOfEditableAreas#

This method is mostly useful during development, this can be used to visually see the editable ranges.

Arguments#

model.toggleHighlightOfEditableAreas({  cssClassForSingleLine : 'customClass--singleLine',  cssClassForMultiLine : 'customClass--multiLine'});
tip

This will highlight the single line restrictions and multi line restrictions in different colors