8.22.0 • Published 11 months ago

@covalent/code-editor v8.22.0

Weekly downloads
1,082
License
MIT
Repository
github
Last release
11 months ago

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

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

Running unit tests

Run nx test angular-code-editor to execute the unit tests.

8.22.0

11 months ago

8.21.2

11 months ago

8.21.1

1 year ago

8.21.0

1 year ago

8.19.1

1 year ago

8.19.0

1 year ago

8.12.2

1 year ago

8.12.3

1 year ago

8.13.0

1 year ago

8.14.0

1 year ago

8.14.2

1 year ago

8.14.1

1 year ago

8.14.4

1 year ago

8.14.3

1 year ago

8.15.0-beta.13

1 year ago

8.15.0-beta.12

1 year ago

8.15.0-beta.11

1 year ago

8.15.0-beta.10

1 year ago

8.15.0

1 year ago

8.15.0-beta.17

1 year ago

8.15.0-beta.16

1 year ago

8.15.0-beta.15

1 year ago

8.15.0-beta.14

1 year ago

4.17.3

1 year ago

4.17.4

1 year ago

4.17.0

1 year ago

4.17.1

1 year ago

8.16.0

1 year ago

8.16.1

1 year ago

8.17.1

1 year ago

8.17.0

1 year ago

8.20.0

1 year ago

8.20.1

1 year ago

8.20.2

1 year ago

8.20.3

1 year ago

8.20.4

1 year ago

8.20.5

1 year ago

8.20.6

1 year ago

8.20.7

1 year ago

8.20.8

1 year ago

8.15.0-beta.4

1 year ago

8.15.0-beta.3

1 year ago

8.15.0-beta.2

1 year ago

8.15.0-beta.1

1 year ago

8.15.0-beta.8

1 year ago

8.15.0-beta.7

1 year ago

8.15.0-beta.6

1 year ago

8.15.0-beta.5

1 year ago

8.15.0-beta.9

1 year ago

8.18.0

1 year ago

8.18.1

1 year ago

8.12.1

1 year ago

8.11.0

1 year ago

8.12.0

1 year ago

8.10.0

1 year ago

8.10.1

1 year ago

8.9.2

1 year ago

8.9.1

1 year ago

8.9.0

1 year ago

8.8.1

1 year ago

8.8.0

2 years ago

8.8.0-beta.1

2 years ago

8.7.0

2 years ago

8.6.1

2 years ago

8.6.0-beta.1

2 years ago

8.5.4

2 years ago

8.5.5

2 years ago

8.7.0-beta.9

2 years ago

8.7.0-beta.8

2 years ago

8.7.0-beta.7

2 years ago

8.7.0-beta.6

2 years ago

8.7.0-beta.5

2 years ago

8.7.0-beta.4

2 years ago

8.6.0

2 years ago

8.7.0-beta.3

2 years ago

8.7.0-beta.2

2 years ago

8.7.0-beta.1

2 years ago

8.5.3

2 years ago

8.5.2

2 years ago

8.5.1

2 years ago

8.4.0

2 years ago

8.5.0

2 years ago

8.3.1

2 years ago

8.4.0-beta.3

2 years ago

8.4.0-beta.2

2 years ago

8.4.0-beta.1

2 years ago

8.3.0

2 years ago

8.3.0-beta.3

2 years ago

8.3.0-beta.2

2 years ago

8.2.1

2 years ago

8.3.0-beta.1

2 years ago

8.2.0-beta.1

2 years ago

8.2.0

2 years ago

8.1.0

2 years ago

8.1.0-beta.9

2 years ago

8.1.0-beta.8

2 years ago

8.1.0-beta.7

2 years ago

8.1.0-beta.6

2 years ago

8.1.0-beta.5

2 years ago

8.1.0-beta.4

2 years ago

8.1.0-beta.3

2 years ago

8.1.0-beta.2

2 years ago

8.1.0-beta.1

2 years ago

7.5.0-beta.4

2 years ago

7.5.0-beta.5

2 years ago

8.0.0

2 years ago

7.4.7

2 years ago

7.4.6

2 years ago

7.4.5

2 years ago

7.4.4

2 years ago

7.4.3

2 years ago

7.5.0-beta.3

2 years ago

6.1.2

2 years ago

6.1.3

2 years ago

7.3.1

2 years ago

7.3.0

2 years ago

7.4.2

2 years ago

7.4.1

2 years ago

7.5.0-beta.2

2 years ago

7.5.0-beta.1

2 years ago

6.2.1

2 years ago

6.2.0

2 years ago

6.2.3

2 years ago

6.2.2

2 years ago

7.4.0-beta.1

2 years ago

7.4.0-beta.2

2 years ago

7.0.0

2 years ago

7.4.0

2 years ago

4.16.3

2 years ago

4.16.0

2 years ago

4.16.1

2 years ago

4.16.2

2 years ago

6.3.0

2 years ago

7.1.0-beta.2

2 years ago

7.1.0-beta.1

