@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-cli.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,

...

API Summary

Events

The component has 3 events:

Name	Description
onEditorInitialized	Emitted when Editor is finished initializing
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
isElectronApp	function()	Returns true or false based on if running in Electron

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>

---

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