support associating an id with a resize item/handle

src/components/views/elements/ResizeHandle.js

@@ -14,7 +14,7 @@ const ResizeHandle = (props) => {
         classNames.push('mx_ResizeHandle_reverse');
     }
     return (
-        <div className={classNames.join(' ')} />
+        <div className={classNames.join(' ')} data-id={props.id} />
     );
 };
 

src/resizer/resizer.js

@@ -64,9 +64,20 @@ export class Resizer {
     forHandleAt(handleIndex) {
         const handles = this._getResizeHandles();
         const handle = handles[handleIndex];
+        if (handle) {
             const {distributor} = this._createSizerAndDistributor(handle);
             return distributor;
         }
+    }
+
+    forHandleWithId(id) {
+        const handles = this._getResizeHandles();
+        const handle = handles.find((h) => h.getAttribute("data-id") === id);
+        if (handle) {
+            const {distributor} = this._createSizerAndDistributor(handle);
+            return distributor;
+        }
+    }
 
     _isResizeHandle(el) {
         return el && el.classList.contains(this.classNames.handle);
@@ -79,6 +90,7 @@ export class Resizer {
         }
         // prevent starting a drag operation
         event.preventDefault();
+
         // mark as currently resizing
         if (this.classNames.resizing) {
             this.container.classList.add(this.classNames.resizing);
@@ -115,9 +127,10 @@ export class Resizer {
         // if reverse, resize the item after the handle instead of before, so + 1
         const itemIndex = items.indexOf(prevItem) + (reverse ? 1 : 0);
         const item = items[itemIndex];
+        const id = resizeHandle.getAttribute("data-id");
         // eslint-disable-next-line new-cap
         const distributor = new this.distributorCtor(
-            sizer, item, this.distributorCfg,
+            sizer, item, id, this.distributorCfg,
             items, this.container);
         return {sizer, distributor};
     }