@covalent/code-editor

Covalent-Code-Editor is a Text and Code Editor built on Covalent, Monaco Editor and Angular Material

Covalent is a reusable UI platform from Teradata for building web applications with common standards and tooling. It is based on Angular 2 and Material Design.

Covalent-Code-Editor is an Angular Component for text and code editing based on Covalent and Monaco Editor. The component can run in both Electron and Web Browsers.

Demo: https://teradata.github.io/covalent/#/components/code-editor

Covalent Github Repo: https://github.com/Teradata/covalent

Covalent Electron Github Repo: https://github.com/Teradata/covalent-electron

Monaco Editor Repo: https://github.com/Microsoft/monaco-editor

---

Information

Setup

• Install Module

npm install @covalent/code-editor

• Important: Add the glob to assets in angular.json (to make monaco-editor javascript available to the app)

{
  "apps": [
    {
      "assets": [
        {
          "glob": "**/*",
          "input": "node_modules/@covalent/code-editor/assets/monaco",
          "output": "/assets/monaco"
        }
      ],

• Add the following tag to html file

<td-code-editor style="height: 200px" theme="vs" flex language="sql"></td-code-editor>

• Import the covalent-editor component into app.module.ts

import { CovalentCodeEditorModule } from '@covalent/code-editor';
...

imports: [
    CovalentCodeEditorModule,

...

td-code-editor

td-code-editor element generates a monaco editor for inline code editing

API Summary

Events

The component has 3 events:

Name	Description
editorInitialized	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. See usage example below.
onEditorConfigurationChanged	Emitted when configuration of the Editor changes
onEditorLanguageChanged	Emitted when the language of the Editor changes

Properties

The component has 6 properties:

Name	Type	Description
value?	string	Value of Code in Editor
language	string	Code Language used in Editor
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
automaticLayout	boolean	Implemented via setInterval that constantly probes for the container's size. Defaults to false.
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

Usage

Example for HTML usage:

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

Example of exposing editor instance

<td-code-editor
        [editorOptions]="editorOptions"
        [(ngModel)]="model"
        (editorInitialized)="onInit($event)">
</td-code-editor>

export class AppComponent {
  editorOptions = {theme: 'vs-dark', language: 'javascript'};
  model: string= 'function x() {\nconsole.log("Hello world!");\n}';
  column: number = 0;
  lineNumber: number = 0;

  async onEditorInitialized(editor: any): Promise<void> {
    let line: any = await editor.getPosition();

    this.column = line.column;
    this.lineNumber = line.lineNumber;
  }
}

---

Electron

• Covalent-Code-Editor can run in Electron as well as Web Browsers. When running in Electron the component automatically runs itself inside a "webview" to sandbox away the AMDRequires used in Monaco Editor so it doesn't cause issues with the Requires in Electron.
  • See:
    • https://github.com/Microsoft/monaco-editor/issues/90
    • https://electron.atom.io/docs/api/webview-tag/

---

• Contributing Guidelines