@thescaffold/editor-angular 0.0.0

package/README.md

@@ -0,0 +1,102 @@
+# @thescaffold/editor-angular
+
+Angular wrapper for X Editor. Provides a standalone `EditorComponent` with `@Input` bindings, `@Output` events, and `ControlValueAccessor` support for Angular Forms.
+
+## Installation
+
+```bash
+npm install @thescaffold/editor-angular @thescaffold/editor-core @thescaffold/editor-addons
+```
+
+## Usage
+
+### Standalone component
+
+```ts
+import { Component } from "@angular/core";
+import { EditorComponent } from "@thescaffold/editor-angular";
+import {
+  SchemaAddon,
+  CommandsAddon,
+  ToolbarAddon,
+  BoldAddon,
+  ItalicAddon,
+} from "@thescaffold/editor-addons";
+import "@thescaffold/editor-core/define";
+
+@Component({
+  standalone: true,
+  imports: [EditorComponent],
+  template: `
+    <x-editor-ng
+      [mode]="'doc'"
+      [addons]="addons"
+      [theme]="'auto'"
+      (change)="onDocChange($event)"
+      (ready)="onReady($event)"
+    />
+  `,
+})
+export class AppComponent {
+  addons = [
+    SchemaAddon(),
+    CommandsAddon(),
+    ToolbarAddon(),
+    BoldAddon(),
+    ItalicAddon(),
+  ];
+
+  onDocChange(event: { doc: unknown; content: string }) {
+    console.log("Doc changed:", event.content);
+  }
+
+  onReady(event: { editor: unknown }) {
+    console.log("Editor ready:", event.editor);
+  }
+}
+```
+
+### Angular Forms — ControlValueAccessor
+
+```ts
+@Component({
+  standalone: true,
+  imports: [ReactiveFormsModule, EditorComponent],
+  template: `
+    <form [formGroup]="form">
+      <x-editor-ng formControlName="content" [addons]="addons" />
+    </form>
+  `,
+})
+export class FormComponent {
+  addons = [SchemaAddon(), CommandsAddon()];
+  form = new FormGroup({ content: new FormControl("") });
+}
+```
+
+## Inputs
+
+| Input      | Type                            | Default  | Description                     |
+| ---------- | ------------------------------- | -------- | ------------------------------- |
+| `mode`     | `'doc' \| 'markdown' \| 'code'` | `'doc'`  | Editor mode                     |
+| `addons`   | `AddonDefinition[]`             | `[]`     | Active addons                   |
+| `content`  | `string \| JSONContent`         | —        | Initial content                 |
+| `editable` | `boolean`                       | `true`   | Whether the editor is editable  |
+| `theme`    | `'light' \| 'dark' \| 'auto'`   | `'auto'` | Color theme                     |
+| `language` | `string`                        | —        | CodeMirror language (code mode) |
+
+## Outputs
+
+| Output            | Payload            | When             |
+| ----------------- | ------------------ | ---------------- |
+| `change`          | `{ doc, content }` | Document mutated |
+| `selectionChange` | `{ selection }`    | Cursor moved     |
+| `focus`           | —                  | Focused          |
+| `blur`            | —                  | Blurred          |
+| `modeChange`      | `{ from, to }`     | Mode switched    |
+| `ready`           | `{ editor }`       | Initialized      |
+| `error`           | `{ error }`        | Internal error   |
+
+## License
+
+MIT

