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

Question

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?

I was expecting to see some editor ui like this: playground.lexical.dev — Wajahath
– Wajahath, Commented Jan 18, 2024 at 17:56
No UI shows up even in a vanilla js project. Maybe lexical doesn't include the UI, but only the underlying logic to manipulate the rich text document? — BizzyBob
– BizzyBob, Commented Jan 18, 2024 at 18:45
@BizzyBob yes, it's so sad that one of the best libraries out there for rich text editing has an excuse of a documentation for non-react users, yet it claims to have a vanillaJS version. — DARKGuy
– DARKGuy, Commented Mar 30, 2024 at 8:18

Azoof Ahmed · Accepted Answer · 2024-02-06 14:05:25Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related