How to access editor DOM in react ?

[ShenQingchuan]

I copied and refactor a little bit from the official site's playground.
My problem is about the link-widget component, i.e. the input box of the link element.

I found that the behaviour is somewhat not as users' expectation when I hit Enter key on focusing in the link-widget's input box, there's a new line inserted into editor, but what I want is to exit the input box and my cursor goes back to the position right after this link element.

Is there any best practice for me to access the DOM or do something else to implement the behaviour I talked above?

[Saul-Mirone]

I think if you just want to prevent some keymap of editor when focusing input widget, have you tried event.stopPropagation()?

[ShenQingchuan]

Kapture.2023-10-27.at.12.33.12.mp4

I made a video record for you and you can see my action on Milkdown playground site.

I hit enter and the link got splitted, I think this is not a user-expected behaviour. It should exit that input box and go back to a normal state in editor.

[s524797336]

You can use transication.setSelection api to modify selection in milkdown

[ShenQingchuan]

Sure! That's a good idea, but I indeed want to know about how to access these ProseMirror primitive concept context in Milkdown?

[Saul-Mirone]

Okay, I got it. Here's how you can get edtior's state and view:

import { editorViewCtx } from '@milkdown/core';

editor().action((ctx) => {
    const view = ctx.get(editorViewCtx);
    const state = view.state;
    const selection = state.selection;
    const { $to } = selection;
    const to = $to.after();
    const $sel = TextSelection.near(state.doc.resolve(to));
    view.dispatch(state.tr.setSelection($sel));
    view.focus();
})

[ShenQingchuan]

it works! Thanks a lot!
Milkdown is awesome!!!