alauda / ng-monaco-editor

Angular wrapper for monaco-editor.

Angular wrapper for monaco-editor

Dependencies

• Angular 10+
• monaco-editor: 0.15+

Demo

See: https://ng-monaco-editor.js.org or https://ng-monaco-editor.netlify.app

Setup

Add npm dependencies

# npm
npm i monaco-editor ng-monaco-editor

# yarn
yarn add monaco-editor ng-monaco-editor

Configure monaco-editor library assets

It's supported to load monaco-editor with AMD or ESM mode.

If you'd like to use AMD mode, you have to make sure your Angular application could have access to the monaco-editor library assets via AMD. If you are using Angular CLI to bootstrap your app, you could add the following:

{
  "assets": [
    "src/favicon.ico",
    "src/assets",

    {
      "glob": "**/*",
      "input": "node_modules/monaco-editor/min/vs",
      "output": "/lib/vs"
    }
  ]
}

Load ng-monaco-editor module

Most of the time, you should configure the module at the root module.

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    FormsModule,
    MonacoEditorModule.forRoot({
      /**
       * optional, load monaco by yourself, you'd prefer loading esm for example
       */
      dynamicImport: () => import('monaco-editor'),

      /**
       * optional, use amd loader to load monaco if present, lower priority than `dynamicImport`
       *
       * Angular CLI currently does not handle assets with hashes. We manage it by manually adding
       * version numbers to force library updates:
       */
      baseUrl: 'lib/v1',

      defaultOptions: {},
    }),
  ],
  providers: [
    {
      // Optional:
      // You could also override the default MonacoEditor provider.
      // If you plan to do so, I recommend you to read through the source code.
      provide: MonacoProviderService,
      useClass: CustomMonacoProviderService,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Usage example

Please refer to the storybook (stories/**/*.stories.ts).

This module provide three usages:

1. ng-monaco-editor component
2. ng-monaco-diff-editor component
3. ngCodeColorize directive

Note, if the height of ng-monaco-editor/ng-monaco-diff-editor is too small, you may have to resize it yourself. This is a limitation and by design that how monaco-editor works.

License

MIT @Alauda

ng-monaco-editor's Issues

Typescript compile error (duplicate import?)

Hello,

I've tried to import the component using the ESM method proposed in the readme.

    MonacoEditorModule.forRoot({
      dynamicImport: () => import('monaco-editor/esm/vs/editor/editor.api'),
    }),

When angular compiles the app I get the following error.

Error: node_modules/monaco-editor/esm/vs/editor/editor.api.d.ts:12:9 - error TS2451: Cannot redeclare block-scoped variable 'MonacoEnvironment'.

12     let MonacoEnvironment: Environment | undefined;
           ~~~~~~~~~~~~~~~~~

  node_modules/monaco-editor/monaco.d.ts:11:13
    11 declare let MonacoEnvironment: monaco.Environment | undefined;
                   ~~~~~~~~~~~~~~~~~
    'MonacoEnvironment' was also declared here.


Error: node_modules/monaco-editor/monaco.d.ts:11:13 - error TS2451: Cannot redeclare block-scoped variable 'MonacoEnvironment'.

11 declare let MonacoEnvironment: monaco.Environment | undefined;
               ~~~~~~~~~~~~~~~~~

  node_modules/monaco-editor/esm/vs/editor/editor.api.d.ts:12:9
    12     let MonacoEnvironment: Environment | undefined;
               ~~~~~~~~~~~~~~~~~
    'MonacoEnvironment' was also declared here.

I'm not so sure whats happening, as I don't have any meaningful experience with monaco editor. I suspect the API definitions are imported multiple times? The only reference to monaco I could found inside this repo is here https://github.com/alauda/ng-monaco-editor/blob/master/src/public-api.ts#L1

I'm using the following versions:

    "monaco-editor": "^0.22.3",
    "ng-monaco-editor": "^3.0.0",

Any Ideas whats going on here?

Thank you very much!

Best Regards,
Frido

Validating JSON is not working

In order to use monaco-editor as JSON editor which validates the content of the JSON against a schema, we need a to call monaco.languages.json.jsonDefaults.setDiagnosticsOptions, e.g. like in the Configure JSON defaults example in the monaco editor playground.

It seems there is no good place to call this method though - if I correctly get the API, the only place where this could be done (where the monaco code will be loaded) is in the editorChange event handler:

import { Component, OnInit } from '@angular/core';
import * as monaco from "monaco-editor";

@Component({
  selector: 'app-root',
  styleUrls: ['./app.component.css'],
  template:`
  <ng-monaco-editor 
  style="height: 300px" 
  [modelUri]="modelUri"
  [(ngModel)]="jsonCode" 
  [options]="options"
  (editorChange)="editorChange($event)"
  ></ng-monaco-editor>`,
})
export class AppComponent {
    jsonCode = [
    '{',
    '    "p1": "v3",',
    '    "p2": false',
    "}"
  ].join('\n');

  options = {
    language: "json"
  };

  modelUri = "a://b/foo.json";

  editorChange(editor: monaco.editor.IStandaloneCodeEditor): void {
    monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
      validate: true,
      schemas: [{
        uri: "http://myserver/foo-schema.json",
        fileMatch: [this.modelUri],
        schema: {
          type: "object",
          properties: {
            p1: {
              enum: ["v1", "v2"]
            },
            p2: {
              enum: ["x1", "x2"]
            }
          }
        }
      }],
    });
  }
}