2 years ago

7.1.0-beta.3

2 years ago

7.1.1

2 years ago

7.1.0

2 years ago

6.4.0

2 years ago

6.3.0-beta.1

2 years ago

6.3.0-beta.2

2 years ago

6.3.0-beta.3

2 years ago

6.3.0-beta.4

2 years ago

7.2.0

2 years ago

6.1.0

2 years ago

6.1.1

2 years ago

6.0.0-beta.1

2 years ago

6.0.0-beta.2

2 years ago

5.1.0-beta.1

2 years ago

6.0.1

2 years ago

6.0.0

2 years ago

6.0.3

2 years ago

6.0.2

2 years ago

6.0.5

2 years ago

6.0.4

2 years ago

5.0.2

3 years ago

5.0.0-beta.1

3 years ago

5.0.1

3 years ago

5.0.0

3 years ago

4.16.0-beta.2

3 years ago

4.16.0-beta.1

3 years ago

4.10.2

3 years ago

4.14.0

3 years ago

4.13.0

3 years ago

4.12.3

3 years ago

4.12.0

3 years ago

4.12.1

3 years ago

4.12.2

3 years ago

4.15.0

3 years ago

4.11.0

3 years ago

4.8.0

3 years ago

4.7.0

3 years ago

4.7.1

3 years ago

4.6.1

3 years ago

4.6.0

3 years ago

4.6.2

3 years ago

4.5.0

3 years ago

4.4.0

3 years ago

3.2.2

3 years ago

3.2.1

3 years ago

3.2.0

3 years ago

3.2.4

3 years ago

3.2.3

3 years ago

4.2.1

3 years ago

4.3.0

3 years ago

4.1.9

3 years ago

4.1.11-develop.1

3 years ago

4.2.0

3 years ago

4.1.10

3 years ago

4.1.11

3 years ago

4.1.12

3 years ago

4.1.13

3 years ago

4.1.14

3 years ago

4.1.15

3 years ago

4.1.8

3 years ago

4.1.7

3 years ago

4.1.4

3 years ago

4.1.3

3 years ago

4.1.6

3 years ago

4.1.5

3 years ago

4.1.2

3 years ago

4.1.1

3 years ago

4.1.1-develop.1

3 years ago

4.1.0-develop.5

4 years ago

4.1.0-develop.6

4 years ago

4.1.0-develop.7

4 years ago

4.1.0-develop.8

3 years ago

4.1.0-develop.9

3 years ago

4.1.0-develop.2

4 years ago

4.1.0-develop.4

4 years ago

4.1.0-develop.11

3 years ago

4.1.0-develop.10

3 years ago

4.1.0

3 years ago

4.1.1-beta.3

4 years ago

4.1.1-next.1

4 years ago

4.0.0-beta.2

4 years ago

0.0.1

4 years ago

4.0.0-alpha.0

4 years ago

4.0.0

4 years ago

3.1.2-beta.7

4 years ago

3.1.2

4 years ago

4.0.0-beta.1

4 years ago

3.1.2-beta.6

4 years ago

3.1.2-beta.4

4 years ago

3.1.1

4 years ago

3.1.1-beta.1

5 years ago

3.1.0

5 years ago

3.1.0-beta.2

5 years ago

3.1.0-beta.1

5 years ago

3.0.1

5 years ago

3.0.0

6 years ago

3.0.0-rc.2

6 years ago

3.0.0-rc.1

6 years ago

3.0.0-beta.3

6 years ago

3.0.0-beta.2

6 years ago

3.0.0-beta.1-2

6 years ago

3.0.0-beta.1-1

6 years ago

3.0.0-beta.1

6 years ago

2.1.1

6 years ago

2.1.0

6 years ago

2.0.4

7 years ago

2.0.3

7 years ago

2.0.2

7 years ago

2.0.1

7 years ago

2.0.0

7 years ago

2.0.0-rc.2

7 years ago

2.0.0-rc.1

7 years ago

2.0.0-beta.5

7 years ago

2.0.0-beta.4

7 years ago

2.0.0-beta.3

7 years ago

2.0.0-beta.2

7 years ago

2.0.0-beta.1

7 years ago

1.0.0

8 years ago

1.0.0-beta.2

8 years ago

1.0.0-beta.1

8 years ago

1.0.0-alpha.6-9

8 years ago

1.0.0-alpha.6-8

8 years ago

1.0.0-alpha.6-7

8 years ago

1.0.0-alpha.6-6

8 years ago

1.0.0-alpha.6-5

8 years ago

1.0.0-alpha.6-4

8 years ago

1.0.0-alpha.6-3

8 years ago

1.0.0-alpha.6-2

8 years ago

1.0.0-alpha.6-1

8 years ago

1.0.0-alpha.6

8 years ago

1.0.0-alpha.5

8 years ago

1.0.0-alpha.4

8 years ago

1.0.0-alpha.3

8 years ago

1.0.0-alpha.2

8 years ago

1.0.0-alpha.1

8 years ago