package/ng-package.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "dist",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@thescaffold/editor-angular",
+  "version": "0.0.0",
+  "description": "Angular wrapper for X Editor",
+  "author": "Isaiah Iroko <isaiahiroko@gmail.com>",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./dist/fesm2022/thescaffold-editor-angular.mjs",
+  "module": "./dist/fesm2022/thescaffold-editor-angular.mjs",
+  "typings": "./dist/types/thescaffold-editor-angular.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/thescaffold-editor-angular.d.ts",
+      "default": "./dist/fesm2022/thescaffold-editor-angular.mjs"
+    }
+  },
+  "peerDependencies": {
+    "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@angular/forms": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0",
+    "@thescaffold/editor-core": "*",
+    "rxjs": "~7.8.0"
+  },
+  "scripts": {
+    "build": "ng-packagr -p ng-package.json",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@angular/animations": "^21.2.0",
+    "@angular/common": "^21.2.0",
+    "@angular/compiler": "^21.2.0",
+    "@angular/compiler-cli": "^21.2.0",
+    "@angular/core": "^21.2.0",
+    "@angular/forms": "^21.2.0",
+    "@angular/platform-browser": "^21.2.0",
+    "ng-packagr": "^21.2.0",
+    "typescript": "~5.9.0"
+  }
+}

package/src/editor.component.ts

