/lexical-angular

Angular bindings for Lexical components

Primary LanguageTypeScript

lexical-angular

⚠️ 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',
    },
    editable: true,
    nodes: [],
  };

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