Function createAngularEditor

Create an editor with its snapshot signal and view lifecycle.

@Component({
  standalone: true,
  template: `
    <button [attr.aria-pressed]="isBold()" (mousedown)="$event.preventDefault()"
            (click)="editor.commands.toggleMark('bold')">Bold</button>
    <div #host></div>
  `,
})
export class EditorComponent {
  private readonly host = viewChild.required<ElementRef<HTMLElement>>('host')
  private readonly binding = createAngularEditor({ schema })
  readonly editor = this.binding.editor
  readonly isBold = computed(() => this.binding.snapshot()?.activeMarks.includes('bold') ?? false)

  constructor() {
    afterNextRender(() => this.binding.attach(this.host().nativeElement))
    inject(DestroyRef).onDestroy(() => this.binding.destroy())
  }
}
Copy

Creating the editor touches no DOM, the view is built only by attach, so this is safe to construct during server rendering.