@acorex/components 21.0.0-next.6 → 21.0.0-next.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (221) hide show
  1. package/code-editor/README.md +291 -1
  2. package/code-editor/index.d.ts +260 -12
  3. package/fesm2022/acorex-components-accordion.mjs +15 -15
  4. package/fesm2022/acorex-components-accordion.mjs.map +1 -1
  5. package/fesm2022/acorex-components-action-sheet.mjs +12 -12
  6. package/fesm2022/acorex-components-action-sheet.mjs.map +1 -1
  7. package/fesm2022/acorex-components-alert.mjs +10 -10
  8. package/fesm2022/acorex-components-alert.mjs.map +1 -1
  9. package/fesm2022/acorex-components-aspect-ratio.mjs +4 -4
  10. package/fesm2022/acorex-components-aspect-ratio.mjs.map +1 -1
  11. package/fesm2022/acorex-components-audio-wave.mjs +8 -8
  12. package/fesm2022/acorex-components-audio-wave.mjs.map +1 -1
  13. package/fesm2022/acorex-components-autocomplete.mjs +8 -8
  14. package/fesm2022/acorex-components-autocomplete.mjs.map +1 -1
  15. package/fesm2022/acorex-components-avatar.mjs +12 -12
  16. package/fesm2022/acorex-components-avatar.mjs.map +1 -1
  17. package/fesm2022/acorex-components-badge.mjs +9 -9
  18. package/fesm2022/acorex-components-badge.mjs.map +1 -1
  19. package/fesm2022/acorex-components-bottom-navigation.mjs +11 -11
  20. package/fesm2022/acorex-components-bottom-navigation.mjs.map +1 -1
  21. package/fesm2022/acorex-components-breadcrumbs.mjs +11 -11
  22. package/fesm2022/acorex-components-breadcrumbs.mjs.map +1 -1
  23. package/fesm2022/acorex-components-button-group.mjs +13 -13
  24. package/fesm2022/acorex-components-button-group.mjs.map +1 -1
  25. package/fesm2022/acorex-components-button.mjs +19 -19
  26. package/fesm2022/acorex-components-button.mjs.map +1 -1
  27. package/fesm2022/acorex-components-calendar.mjs +18 -18
  28. package/fesm2022/acorex-components-calendar.mjs.map +1 -1
  29. package/fesm2022/acorex-components-check-box.mjs +8 -8
  30. package/fesm2022/acorex-components-check-box.mjs.map +1 -1
  31. package/fesm2022/acorex-components-chips.mjs +9 -9
  32. package/fesm2022/acorex-components-chips.mjs.map +1 -1
  33. package/fesm2022/acorex-components-circular-progress.mjs +9 -9
  34. package/fesm2022/acorex-components-circular-progress.mjs.map +1 -1
  35. package/fesm2022/acorex-components-code-editor.mjs +494 -162
  36. package/fesm2022/acorex-components-code-editor.mjs.map +1 -1
  37. package/fesm2022/acorex-components-collapse.mjs +11 -26
  38. package/fesm2022/acorex-components-collapse.mjs.map +1 -1
  39. package/fesm2022/acorex-components-color-box.mjs +9 -9
  40. package/fesm2022/acorex-components-color-box.mjs.map +1 -1
  41. package/fesm2022/acorex-components-color-palette.mjs +29 -29
  42. package/fesm2022/acorex-components-color-palette.mjs.map +1 -1
  43. package/fesm2022/acorex-components-command.mjs +10 -10
  44. package/fesm2022/acorex-components-command.mjs.map +1 -1
  45. package/fesm2022/acorex-components-comment.mjs +30 -30
  46. package/fesm2022/acorex-components-comment.mjs.map +1 -1
  47. package/fesm2022/acorex-components-conversation.mjs +54 -63
  48. package/fesm2022/acorex-components-conversation.mjs.map +1 -1
  49. package/fesm2022/acorex-components-cron-job.mjs +53 -53
  50. package/fesm2022/acorex-components-cron-job.mjs.map +1 -1
  51. package/fesm2022/acorex-components-data-list.mjs +5 -5
  52. package/fesm2022/acorex-components-data-list.mjs.map +1 -1
  53. package/fesm2022/acorex-components-data-pager.mjs +49 -37
  54. package/fesm2022/acorex-components-data-pager.mjs.map +1 -1
  55. package/fesm2022/acorex-components-data-table.mjs +43 -43
  56. package/fesm2022/acorex-components-data-table.mjs.map +1 -1
  57. package/fesm2022/acorex-components-datetime-box.mjs +8 -8
  58. package/fesm2022/acorex-components-datetime-box.mjs.map +1 -1
  59. package/fesm2022/acorex-components-datetime-input.mjs +8 -8
  60. package/fesm2022/acorex-components-datetime-input.mjs.map +1 -1
  61. package/fesm2022/acorex-components-datetime-picker.mjs +9 -9
  62. package/fesm2022/acorex-components-datetime-picker.mjs.map +1 -1
  63. package/fesm2022/acorex-components-decorators.mjs +84 -42
  64. package/fesm2022/acorex-components-decorators.mjs.map +1 -1
  65. package/fesm2022/acorex-components-dialog.mjs +11 -11
  66. package/fesm2022/acorex-components-dialog.mjs.map +1 -1
  67. package/fesm2022/acorex-components-drawer-2.mjs +11 -11
  68. package/fesm2022/acorex-components-drawer-2.mjs.map +1 -1
  69. package/fesm2022/acorex-components-drawer.mjs +14 -14
  70. package/fesm2022/acorex-components-drawer.mjs.map +1 -1
  71. package/fesm2022/acorex-components-dropdown-button.mjs +9 -9
  72. package/fesm2022/acorex-components-dropdown-button.mjs.map +1 -1
  73. package/fesm2022/acorex-components-dropdown.mjs +15 -15
  74. package/fesm2022/acorex-components-dropdown.mjs.map +1 -1
  75. package/fesm2022/acorex-components-file-explorer.mjs +28 -28
  76. package/fesm2022/acorex-components-file-explorer.mjs.map +1 -1
  77. package/fesm2022/acorex-components-flow-chart.mjs +18 -18
  78. package/fesm2022/acorex-components-flow-chart.mjs.map +1 -1
  79. package/fesm2022/acorex-components-form.mjs +19 -19
  80. package/fesm2022/acorex-components-form.mjs.map +1 -1
  81. package/fesm2022/acorex-components-grid-layout-builder.mjs +14 -15
  82. package/fesm2022/acorex-components-grid-layout-builder.mjs.map +1 -1
  83. package/fesm2022/acorex-components-image-editor.mjs +38 -38
  84. package/fesm2022/acorex-components-image-editor.mjs.map +1 -1
  85. package/fesm2022/acorex-components-image.mjs +8 -8
  86. package/fesm2022/acorex-components-image.mjs.map +1 -1
  87. package/fesm2022/acorex-components-json-viewer.mjs +9 -9
  88. package/fesm2022/acorex-components-json-viewer.mjs.map +1 -1
  89. package/fesm2022/acorex-components-kanban.mjs +5 -5
  90. package/fesm2022/acorex-components-kanban.mjs.map +1 -1
  91. package/fesm2022/acorex-components-kbd.mjs +8 -8
  92. package/fesm2022/acorex-components-kbd.mjs.map +1 -1
  93. package/fesm2022/acorex-components-label.mjs +7 -7
  94. package/fesm2022/acorex-components-label.mjs.map +1 -1
  95. package/fesm2022/acorex-components-list.mjs +8 -8
  96. package/fesm2022/acorex-components-list.mjs.map +1 -1
  97. package/fesm2022/acorex-components-loading-dialog.mjs +11 -11
  98. package/fesm2022/acorex-components-loading-dialog.mjs.map +1 -1
  99. package/fesm2022/acorex-components-loading.mjs +18 -18
  100. package/fesm2022/acorex-components-loading.mjs.map +1 -1
  101. package/fesm2022/acorex-components-map.mjs +14 -14
  102. package/fesm2022/acorex-components-map.mjs.map +1 -1
  103. package/fesm2022/acorex-components-media-viewer.mjs +61 -87
  104. package/fesm2022/acorex-components-media-viewer.mjs.map +1 -1
  105. package/fesm2022/acorex-components-menu.mjs +19 -19
  106. package/fesm2022/acorex-components-menu.mjs.map +1 -1
  107. package/fesm2022/{acorex-components-modal-acorex-components-modal-h5Y-qcbh.mjs → acorex-components-modal-acorex-components-modal-ClSGRCam.mjs} +23 -23
  108. package/fesm2022/acorex-components-modal-acorex-components-modal-ClSGRCam.mjs.map +1 -0
  109. package/fesm2022/{acorex-components-modal-modal-content.component-B6tyMLdU.mjs → acorex-components-modal-modal-content.component-BC-z7O0z.mjs} +7 -30
  110. package/fesm2022/acorex-components-modal-modal-content.component-BC-z7O0z.mjs.map +1 -0
  111. package/fesm2022/acorex-components-modal.mjs +1 -1
  112. package/fesm2022/acorex-components-navbar.mjs +8 -8
  113. package/fesm2022/acorex-components-navbar.mjs.map +1 -1
  114. package/fesm2022/acorex-components-notification.mjs +14 -14
  115. package/fesm2022/acorex-components-notification.mjs.map +1 -1
  116. package/fesm2022/acorex-components-number-box-2.mjs +4 -4
  117. package/fesm2022/acorex-components-number-box-2.mjs.map +1 -1
  118. package/fesm2022/acorex-components-number-box.mjs +12 -30
  119. package/fesm2022/acorex-components-number-box.mjs.map +1 -1
  120. package/fesm2022/acorex-components-otp.mjs +10 -10
  121. package/fesm2022/acorex-components-otp.mjs.map +1 -1
  122. package/fesm2022/acorex-components-page.mjs +10 -10
  123. package/fesm2022/acorex-components-page.mjs.map +1 -1
  124. package/fesm2022/acorex-components-paint.mjs +27 -27
  125. package/fesm2022/acorex-components-paint.mjs.map +1 -1
  126. package/fesm2022/acorex-components-password-box.mjs +11 -11
  127. package/fesm2022/acorex-components-password-box.mjs.map +1 -1
  128. package/fesm2022/acorex-components-pdf-reader.mjs +8 -8
  129. package/fesm2022/acorex-components-pdf-reader.mjs.map +1 -1
  130. package/fesm2022/acorex-components-phone-box.mjs +8 -8
  131. package/fesm2022/acorex-components-phone-box.mjs.map +1 -1
  132. package/fesm2022/acorex-components-picker.mjs +17 -17
  133. package/fesm2022/acorex-components-picker.mjs.map +1 -1
  134. package/fesm2022/acorex-components-popover.mjs +12 -12
  135. package/fesm2022/acorex-components-popover.mjs.map +1 -1
  136. package/fesm2022/acorex-components-popup.mjs +13 -13
  137. package/fesm2022/acorex-components-popup.mjs.map +1 -1
  138. package/fesm2022/acorex-components-progress-bar.mjs +8 -8
  139. package/fesm2022/acorex-components-progress-bar.mjs.map +1 -1
  140. package/fesm2022/acorex-components-qrcode.mjs +8 -8
  141. package/fesm2022/acorex-components-qrcode.mjs.map +1 -1
  142. package/fesm2022/acorex-components-query-builder.mjs +8 -8
  143. package/fesm2022/acorex-components-query-builder.mjs.map +1 -1
  144. package/fesm2022/acorex-components-radio.mjs +7 -7
  145. package/fesm2022/acorex-components-radio.mjs.map +1 -1
  146. package/fesm2022/acorex-components-rail-navigation.mjs +16 -16
  147. package/fesm2022/acorex-components-rail-navigation.mjs.map +1 -1
  148. package/fesm2022/acorex-components-range-slider.mjs +8 -8
  149. package/fesm2022/acorex-components-range-slider.mjs.map +1 -1
  150. package/fesm2022/acorex-components-rate-picker.mjs +10 -10
  151. package/fesm2022/acorex-components-rate-picker.mjs.map +1 -1
  152. package/fesm2022/acorex-components-rest-api-generator.mjs +23 -23
  153. package/fesm2022/acorex-components-rest-api-generator.mjs.map +1 -1
  154. package/fesm2022/acorex-components-result.mjs +7 -7
  155. package/fesm2022/acorex-components-result.mjs.map +1 -1
  156. package/fesm2022/acorex-components-routing-progress.mjs +7 -7
  157. package/fesm2022/acorex-components-routing-progress.mjs.map +1 -1
  158. package/fesm2022/acorex-components-rrule.mjs +11 -11
  159. package/fesm2022/acorex-components-rrule.mjs.map +1 -1
  160. package/fesm2022/acorex-components-scheduler.mjs +43 -43
  161. package/fesm2022/acorex-components-scheduler.mjs.map +1 -1
  162. package/fesm2022/acorex-components-scss.mjs +4 -4
  163. package/fesm2022/acorex-components-scss.mjs.map +1 -1
  164. package/fesm2022/acorex-components-search-box.mjs +8 -8
  165. package/fesm2022/acorex-components-search-box.mjs.map +1 -1
  166. package/fesm2022/acorex-components-select-box.mjs +20 -13
  167. package/fesm2022/acorex-components-select-box.mjs.map +1 -1
  168. package/fesm2022/acorex-components-selection-list-2.mjs +10 -10
  169. package/fesm2022/acorex-components-selection-list-2.mjs.map +1 -1
  170. package/fesm2022/acorex-components-selection-list.mjs +10 -10
  171. package/fesm2022/acorex-components-selection-list.mjs.map +1 -1
  172. package/fesm2022/acorex-components-side-menu.mjs +31 -38
  173. package/fesm2022/acorex-components-side-menu.mjs.map +1 -1
  174. package/fesm2022/acorex-components-skeleton.mjs +8 -8
  175. package/fesm2022/acorex-components-skeleton.mjs.map +1 -1
  176. package/fesm2022/acorex-components-slider.mjs +10 -10
  177. package/fesm2022/acorex-components-slider.mjs.map +1 -1
  178. package/fesm2022/acorex-components-sliding-item.mjs +16 -16
  179. package/fesm2022/acorex-components-sliding-item.mjs.map +1 -1
  180. package/fesm2022/acorex-components-step-wizard.mjs +16 -16
  181. package/fesm2022/acorex-components-step-wizard.mjs.map +1 -1
  182. package/fesm2022/acorex-components-switch.mjs +12 -12
  183. package/fesm2022/acorex-components-switch.mjs.map +1 -1
  184. package/fesm2022/acorex-components-tabs.mjs +16 -16
  185. package/fesm2022/acorex-components-tabs.mjs.map +1 -1
  186. package/fesm2022/acorex-components-tag-box.mjs +8 -8
  187. package/fesm2022/acorex-components-tag-box.mjs.map +1 -1
  188. package/fesm2022/acorex-components-tag.mjs +8 -8
  189. package/fesm2022/acorex-components-tag.mjs.map +1 -1
  190. package/fesm2022/acorex-components-text-area.mjs +7 -7
  191. package/fesm2022/acorex-components-text-area.mjs.map +1 -1
  192. package/fesm2022/acorex-components-text-box.mjs +11 -11
  193. package/fesm2022/acorex-components-text-box.mjs.map +1 -1
  194. package/fesm2022/acorex-components-time-duration.mjs +54 -14
  195. package/fesm2022/acorex-components-time-duration.mjs.map +1 -1
  196. package/fesm2022/acorex-components-time-line.mjs +13 -28
  197. package/fesm2022/acorex-components-time-line.mjs.map +1 -1
  198. package/fesm2022/acorex-components-toast.mjs +14 -14
  199. package/fesm2022/acorex-components-toast.mjs.map +1 -1
  200. package/fesm2022/acorex-components-toolbar.mjs +8 -8
  201. package/fesm2022/acorex-components-toolbar.mjs.map +1 -1
  202. package/fesm2022/acorex-components-tooltip.mjs +12 -12
  203. package/fesm2022/acorex-components-tooltip.mjs.map +1 -1
  204. package/fesm2022/acorex-components-tree-view.mjs +16 -45
  205. package/fesm2022/acorex-components-tree-view.mjs.map +1 -1
  206. package/fesm2022/acorex-components-uploader.mjs +24 -39
  207. package/fesm2022/acorex-components-uploader.mjs.map +1 -1
  208. package/fesm2022/acorex-components-video-player.mjs +8 -8
  209. package/fesm2022/acorex-components-video-player.mjs.map +1 -1
  210. package/fesm2022/acorex-components-wysiwyg.mjs +43 -43
  211. package/fesm2022/acorex-components-wysiwyg.mjs.map +1 -1
  212. package/grid-layout-builder/index.d.ts +1 -2
  213. package/media-viewer/index.d.ts +1 -0
  214. package/package.json +7 -7
  215. package/phone-box/index.d.ts +4 -4
  216. package/select-box/index.d.ts +1 -0
  217. package/side-menu/index.d.ts +3 -2
  218. package/time-duration/index.d.ts +19 -3
  219. package/wysiwyg/index.d.ts +1 -1
  220. package/fesm2022/acorex-components-modal-acorex-components-modal-h5Y-qcbh.mjs.map +0 -1
  221. package/fesm2022/acorex-components-modal-modal-content.component-B6tyMLdU.mjs.map +0 -1
