A new plugin has been developed to enable range restrictions in the monaco editor.
The main purpose of this plugin is to address the issue mentioned in #953 of the monaco editor.
If you are interested, you can access detailed documentation and a playground for this plugin 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
});