Image resizing options

1

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" && mutation.target.tagName === "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 = mutation.target.width;
      // Create transform
      let transform = state.tr.setNodeType($from.pos, node.type, newAttrs);
      view.props.onAction(transform.action());
    }
  });
});

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

What are you guys using for image resizing?

1 Like
2

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.