@@ -1,3 +1,293 @@
1
1
  # @acorex/components/code-editor
2
2
 
3
- Secondary entry point of `@acorex/components`. It can be used by importing from `@acorex/components/code-editor`.
3
+ A modular, plugin-based code editor component built on CodeMirror 6.
4
+
5
+ ## Features
6
+
7
+ - 🔌 **Plugin Architecture** - Fully modular with external plugin support
8
+ - 🎨 **Themeable** - Custom theme plugins or platform-aware themes
9
+ - 🌍 **Multi-Language** - Support for any language via plugins
10
+ - ✨ **Formatting** - Pluggable formatters (Prettier included)
11
+ - 📝 **Rich API** - Comprehensive component API with signals
12
+ - ♿ **Accessible** - ARIA support and keyboard navigation
13
+
14
+ ## Installation
15
+
16
+ ```bash
17
+ npm install @acorex/components
18
+ ```
19
+
20
+ ## Basic Usage
21
+
22
+ ### With Default Plugins
23
+
24
+ ```typescript
25
+ import { Component } from '@angular/core';
26
+ import { AXCodeEditorComponent, provideDefaultCodeEditorConfig } from '@acorex/components/code-editor';
27
+ import { bootstrapApplication } from '@angular/platform-browser';
28
+
29
+ @Component({
30
+ selector: 'app-root',
31
+ imports: [AXCodeEditorComponent],
32
+ template: `
33
+ <ax-code-editor
34
+ [(value)]="code"
35
+ language="typescript"
36
+ [lineNumbers]="true"
37
+ [formatOnSave]="true"
38
+ />
39
+ `
40
+ })
41
+ export class AppComponent {
42
+ code = 'const hello = "world";';
43
+ }
44
+
45
+ // Provide default plugins in your app config
46
+ bootstrapApplication(AppComponent, {
47
+ providers: [provideDefaultCodeEditorConfig()]
48
+ });
49
+ ```
50
+
51
+ ### Without Default Plugins (Custom Configuration)
52
+
53
+ ```typescript
54
+ import {
55
+ provideCodeEditorPlugins,
56
+ JavaScriptLanguagePlugin,
57
+ TypeScriptLanguagePlugin,
58
+ OneDarkThemePlugin,
59
+ LightThemePlugin,
60
+ PrettierFormatterPlugin
61
+ } from '@acorex/components/code-editor';
62
+
63
+ bootstrapApplication(AppComponent, {
64
+ providers: [
65
+ provideCodeEditorPlugins({
66
+ languages: [
67
+ new JavaScriptLanguagePlugin(),
68
+ new TypeScriptLanguagePlugin(),
69
+ ],
70
+ themes: [
71
+ new OneDarkThemePlugin(),
72
+ new LightThemePlugin(),
73
+ ],
74
+ formatters: [
75
+ new PrettierFormatterPlugin(),
76
+ ],
77
+ extensions: []
78
+ })
79
+ ]
80
+ });
81
+ ```
82
+
83
+ ## Plugin System
84
+
85
+ ### Built-in Language Plugins
86
+
87
+ - `JavaScriptLanguagePlugin` - JavaScript (js, javascript)
88
+ - `TypeScriptLanguagePlugin` - TypeScript (ts, typescript)
89
+ - `JSONLanguagePlugin` - JSON
90
+ - `HTMLLanguagePlugin` - HTML
91
+ - `CSSLanguagePlugin` - CSS
92
+ - `SassLanguagePlugin` - Sass/SCSS
93
+ - `SQLLanguagePlugin` - SQL
94
+ - `XMLLanguagePlugin` - XML
95
+ - `MarkdownLanguagePlugin` - Markdown
96
+
97
+ ### Built-in Theme Plugins
98
+
99
+ - `OneDarkThemePlugin` - Dark theme
100
+ - `LightThemePlugin` - Light theme
101
+
102
+ ### Built-in Formatter Plugins
103
+
104
+ - `PrettierFormatterPlugin` - Prettier formatter (JS, TS, JSON, HTML, CSS, Markdown)
105
+
106
+ ### Creating Custom Plugins
107
+
108
+ #### Custom Language Plugin
109
+
110
+ ```typescript
111
+ import { AXCodeEditorLanguagePlugin } from '@acorex/components/code-editor';
112
+ import type { Extension } from '@codemirror/state';
113
+
114
+ export class PythonLanguagePlugin implements AXCodeEditorLanguagePlugin {
115
+ readonly id = 'python';
116
+ readonly name = 'Python';
117
+ readonly version = '1.0.0';
118
+ readonly languages = ['python', 'py'];
119
+
120
+ async getExtension(): Promise<Extension> {
121
+ const { python } = await import('@codemirror/lang-python');
122
+ return python();
123
+ }
124
+ }
125
+ ```
126
+
127
+ #### Custom Theme Plugin
128
+
129
+ ```typescript
130
+ import { AXCodeEditorThemePlugin } from '@acorex/components/code-editor';
131
+ import type { Extension } from '@codemirror/state';
132
+
133
+ export class CustomThemePlugin implements AXCodeEditorThemePlugin {
134
+ readonly id = 'custom-theme';
135
+ readonly name = 'Custom Theme';
136
+ readonly version = '1.0.0';
137
+ readonly dark = false;
138
+
139
+ async getExtension(): Promise<Extension> {
140
+ const { EditorView } = await import('@codemirror/view');
141
+ return EditorView.theme({
142
+ '&': {
143
+ backgroundColor: '#f5f5f5',
144
+ color: '#333'
145
+ },
146
+ '.cm-gutters': {
147
+ backgroundColor: '#e0e0e0'
148
+ }
149
+ }, { dark: false });
150
+ }
151
+ }
152
+ ```
153
+
154
+ #### Custom Formatter Plugin
155
+
156
+ ```typescript
157
+ import { AXCodeEditorFormatterPlugin } from '@acorex/components/code-editor';
158
+
159
+ export class CustomFormatterPlugin implements AXCodeEditorFormatterPlugin {
160
+ readonly id = 'custom-formatter';
161
+ readonly name = 'Custom Formatter';
162
+ readonly version = '1.0.0';
163
+ readonly languages = ['custom'];
164
+
165
+ async format(text: string, language: string): Promise<string | null> {
166
+ // Your formatting logic
167
+ return text.trim();
168
+ }
169
+ }
170
+ ```
171
+
172
+ ### Runtime Plugin Registration
173
+
174
+ ```typescript
175
+ import { inject } from '@angular/core';
176
+ import { AXCodeEditorPluginRegistry } from '@acorex/components/code-editor';
177
+
178
+ export class MyComponent {
179
+ private registry = inject(AXCodeEditorPluginRegistry);
180
+
181
+ ngOnInit() {
182
+ // Register plugins at runtime
183
+ this.registry.registerLanguagePlugin(new PythonLanguagePlugin());
184
+ this.registry.registerThemePlugin(new CustomThemePlugin());
185
+ this.registry.registerFormatterPlugin(new CustomFormatterPlugin());
186
+ }
187
+ }
188
+ ```
189
+
190
+ ## Component API
191
+
192
+ ### Inputs
193
+
194
+ | Input | Type | Default | Description |
195
+ | ------------------- | ---------------------------------- | -------------- | -------------------------------- |
196
+ | `value` | `string` | `''` | Editor content (two-way binding) |
197
+ | `language` | `string` | `'javascript'` | Language identifier |
198
+ | `theme` | `string \| null` | `null` | Theme ID (null = platform theme) |
199
+ | `readOnly` | `boolean` | `false` | Read-only mode |
200
+ | `placeholder` | `string` | `''` | Placeholder text |
201
+ | `lineNumbers` | `boolean` | `true` | Show line numbers |
202
+ | `lineWrapping` | `boolean` | `false` | Wrap long lines |
203
+ | `tabSize` | `number` | `2` | Tab size in spaces |
204
+ | `indentWithTab` | `boolean` | `true` | Use Tab key for indentation |
205
+ | `height` | `string \| null` | `null` | Fixed height |
206
+ | `minHeight` | `string \| null` | `null` | Minimum height |
207
+ | `maxHeight` | `string \| null` | `null` | Maximum height |
208
+ | `extensions` | `Extension[]` | `[]` | Additional CodeMirror extensions |
209
+ | `customCompletions` | `Completion[] \| CompletionSource` | `null` | Custom autocomplete |
210
+ | `ariaLabel` | `string \| null` | `null` | ARIA label |
211
+ | `focusOnReady` | `boolean` | `false` | Auto-focus on mount |
212
+ | `formatOnSave` | `boolean` | `false` | Format on Ctrl+S |
213
+
214
+ ### Outputs
215
+
216
+ | Output | Type | Description |
217
+ | ------------- | -------- | -------------------------------- |
218
+ | `valueChange` | `string` | Emits when content changes |
219
+ | `ready` | `void` | Emits when editor is initialized |
220
+ | `save` | `string` | Emits on Ctrl+S |
221
+
222
+ ### Methods
223
+
224
+ | Method | Returns | Description |
225
+ | ---------------------- | ------------------------- | ------------------- |
226
+ | `focus()` | `void` | Focus the editor |
227
+ | `selectAll()` | `void` | Select all text |
228
+ | `format(affect?)` | `Promise<string \| null>` | Format document |
229
+ | `getTotalCharacters()` | `number` | Get character count |
230
+ | `getTotalLines()` | `number` | Get line count |
231
+
232
+ ## Examples
233
+
234
+ ### With Custom Theme
235
+
236
+ ```typescript
237
+ <ax-code-editor
238
+ [(value)]="code"
239
+ language="typescript"
240
+ theme="one-dark"
241
+ />
242
+ ```
243
+
244
+ ### With Formatting
245
+
246
+ ```typescript
247
+ <ax-code-editor
248
+ [(value)]="code"
249
+ language="json"
250
+ [formatOnSave]="true"
251
+ (save)="onSave($event)"
252
+ />
253
+ ```
254
+
255
+ ### Programmatic Formatting
256
+
257
+ ```typescript
258
+ @Component({
259
+ template: `
260
+ <ax-code-editor #editor [(value)]="code" />
261
+ <button (click)="formatCode()">Format</button>
262
+ `
263
+ })
264
+ export class MyComponent {
265
+ editor = viewChild<AXCodeEditorComponent>('editor');
266
+
267
+ async formatCode() {
268
+ await this.editor().format();
269
+ }
270
+ }
271
+ ```
272
+
273
+ ## Migration from v1
274
+
275
+ The component now uses a plugin architecture. Update your app configuration:
276
+
277
+ **Before:**
278
+
279
+ ```typescript
280
+ // Languages were hardcoded
281
+ ```
282
+
283
+ **After:**
284
+
285
+ ```typescript
286
+ import { provideDefaultCodeEditorConfig } from '@acorex/components/code-editor';
287
+
288
+ bootstrapApplication(AppComponent, {
289
+ providers: [provideDefaultCodeEditorConfig()]
290
+ });
291
+ ```
292
+
293
+ The `AXCodeEditorSupportedLanguage` type is deprecated but still available for backward compatibility. Use `string` type directly for language inputs.
@@ -1,20 +1,267 @@
1
1
  import * as _angular_core from '@angular/core';
