@doxi/angular

Angular adapter for @doxi/core. Ships a standalone <dx-editor> component wrapping the underlying EditorView.

Status: v0.10.x preview. Public API may evolve until v1.0.

Install

pnpm add @doxi/angular @doxi/core @angular/core @angular/common rxjs

Peer-deps: @angular/core ≥ 18 (works under 19), @angular/common ≥ 18, rxjs ≥ 7, @doxi/core. Zero runtime deps beyond the peers.

Quickstart

import { Component } from '@angular/core'
import { DoxivaEditorComponent } from '@doxi/angular'
import {
  defaultRenderer,
  defaultSchema,
  EditorState,
  historyPlugin,
} from '@doxi/core'

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [DoxivaEditorComponent],
  template: `
    <dx-editor
      [state]="state"
      [renderer]="renderer"
      [ariaLabel]="'Dokumentredigerer'"
      (dispatch)="onDispatch($event)"
    />
  `,
})
export class AppComponent {
  state = EditorState.create({
    schema: defaultSchema,
    plugins: [historyPlugin().plugin],
  })
  renderer = defaultRenderer

  onDispatch(tr: any) {
    this.state = this.state.apply(tr)
  }
}

Don't forget to import the stylesheets in your global styles:

@import '@doxi/core/styles/base.css';
@import '@doxi/core/styles/light.css';

Change-detection model

<dx-editor> runs the underlying EditorView outside NgZone to avoid Angular's change-detection thrashing on high-frequency editor updates. Dispatched transactions re-enter the zone so consumer handlers run in-zone as normal.

Toolbar

@doxi/angular ships a default toolbar; consumers can compose their own from the per-group builders. See the example app for a full reference setup.

License

MIT