Failed to resize image vertically in Draft.js

Question

I am using Draft.js plugin Resizeable.

I am trying to resize the image with original length-to-width ratio.

However, for the code below, when I use the mouse to resize by the bottom edge of the image, the cursor changed, but it failed to resize. It only works well at the left and right edge.

const resizeablePlugin = createResizeablePlugin({
  vertical: 'relative',
  horizontal: 'relative'
});

codesandbox

After viewing the source code, I still didn't figure out what causes this.

Answer 1

It does not seem like developers of this plugin had provided this opportunity to change image size with saving ratio when you resize by the top or bottom edges. Configuration option vertical: 'relative' means that plugin should set height value in relative units (percents). You can check with devtools that when you try to resize your image height value does change. But we should change width value to reach the behaviour when we resize the image with saving ratio.

It can be achieved by rewriting the source code a bit. Check this fork of your sandbox.

Check createDecorator.js it is the same file that is stored in /node_modules/draft-js-resizeable-plugin/lib/createDecorator.js. What did I change in it? Find doDrag function (I market with // ! all strings that was added or changed):

...
var startWidth = parseInt(document.defaultView.getComputedStyle(pane).width, 10);
var startHeight = parseInt(document.defaultView.getComputedStyle(pane).height, 10);

var imageRect = pane.getBoundingClientRect(); // !
var imageRatio = imageRect.width / imageRect.height; // ! get image ratio

// Do the actual drag operation
var doDrag = function doDrag(dragEvent) {
  var width = startWidth + dragEvent.clientX - startX;
  var height = startHeight + dragEvent.clientY - startY;
  var block = store.getEditorRef().refs.editor;
  width = block.clientWidth < width ? block.clientWidth : width;
  height = block.clientHeight < height ? block.clientHeight : height;

  var widthForPercCalculation = (isTop || isBottom) && vertical === 'relative' ? height * imageRatio : width; // ! calculate new width value in percents

  var widthPerc = 100 / block.clientWidth * widthForPercCalculation; // !
  var heightPerc = 100 / block.clientHeight * height;

  var newState = {};
  if ((isLeft || isRight) && horizontal === 'relative') {
    newState.width = resizeSteps ? round(widthPerc, resizeSteps) : widthPerc;
  } else if ((isLeft || isRight) && horizontal === 'absolute') {
    newState.width = resizeSteps ? round(width, resizeSteps) : width;
  }

  if ((isTop || isBottom) && vertical === 'relative') {
    newState.width = resizeSteps ? round(widthPerc, resizeSteps) : widthPerc; // ! here we update width not height value
  } else if ((isTop || isBottom) && vertical === 'absolute') {
    newState.height = resizeSteps ? round(height, resizeSteps) : height;
  }
...

I think you can ask this plugin dev-team for add this feature or fork the project.