ClearEditorPlugin is not clearing the ChatComposer text input.

[gyasi-eco]

Background

I upgraded my React and Paste dependencies to be able to import and add the ClearEditorPlugin to the ChatComposer and it initially worked, but after doing a rebase the ClearEditorPlugin doesn't clear the ChatComposer text input. We've tried reinstalling our node_modules and cleaned up our package.json but it still doesn't clear the text box.

Feedback

I've tried a few different approaches to get the ClearEditorPlugin working again by reinstalling our node_modules and cleaning up our package.json, so I'm hoping that my issue is dependency related. Currently, it's the missing piece we need in order to complete our ChatComposer implementation.

Stage of design

No response

Research

No response

Relevant links

No response

Are you looking for visual design support?

• Yes

Additional Information

No response

[SiTaggart]

Hi @gyasi-eco

Thanks for coming to Office Hours, sorry it took a while to follow up here.

As we finally came to discover, it wasn't really a versioning problem, just a small implementation detail.

As a reminder, Any Lexical Plugin must be registered as a child of the editor, otherwise it doesn't have access to the editor context, which it will need if you want it to do something.

<ChatComposer
  config={{}}
  onChange={handleComposerChange}
>
  <ClearEditorPlugin />
  <SendButtonPlugin onClick={submitMessage} />
  <EnterKeySubmitPlugin onKeyDown={submitMessage} />
</ChatComposer>

The ClearEditorPlugin is a fairly dumb component, in that all it really does is respond to a command being dispatched from the editor. For it to do that, another action or plugin must dispatch that command when the user does something. So your Enter key plugin or send button plugin should implement some UI controls that when interacted with, dispatches the command that the ClearEditorPlugin is listening for.

As an example the send button plugin.

export const SendButtonPlugin = ({ onClick }: { onClick: () => void }): JSX.Element => {
  // Grab the editor context that is available as this plugin is a child of the editor
  const [editor] = useLexicalComposerContext();

  // Do something when the button is clicked
  const handleSend = (): void => {
    // the callback that was supplied to the plugin to be called when the button is pressed
    onClick();
    // dispatch the `CLEAR_EDITOR_COMMAND` from the editor, which <ClearEditorPlugin /> is listening for
    editor.dispatchCommand(CLEAR_EDITOR_COMMAND, undefined);
  };

  return (
    <Box position="absolute" top="space30" right="space30">
      <Button variant="primary_icon" size="reset" onClick={handleSend}>
        <SendIcon decorative={false} title="Send message" />
      </Button>
    </Box>
  );
};