{"_id":"@bdonnell/ngx-monaco-editor","name":"@bdonnell/ngx-monaco-editor","dist-tags":{"latest":"13.0.0"},"versions":{"13.0.0":{"name":"@bdonnell/ngx-monaco-editor","version":"13.0.0","private":false,"description":"Monaco Code Editor for Angular","keywords":["angular","angular 2+","angular 2","angular 4","angular 5","angular 6","angular 7","angular 8","angular 9","angular 10","angular 12","monaco","monaco-editor","code","editor","reusable","component"],"repository":{"type":"git","url":"git+https://github.com/atularen/ngx-monaco-editor.git"},"bugs":{"url":"https://github.com/atularen/ngx-monaco-editor/issues"},"license":"MIT","author":{"name":"Atul Kumar"},"contributors":[{"name":"Atul Kumar","email":"atulaggarwal4288@gmail.com"}],"peerDependencies":{"@angular/common":"^13.1.1","@angular/core":"^13.1.1","monaco-editor":"^0.24.0"},"dependencies":{"tslib":"^2.1.0"},"module":"fesm2015/ngx-monaco-editor.mjs","es2020":"fesm2020/ngx-monaco-editor.mjs","esm2020":"esm2020/ngx-monaco-editor.mjs","fesm2020":"fesm2020/ngx-monaco-editor.mjs","fesm2015":"fesm2015/ngx-monaco-editor.mjs","typings":"ngx-monaco-editor.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./ngx-monaco-editor.d.ts","esm2020":"./esm2020/ngx-monaco-editor.mjs","es2020":"./fesm2020/ngx-monaco-editor.mjs","es2015":"./fesm2015/ngx-monaco-editor.mjs","node":"./fesm2015/ngx-monaco-editor.mjs","default":"./fesm2020/ngx-monaco-editor.mjs"}},"sideEffects":false,"gitHead":"1fcc89abaa78e6b3c1ee39bf86d042c1cebb3b3f","homepage":"https://github.com/atularen/ngx-monaco-editor#readme","_id":"@bdonnell/ngx-monaco-editor@13.0.0","_nodeVersion":"14.17.1","_npmVersion":"7.24.2","dist":{"integrity":"sha512-StR2HvMd/Lc+74TW8ds2UohvxGbvPHyoSUfhkav3uJvI0CuXN7pgBL0LfbZJkmR29Qun5QZ9s2eQ7XxhUTB9RQ==","shasum":"3c680946d385b38aaf78cf8ffc540971c68b4ea9","tarball":"https://registry.npmjs.org/@bdonnell/ngx-monaco-editor/-/ngx-monaco-editor-13.0.0.tgz","fileCount":22,"unpackedSize":117465,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCj9IHFuisHrilxydCNe2Z/mOt/QalQjzKy8xuz4bSziwIgEIEPm3DyxCod6zWwOPQ+ChJQT9rC3Vdi4ohQnvogYlo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiTuxTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDVxAAinyM2IR9Vbp2LMoTd/WtAv3sVI2wkbsFrb54uvWz0BvoygAF\r\nE0rWzw/td/YlDuqOeqgh7x3lauQS9X8Z1BLxwG6LDA96N46MZ8HjqXEfFiQM\r\ng8jbGfztN+CD0cmRYhQC4qGRICnmYqGgX+tO6FuUlYhE0J/u1Of14zgEui8Y\r\nHIEKv2vj39KwwD3spFE1zj6JDmOHQiq+vH53vfbfIFx6OxtCyP0fHA2nZbTa\r\n2ZBRhJ5qR6HvabATF1GpuvB0+nUPSUncvdPkGvXkmldqhZfYsg1PtWohYdOI\r\nNSw891Re2nsGzEJQo2vrORjuCwDiTR35vnXQAVZrFEnDZYmrAFcHsTmjFdPr\r\nVKhYSXmXeNnTTLV9RxZV7q/7zlMyIudNTHqoIzOq107QH5FyAn9qThBq162f\r\nML0VU7iRzIsDS2VN1pwxbgvaxYeXXkLA5TsZ8hJYtKeTgmahZHL1RhROT48+\r\nGdgDXjYxzEk346MOz8OHVY3JVHUgsrLJgbX84cgEK9nmXXzo1rGjE4fPy53f\r\nhZLdWMrF1OjzWi7ORBkBEKV17jLRgLP6DNtpNmwGBrHTq5YR9xS2PSOfT2H4\r\nmZHysbs2L2EgDgqyCZhJIZz6x1sltfU40cch72d92DZwvCZkUzAwpvMKzRq5\r\nuBKT9tlnIuoOIjs52gEfpFc/UAO3siSSlwo=\r\n=SmW0\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"bdonnell","email":"b.w.donnelly1@googlemail.com"},"directories":{},"maintainers":[{"name":"bdonnell","email":"b.w.donnelly1@googlemail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-monaco-editor_13.0.0_1649339475068_0.7891288964406438"},"_hasShrinkwrap":false}},"time":{"created":"2022-04-07T13:51:14.982Z","13.0.0":"2022-04-07T13:51:15.204Z","modified":"2022-04-07T13:51:15.347Z"},"maintainers":[{"name":"bdonnell","email":"b.w.donnelly1@googlemail.com"}],"description":"Monaco Code Editor for Angular","homepage":"https://github.com/atularen/ngx-monaco-editor#readme","keywords":["angular","angular 2+","angular 2","angular 4","angular 5","angular 6","angular 7","angular 8","angular 9","angular 10","angular 12","monaco","monaco-editor","code","editor","reusable","component"],"repository":{"type":"git","url":"git+https://github.com/atularen/ngx-monaco-editor.git"},"contributors":[{"name":"Atul Kumar","email":"atulaggarwal4288@gmail.com"}],"author":{"name":"Atul Kumar"},"bugs":{"url":"https://github.com/atularen/ngx-monaco-editor/issues"},"license":"MIT","readme":"# Monaco Editor Component for Angular 2 and above.\n\n - Angular <= 4: v3.x.x\n - Angular 5: v5.x.x\n - Angular 6: v6.x.x\n - Angular 7: v7.x.x\n - Angular 8: v8.x.x\n - Angular 9: v9.x.x\n - Angular 10: v10.x.x \n - Angular 12: v12.x.x\n\nUsing this Module you can utilize the Monaco Editor as an Angular Component. Feel free to contribute, raise feature requests and make it better.\n\nSupports all the options available in monaco-editor [Monaco Editor Options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html)\n\n## Setup\n\n### Installation\n\nInstall from npm repository:\n```\nnpm install monaco-editor ngx-monaco-editor --save\n ```\n \nFor angular version 6 use v6.x.x\n```\nnpm install ngx-monaco-editor@6.0.0 --save\n ```\n \nAdd the glob to assets in `.angular-cli.json` schema - `projects.[project-name].architect.build` (to make monaco-editor lib available to the app):\n```typescript\n{\n  \"options\": {\n    {\n      \"assets\": [\n        { \"glob\": \"**/*\", \"input\": \"node_modules/monaco-editor\", \"output\": \"assets/monaco-editor\" }\n      ],\n      ...\n    }\n    ...\n  },\n  ...\n}\n ```\n\n\nFor Angular 6 and below, add the glob to assets in `angular.json`\n```typescript\n{\n  \"apps\": [\n    {\n      \"assets\": [\n        { \"glob\": \"**/*\", \"input\": \"../node_modules/ngx-monaco-editor/assets/monaco\", \"output\": \"./assets/monaco/\" }\n      ],\n      ...\n    }\n    ...\n  ],\n  ...\n}\n ```\n\n### Sample\nInclude MonacoEditorModule in Main Module and Feature Modules where you want to use the editor component.(eg: app.module.ts): \n```typescript\nimport { BrowserModule } from '@angular/platform-browser';\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\n\nimport { AppComponent } from './app.component';\nimport { MonacoEditorModule } from 'ngx-monaco-editor';\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule.forRoot() // use forRoot() in main app module only.\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nCreate Editor options in component.(eg: app.component.ts)\n```typescript\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  editorOptions = {theme: 'vs-dark', language: 'javascript'};\n  code: string= 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\n}\n```\nInclude editor in html with options and ngModel bindings.(eg: app.component.html)\n```html\n<ngx-monaco-editor [options]=\"editorOptions\" [(ngModel)]=\"code\"></ngx-monaco-editor>\n```\n\nInclude diff-editor in html with options.(eg: app.component.html)\n```html\n<ngx-monaco-diff-editor [options]=\"options\" [originalModel]=\"originalModel\" [modifiedModel]=\"modifiedModel\"></ngx-monaco-diff-editor>\n```\n```typescript\nimport { Component } from '@angular/core';\nimport { DiffEditorModel } from 'ngx-monaco-editor';\n\n@Component({\n  selector: 'app-root',\n  templateUrl: './app.component.html'\n})\nexport class AppComponent {\n  options = {\n    theme: 'vs-dark'\n  };\n  originalModel: DiffEditorModel = {\n    code: 'heLLo world!',\n    language: 'text/plain'\n  };\n\n  modifiedModel: DiffEditorModel = {\n    code: 'hello orlando!',\n    language: 'text/plain'\n  };\n}\n```\n\n### Styling\nTo match height of container element add height: 100% and wrap in container\n```html\n<div style=\"height: 500px\">\n    <ngx-monaco-editor style=\"height: 100%\" [options]=\"editorOptions\" [(ngModel)]=\"code\"></ngx-monaco-editor>\n</div>\n```\nAdd class to editor tag. (eg. class=\"my-code-editor\")\n```html\n<ngx-monaco-editor class=\"my-code-editor\" [options]=\"editorOptions\" [(ngModel)]=\"code\"></ngx-monaco-editor>\n```\nAdd styling in css/scss file:\n```scss\n.my-code-editor {\n  .editor-container {\n    height: calc(100vh - 100px);\n  }\n}\n```\nSet automaticLayout option to adjust editor size dynamically. Recommended when using in modal dialog or tabs where editor is not visible initially.\n\n### Events\nOutput event (onInit) expose editor instance that can be used for performing custom operations on the editor. \n```html\n<ngx-monaco-editor [options]=\"editorOptions\" [(ngModel)]=\"code\" (onInit)=\"onInit($event)\"></ngx-monaco-editor>\n```\n\n```typescript\nexport class AppComponent {\n  editorOptions = {theme: 'vs-dark', language: 'javascript'};\n  code: string= 'function x() {\\nconsole.log(\"Hello world!\");\\n}';\n  onInit(editor) {\n      let line = editor.getPosition();\n      console.log(line);\n    }\n}\n```\n\n## Configurations\n`forRoot()` method of MonacoEditorModule accepts config of type `NgxMonacoEditorConfig`.\n```typescript\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';\nimport { AppComponent } from './app.component';\n\nconst monacoConfig: NgxMonacoEditorConfig = {\n  baseUrl: 'app-name/assets', // configure base path cotaining monaco-editor directory after build default: './assets'\n  defaultOptions: { scrollBeyondLastLine: false }, // pass default options to be used\n  onMonacoLoad: () => { console.log((<any>window).monaco); } // here monaco object will be available as window.monaco use this function to extend monaco editor functionalities.\n};\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule.forRoot(monacoConfig)\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n### Configure JSON Defaults\n`onMonacoLoad` property of `NgxMonacoEditorConfig` can be used to configure JSON default.\n```typescript\nimport { NgModule } from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';\nimport { AppComponent } from './app.component';\n\nexport function onMonacoLoad() {\n\n  console.log((window as any).monaco);\n\n  const uri = monaco.Uri.parse('a://b/foo.json');\n  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({\n    validate: true,\n    schemas: [{\n      uri: 'http://myserver/foo-schema.json',\n      fileMatch: [uri.toString()],\n      schema: {\n        type: 'object',\n        properties: {\n          p1: {\n            enum: ['v1', 'v2']\n          },\n          p2: {\n            $ref: 'http://myserver/bar-schema.json'\n          }\n        }\n      }\n    }, {\n      uri: 'http://myserver/bar-schema.json',\n      fileMatch: [uri.toString()],\n      schema: {\n        type: 'object',\n        properties: {\n          q1: {\n            enum: ['x1', 'x2']\n          }\n        }\n      }\n    }]\n  });\n\n}\n\nconst monacoConfig: NgxMonacoEditorConfig = {\n  baseUrl: 'assets',\n  defaultOptions: { scrollBeyondLastLine: false },\n  onMonacoLoad\n};\n\n@NgModule({\n  declarations: [\n    AppComponent\n  ],\n  imports: [\n    BrowserModule,\n    FormsModule,\n    MonacoEditorModule.forRoot(monacoConfig)\n  ],\n  providers: [],\n  bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\nNow pass model config of type `NgxEditorModel` to Editor Component\n```typescript\n@Component({\n  selector: 'app-root',\n  template: `<ngx-monaco-editor [options]=\"options\" [model]=\"model\"></ngx-monaco-editor>`,\n  styles: []\n})\nexport class AppComponent {\n  options = {\n    theme: 'vs-dark'\n  };\n  \n  jsonCode = [\n    '{',\n    '    \"p1\": \"v3\",',\n    '    \"p2\": false',\n    '}'\n  ].join('\\n');\n\n  model: NgxEditorModel = {\n    value: this.jsonCode,\n    language: 'json',\n    uri: monaco.Uri.parse('a://b/foo.json')\n  };\n}\n```\n\n## Links\n[Monaco Editor](https://github.com/Microsoft/monaco-editor/)<br/>\n[Monaco Editor Options](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html)\n\n## License\n\nMIT © [Atul Kumar](https://github.com/atularen)\n","readmeFilename":"README.md"}