@covalent/code-editor
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.1 • Public • Published

    TdCodeEditorComponent: td-code-editor

    <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
    • layout?: function()
      • Instructs the editor to remeasure its container

    Properties

    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.

    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.

    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 {}

    Example

    <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>

    Install

    npm i @covalent/code-editor

    DownloadsWeekly Downloads

    759

    Version

    3.1.1

    License

    MIT

    Unpacked Size

    269 kB

    Total Files

    20

    Last publish

    Collaborators

    • ct186029
    • emoralesb05
    • juliemarie
    • odubya320