Image Extension: inline configure cause bubble menu to close after selecting an option

[sydth26]

What’s the bug you are facing?

I created a bubble menu for images, that allow me to resize, align and change the ratio of them. I expected the menu to stay open while I am selecting the option and check how the image's style is changed. But the bubble menu was closed and the image lose focus. I then have to re-select the image for the menu to show up again.

I tried to break the problem down and found out that the cause is due to Image extension's inline: true option. This option somehow only affects extended commands which use updateAttributes.

After disabling inline:true, everything work as expected.

How can we reproduce the bug on our side?

set image extention configure to contain inline: true and use updateAttributes command

Can you provide a CodeSandbox?

https://codesandbox.io/s/great-chihiro-mjf7w7?file=/pages/index.js

What did you expect to happen?

bubble menu should be open after selecting any option.

Anything to add? (optional)

No response

Did you update your dependencies?

• [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

[nicholasareed]

I had the same problem, fixed it by adding setNodeSelection (of the currently selected position) to the chain of commands:

onClick={() => {
  editor
    .chain()
    .focus()
    .setImage({ size: "small" })
    .setNodeSelection(
      editor.view.state.selection.from
    )
    .run();
}}

[sydth26]

@nicholasareed 's suggestion indeed solve the problem. Thank you

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.