{"id":48708398,"url":"https://github.com/WebArtWork/ngx-ace-signal","last_synced_at":"2026-04-13T11:01:13.360Z","repository":{"id":345888568,"uuid":"1114568782","full_name":"WebArtWork/ngx-ace-signal","owner":"WebArtWork","description":null,"archived":false,"fork":false,"pushed_at":"2026-03-21T07:41:36.000Z","size":394,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2026-03-21T21:34:47.396Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://ace.webart.work/","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/WebArtWork.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-12-11T15:03:24.000Z","updated_at":"2026-03-21T07:41:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/WebArtWork/ngx-ace-signal","commit_stats":null,"previous_names":["webartwork/ngx-ace-signal"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/WebArtWork/ngx-ace-signal","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebArtWork%2Fngx-ace-signal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebArtWork%2Fngx-ace-signal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebArtWork%2Fngx-ace-signal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebArtWork%2Fngx-ace-signal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/WebArtWork","download_url":"https://codeload.github.com/WebArtWork/ngx-ace-signal/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/WebArtWork%2Fngx-ace-signal/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31749763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-13T09:16:15.125Z","status":"ssl_error","status_checked_at":"2026-04-13T09:16:05.023Z","response_time":93,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":"2026-04-11T13:00:21.206Z","updated_at":"2026-04-13T11:01:13.336Z","avatar_url":"https://github.com/WebArtWork.png","language":"TypeScript","funding_links":[],"categories":["Third Party Components"],"sub_categories":["Editors"],"readme":"# ngx-ace-signal\n\n\u003ca href=\"https://badge.fury.io/js/ngx-ace-signal\"\u003e\n  \u003cimg src=\"https://badge.fury.io/js/ngx-ace-signal.svg\" align=\"right\" alt=\"npm version\" height=\"18\"\u003e\n\u003c/a\u003e\n\n**ngx-ace-signal** is a modern Angular **signals-based** wrapper for the [Ace Editor](https://ace.c9.io/).\n\nIt is designed for **Angular 20+**, supports **SSR**, and avoids legacy patterns like `NgModule`, `@Input()`, or global side effects.\n\n---\n\n## Features\n\n- ✅ Angular **signals** API (`input()`, `model()`, `output()`)\n- ✅ **SSR-safe** − Ace is only loaded in the browser\n- ✅ Dynamic **mode \u0026 theme loading**\n- ✅ Component **and** directive APIs\n- ✅ Fully typed config (`AceConfigInterface`)\n- ✅ Works with standalone apps\n\n---\n\n## Demo\n\nExample application (GitHub Pages):\n👉 [https://ace.webart.work](https://ace.webart.work)\n\n---\n\n## Installation\n\n```bash\nnpm install ngx-ace-signal\n```\n\n---\n\n## Basic usage (component)\n\n```html\n\u003cace [(value)]=\"code\" [mode]=\"'javascript'\" [theme]=\"'github'\"\u003e\u003c/ace\u003e\n```\n\n```ts\ncode = `console.log(\"Hello Ace\");`;\n```\n\n---\n\n## Inputs (signals)\n\n| Input         | Type                               | Default     | Description                            |\n| ------------- | ---------------------------------- | ----------- | -------------------------------------- |\n| `value`       | `string`                           | `\"\"`        | Editor content (two-way via `model()`) |\n| `mode`        | `\"text\" \\| \"javascript\" \\| string` | `\"\"`        | Editor mode                            |\n| `theme`       | `\"github\" \\| \"clouds\" \\| string`   | `\"\"`        | Editor theme                           |\n| `disabled`    | `boolean`                          | `false`     | Disables editor                        |\n| `readOnly`    | `boolean`                          | `false`     | Read-only mode                         |\n| `config`      | `AceConfigInterface`               | `undefined` | Advanced Ace options                   |\n| `useAceClass` | `boolean`                          | `true`      | Toggles `.ace` host class              |\n\n---\n\n## Outputs\n\n```html\n\u003cace (change)=\"onChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\"\u003e\u003c/ace\u003e\n```\n\nSupported events:\n\n- `blur`\n- `focus`\n- `copy`\n- `paste`\n- `change`\n- `changeCursor`\n- `changeSession`\n- `changeSelection`\n\n---\n\n## Directive usage (advanced)\n\n```html\n\u003cdiv ace [mode]=\"'text'\" [theme]=\"'clouds'\" [config]=\"options\"\u003einitial text\u003c/div\u003e\n```\n\nAccess the editor API via template reference:\n\n```html\n\u003cdiv ace #editor=\"ngxAce\"\u003e\u003c/div\u003e\n```\n\n```ts\neditor.ace()?.setValue('Hello');\n```\n\n---\n\n## Global configuration (optional)\n\nUse `provideAce()` to define defaults once:\n\n```ts\nimport { provideAce } from 'ngx-ace-signal';\n\nbootstrapApplication(AppComponent, {\n\tproviders: [\n\t\tprovideAce({\n\t\t\tshowLineNumbers: true,\n\t\t\tuseWorker: false,\n\t\t}),\n\t],\n});\n```\n\n---\n\n## Dynamic mode \u0026 theme registration\n\nYou can extend supported modes/themes **without touching the library**:\n\n```ts\nimport { registerAceMode, registerAceTheme } from 'ngx-ace-signal';\n\nregisterAceMode('json', () =\u003e import('ace-builds/src-noconflict/mode-json'));\n\nregisterAceTheme('monokai', () =\u003e import('ace-builds/src-noconflict/theme-monokai'));\n```\n\nThen use them normally:\n\n```html\n\u003cace mode=\"json\" theme=\"monokai\"\u003e\u003c/ace\u003e\n```\n\n---\n\n## SSR support\n\n- Ace is **never imported on the server**\n- All loading happens behind `isPlatformBrowser`\n- Safe to use in Angular Universal / SSR apps\n\nNo special setup required.\n\n---\n\n## Configuration reference\n\nAll supported options are defined in:\n\n```ts\nAceConfigInterface;\n```\n\nThis is a thin typed layer over Ace’s native configuration.\nFor full option details, see the official Ace documentation:\n\n👉 [https://ace.c9.io/#nav-api](https://ace.c9.io/#nav-api)\n\n---\n\n## Notes on CommonJS warnings\n\n`ace-builds` is CommonJS.\nConsumer apps should add:\n\n```json\n\"allowedCommonJsDependencies\": [\"ace-builds\"]\n```\n\nThis is expected and documented.\n\n---\n\n## AGENTS.md\n\nCopy below code into AGENTS.md file of your project while you are using our plugin.\n\n```md\n## ngx-ace-signal\n\n- This project uses `ngx-ace-signal`, an Angular 20+ Ace Editor wrapper built around signals and standalone APIs.\n- Prefer importing `AceComponent` for `\u003cace\u003e` usage or `AceDirective` for `[ace]` usage directly into standalone components instead of creating wrapper `NgModule`s.\n- Use signal-style bindings that match the library API:\n  - Two-way content binding is `[(value)]`.\n  - Inputs include `[mode]`, `[theme]`, `[disabled]`, `[readOnly]`, and `[config]`.\n  - Outputs include `(change)`, `(focus)`, `(blur)`, `(copy)`, `(paste)`, `(changeCursor)`, `(changeSession)`, and `(changeSelection)`.\n- When app-wide defaults are needed, configure them with `provideAce({...})` in application providers instead of duplicating editor config in many components.\n- Do not import Ace directly in app code unless there is a documented reason. Prefer the library helpers `registerAceMode()` and `registerAceTheme()` to load extra modes/themes.\n- If a feature needs a new mode or theme, register it explicitly, for example:\n  \n      registerAceMode('json', () =\u003e import('ace-builds/src-noconflict/mode-json'));\n      registerAceTheme('monokai', () =\u003e import('ace-builds/src-noconflict/theme-monokai'));\n\n- Keep SSR-safe behavior intact. Do not add server-side imports of `ace-builds`; the library already guards browser-only loading.\n- If build tooling warns that `ace-builds` is CommonJS, allow it in Angular build config via `allowedCommonJsDependencies` rather than replacing the editor integration.\n- When changing editor behavior, prefer passing options through `config` or `provideAce()` before modifying the library itself.\n- If you need direct editor access, use a template ref with `#editor=\"ngxAce\"` and then call `editor.ace()` rather than querying DOM globals.\n```\n\n## License\n\nMIT © Web Art Work\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebArtWork%2Fngx-ace-signal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWebArtWork%2Fngx-ace-signal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWebArtWork%2Fngx-ace-signal/lists"}