lexical-angular v0.0.2-beta.1

⚠️ Lexical is currently in early development and APIs and packages are likely to change quite often.

For documentation and more information about Lexical, be sure to visit the Lexical website.

Lexical official documentation \ Angular playground

Getting started with Angular

Requires Angular 13.0.0 or higher.

Install lexical and lexical-angular

pnpm i lexical lexical-angular # or npm or yarn

Below is an example of a basic plain text editor using lexical and lexical-angular.

import { FormControl } from '@angular/forms';
import { LexicalComposerConfig } from 'lexical-angular';
import { EditorState } from 'lexical';

@Component({
  selector: 'lxc-text-editor',
  template: `
    <div
      lexicalComposer
      [lexicalInitialConfig]="editorConfig"
      [lexicalAutofocus]="true"
      (lexicalChangeEvent)="log($event)"
    >
      <div class="editor-container" lexicalPlainText>
        <div lexicalContentEditable class="editor-input"></div>
          <div *lexicalPlaceholder class="editor-placeholder">
            Enter some plain text...
          </div>
        </div>
    </div>
  `,
})
export class PlainTextEditorComponent {
  readonly editorConfig: LexicalComposerConfig = {
    onError: e => throw e,
    theme: {
      ltr: 'ltr',
      rtl: 'rtl',
      placeholder: 'editor-placeholder',
      paragraph: 'editor-paragraph',
    },
    readOnly: false,
    nodes: [],
  };

  log(event: EditorState): void {
    console.log(event);
  }
}