Improving the Playground TableCellResizer

[rissois]

THE PROBLEM
If you have played around with table resizing in the Lexical Playground, you will notice that resizing the column width can be quite inexact. Oftentimes, the cell boundary will undershoot or overshoot the mouse release point, which can be frustrating.

The reason for this is that under the hood, table cells are initialized to a minimum value (92px) while the tables themselves have a width: fit-content. This stretches all the table cells, even though the underlying cell width is only 92px. So when TableCellResizer calls updateColumnWidth, it is applying the raw distance value (widthChange) from mousedown to mouseup on the hidden, unstretched set values of column width. The scales are completely different.

THE FALSE SOLUTION
The solution seems a simple matter of scaling the widthChange relative to the set values of column width. Unfortunately, this is not the complete solution for a number of reasons:

1. Imagine our table as a flexbox. If we have [100, 100, 100], and we drag the middle column 50px to the right, we'd expect to see something like [100, 150, 50] with our new boundary at 5/6 the width of our table. Instead, the way TableCellResizer is written we get [100, 150, 100], which places the new boundary at 5/7, and shrinks the first two cells.
2. We can easily blow past our table width this way, and trigger horizontal overflow.

THE SOLUTION
The below solution allows for more precise adjustments when the total cell width is smaller than the table width. All "downstream" cells are proportionally reduced in size while respecting the minimum width.

I did not create a PR as the code is still a little imprecise and untested, but I hope this is helpful to someone, Please feel free to offer any advice or corrections. Personally, I think the best solution is actually to limit the drag feature up to the adjacent cell boundary, but that's a different project.

const rootElement = editor.getRootElement();

if (!rootElement) {
  throw new Error("TableCellResizer: Table element not found.");
}

const rootWidth =
  rootElement.getBoundingClientRect().width - ROOT_TABLE_PADDING;
const sumColWidths = sumArray(colWidths);

// If table is smaller than root width, must handle differently
if (
  sumColWidths <= rootWidth &&
  columnIndex !== colWidths.length - 1
) {
  // Because you can resize ACROSS cell boundaries
  // We have to adjust all cells in the direction of the widthChange
  const isMoveRight = widthChange > 0;
  const scale = rootWidth / sumColWidths;
  const rightColWidths = colWidths.map((w) => w * scale);
  const leftColWidths = rightColWidths.splice(0, columnIndex + 1);

  const targetColWidths = isMoveRight
    ? rightColWidths
    : leftColWidths;
  const unaffectedColWidths = isMoveRight
    ? leftColWidths
    : rightColWidths;

  widthChange = Math.abs(widthChange);
  let iteration = 0; // prevent infinite loop in case equation has error or edge cases
  while (widthChange > 0 && iteration <= targetColWidths.length) {
    const maxWidthChanges = targetColWidths.map(
      (w) => w - MIN_COLUMN_WIDTH
    );

    // There is no further space to give up, all cells are at minimum
    if (!sumArray(maxWidthChanges)) {
      break;
    }

    // Determine how much width reduction is requested from each cell
    // PROPORTIONAL to their current width
    // Ignoring all cells already at the minimum
    const sumAffectedWidths = targetColWidths.reduce(
      (sum, w) => (w > MIN_COLUMN_WIDTH ? sum + w : sum),
      0
    );
    const widthChangePerPixel = widthChange / sumAffectedWidths;
    const requestedWidthChanges = targetColWidths.map(
      (w) => w * widthChangePerPixel
    );

    // If all cells can tolerate reduction, apply them
    if (
      requestedWidthChanges.every(
        (val, i) => val < maxWidthChanges[i]
      )
    ) {
      requestedWidthChanges.forEach((val, i) => {
        targetColWidths[i] -= val;
      });
      unaffectedColWidths[isMoveRight ? columnIndex : 0] +=
        widthChange;
      widthChange = 0;
    }
    // Otherwise, find the largest tolerable width change and apply to each cell
    else {
      const smallestWidth = targetColWidths.reduce(
        (min, w) => (w > MIN_COLUMN_WIDTH ? Math.min(min, w) : min),
        Infinity
      );
      const maxWidthChangePerPixel =
        (smallestWidth - MIN_COLUMN_WIDTH) / smallestWidth;
      for (let i = 0; i < targetColWidths.length; i++) {
        if (targetColWidths[i] === MIN_COLUMN_WIDTH) {
          continue;
        }
        const widthChangeForCell =
          targetColWidths[i] * maxWidthChangePerPixel;
        targetColWidths[i] -= widthChangeForCell;
        widthChange -= widthChangeForCell;
        unaffectedColWidths[isMoveRight ? columnIndex : 0] +=
          widthChangeForCell;
      }
    }
    iteration++;
  }

  // Scale everything back down
  const reassembledColWidths = [...leftColWidths, ...rightColWidths];
  const minValue = reassembledColWidths.reduce(
    (min, w) => Math.min(min, w),
    Infinity
  );
  const scaleToMinWidth = minValue / MIN_COLUMN_WIDTH;
  // ??? Math.floor?
  tableNode.setColWidths(
    reassembledColWidths.map((w) => Math.floor(w / scaleToMinWidth))
  );
} else {
  // Simply increase / decrease the cell width
  const newColWidths = [...colWidths];
  const newWidth = Math.max(width + widthChange, MIN_COLUMN_WIDTH);
  newColWidths[columnIndex] = newWidth;
  tableNode.setColWidths(newColWidths);
}