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.
I solved the error. This error seems to happen because the use of plugin I was using for @lexical/rich-text-editor was in version 0.22.0 and lexical was in version 0.21.0. The issue was happening because the declarations for both versions were different.
If someone has the same issue try being sure the versions installed for plugins and core library are the same