Image resizing options

I’m interested in ways to provide image resizing in Prosemirror.

As a quick hack I found out Firefox has image resizing in contenteditable that can be used semi-reliably through MutationObserver:

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.attributeName === "width" && === "IMG") {
      let state = view.editor.state;
      // Image position and node
      let {$from,node} = state.selection;
      // Copy current image attributes
      let newAttrs = Object.assign({}, node.attrs);
      // Update image size
      newAttrs.width =;
      // Create transform
      let transform =$from.pos, node.type, newAttrs);

observer.observe(view.wrapper, {
  attributes: true,
  subtree: true,
  characterData: true,
  characterDataOldValue: true,
  childList: true,

What are you guys using for image resizing?

1 Like

We’re not all necessarily guys here, but that aside, I think custom controls that allow the user to drag-resize your image are a better direction than trying to use Firefox’s built-in controls, because there’s no equivalent to those on other platforms.

With a node view, doing this should be relatively straightforward, but I unfortunately haven’t written a reference implementation yet. I’m adding it to my list of useful examples to write.