2
- import { ElementRef } from '@angular/core';
2
+ import { InjectionToken, ElementRef } from '@angular/core';
3
3
  import * as _codemirror_autocomplete from '@codemirror/autocomplete';
4
4
  import * as _codemirror_state from '@codemirror/state';
5
+ import { Extension } from '@codemirror/state';
5
6
  import { MXValueComponent } from '@acorex/cdk/common';
6
7
  import * as i1 from '@angular/common';
7
8
 
9
+ /**
10
+ * Base interface for all code editor plugins
11
+ */
12
+ interface AXCodeEditorPlugin {
13
+ /** Unique identifier for the plugin */
14
+ readonly id: string;
15
+ /** Human-readable name */
16
+ readonly name: string;
17
+ /** Plugin version */
18
+ readonly version?: string;
19
+ }
20
+ /**
21
+ * Language plugin provides syntax highlighting and language-specific features
22
+ */
23
+ interface AXCodeEditorLanguagePlugin extends AXCodeEditorPlugin {
24
+ /** Language identifiers this plugin supports (e.g., 'javascript', 'js') */
25
+ readonly languages: ReadonlyArray<string>;
26
+ /** Load and return the CodeMirror extension for this language */
27
+ getExtension(): Promise<Extension>;
28
+ }
29
+ /**
30
+ * Theme plugin provides visual styling for the editor
31
+ */
32
+ interface AXCodeEditorThemePlugin extends AXCodeEditorPlugin {
33
+ /** Whether this is a dark theme */
34
+ readonly dark: boolean;
35
+ /** Load and return the CodeMirror theme extension */
36
+ getExtension(): Promise<Extension>;
37
+ }
38
+ /**
39
+ * Formatter plugin provides code formatting capabilities
40
+ */
41
+ interface AXCodeEditorFormatterPlugin extends AXCodeEditorPlugin {
42
+ /** Languages this formatter supports */
43
+ readonly languages: ReadonlyArray<string>;
44
+ /** Format the given text */
45
+ format(text: string, language: string): Promise<string | null>;
46
+ }
47
+ /**
48
+ * Extension plugin provides additional CodeMirror extensions
49
+ */
50
+ interface AXCodeEditorExtensionPlugin extends AXCodeEditorPlugin {
51
+ /** Get the CodeMirror extension */
52
+ getExtension(): Promise<Extension>;
53
+ }
54
+ /**
55
+ * Plugin configuration for the code editor
56
+ */
57
+ interface AXCodeEditorPluginConfig {
58
+ /** Language plugins */
59
+ languages?: ReadonlyArray<AXCodeEditorLanguagePlugin>;
60
+ /** Theme plugins */
61
+ themes?: ReadonlyArray<AXCodeEditorThemePlugin>;
62
+ /** Formatter plugins */
63
+ formatters?: ReadonlyArray<AXCodeEditorFormatterPlugin>;
64
+ /** Additional extension plugins */
65
+ extensions?: ReadonlyArray<AXCodeEditorExtensionPlugin>;
66
+ }
67
+
68
+ /**
69
+ * Injection token for providing code editor plugin configuration
70
+ */
71
+ declare const AX_CODE_EDITOR_PLUGIN_CONFIG: InjectionToken<AXCodeEditorPluginConfig>;
72
+
73
+ /**
74
+ * Registry service for managing code editor plugins
75
+ */
76
+ declare class AXCodeEditorPluginRegistry {
77
+ private config;
78
+ private languagePlugins;
79
+ private themePlugins;
80
+ private formatterPlugins;
81
+ private extensionPlugins;
82
+ constructor();
83
+ private initializePlugins;
84
+ /**
85
+ * Get language extension for the specified language
86
+ */
87
+ getLanguageExtension(language: string): Promise<Extension>;
88
+ /**
89
+ * Get theme extension by theme ID
90
+ */
91
+ getThemeExtension(themeId: string): Promise<Extension>;
92
+ /**
93
+ * Format text using the appropriate formatter for the language
94
+ */
95
+ format(text: string, language: string): Promise<string | null>;
96
+ /**
97
+ * Get all registered extension plugins
98
+ */
99
+ getExtensionPlugins(): Promise<Extension[]>;
100
+ /**
101
+ * Check if a language is supported
102
+ */
103
+ hasLanguage(language: string): boolean;
104
+ /**
105
+ * Check if a theme is available
106
+ */
107
+ hasTheme(themeId: string): boolean;
108
+ /**
109
+ * Check if a formatter is available for a language
110
+ */
111
+ hasFormatter(language: string): boolean;
112
+ /**
113
+ * Get all available language identifiers
114
+ */
115
+ getAvailableLanguages(): string[];
116
+ /**
117
+ * Get all available theme identifiers
118
+ */
119
+ getAvailableThemes(): string[];
120
+ /**
121
+ * Register a language plugin at runtime
122
+ */
123
+ registerLanguagePlugin(plugin: AXCodeEditorLanguagePlugin): void;
124
+ /**
125
+ * Register a theme plugin at runtime
126
+ */
127
+ registerThemePlugin(plugin: AXCodeEditorThemePlugin): void;
128
+ /**
129
+ * Register a formatter plugin at runtime
130
+ */
131
+ registerFormatterPlugin(plugin: AXCodeEditorFormatterPlugin): void;
132
+ /**
133
+ * Register an extension plugin at runtime
134
+ */
135
+ registerExtensionPlugin(plugin: AXCodeEditorExtensionPlugin): void;
136
+ static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCodeEditorPluginRegistry, never>;
137
+ static ɵprov: _angular_core.ɵɵInjectableDeclaration<AXCodeEditorPluginRegistry>;
138
+ }
139
+
140
+ declare class JavaScriptLanguagePlugin implements AXCodeEditorLanguagePlugin {
141
+ readonly id = "javascript";
142
+ readonly name = "JavaScript";
143
+ readonly version = "1.0.0";
144
+ readonly languages: readonly ["javascript", "js"];
145
+ getExtension(): Promise<Extension>;
146
+ }
147
+
148
+ declare class TypeScriptLanguagePlugin implements AXCodeEditorLanguagePlugin {
149
+ readonly id = "typescript";
150
+ readonly name = "TypeScript";
151
+ readonly version = "1.0.0";
152
+ readonly languages: readonly ["typescript", "ts"];
153
+ getExtension(): Promise<Extension>;
154
+ }
155
+
156
+ declare class JSONLanguagePlugin implements AXCodeEditorLanguagePlugin {
157
+ readonly id = "json";
158
+ readonly name = "JSON";
159
+ readonly version = "1.0.0";
160
+ readonly languages: readonly ["json"];
161
+ getExtension(): Promise<Extension>;
162
+ }
163
+
164
+ declare class HTMLLanguagePlugin implements AXCodeEditorLanguagePlugin {
165
+ readonly id = "html";
166
+ readonly name = "HTML";
167
+ readonly version = "1.0.0";
168
+ readonly languages: readonly ["html"];
169
+ getExtension(): Promise<Extension>;
170
+ }
171
+
172
+ declare class CSSLanguagePlugin implements AXCodeEditorLanguagePlugin {
173
+ readonly id = "css";
174
+ readonly name = "CSS";
175
+ readonly version = "1.0.0";
176
+ readonly languages: readonly ["css"];
177
+ getExtension(): Promise<Extension>;
178
+ }
179
+
180
+ declare class SassLanguagePlugin implements AXCodeEditorLanguagePlugin {
181
+ readonly id = "sass";
182
+ readonly name = "Sass/SCSS";
183
+ readonly version = "1.0.0";
184
+ readonly languages: readonly ["sass", "scss"];
185
+ getExtension(): Promise<Extension>;
186
+ }
187
+
188
+ declare class SQLLanguagePlugin implements AXCodeEditorLanguagePlugin {
189
+ readonly id = "sql";
190
+ readonly name = "SQL";
191
+ readonly version = "1.0.0";
192
+ readonly languages: readonly ["sql"];
193
+ getExtension(): Promise<Extension>;
194
+ }
195
+
196
+ declare class XMLLanguagePlugin implements AXCodeEditorLanguagePlugin {
197
+ readonly id = "xml";
198
+ readonly name = "XML";
199
+ readonly version = "1.0.0";
200
+ readonly languages: readonly ["xml"];
201
+ getExtension(): Promise<Extension>;
202
+ }
203
+
204
+ declare class MarkdownLanguagePlugin implements AXCodeEditorLanguagePlugin {
205
+ readonly id = "markdown";
206
+ readonly name = "Markdown";
207
+ readonly version = "1.0.0";
208
+ readonly languages: readonly ["markdown"];
209
+ getExtension(): Promise<Extension>;
210
+ }
211
+
212
+ type AXCodeEditorDefaultLanguage = 'javascript' | 'js' | 'typescript' | 'ts' | 'json' | 'html' | 'css' | 'scss' | 'sass' | 'sql' | 'xml' | 'markdown';
213
+
214
+ declare class OneDarkThemePlugin implements AXCodeEditorThemePlugin {
215
+ readonly id = "one-dark";
216
+ readonly name = "One Dark";
217
+ readonly version = "1.0.0";
218
+ readonly dark = true;
219
+ getExtension(): Promise<Extension>;
220
+ }
221
+
222
+ declare class LightThemePlugin implements AXCodeEditorThemePlugin {
223
+ readonly id = "light";
224
+ readonly name = "Light";
225
+ readonly version = "1.0.0";
226
+ readonly dark = false;
227
+ getExtension(): Promise<Extension>;
228
+ }
229
+
230
+ declare class GitHubLightThemePlugin implements AXCodeEditorThemePlugin {
231
+ readonly id = "github-light";
232
+ readonly name = "GitHub Light";
233
+ readonly version = "1.0.0";
234
+ readonly dark = false;
235
+ getExtension(): Promise<Extension>;
236
+ }
237
+
238
+ declare class GitHubDarkThemePlugin implements AXCodeEditorThemePlugin {
239
+ readonly id = "github-dark";
240
+ readonly name = "GitHub Dark";
241
+ readonly version = "1.0.0";
242
+ readonly dark = true;
243
+ getExtension(): Promise<Extension>;
244
+ }
245
+
246
+ declare class PrettierFormatterPlugin implements AXCodeEditorFormatterPlugin {
247
+ readonly id = "prettier";
248
+ readonly name = "Prettier";
249
+ readonly version = "1.0.0";
250
+ readonly languages: readonly ["javascript", "js", "typescript", "ts", "json", "html", "css", "markdown"];
251
+ format(text: string, language: string): Promise<string | null>;
252
+ }
253
+
254
+ /**
255
+ * Default plugin configuration with all built-in plugins
256
+ */
257
+ declare function provideDefaultCodeEditorPlugins(): AXCodeEditorPluginConfig;
258
+
8
259
  type AXCodeEditorExtensionLike = _codemirror_state.Extension;