@@ -0,0 +1,214 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  NgZone,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+  forwardRef,
+} from "@angular/core";
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
+import type {
+  AddonDefinition,
+  CollabConfig,
+  EditorConfig,
+  EditorMode,
+  JSONContent,
+} from "@thescaffold/editor-core";
+
+@Component({
+  selector: "x-editor-ng",
+  standalone: true,
+  template: "<ng-content />",
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  styles: [":host { display: block; }"],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => EditorComponent),
+      multi: true,
+    },
+  ],
+})
+export class EditorComponent
+  implements OnChanges, OnDestroy, ControlValueAccessor
+{
+  @Input() mode: EditorMode = "doc";
+  @Input() language?: string;
+  @Input() content?: string | JSONContent;
+  @Input() editable = true;
+  @Input() theme: "light" | "dark" | "auto" = "auto";
+  @Input() addons: AddonDefinition[] = [];
+  @Input() collab?: CollabConfig;
+
+  @Output() readonly change = new EventEmitter<{
+    doc: unknown;
+    content: string;
+  }>();
+  @Output() readonly selectionChange = new EventEmitter<{
+    selection: unknown;
+  }>();
+  @Output() readonly focus = new EventEmitter<void>();
+  @Output() readonly blur = new EventEmitter<void>();
+  @Output() readonly modeChange = new EventEmitter<{
+    from: EditorMode;
+    to: EditorMode;
+  }>();
+  @Output() readonly ready = new EventEmitter<{ editor: unknown }>();
+  @Output() readonly error = new EventEmitter<{ error: unknown }>();
+
+  private _el: HTMLElement;
+  private _xEditorEl: (HTMLElement & { config?: EditorConfig }) | null = null;
+  private _editorCtx: {
+    setContent(c: string | JSONContent, f?: string): void;
+  } | null = null;
+  private _onChange: (value: string) => void = () => {};
+  private _onTouched: () => void = () => {};
+
+  constructor(
+    private readonly _elementRef: ElementRef<HTMLElement>,
+    private readonly _zone: NgZone,
+  ) {
+    this._el = this._elementRef.nativeElement;
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    // Only structural inputs (mode/addons/language/theme/editable) require a
+    // full editor rebuild; content changes route through setContent() on the
+    // live editor context so user focus and selection aren't disrupted.
+    const structural = !!(
+      changes["mode"] ||
+      changes["addons"] ||
+      changes["language"] ||
+      changes["theme"] ||
+      changes["editable"] ||
+      changes["collab"]
+    );
+    if (structural || !this._editorCtx) {
+      this._updateConfig();
+    } else if (changes["content"]) {
+      this._applyContent(this.content);
+    }
+  }
+
+  private _applyContent(value: string | JSONContent | null | undefined): void {
+    if (value === null || value === undefined) return;
+    this._editorCtx?.setContent(
+      value,
+      typeof value === "string" ? "text" : "json",
+    );
+  }
+
+  ngAfterViewInit(): void {
+    this._zone.runOutsideAngular(() => {
+      const xeditor = document.createElement("x-editor") as HTMLElement & {
+        config?: EditorConfig;
+      };
+      xeditor.style.height = "100%";
+      this._el.appendChild(xeditor);
+      this._xEditorEl = xeditor;
+
+      xeditor.addEventListener("xe:ready", (e: Event) => {
+        const detail = (
+          e as CustomEvent<{
+            editor: { setContent(c: string | JSONContent, f?: string): void };
+          }>
+        ).detail;
+        this._editorCtx = detail.editor;
+        // Apply any pending content that arrived via writeValue before mount.
+        if (this.content !== undefined && this.content !== null) {
+          this._applyContent(this.content);
+        }
+        this._zone.run(() => this.ready.emit(detail));
+      });
+
+      xeditor.addEventListener("xe:change", (e: Event) => {
+        const detail = (e as CustomEvent<{ doc: unknown; content: string }>)
+          .detail;
+        this._zone.run(() => {
+          this.change.emit(detail);
+          this._onChange(detail.content ?? "");
+          this._onTouched();
+        });
+      });
+
+      xeditor.addEventListener("xe:selection-change", (e: Event) => {
+        const detail = (e as CustomEvent<{ selection: unknown }>).detail;
+        this._zone.run(() => this.selectionChange.emit(detail));
+      });
+
+      xeditor.addEventListener("xe:focus", () => {
+        this._zone.run(() => this.focus.emit());
+      });
+
+      xeditor.addEventListener("xe:blur", () => {
+        this._zone.run(() => {
+          this.blur.emit();
+          this._onTouched();
+        });
+      });
+
+      xeditor.addEventListener("xe:mode-change", (e: Event) => {
+        const detail = (e as CustomEvent<{ from: EditorMode; to: EditorMode }>)
+          .detail;
+        this._zone.run(() => this.modeChange.emit(detail));
+      });
+
+      xeditor.addEventListener("xe:error", (e: Event) => {
+        const detail = (e as CustomEvent<{ error: unknown }>).detail;
+        this._zone.run(() => this.error.emit(detail));
+      });
+
+      this._updateConfig();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._xEditorEl?.remove();
+    this._xEditorEl = null;
+  }
+
+  private _updateConfig(): void {
+    if (!this._xEditorEl) return;
+    this._xEditorEl.config = {
+      mode: this.mode,
+      language: this.language,
+      content: this.content,
+      editable: this.editable,
+      theme: this.theme,
+      addons: this.addons,
+      collab: this.collab,
+    };
+  }
+
+  // ─── ControlValueAccessor ─────────────────────────────────────────────────
+
+  writeValue(value: string | JSONContent | null): void {
+    if (value === null || value === undefined) return;
+    this.content = value;
+    if (this._editorCtx) {
+      // Live editor: just push the new content without disturbing the adapter.
+      this._applyContent(value);
+    } else {
+      // Editor not mounted yet — defer; ngAfterViewInit / xe:ready will apply.
+      this._updateConfig();
+    }
+  }
+
+  registerOnChange(fn: (value: string) => void): void {
+    this._onChange = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this._onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean): void {
+    this.editable = !isDisabled;
+    this._updateConfig();
+  }
+}

package/src/editor.module.ts

@@ -0,0 +1,8 @@
+import { NgModule } from "@angular/core";
+import { EditorComponent } from "./editor.component.js";
+
+@NgModule({
+  imports: [EditorComponent],
+  exports: [EditorComponent],
+})
+export class EditorModule {}

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./public-api.js";

package/src/public-api.ts

@@ -0,0 +1,2 @@
+export { EditorComponent } from "./editor.component.js";
+export { EditorModule } from "./editor.module.js";

package/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ES2020",
+    "moduleResolution": "node",
+    "lib": ["ES2020", "DOM"],
+    "outDir": "dist",
+    "declaration": true,
+    "declarationMap": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@thescaffold/editor-core": ["../core/src/index.ts"]
+    }
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["node_modules", "dist"]
+}

package/tsconfig.lib.json

@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declarationDir": "../../dist/out-tsc"
+  },
+  "angularCompilerOptions": {
+    "skipTemplateCodegen": true,
+    "strictMetadataEmit": true,
+    "enableResourceInlining": true
+  },
+  "exclude": ["src/test.ts", "**/*.spec.ts"]
+}