https://github.com/Pranomvignesh/constrained-editor-plugin
This project is to restrict the editable area in the monaco-editor
https://github.com/Pranomvignesh/constrained-editor-plugin
github-issue-workaround microtask-queue monaco-editor
Last synced: 6 months ago
JSON representation
This project is to restrict the editable area in the monaco-editor
- Host: GitHub
- URL: https://github.com/Pranomvignesh/constrained-editor-plugin
- Owner: Pranomvignesh
- License: mit
- Created: 2020-08-17T13:23:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-11-24T21:48:28.000Z (about 1 year ago)
- Last Synced: 2024-12-04T12:06:49.885Z (about 1 year ago)
- Topics: github-issue-workaround, microtask-queue, monaco-editor
- Language: JavaScript
- Homepage: https://constrained-editor-plugin.vercel.app/
- Size: 17.4 MB
- Stars: 102
- Watchers: 4
- Forks: 12
- Open Issues: 11
-
Metadata Files:
- Readme: readme.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 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](https://constrained-editor-plugin.vercel.app/playground) and click here for [Documentation](https://constrained-editor-plugin.vercel.app/)
## Stats
[](https://github.com/Pranomvignesh/constrained-editor-plugin/actions/workflows/codeql-analysis.yml)
## Table of Contents
- [Demo](#demo)
- [How to install using NPM](#how-to-install-using-npm)
- [Problem Statement](#problem-statement)
- [Sample code](#sample-code)
- [Walkthrough of Sample code](#walkthrough-of-sample-code)
- [Sample Code for monaco-editor/react](#sample-code-for-monaco-editor-react)
- [Potential Applications](#potential-applications)
- [Coding Tutorial Applications](#coding-tutorial-applications)
- [Interviewing applications](#interviewing-applications)
- [Contributions and Issues](#contributions-and-issues)
- [License](#license)
## Demo
## How to install using NPM
```bash
npm i constrained-editor-plugin
```
## Problem Statement
[Monaco Editor](https://microsoft.github.io/monaco-editor/) is one of the most popular code editors in the market. It is developed by [Microsoft](https://www.microsoft.com/en-in).The Monaco Editor is the code editor that powers [VS Code](https://github.com/Microsoft/vscode). 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
```javascript
// 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](https://constrained-editor-plugin.vercel.app/docs/AvailableAPI/constrained-editor-instance-api)
## Sample Code for monaco-editor react
```javascript
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 (
);
}
export default App;
```
> Thanks @chethan-devopsnow for the sample code : [Click here](https://github.com/Pranomvignesh/constrained-editor-plugin/issues/6) 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](https://github.com/Pranomvignesh/constrained-editor-plugin/issues)
## License
Licensed under the MIT License.