@thescaffold/editor-angular

Angular wrapper for X Editor. Provides a standalone EditorComponent with @Input bindings, @Output events, and ControlValueAccessor support for Angular Forms.

Installation

npm install @thescaffold/editor-angular @thescaffold/editor-core @thescaffold/editor-addons

Usage

Standalone component

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

@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