Why does not vanilla lexical work directly in Solid? What is the particular need for a wrapper lib?

[gnimmelf]

Hi,

I started looking at using Lexical for SolidJs on the impetus that the vanilla approach could just work. I was half right, at least, as stated here: facebook/lexical#5836

Now I am really curious as to why some typing works, but some update events are dropped, like in that some keys work while others do not. E.g that backspace always triggers the update listener, and enter just removes the trailing text without adding a new text node.

Any insights to why lexical vanilla, without going through any bindings, work only partially (or why it works at all)?

Thanks,
Flemming

[mosheduminer]

I'm not sure if you're asking about the update listener (mentioned in your link) or the editor not behaving as it should. From your comment in the linked discussion:

Hmm, thinking this is due to some lexical-listeners on DOM-element getting overwritten/lost on solid re-rendering. Leaving it just in case someone has any more information.

it seems you're using solid-js, but using lexical without the wrapper provided by this library. You really shouldn't have the editor Element being recreated if you're using solid correctly. Here's some ideas though:

1. Where is instantiateEditor called? If it's not in onMount, I'd expect issues.
2. editor.registerUpdateListener(...) should really be onCleanup(editor.registerUpdateListener(...)) so that the update listener is removed when the component unmounts. I imagine that could also be causing issues

[gnimmelf]

Yea, as you write, some interference from the Solid life-cycle on the editor element, I'll look into that.

Any other reason you can think of as to why using plain Lexical would be troublesome?

Thanks.

[mosheduminer]

I like the UX of using components that use context to hook into the editor and add plugin behavior. And the package @lexical/react and this port lexical-solid provide convenient implementations of common functionality.

At the end of the day, Lexical is a full blown framework for itself, except that it's a framework that only supports text editing. If you're only going to use it for basic use-cases, I expect this library will be useful, but otherwise you will far outgrow this library, though it may still be convenient for the reasons given above.

[mosheduminer]

Did you end up figuring out the plain lexical issue?

[gnimmelf]

Yes, see selected answer. The issue only occurred w/ lexical inside a shadow root.

[mosheduminer]

Ah, I didn't realize that was the cause of the issue. Glad to hear you figured it out!

[mosheduminer]

BTW, given that your request is about why lexical alone doesn't work, please edit the title to something more descriptive. As written, I initially thought you were asking why this library exists.

[gnimmelf]

Done.

[gnimmelf]

FYI, I'm attaching this solid app as a web-component, and that seems to have issues, ref bug facebook/lexical#2119. Applying the patch suggested here facebook/lexical#2119 (comment) seems to fix the issues.

Maybe relevant for others comming here.