<td-code-editor> is component for code editing based on Covalent and Monaco Editor. The component can run in both Electron and Web Browsers.

• 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

• 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

• 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

This component can be installed as npm package.

npm install @covalent/code-editor

Due to an known issue in Monaco Editor version 0.20.0 microsoft/monaco-editor#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.

npm install --save-dev @angular-builders/custom-webpack

Install the Monaco Editor webpack extension plugin.

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.

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

Reference the webpack file in your angular.json build config.

... "build": { "builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./monaco-webpack.config.js", "mergeStrategies": { "module.rules": "prepend" } }, ...

Import the CovalentCodeEditorModule in your NgModule:

import { CovalentCodeEditorModule } from '@covalent/code-editor'; @NgModule({ imports: [ CovalentCodeEditorModule, ... ], ... }) export class MyModule {}

<td-code-editor [style.height.px]="200" editorStyle="border:0;" flex theme="vs" language="sql" [editorOptions]="{readOnly:true, fontSize:20}" [(ngModel)]="model" (ngModelChange)="callBackFunc()"> </td-code-editor>