{"id":13808481,"url":"https://github.com/ngstack/code-editor","last_synced_at":"2025-05-16T04:03:40.235Z","repository":{"id":33154221,"uuid":"144057779","full_name":"ngstack/code-editor","owner":"ngstack","description":"Code editor component for Angular applications.","archived":false,"fork":false,"pushed_at":"2025-02-03T10:04:57.000Z","size":4672,"stargazers_count":130,"open_issues_count":15,"forks_count":20,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-11T08:02:16.124Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ngstack.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":"DenysVuika"}},"created_at":"2018-08-08T19:17:56.000Z","updated_at":"2025-05-05T14:37:01.000Z","dependencies_parsed_at":"2023-02-19T06:15:36.152Z","dependency_job_id":"73c2943f-0639-43e8-83e4-b7aa580b338f","html_url":"https://github.com/ngstack/code-editor","commit_stats":{"total_commits":697,"total_committers":7,"mean_commits":99.57142857142857,"dds":0.5796269727403156,"last_synced_commit":"877726031cccc526b8fb265ecbd18cc7b380c3f4"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngstack%2Fcode-editor","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngstack%2Fcode-editor/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngstack%2Fcode-editor/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngstack%2Fcode-editor/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngstack","download_url":"https://codeload.github.com/ngstack/code-editor/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464891,"owners_count":22075570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-04T01:01:43.903Z","updated_at":"2025-05-16T04:03:40.209Z","avatar_url":"https://github.com/ngstack.png","language":"TypeScript","readme":"# @ngstack/code-editor\n\nCode editor component for Angular applications.\n\nBased on the [Monaco](https://www.npmjs.com/package/monaco-editor) editor\nthat powers [VS Code](https://github.com/Microsoft/vscode).\n\n\u003ca href=\"https://www.buymeacoffee.com/denys\" target=\"_blank\"\u003e\n  \u003cimg src=\"https://cdn.buymeacoffee.com/buttons/default-orange.png\" alt=\"Buy Me A Coffee\" height=\"51\" width=\"217\"\u003e\n\u003c/a\u003e\n\n## Installing\n\n```sh\nnpm install @ngstack/code-editor\n```\n\n## Integrating with Standalone Angular Project\n\nUpdate the `app.config.ts` file to provide the code editor configuration:\n\n```ts\nexport const appConfig: ApplicationConfig = {\n  providers: [\n    provideZoneChangeDetection({ eventCoalescing: true }),\n    provideRouter(routes),\n    provideAnimationsAsync(),\n    \n    // Configure Code Editor\n    provideCodeEditor({\n      // editorVersion: '0.46.0',\n      // use local Monaco installation\n      baseUrl: 'assets/monaco',\n      // use local Typings Worker\n      typingsWorkerUrl: 'assets/workers/typings-worker.js'\n    })\n  ]\n};\n```\n\n## Integrating with Modules-based Angular Project\n\nImport `CodeEditorModule` into your main application module:\n\n```ts\nimport { provideCodeEditor } from '@ngstack/code-editor';\n\n@NgModule({\n  providers: [provideCodeEditor()]\n})\nexport class AppModule {}\n```\n\nIf you want to use a specific version of the Monaco editor, use `editorVersion` parameter.\nIf not provided, the component is always going to use the `latest` version.\n\n\u003e For a full list of Monaco versions and changes, please refer to the official [CHANGELOG.md](https://github.com/microsoft/monaco-editor/blob/main/CHANGELOG.md) file\n\n```ts\nimport { provideCodeEditor } from '@ngstack/code-editor';\n\n@NgModule({\n  providers: [\n    provideCodeEditor({\n      editorVersion: '0.44.0'\n    })\n  ]\n})\nexport class AppModule {}\n```\n\nUpdate template to use the `ngs-code-editor`:\n\n```html\n\u003cngs-code-editor [theme]=\"theme\" [codeModel]=\"model\" [options]=\"options\" (valueChanged)=\"onCodeChanged($event)\"\u003e\u003c/ngs-code-editor\u003e\n```\n\nUpdate component controller class and provide corresponding properties and events:\n\n```ts\nexport class AppComponent {\n  theme = 'vs-dark';\n\n  model: CodeModel = {\n    language: 'json',\n    uri: 'main.json',\n    value: '{}'\n  };\n\n  options = {\n    contextmenu: true,\n    minimap: {\n      enabled: true\n    }\n  };\n\n  onCodeChanged(value) {\n    console.log('CODE', value);\n  }\n}\n```\n\n## Input Properties\n\n| Name      | Type      | Default Value | Description                                                    |\n|-----------|-----------|---------------|----------------------------------------------------------------|\n| theme     | string    | vs            | Editor theme. Supported values: `vs`, `vs-dark` or `hc-black`. |\n| options   | Object    | {...}         | Editor options.                                                |\n| readOnly  | boolean   | false         | Toggles readonly state of the editor.                          |\n| codeModel | CodeModel |               | Source code model.                                             |\n\nThe `codeModel` property holds the value that implements the `CodeModel` interface:\n\n```ts\nexport interface CodeModel {\n  language: string;\n  value: string;\n  uri: string;\n\n  dependencies?: Array\u003cstring\u003e;\n  schemas?: Array\u003c{\n    uri: string;\n    schema: Object;\n  }\u003e;\n}\n```\n\n### Editor Options\n\nFor available options see [IEditorConstructionOptions](https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorConstructionOptions.html) docs.\n\nThe following options are used by default when Editor Component gets created:\n\n```json\n{\n  \"lineNumbers\": true,\n  \"contextmenu\": false,\n  \"minimap\": {\n    \"enabled\": false\n  }\n}\n```\n\n## Output Events\n\n| Name                | Argument Type               | Description                                                                    |\n|---------------------|-----------------------------|--------------------------------------------------------------------------------|\n| loaded              |                             | Raised when editor finished loading all its components.                        |\n| valueChanged        | string                      | An event emitted when the text content of the model have changed.              |\n| modelContentChanged | `IModelContentChangedEvent` | An event emitted when the contents of the underlying editor model have changed |\n| codeModelChanged    | `CodeModelChangedEvent`     | An event emitted when the code model value is changed.                         |\n\n## Component API\n\n| Name                | Description                                                                                                                                         |\n|---------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|\n| editor              | returns the instance of the underlying Monaco [ICodeEditor](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.ICodeEditor.html) |\n| runAction(id, args) | runs the editor actions, for example `editor.action.formatDocument`                                                                                 |\n| formatDocument()    | shortcut function to format the document                                                                                                            |\n\n## Editor Service\n\nThe component comes with a separate `CodeEditorService` service that provides additional APIs for the underlying `monaco` editor:\n\n| Name                | Description                                           |\n|---------------------|-------------------------------------------------------|\n| monaco              | get the global monaco instance                        |\n| typingsLoaded       | An event emitted when code typings are loaded         |\n| loaded              | An event emitted when the `monaco` instance is loaded |\n| setTheme(themeName) | Switches to a theme                                   |\n\n## Typings\n\nThe editor is able to resolve typing libraries when set to the `Typescript` or `Javascript` language.\n\nUse `dependencies` property to provide a list of libraries to resolve\n\n```html\n\u003cngs-code-editor [codeModel]=\"model\"\u003e \u003c/ngs-code-editor\u003e\n```\n\nAnd in the controller class:\n\n```ts\nexport class MyEditorComponent {\n  codeModel: CodeModel = {\n    language: 'typescript',\n    uri: 'main.ts',\n    value: '',\n    dependencies: ['@types/node', '@ngstack/translate', '@ngstack/code-editor']\n  };\n}\n```\n\nRun your application, it may take a few seconds to resolve dependencies.\nIt is performed in the background (web worker), so you can type your code.\n\nTry pasting the following snippet at runtime:\n\n```typescript\nimport { TranslateModule, TranslateService } from '@ngstack/translate';\nimport { CodeEditorModule } from '@ngstack/code-editor';\nimport * as fs from 'fs';\n\nexport class MyClass {\n  constructor(translate: TranslateService) {}\n}\n```\n\nYou should have all the types resolved and auto-completion working.\n\n## JSON schemas\n\nYou can associate multiple schemas when working with JSON files.\n\n```html\n\u003cngs-code-editor [codeModel]=\"model\"\u003e\u003c/ngs-code-editor\u003e\n```\n\nProvide the required schemas like in the example below.\n\n```ts\nexport class MyEditorComponent {\n  codeModel: CodeModel = {\n    language: 'json',\n    uri: 'main.json',\n    value: '{ \"test\": true }',\n    schemas: [\n      {\n        uri: 'http://custom/schema.json',\n        schema: {\n          type: 'object',\n          properties: {\n            type: {\n              enum: ['button', 'textbox']\n            }\n          }\n        }\n      }\n    ]\n  };\n}\n```\n\nThe schemas get automatically installed and associated with the corresponding file.\n\n## Accessing Code Editor Instance\n\nYou can access the Code Editor component instance API from other components when using with the `@ViewChild`:\n\n```ts\nclass MyComponent {\n  private _codeEditor: CodeEditorComponent;\n\n  @ViewChild(CodeEditorComponent, { static: false })\n  set codeEditor(value: CodeEditorComponent) {\n    this._codeEditor = value;\n  }\n\n  get codeEditor(): CodeEditorComponent {\n    return this._codeEditor;\n  }\n}\n```\n\nThe code above allows you to use the code editor within the `*ngIf`, for example:\n\n```html\n\u003cng-container *ngIf=\"selectedModel\"\u003e\n  \u003cngs-code-editor [codeModel]=\"selectedModel\"\u003e\u003c/ngs-code-editor\u003e\n\u003c/ng-container\u003e\n```\n\nOther components can now have access to the editor instance:\n\n```html\n\u003cbutton mat-icon-button title=\"Format code\" (click)=\"codeEditor?.formatDocument()\"\u003e\n  \u003cmat-icon\u003eformat_align_left\u003c/mat-icon\u003e\n\u003c/button\u003e\n```\n\n### Example: auto-formatting on load\n\n```html\n\u003cngs-code-editor [codeModel]=\"selectedModel\" [options]=\"options\" (codeModelChanged)=\"onCodeModelChanged($event)\"\u003e\u003c/ngs-code-editor\u003e\n```\n\n```ts\nimport { CodeModelChangedEvent } from '@ngstack/code-editor';\n\nclass MyComponent {\n  onCodeModelChanged(event: CodeModelChangedEvent) {\n    setTimeout(() =\u003e {\n      event.sender.formatDocument();\n    }, 100);\n  }\n}\n```\n\n## Offline Setup\n\n### Editor\n\nYou can run the editor in the offline mode with your Angular CLI application using the following steps:\n\nInstall the `monaco-editor`:\n\n```sh\nnpm install monaco-editor\n```\n\nUpdate the `angular.json` file and append the following asset rule:\n\n```json\n{\n  \"glob\": \"**/*\",\n  \"input\": \"../node_modules/monaco-editor/min\",\n  \"output\": \"./assets/monaco\"\n}\n```\n\nUpdate the main application module and setup the service to use the custom `baseUrl` when application starts:\n\n```ts\nimport { provideCodeEditor } from '@ngstack/code-editor';\n\n@NgModule({\n  providers: [\n    provideCodeEditor({\n      baseUrl: 'assets/monaco'\n    })\n  ]\n})\nexport class AppModule {}\n```\n\n### Typings Worker\n\nUpdate the `angular.json` file and append the following asset rule:\n\n```json\n{\n  \"glob\": \"**/*.js\",\n  \"input\": \"../node_modules/@ngstack/code-editor/workers\",\n  \"output\": \"./assets/workers\"\n}\n```\n\nThen update the `CodeEditorService` configuration at the application startup:\n\n```ts\nimport { provideCodeEditor } from '@ngstack/code-editor';\n\n@NgModule({\n  providers: [\n    provideCodeEditor({\n      typingsWorkerUrl: 'assets/workers/typings-worker.js'\n    })\n  ]\n})\nexport class AppModule {}\n```\n\n## Lazy Loading\n\nTo enable Lazy Loading\nuse `CodeEditorModule.forRoot()` in the main application,\nand `CodeEditorModule` in all lazy-loaded feature modules.\n\nFor more details please refer to [Lazy Loading Feature Modules](https://angular.io/guide/lazy-loading-ngmodules)\n","funding_links":["https://github.com/sponsors/DenysVuika","https://www.buymeacoffee.com/denys"],"categories":["Third Party Components"],"sub_categories":["Editor Components"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngstack%2Fcode-editor","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngstack%2Fcode-editor","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngstack%2Fcode-editor/lists"}