feat: ✨ allow vertical resizing of node textareas

[joshistoast]

Summary

Allows you to vertically resize textareas within the node editor and viewer. I was getting really tired of the restrictive viewing of my prompts within the workflows tab, so this pr addresses that.

Related Issues / Discussions

QA Instructions

Merge Plan

Checklist

• The PR has a short but descriptive title, suitable for a changelog
• Tests added / updated (if applicable)
• Documentation added / updated (if applicable)

[psychedelicious]

The new size is forgotten if the component unmounts, because it is not recorded in the reactflow internal state.

reactflow provides a NodeResizer and customizable NodeResizeControl to implement resizing the whole node component. These allow for persistent node size changes. When I was last playing around with them, they didn't play very nicely with textareas.

Note that the width and height node properties are not writable - you must use the aforementioned utils to resize a node.

The textareas are purposefully not resizable to prevent bug reports about the size not being remembered.

Also - IIRC there is an edge case where the handles can end up offset vertically when resizing, but that may have been when you resize the node component.

I don't have any strong objections to changing it to allow resize but just wanted to add some context.

Also need to check how this might interact with the linear view, especially the drag and drop.

[joshistoast]

Also need to check how this might interact with the linear view, especially the drag and drop.

I played with drag and drop with resizing and it worked surprisingly well.

I don't have any strong objections to changing it to allow resize but just wanted to add some context.

That's good context to have, and an restriction for that library to have. Maybe filing an issue on their repo could be beneficial.

[psychedelicious]

Actually, the width and height are recorded in the state. Resizing the text area updates these dimensions, but the nodes are all rendered and re-measured on mount, resetting the dimensions. There are existing issues in reactflow about this.

A solution might be to store the dimensions in our controlled data attribute on each node, then explicitly render the component at those dimensions. That should ensure the dimensions are measured correctly.

This would require adding the dimensions to zInvocationNodeData, zNotesNodeData and zCurrentImageNodeData as an optional property. <NodeWrapper /> would render the node with explicit width and height if present. Add handling in the nodesChanged reducer to check for changes of type "dimensions" and update the newly-added dimensions property for changed nodes.