but for some reason the editor is not validating against the schema. Am I calling it in the wrong place (I can see that similar libraries have exposed monacoLoad method or similar which is called when the module is fully loaded), or is there a better approach?

I prepared a runnable repo here, the problematic code is in app.component.ts.

An in-range update of @types/storybook__addon-knobs is breaking the build 🚨

The devDependency @types/storybook__addon-knobs was updated from 5.0.4 to 5.2.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/storybook__addon-knobs is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

An in-range update of storybook is breaking the build 🚨

There have been updates to the storybook monorepo:

• • The devDependency @storybook/addon-actions was updated from 5.2.2 to 5.2.3.

• The devDependency @storybook/addon-knobs was updated from 5.2.2 to 5.2.3.
• The devDependency @storybook/addon-options was updated from 5.2.2 to 5.2.3.
• The devDependency @storybook/angular was updated from 5.2.2 to 5.2.3.
• The devDependency @storybook/cli was updated from 5.2.2 to 5.2.3.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

This monorepo update includes releases of one or more dependencies which all belong to the storybook group definition.

storybook is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v5.2.3

Bug Fixes

• Core: Fix lib/core whitelist (#8182)

Commits

The new version differs by 4 commits.

• 8360036 v5.2.3
• 9bd6988 Core: Fix lib/core whitelist (#8182)
• 508be14 5.2.2 latest.json version file
• bccc1d2 Update version.ts

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

The theme and language in global defaultOptions are not working

MonacoEditorModule.forRoot({
  baseUrl: 'assets/lib',
  defaultOptions: {
    language: 'json',
    theme: 'vs-dark',
  }
})

v6: use Angular 14+ features like `inject`

https://angular.io/api/core/inject#description

[feat!] replace `css-element-queries` with native `ResizeObserver`

todo: remove demo folder from repository

MonacoProviderService.colorizeElement error with Monaco Editor 0.17.0

After upgrading to Monaco Editor 0.17.0, an error occurs when building

ERROR in node_modules/ng-monaco-editor/monaco-provider.service.d.ts(42,138): error TS2694: Namespace '"<dir>/node_modules/monaco-editor/esm/vs/editor/editor.api"' has no exported member 'Promise'.

This is within MonacoProviderService for the return value of the colorizeElement function (import("monaco-editor").Promise<void>)

The changelog at https://github.com/microsoft/monaco-editor/blob/master/CHANGELOG.md mentions (in 0.16.0) a breaking change that sounds related:

We are no longer shipping WinJS.Promise, but we are shipping with a Promise shim (for IE11)

ERROR in node_modules/ng-monaco-editor/resize-sensor.service.d.ts(1,30): error TS2307: Cannot find module 'css-element-queries'.

Entry point 'ng-monaco-editor' contains deep imports

Not sure if this is an actual thing to be concerned about, but after implementing the editor (using AMD), I get the following warning when serving or building during the ngcc compilation.

Entry point 'ng-monaco-editor' contains deep imports into 'node_modules/monaco-editor/esm/vs/editor/editor.api'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

MonacoEditor as a feature module

Hi

I am trying to reduce my initial bundle size and one thing I noticed is the the MonacoEditorModule is importing a few libraries/modules (FormsModule, ReactiveFormsModule, lodash-es) that could possibly be lazy loaded at a later stage as I am only using the editor in a module that is lazy loaded for a specific route.

I have tried moving the forRoot import into the feature module but I get the following error:

ERROR NullInjectorError: R3InjectorError(AppModule)[MonacoEditorConfig -> MonacoEditorConfig -> MonacoEditorConfig]: 
  NullInjectorError: No provider for MonacoEditorConfig!

After seeing this I tried to provide this config myself but I was unable to get it working.

Is there a way to get the MonacoEditorModule as an import in a feature module and not in the app module?

CI: replace travis-ci with circle-ci

Error TS2451: Cannot redeclare block-scoped variable 'MonacoEnvironment'

When importing the MonacoEditorModule in AppModule in a CLI-generated Angular 10 application, I get the following error:

ERROR in node_modules/monaco-editor/monaco.d.ts:11:13 - error TS2451: Cannot redeclare block-scoped variable 'MonacoEnvironment'.

11 declare let MonacoEnvironment: monaco.Environment | undefined;
               ~~~~~~~~~~~~~~~~~

  node_modules/monaco-editor/esm/vs/editor/editor.api.d.ts:12:9
    12     let MonacoEnvironment: Environment | undefined;
               ~~~~~~~~~~~~~~~~~
    'MonacoEnvironment' was also declared here.

Here the monaco team mention that probably what's happening is that I am trying to simultaneously import ESM and AMD module, but it seems I'm doing nothing special, just:

// app.module.ts
import { MonacoEditorModule } from 'ng-monaco-editor/public-api';
//...
  imports: [
    BrowserModule,
    AppRoutingModule,
    MonacoEditorModule
  ],

I tried the different approaches with dynamic-import and baseUrl but to no avail. Am I missing something obvious? I will happily update the README if this is the case.

Compilation error

Error: node_modules/monaco-editor/esm/vs/editor/editor.api.d.ts:12:9 - error TS2451: Cannot redeclare block-scoped variable 'MonacoEnvironment'.

12 let MonacoEnvironment: Environment | undefined;
~~~~~~~~~~~~~~~~~

node_modules/monaco-editor/monaco.d.ts:11:13
11 declare let MonacoEnvironment: monaco.Environment | undefined;
~~~~~~~~~~~~~~~~~
'MonacoEnvironment' was also declared here.

Error: node_modules/monaco-editor/monaco.d.ts:11:13 - error TS2451: Cannot redeclare block-scoped variable 'MonacoEnvironment'.

11 declare let MonacoEnvironment: monaco.Environment | undefined;
~~~~~~~~~~~~~~~~~

node_modules/monaco-editor/esm/vs/editor/editor.api.d.ts:12:9
12 let MonacoEnvironment: Environment | undefined;
~~~~~~~~~~~~~~~~~
'MonacoEnvironment' was also declared here.

How to change the theme dynamically?

Hi,

Is there any example on how I can change the theme or any other editor option dynamically from my Angular component?

Thanks!

An in-range update of webpack is breaking the build 🚨

The devDependency webpack was updated from 4.35.3 to 4.36.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v4.36.0

Features

• SourceMapDevToolPlugin append option now supports the default placeholders in addition to [url]
• Arrays in resolve and parser options (Rule and Loader API) support backreferences with "..." when overriding options.

Commits

The new version differs by 42 commits.

• 95d21bb 4.36.0
• aa1216c Merge pull request #9422 from webpack/feature/dot-dot-dot-merge
• b3ec775 improve merging of resolve and parsing options
• 53a5ae2 Merge pull request #9419 from vankop/remove-valid-jsdoc-rule
• ab75240 Merge pull request #9413 from webpack/dependabot/npm_and_yarn/ajv-6.10.2
• 0bdabf4 Merge pull request #9418 from webpack/dependabot/npm_and_yarn/eslint-plugin-jsdoc-15.5.2
• f207cdc remove valid jsdoc rule in favour of eslint-plugin-jsdoc
• 31333a6 chore(deps-dev): bump eslint-plugin-jsdoc from 15.3.9 to 15.5.2
• 036adf0 Merge pull request #9417 from webpack/dependabot/npm_and_yarn/eslint-plugin-jest-22.8.0
• 37d4480 Merge pull request #9411 from webpack/dependabot/npm_and_yarn/simple-git-1.121.0
• ce2a183 chore(deps-dev): bump eslint-plugin-jest from 22.7.2 to 22.8.0
• 0beeb7e Merge pull request #9391 from vankop/create-hash-typescript
• bf1a24a #9391 resolve super call discussion
• bd7d95b #9391 resolve discussions, AbstractMethodError
• 4190638 chore(deps): bump ajv from 6.10.1 to 6.10.2

There are 42 commits in total.

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

allow CodeColorizeDirective to rerender when content changed