Reset toolbar state

[joesaunderson]

I am building out an MD editor using the library, it's working great so far.

I am intercepting keypresses (enter submits a form).

However, when submitting the form, if I have something selected in the toolbar i.e. bold, italic etc, the toolbar is not reset.

Is there a simple way to reset the toolbar state?

[rbbydotdev]

const setFormat = usePublisher(currentFormat$);
...
setFormat(0)

This will technically 'uncheck' the format in the toolbar --
But, the state is less so stored 'in the toolbar' and actually stored as a format in the lexical node.

When you 'submit' I assume you are also clearing the text?

[joesaunderson]

When you 'submit' I assume you are also clearing the text?

Yes, correct.

[rbbydotdev]

When the text is cleared from the editor the formats should be as well are you finding them still enabled? How are you clearing the editable area?

[joesaunderson]

When the text is cleared from the editor the formats should be as well are you finding them still enabled? How are you clearing the editable area?

Via setMarkdown (via a ref)

editorRef.current?.setMarkdown("");

[rbbydotdev]

Clearing the markdown should 'reset' the formats as they are tied to the nodes present inside the editor. If not something is amiss.

[joesaunderson]

Clearing the markdown should 'reset' the formats as they are tied to the nodes present inside the editor. If not something is amiss.

I'll put together a reproducible example tomorrow

[rbbydotdev]

here's a good starting repo, https://github.com/mdx-editor/repro-starter

[joesaunderson]

Sorry for the delay, thanks for the repo.

I've hobbled this together, in reality it's split across a few files in our app, but you can reproduce this.

1. Set the test to bold
2. Type something
3. Hit enter
5. Text is stil bold

Link: https://codesandbox.io/p/github/mdx-editor/repro-starter/csb-qs72zl/draft/immutable-frost

[rbbydotdev]

    import { lexical } from "@mdxeditor/editor";

        // ... 


        if (!event.shiftKey && !event.ctrlKey) {
            event.preventDefault();
            params?.onEnterRef.current();

            realm.getValue(activeEditor$)?.update(() => {
              lexical.$setSelection(null);
            });
           // ^ try this

[joesaunderson]

Is there a way to do it outside the plugin? The idea with that is that it just calls a callback (and the callback sets the value to '')

[rbbydotdev]

Yes, you'll need to externally access the realm using RemoteMDXEditorRealmProvider, remoteRealmPlugin, useRemoteMDXEditorRealm

have a look at:

https://github.com/mdx-editor/editor/blob/c0799b5703900fbc7a8f865b571b487358463528/src/examples/remote.tsx

[joesaunderson]

Thanks for this assistance, really appreciate it.

Also, for my custom 'onEnter' plugin I've had to do some hacky ref stuff to ensure the function has access to the latest callback for onEnter (as this gets passed to the plugin on creation).

Is there anything in your library that I could lean into to make that nicer?

[rbbydotdev]

in keeping with the spirit of mdx-editor you could use the realm to set the function from the top level on a Cell, const handleSubmit$ = Cell(()=>{}) realm.setValue(handleSubmit$, ... ) then using realm.getValue(handleSubmit$) inside the plugin, if you really must do it this way - Alternatively you could put the logic in that handle submit, like the clearing and resetting of the editor, inside the plugin. Then you could do use a gurx signal to trigger a handler from the editor,

//... global scope
const onSubmit$ = Signal("");

//... inside your plugin
// clear reset etc
realm.pub(onSubmit$, <trimmed editor value>)

//... Outside the plugin

realm.sub(onSubmit$, (content)=>console.log(contents))

I think the dependency injection to plugins could definitely be improved - what that looks like I am not so sure

[joesaunderson]

With this approach, do I need to use the remote realm etc?

[rbbydotdev]

Depending what your requirements are, probably - but you could very well make a submit form plugin to post data from the realm. If you need to inject a non static callback from outside the scope of the editor though - then yes