Bug: Unable to find an active editor state when in editor.update callback fn

[cfree]

I am trying to create a simple editor that allows for insertion of emojis from a dropdown menu using the Chat Composer components. I created a custom Lexical plugin to outline this functionality and simplified the menu (EmojiPickerPlugin), but continue to get the following error from within the registerCommand callback:

Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update() or editorState.read()

Requiring the use of Paste's exported Lexical helpers is preventing me from submitting a request directly to Lexical. Can someone please point me in the right direction?

https://codesandbox.io/p/sandbox/5xx7kf

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• ClearEditorPlugin is not clearing the ChatComposer text input. - Answer (updated: 10/06/2023, similarity score: 85%)
• Chat Composer onChange Event (updated: 08/28/2023, similarity score: 84%)
• ClearEditorPlugin is not clearing the ChatComposer text input. (updated: 10/06/2023, similarity score: 83%)

[dosubot[bot]]

The error "Unable to find an active editor state" typically occurs when trying to access the editor state outside of the allowed synchronous context, such as within the editor.update() or editorState.read() callbacks. To resolve this issue, ensure that any state-dependent operations are performed within these callbacks.

For your EmojiPickerPlugin, you should make sure that any operations involving the editor state are wrapped inside editor.update() or editorState.read(). Here's a general approach you can follow:

1. Use editor.update() for Mutations: If you need to modify the editor state, wrap your logic inside editor.update(). This ensures that the state is active and can be safely modified.

   editor.update(() => {
     // Your state modification logic here
   });

2. Use editorState.read() for Read-Only Operations: If you only need to read the state, use editorState.read() to ensure the state is active.

   editorState.read(() => {
     // Your read-only logic here
   });

3. Check Command Registration: When registering commands with registerCommand, ensure that any state access within the command handler is done using the above methods.

By following these practices, you should be able to avoid the "Unable to find an active editor state" error. If you continue to experience issues, double-check that all state interactions are correctly wrapped in the appropriate callbacks.

To continue talking to Dosu, mention @dosu.

[krisantrobus]

Hi @cfree, I would love to help you on this! I'm always interested about users' ChatComposer implementations. Firstly, could you make that codesandbox a shareable link as I'm unable to access it.

There are a few things to consider when creating a custom plugin (which is supported). The plugin must be placed within the ChatComposer component, not ChatComposerContainer. We have a working example of a custom plugin which uses registerCommand to allow submit on enter press. The example is in our storybooks here and the custom plugin source code is here with the implementation happening here.

Also, although the lexical exports come from paste they are just being passed up form the source library and some are renamed. You can view the exports here. In theory you should be able to use the Lexical library modules that are potentially missing without error but it has not been tested.

Happy to work and debug this with you!

[cfree]

My bad, I just fixed the permissions.

I've seen some Paste examples out there, but they don't necessary show how to make changes to the editor state. The EnterKeySubmitPlugin seems to dispatch another command.

[krisantrobus]

Hi @cfree this is one of the more advanced use cases we had had requested. I have been debugging this and found that the helper functions such as $createTextNode need to come from the Paste library and not the lexical import. However they are not currently exported so I will be creating a ticket to address this.

What I am able to do though is interact with the editor state directly. I have forked your sandbox which can be found here. What I am doing here is getting the state, using the toJSON method and then manipulating the object. I then set the editor state to be the updated state and I can see it reflected. It may get complicated based on the number of paragraph nodes you have so I suggest checking out the node tree in the console as you work through This as referenced from the Lexical docs under the part where it mentions "Another way to set state is setEditorState method". This is a potential workaround until we can update our exports. We will do a new release within 3 weeks which will push to get this in for.

Here is a list of the currently supported helper functions that are available as you work through:

• $getRoot
• $getSelection
• $createParagraphNode
• $createTextNode

Really excited to see how you get on with this. It's the most in depth customization we've had so far so we'd love to hear your learnings and if you need further support other than the exported helper functions please reach out!

[cfree]

@krisantrobus - Thanks for the quick replies!

Your workaround allows emojis to be added to the end of the text, which is one half of our use case. We'll also want them added wherever the last selection was (if there was one). I'll have to play around some more to see how we might make this workaround suffice for our needs. I'm working on a POC at the moment, so there's currently no rush on our end to get this functionality in place. We have another use case where we'll need to differentiate opt-out text from the rest of the content, so we'll need the more advanced functionality available for sure.

Again, thanks for the assistance. I really appreciate the workaround, but I'm also really hoping the exports update will allow us to use the helper functions as they were intended 🤞 🤞🤞

[krisantrobus]

Always happy to help @cfree. I have a PR up here to export all of the commands provided by Lexical and all of the helper functions that use the $ syntax and are not deprecated. This will be included in our next release which is scheduled around December 12th. Let us know how you get on!

[cfree]

We've been asked to pause this initiative for now, but will return to it in Q2. I'll swing by office hours next week to present the designs and see if there are any concerns around our use-case from a Paste perspective.

[PixeledCode]

@cfree just wanted to give an update that the PR is merged