9
260
  type AXCodeEditorCompletionLike = _codemirror_autocomplete.Completion;
10
261
  type AXCodeEditorCompletionSourceLike = _codemirror_autocomplete.CompletionSource;
11
- /**
12
- * Supported syntax highlighting modes for the editor.
13
- */
14
- type AXCodeEditorSupportedLanguage = 'javascript' | 'js' | 'typescript' | 'ts' | 'json' | 'html' | 'css' | 'scss' | 'sass' | 'sql' | 'xml' | 'markdown' | 'text';
15
262
  declare class AXCodeEditorComponent extends MXValueComponent<string> {
16
- /** Active language mode. Default: 'javascript'. */
17
- language: _angular_core.InputSignal<AXCodeEditorSupportedLanguage>;
263
+ /** Active language identifier from default plugins. Default: 'javascript'. */
264
+ language: _angular_core.InputSignal<AXCodeEditorDefaultLanguage>;
18
265
  /** When true, the editor becomes readonly (non-editable). */
19
266
  readOnly: _angular_core.InputSignal<boolean>;
20
267
  /** Placeholder text shown when the document is empty. */
@@ -33,6 +280,8 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
33
280
  minHeight: _angular_core.InputSignal<string>;
34
281
  /** Maximum height for the editor. */
35
282
  maxHeight: _angular_core.InputSignal<string>;
283
+ /** Theme identifier. If null, uses platform theme mode (dark/light). */
284
+ theme: _angular_core.InputSignal<string>;
36
285
  /** Additional CodeMirror extensions to apply. Reconfigures at runtime. */
37
286
  extensions: _angular_core.InputSignal<readonly _codemirror_state.Extension[]>;
38
287
  /** ARIA label for accessibility. */
@@ -54,6 +303,7 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
54
303
  private platformId;
55
304
  private destroyRef;
56
305
  private platformService;
306
+ private pluginRegistry;
57
307
  private editorViewSig;
58
308
  private languageCompartment;
59
309
  private readOnlyCompartment;
@@ -76,8 +326,6 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
76
326
  private loadCodeMirrorModules;
77
327
  private createCompartments;
78
328
  private buildKeymaps;
79
- private tryFormatWithPrettier;
80
- private resolveLanguageExtension;
81
329
  private resolveThemeExtension;
82
330
  private buildCustomCompletionSources;
83
331
  /** Programmatically focus the editor. */
@@ -90,7 +338,7 @@ declare class AXCodeEditorComponent extends MXValueComponent<string> {
90
338
  /** Returns the total number of lines in the current document. */
91
339
  getTotalLines(): number;
92
340
  static ɵfac: _angular_core.ɵɵFactoryDeclaration<AXCodeEditorComponent, never>;
93
- static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCodeEditorComponent, "ax-code-editor", never, { "language": { "alias": "language"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "lineWrapping": { "alias": "lineWrapping"; "required": false; "isSignal": true; }; "tabSize": { "alias": "tabSize"; "required": false; "isSignal": true; }; "indentWithTab": { "alias": "indentWithTab"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "focusOnReady": { "alias": "focusOnReady"; "required": false; "isSignal": true; }; "formatOnSave": { "alias": "formatOnSave"; "required": false; "isSignal": true; }; "customCompletions": { "alias": "customCompletions"; "required": false; "isSignal": true; }; }, { "ready": "ready"; "save": "save"; }, never, never, true, never>;
341
+ static ɵcmp: _angular_core.ɵɵComponentDeclaration<AXCodeEditorComponent, "ax-code-editor", never, { "language": { "alias": "language"; "required": false; "isSignal": true; }; "readOnly": { "alias": "readOnly"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "lineNumbers": { "alias": "lineNumbers"; "required": false; "isSignal": true; }; "lineWrapping": { "alias": "lineWrapping"; "required": false; "isSignal": true; }; "tabSize": { "alias": "tabSize"; "required": false; "isSignal": true; }; "indentWithTab": { "alias": "indentWithTab"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "minHeight": { "alias": "minHeight"; "required": false; "isSignal": true; }; "maxHeight": { "alias": "maxHeight"; "required": false; "isSignal": true; }; "theme": { "alias": "theme"; "required": false; "isSignal": true; }; "extensions": { "alias": "extensions"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "focusOnReady": { "alias": "focusOnReady"; "required": false; "isSignal": true; }; "formatOnSave": { "alias": "formatOnSave"; "required": false; "isSignal": true; }; "customCompletions": { "alias": "customCompletions"; "required": false; "isSignal": true; }; }, { "ready": "ready"; "save": "save"; }, never, never, true, never>;
94
342
  }
95
343
 
96
344
  declare class AXCodeEditorModule {
@@ -99,5 +347,5 @@ declare class AXCodeEditorModule {
99
347
  static ɵinj: _angular_core.ɵɵInjectorDeclaration<AXCodeEditorModule>;
100
348
  }
101
349
 
102
- export { AXCodeEditorComponent, AXCodeEditorModule };
103
- export type { AXCodeEditorCompletionLike, AXCodeEditorCompletionSourceLike, AXCodeEditorExtensionLike, AXCodeEditorSupportedLanguage };
350
+ export { AXCodeEditorComponent, AXCodeEditorModule, AXCodeEditorPluginRegistry, AX_CODE_EDITOR_PLUGIN_CONFIG, CSSLanguagePlugin, GitHubDarkThemePlugin, GitHubLightThemePlugin, HTMLLanguagePlugin, JSONLanguagePlugin, JavaScriptLanguagePlugin, LightThemePlugin, MarkdownLanguagePlugin, OneDarkThemePlugin, PrettierFormatterPlugin, SQLLanguagePlugin, SassLanguagePlugin, TypeScriptLanguagePlugin, XMLLanguagePlugin, provideDefaultCodeEditorPlugins };
351
+ export type { AXCodeEditorCompletionLike, AXCodeEditorCompletionSourceLike, AXCodeEditorDefaultLanguage, AXCodeEditorExtensionLike, AXCodeEditorExtensionPlugin, AXCodeEditorFormatterPlugin, AXCodeEditorLanguagePlugin, AXCodeEditorPlugin, AXCodeEditorPluginConfig, AXCodeEditorThemePlugin };