{"_id":"@dmlukichev/ngx-monaco-editor","name":"@dmlukichev/ngx-monaco-editor","dist-tags":{"latest":"13.0.0"},"versions":{"13.0.0":{"name":"@dmlukichev/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.0.0","@angular/core":"^13.0.0","monaco-editor":"^0.33.0"},"dependencies":{"tslib":"^2.1.0"},"module":"fesm2015/dmlukichev-ngx-monaco-editor.mjs","es2020":"fesm2020/dmlukichev-ngx-monaco-editor.mjs","esm2020":"esm2020/dmlukichev-ngx-monaco-editor.mjs","fesm2020":"fesm2020/dmlukichev-ngx-monaco-editor.mjs","fesm2015":"fesm2015/dmlukichev-ngx-monaco-editor.mjs","typings":"dmlukichev-ngx-monaco-editor.d.ts","exports":{"./package.json":{"default":"./package.json"},".":{"types":"./dmlukichev-ngx-monaco-editor.d.ts","esm2020":"./esm2020/dmlukichev-ngx-monaco-editor.mjs","es2020":"./fesm2020/dmlukichev-ngx-monaco-editor.mjs","es2015":"./fesm2015/dmlukichev-ngx-monaco-editor.mjs","node":"./fesm2015/dmlukichev-ngx-monaco-editor.mjs","default":"./fesm2020/dmlukichev-ngx-monaco-editor.mjs"}},"sideEffects":false,"gitHead":"64360da1ae559631f27ac8508357332a4d93121c","homepage":"https://github.com/atularen/ngx-monaco-editor#readme","_id":"@dmlukichev/ngx-monaco-editor@13.0.0","_nodeVersion":"16.10.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-LbmV/lY3IxmR1/ywRsqMa+LVfpsnC1MjEHA6Cp7k8BKv8QfLMlyNsvpFLxL02gk9bFEGrfyO9JG7QijGSQfSJQ==","shasum":"74fd1fcd42c113e99741e02b86a13e2507746d8a","tarball":"https://registry.npmjs.org/@dmlukichev/ngx-monaco-editor/-/ngx-monaco-editor-13.0.0.tgz","fileCount":22,"unpackedSize":123372,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCFes8GA8CcuoFhSZt/0vR+tFwhxjj66wnDMDBwObiwnQIgbAoOl45smY8t7JSmxQPCxjlimY8TF6kTw82vKR33FIo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJinoEVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpChQ//e1yOMo/RIb5cDf0WF/WJL3PRfdMy++XL3A+wk30ooBKNnVnK\r\nTPuvNe8zy1OkxO9oC4tSaoaLejCT7Hobjix/pPRTdsPTAqeleJK+1wYptPj4\r\nQG4/im/2cl2yeW4MvS9cf+dPLamUHPt2tfBDT57YwlGh7Y2FaVj40qcTLQqT\r\ncribi7cOQDxu5vrw6JwzdZnHDFXF4VEE1LdjXoyCW882X41LwFL9G5Y2Ldlh\r\nVkEY4Jj2TqOKu7ukyO74Sej9zdvEmV8WP1VZ4y19Ktc7iA2shrBbi2rNaRNy\r\nftDUMxbCCAnx3j60syCWRTPAnMhoPd3I+erc2l6OWItGG3/wSa2eIBMWRVk5\r\n6ctly7HOdq+Bw2aJhl2pS90N+0QnsFAOvKFBNP1+ssZawzp82ce6RefJaxyT\r\nZ1l+L+9m2bsKR46P49/MfWs9RUSUCkCTMZ64ZB46eqxKnDLoK9KmWGJYCkex\r\nP0tinGZ0cLGmFfE4NWJky32q1G1YnqR2gZTqAS64hOcvQUJp2Rh0s4sK/CYI\r\nKzzYe0WJVe8C6DWDwCr/Fzn8PZVKgkIPffbIMadL9ysnEtmXb4R18tW1eHbH\r\nhtXS7QiMt5P4pVlZqTiuvFOkM2iHrs7tLSCFraxOECcycKgSDD+hHYqu4u17\r\nvkgb63GEnspaAMXvjhbT0MAgRDFFFBTV7F0=\r\n=lC7/\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"dmlukichev","email":"dmlukichev@gmail.com"},"directories":{},"maintainers":[{"name":"dmlukichev","email":"dmlukichev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/ngx-monaco-editor_13.0.0_1654554900773_0.8391495771038151"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-06T22:35:00.656Z","13.0.0":"2022-06-06T22:35:00.988Z","modified":"2022-06-06T22:35:01.106Z"},"maintainers":[{"name":"dmlukichev","email":"dmlukichev@gmail.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> Forked from [ngx-monaco-editor](https://github.com/atularen/ngx-monaco-editor \"ngx-monaco-editor\") to introduce support of Angular 13+.\n> \n> To check if support has been added to original repo use [this ticket](https://github.com/atularen/ngx-monaco-editor/pull/246 \"this ticket\").\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"}