Why is this bare minimum Angular with Lexical.dev setup not working?

I was following the https://lexical.dev/docs/getting-started/quick-start

It seem straightforward.

import { createEditor } from 'lexical';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div contenteditable="true" #editable></div>
  `,
})
export class App implements AfterViewInit {
  private editor = createEditor();

  @ViewChild('editable') editable?: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    const el = this.editable?.nativeElement;
    if (el) {
      this.editor.setRootElement(el);
      console.log('set');
    } else console.log('nop');
  }
}

Stackblitz

And I'm getting nothing and no errors. What am I missing here?

Solution

After looking into it, Lexical is a complex beast of a WYSIWYG, that requires its own plugins to work.

Just to get basic text entry, you need to install a separate module:

import { registerPlainText } from '@lexical/plain-text';

and then alter your example code like so:

export class App implements AfterViewInit {
  editor: LexicalEditor = createEditor();

  @ViewChild('editable') editable?: ElementRef<HTMLDivElement>;

  ngAfterViewInit() {
    if (this.editable) {
      this.editor.setRootElement(this.editable.nativeElement);
      registerPlainText(this.editor);
    }
  }
}

https://stackblitz.com/edit/stackblitz-starters-z7qv1j?file=src%2Fmain.ts

Side note, Lexical is maintained by Meta and all examples are provided in ReactJs. It is designed to work with any UI framework; however, it requires quite a lot of code just to get a basic setup running if you are not using ReactJs.

I would suggest using a different WYSIWYG in angular like Quill which is much easier to get started with and can be customized to an extent.

However, be warned that this is wrapper around QuillJs V1 which has a few issues but works quite well for basic uses. V2 fixes/improves a lot of issues and is in the final stages of being released after being stopped for something like a year as the original maintainer started developing the project privately for his own company, pretty much abandoning the project.