Javascript – TypeScript error when using registerRichText with Lexical Editor: "Excessive stack depth comparing types 'LexicalEditor' and 'LexicalEditor'"

I’m working on implementing a rich text editor using the Lexical library with vanilla JavaScript and TypeScript. My understanding is that the editor should be attached to a contenteditable div, and the registerRichText function should enable rich text features like bold, italic, and underline.

I’m encapsulating the editor setup in a class. Here’s the code:

import { registerRichText } from '@lexical/rich-text';
import { createEditor } from 'lexical';

export class CustomLexicalEditor {
  private config = {
    namespace: 'MyEditor',
    theme: {
      text: {
        bold: 'text-bold',
        italic: 'text-italic',
        underline: 'text-underline',
      },
    },
    onError: console.error,
  };

  initialize(
    editorContainer: HTMLElement,
    toolbarContainer: HTMLElement,
    placeholder?: string,
  ): void {
    const editorPlaceholder = placeholder || 'Start typing...';

    const editor: LexicalEditor = createEditor(this.config);
    editor.setRootElement(editorContainer);

    registerRichText(editor);
  }
}

I can successfully create the editor and set the root element, but when I call registerRichText with the editor instance, I get the following TypeScript error:

Excessive stack depth comparing types 'LexicalEditor' and 'LexicalEditor'.ts(2321)

Here’s the relevant HTML for the editorContainer:

<div class="custom-text-editor__box" contenteditable></div>

I’ve been stuck on this issue for quite some time. Does anyone know why this type mismatch occurs and how to resolve it? Any help would be greatly appreciated!

It seems like the LexicalEditor instance I created doesn’t match the type expected by registerRichText. I tried casting the editor to LexicalEditor, but the problem persists.