Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Teradata/covalent-code-editor-nightly
Nightly builds of https://github.com/teradata/covalent code-editor module
https://github.com/Teradata/covalent-code-editor-nightly
Last synced: about 1 month ago
JSON representation
Nightly builds of https://github.com/teradata/covalent code-editor module
- Host: GitHub
- URL: https://github.com/Teradata/covalent-code-editor-nightly
- Owner: Teradata
- Created: 2017-04-18T21:45:03.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2021-02-19T19:35:27.000Z (almost 4 years ago)
- Last Synced: 2024-05-16T00:34:11.649Z (7 months ago)
- Language: SCSS
- Homepage:
- Size: 795 KB
- Stars: 55
- Watchers: 20
- Forks: 9
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-angular - covalent-code-editor - Covalent text and code editor component for Angular based on Monaco Editor. (Uncategorized / Uncategorized)
README
## TdCodeEditorComponent: td-code-editor
`` is component for code editing based on Covalent and Monaco Editor. The component can run in both Electron and Web Browsers.
## API Summary
#### Inputs
+ value?: string
+ value of the code editor instance
+ language?: string
+ language used for syntax in the editor instance
+ registerLanguage?: function()
+ registers a custom Language within the editor
+ editorStyle?: string
+ Additional Styling applied to Editor Container
+ theme?: string
+ Theme used to style the Editor
+ editorOptions?: object
+ Editor Options Object of valid Configurations listed here: https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditoroptions.html
+ layout?: function()
+ Instructs the editor to remeasure its container
#### Properties
+ isFullScreen?: boolean
+ Is the editor currently in Full Screen mode
+ fullScreenKeyBinding?: number
+ Sets the KeyCode for shortcutting to Fullscreen. Options listed see here: https://microsoft.github.io/monaco-editor/api/enums/monaco.keycode.html
#### Events
+ editorInitialized?: function($event)
+ Emitted when Editor is finished initializing. Event passes a reference to the actual editor instance that can be used to call additional operations outside of the Angular component.
+ editorConfigurationChanged?: function($event)
+ Emitted when configuration of the Editor changes
+ editorLanguageChanged?: function($event)
+ Emitted when the language of the Editor changes
## Installation
This component can be installed as npm package.
```bash
npm install @covalent/code-editor
```
## Setup
Due to an known issue in Monaco Editor version 0.20.0 https://github.com/microsoft/monaco-editor/issues/1842 regarding errors arising when quickly disposing editor instances, utilize the 0.17.1 version of monaco-editor.
We utilize the ESM build of the Monaco Editor. To include this build, you must utilize custom webpack. See https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md for more information.
Install the webpack custom builder.
```bash
npm install --save-dev @angular-builders/custom-webpack
```
Install the Monaco Editor webpack extension plugin.
```bash
npm install --save-dev monaco-editor-webpack-plugin
```
Create a webpack config file utilizing the Monaco Editor webpack plugin. Languages and features can be included/excluded to control the resulting image size.
```javascript
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
module.exports = {
// target should only be specified when including component in Electron app
target: 'electron-renderer',
module: {
rules: [
{
test: /\.css$/,
use: ['style-loader'],
},
{
test: /\.ttf$/,
use: ['file-loader'],
},
],
},
plugins: [
new MonacoWebpackPlugin({
languages: ['css','html','javascript','sql','typescript'],
features: ['contextmenu','clipboard','find'],
}),
],
};
```
Note: If you are including this component in an Electron application, define the electron-renderer target. See Electron example here:
[https://github.com/Teradata/covalent-electron/blob/develop/monaco-webpack.config.js](https://github.com/Teradata/covalent-electron/blob/develop/monaco-webpack.config.js)
Reference the webpack file in your angular.json build config.
```json
...
"build": {
"builder": "@angular-builders/custom-webpack:browser",
"options": {
"customWebpackConfig": {
"path": "./monaco-webpack.config.js",
"mergeStrategies": {
"module.rules": "prepend"
}
},
...
```
Import the **CovalentCodeEditorModule** in your NgModule:
```typescript
import { CovalentCodeEditorModule } from '@covalent/code-editor';
@NgModule({
imports: [
CovalentCodeEditorModule,
...
],
...
})
export class MyModule {}
```
## Example
```html
```