@atlaskit/editor-plugin-layout 8.0.22 → 8.1.0

package/dist/es2019/pm-plugins/column-resize-divider.js

@@ -0,0 +1,361 @@
+import { bind } from 'bind-event-listener';
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { Decoration } from '@atlaskit/editor-prosemirror/view';
+// Class names for the column resize divider widget — must stay in sync with layout.ts in editor-core
+const layoutColumnDividerClassName = 'layout-column-divider';
+const layoutColumnDividerRailClassName = 'layout-column-divider-rail';
+const layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
+
+// Minimum column width percentage to prevent columns from collapsing
+const MIN_COLUMN_WIDTH_PERCENT = 5;
+
+// Module-level drag state so it survives widget DOM recreation during transactions.
+let dragState = null;
+
+/**
+ * Dispatches a single undoable ProseMirror transaction to commit the final
+ * column widths after a drag completes.
+ */
+const dispatchColumnWidths = (view, sectionPos, leftColIndex, leftWidth, rightWidth) => {
+  const {
+    state
+  } = view;
+  const sectionNode = state.doc.nodeAt(sectionPos);
+  if (!sectionNode) {
+    return;
+  }
+  const {
+    layoutColumn
+  } = state.schema.nodes;
+  const tr = state.tr;
+  const newColumns = [];
+  sectionNode.forEach((child, _offset, index) => {
+    if (child.type === layoutColumn) {
+      let newWidth = child.attrs.width;
+      if (index === leftColIndex) {
+        newWidth = Number(leftWidth.toFixed(2));
+      } else if (index === leftColIndex + 1) {
+        newWidth = Number(rightWidth.toFixed(2));
+      }
+      newColumns.push(layoutColumn.create({
+        ...child.attrs,
+        width: newWidth
+      }, child.content, child.marks));
+    } else {
+      newColumns.push(child);
+    }
+  });
+  tr.replaceWith(sectionPos + 1, sectionPos + sectionNode.nodeSize - 1, Fragment.from(newColumns));
+  tr.setMeta('layoutColumnResize', true);
+  tr.setMeta('scrollIntoView', false);
+  view.dispatch(tr);
+};
+
+/**
+ * Calculates new column widths from the current mouse X position during drag.
+ * Uses the columns-only width cached at mousedown — no layout reflow.
+ *
+ * The denominator is `columnsWidth` (the total flex container width minus
+ * divider widgets and flex gaps) so that a 1 px mouse movement corresponds
+ * to the exact same visual shift in the column boundary, eliminating the
+ * few-pixel drift that occurred when using the full section width.
+ */
+const calcDragWidths = clientX => {
+  if (!dragState) {
+    return null;
+  }
+  const {
+    columnsWidth
+  } = dragState;
+  if (columnsWidth === 0) {
+    return null;
+  }
+  const deltaX = clientX - dragState.startX;
+  const combinedWidth = dragState.startLeftWidth + dragState.startRightWidth;
+  const deltaPercent = deltaX / columnsWidth * 100;
+  let leftWidth = dragState.startLeftWidth + deltaPercent;
+  let rightWidth = dragState.startRightWidth - deltaPercent;
+  if (leftWidth < MIN_COLUMN_WIDTH_PERCENT) {
+    leftWidth = MIN_COLUMN_WIDTH_PERCENT;
+    rightWidth = combinedWidth - MIN_COLUMN_WIDTH_PERCENT;
+  } else if (rightWidth < MIN_COLUMN_WIDTH_PERCENT) {
+    rightWidth = MIN_COLUMN_WIDTH_PERCENT;
+    leftWidth = combinedWidth - MIN_COLUMN_WIDTH_PERCENT;
+  }
+  return {
+    leftWidth,
+    rightWidth
+  };
+};
+const onDragMouseMove = e => {
+  if (!dragState) {
+    return;
+  }
+
+  // If the mouse button was released outside the window (e.g. over browser chrome
+  // or an iframe), we won't receive a mouseup on ownerDoc. Detect this by checking
+  // whether any button is still held — if not, treat it as a drag end.
+  if (e.buttons === 0) {
+    onDragEnd(e.clientX);
+    return;
+  }
+
+  // Always capture the latest clientX so the rAF callback uses the most recent
+  // mouse position. Previously, intermediate positions were dropped when an rAF
+  // was already scheduled, causing the column boundary to lag behind the cursor.
+  dragState.lastClientX = e.clientX;
+
+  // If a paint frame is already scheduled it will pick up lastClientX — no need
+  // to schedule another one.
+  if (dragState.rafId !== null) {
+    return;
+  }
+  dragState.rafId = requestAnimationFrame(() => {
+    if (!dragState) {
+      return;
+    }
+    dragState.rafId = null;
+    const widths = calcDragWidths(dragState.lastClientX);
+    if (!widths) {
+      return;
+    }
+
+    // Write flex-basis directly onto the column elements' inline styles for immediate
+    // visual feedback. This beats PM's own inline flex-basis value without dispatching
+    // any PM transaction — keeping drag completely off the ProseMirror render path.
+    // The LayoutColumnView.ignoreMutation implementation ensures PM's MutationObserver
+    // does not revert these style changes mid-drag.
+    dragState.hasDragged = true;
+    dragState.leftColEl.style.flexBasis = `${widths.leftWidth}%`;
+    dragState.rightColEl.style.flexBasis = `${widths.rightWidth}%`;
+  });
+};
+
+/**
+ * Shared teardown for all drag-end paths (mouseup, missed mouseup detected via
+ * e.buttons===0 on mousemove, window blur, and visibilitychange). Commits the
+ * final column widths if a real drag occurred.
+ */
+const onDragEnd = clientX => {
+  if (!dragState) {
+    return;
+  }
+  const {
+    view,
+    sectionPos,
+    leftColIndex,
+    leftColEl,
+    rightColEl,
+    hasDragged,
+    rafId,
+    startLeftWidth,
+    startRightWidth,
+    unbindListeners
+  } = dragState;
+  unbindListeners();
+
+  // Cancel any pending rAF so a stale frame doesn't write styles after teardown.
+  if (rafId !== null) {
+    cancelAnimationFrame(rafId);
+  }
+  const ownerDoc = view.dom.ownerDocument;
+  ownerDoc.body.style.userSelect = '';
+  ownerDoc.body.style.cursor = '';
+  const widths = calcDragWidths(clientX);
+  dragState = null;
+  if (!hasDragged) {
+    // The user clicked without dragging — no flex-basis overrides were written,
+    // so there is nothing to clean up and no transaction to dispatch.
+    return;
+  }
+
+  // Clear the drag-time flex-basis overrides. The PM transaction below will
+  // write the committed widths back into the node attrs and re-render the DOM.
+  leftColEl.style.flexBasis = '';
+  rightColEl.style.flexBasis = '';
+  if (widths && (widths.leftWidth !== startLeftWidth || widths.rightWidth !== startRightWidth)) {
+    dispatchColumnWidths(view, sectionPos, leftColIndex, widths.leftWidth, widths.rightWidth);
+  }
+};
+const onDragMouseUp = e => {
+  onDragEnd(e.clientX);
+};
+
+/**
+ * Called when the window loses focus (blur) or the tab becomes hidden
+ * (visibilitychange). In either case the user can't be dragging anymore,
+ * so we commit the drag at the last known mouse position.
+ */
+const onDragCancel = () => {
+  if (!dragState) {
+    return;
+  }
+  // Commit at the last captured mouse position rather than startX, so the
+  // columns stay where the user last saw them.
+  onDragEnd(dragState.lastClientX);
+};
+
+/**
+ * Creates a column divider widget DOM element with drag-to-resize interaction for
+ * the adjacent layout columns. During drag, flex-basis is mutated directly on the
+ * column DOM elements for zero-overhead visual feedback (no PM transactions).
+ * A single undoable PM transaction is dispatched on mouseup to commit the final widths.
+ */
+const createColumnDividerWidget = (view, sectionPos, columnIndex // index of the column to the RIGHT of this divider
+) => {
+  const ownerDoc = view.dom.ownerDocument;
+
+  // Outer container: wide transparent hit area for easy grabbing, zero flex footprint
+  const divider = ownerDoc.createElement('div');
+  divider.classList.add(layoutColumnDividerClassName);
+  divider.contentEditable = 'false';
+
+  // Rail: styled via layoutColumnDividerStyles in layout.ts
+  const rail = ownerDoc.createElement('div');
+  rail.classList.add(layoutColumnDividerRailClassName);
+  divider.appendChild(rail);
+
+  // Thumb: styled via layoutColumnDividerStyles in layout.ts
+  const thumb = ownerDoc.createElement('div');
+  thumb.classList.add(layoutColumnDividerThumbClassName);
+  rail.appendChild(thumb);
+  const leftColIndex = columnIndex - 1;
+  bind(divider, {
+    type: 'mousedown',
+    listener: e => {
+      var _ownerDoc$defaultView;
+      e.preventDefault();
+      e.stopPropagation();
+      const sectionNode = view.state.doc.nodeAt(sectionPos);
+      if (!sectionNode) {
+        return;
+      }
+
+      // Get the initial widths of the two adjacent columns
+      let leftCol = null;
+      let rightCol = null;
+      sectionNode.forEach((child, _offset, index) => {
+        if (index === leftColIndex) {
+          leftCol = child;
+        }
+        if (index === leftColIndex + 1) {
+          rightCol = child;
+        }
+      });
+      if (!leftCol || !rightCol) {
+        return;
+      }
+      const sectionElement = divider.closest('[data-layout-section]');
+      if (!(sectionElement instanceof HTMLElement)) {
+        return;
+      }
+
+      // Capture the two adjacent column DOM elements upfront so mousemove can
+      // mutate their flex-basis directly without any PM transaction overhead.
+      // Query by data-layout-column-index (stamped by LayoutColumnView) rather than
+      // relying on positional order of [data-layout-column] elements, which would
+      // break if the DOM structure or ordering ever changes.
+      const leftColEl = sectionElement.querySelector(`[data-layout-column-index="${leftColIndex}"]`);
+      const rightColEl = sectionElement.querySelector(`[data-layout-column-index="${leftColIndex + 1}"]`);
+      if (!leftColEl || !rightColEl) {
+        return;
+      }
+      const unbindMove = bind(ownerDoc, {
+        type: 'mousemove',
+        listener: onDragMouseMove
+      });
+      const unbindUp = bind(ownerDoc, {
+        type: 'mouseup',
+        listener: onDragMouseUp
+      });
+      // If the user releases the mouse outside the browser window (e.g. over the
+      // OS desktop) and then brings the cursor back, we won't get a mouseup on
+      // ownerDoc. Listening on window for blur and on the document for
+      // visibilitychange catches tab switches and window focus loss respectively.
+      const unbindBlur = bind((_ownerDoc$defaultView = ownerDoc.defaultView) !== null && _ownerDoc$defaultView !== void 0 ? _ownerDoc$defaultView : window, {
+        type: 'blur',
+        listener: onDragCancel
+      });
+      const unbindVisibility = bind(ownerDoc, {
+        type: 'visibilitychange',
+        listener: onDragCancel
+      });
+
+      // Compute the width available to columns only (excluding divider widgets and
+      // flex gaps). Using this as the denominator ensures that a 1 px mouse delta
+      // translates to the exact pixel shift on the column boundary.
+      const sectionRect = sectionElement.getBoundingClientRect();
+      const dividers = sectionElement.querySelectorAll(`.${layoutColumnDividerClassName}`);
+      let dividersWidth = 0;
+      dividers.forEach(d => {
+        dividersWidth += d.getBoundingClientRect().width;
+      });
+      // Account for CSS gap between flex children. The gap is applied between
+      // every pair of direct children (columns + divider widgets).
+      const computedGap = parseFloat(getComputedStyle(sectionElement).gap || '0');
+      const childCount = sectionElement.children.length;
+      const totalGap = childCount > 1 ? computedGap * (childCount - 1) : 0;
+      const columnsWidth = sectionRect.width - dividersWidth - totalGap;
+      dragState = {
+        hasDragged: false,
+        lastClientX: e.clientX,
+        rafId: null,
+        view,
+        sectionPos,
+        leftColIndex,
+        leftColEl,
+        rightColEl,
+        startX: e.clientX,
+        startLeftWidth: leftCol.attrs.width,
+        startRightWidth: rightCol.attrs.width,
+        columnsWidth,
+        sectionElement,
+        unbindListeners: () => {
+          unbindMove();
+          unbindUp();
+          unbindBlur();
+          unbindVisibility();
+        }
+      };
+      ownerDoc.body.style.userSelect = 'none';
+      ownerDoc.body.style.cursor = 'col-resize';
+    }
+  });
+  return divider;
+};
+
+/**
+ * Returns ProseMirror Decoration widgets for column dividers between layout columns.
+ * Each divider supports drag-to-resize interaction for the adjacent columns.
+ */
+export const getColumnDividerDecorations = (state, view) => {
+  const decorations = [];
+  if (!view) {
+    return decorations;
+  }
+  const {
+    layoutSection
+  } = state.schema.nodes;
+  state.doc.descendants((node, pos) => {
+    if (node.type === layoutSection) {
+      // Walk through layout column children and add dividers between them
+      node.forEach((child, offset, index) => {
+        // Add a divider widget BEFORE every column except the first
+        if (index > 0) {
+          const sectionPos = pos;
+          const colIndex = index;
+          const widgetPos = pos + offset + 1; // position at the start of this column
+          decorations.push(Decoration.widget(widgetPos, () => createColumnDividerWidget(view, sectionPos, colIndex), {
+            side: -1,
+            // place before the position
+            key: `layout-col-divider-${pos}-${index}`,
+            ignoreSelection: true
+          }));
+        }
+      });
+      return false; // don't descend into children
+    }
+    return true; // continue descending
+  });
+  return decorations;
+};

package/dist/es2019/pm-plugins/main.js

@@ -8,6 +8,7 @@ import { findParentNodeClosestToPos, findParentNodeOfType } from '@atlaskit/edit
 import { Decoration, DecorationSet } from '@atlaskit/editor-prosemirror/view';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { fixColumnSizes, fixColumnStructure, getSelectedLayout } from './actions';
+import { getColumnDividerDecorations } from './column-resize-divider';
 import { EVEN_DISTRIBUTED_COL_WIDTHS } from './consts';
 import { pluginKey } from './plugin-key';
 import { getMaybeLayoutSection } from './utils';
@@ -92,103 +93,132 @@ const handleDeleteLayoutColumn = (state, dispatch) => {
   }
   return false;
 };
-export default (options => new SafePlugin({
-  key: pluginKey,
-  state: {
-    init: (_, state) => getInitialPluginState(options, state),
-    apply: (tr, pluginState, oldState, newState) => {
-      var _tr$getMeta, _pluginKey$getState;
-      const isResizing = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
-      if (tr.docChanged || tr.selectionSet) {
-        const maybeLayoutSection = getMaybeLayoutSection(newState);
-        const newPluginState = {
-          ...pluginState,
-          pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
-          isResizing,
-          selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          pluginState.selectedLayout)
-        };
-        return newPluginState;
-      }
+export default (options => {
+  // Store a reference to the EditorView so widget decorations can dispatch transactions
+  let editorViewRef;
+  return new SafePlugin({
+    key: pluginKey,
+    view(view) {
+      editorViewRef = view;
       return {
-        ...pluginState,
-        isResizing
+        update(updatedView) {
+          editorViewRef = updatedView;
+        },
+        destroy() {
+          editorViewRef = undefined;
+        }
       };
-    }
-  },
-  props: {
-    decorations(state) {
-      const layoutState = pluginKey.getState(state);
-      if (layoutState.pos !== null) {
-        return DecorationSet.create(state.doc, getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)));
-      }
-      return undefined;
     },
-    handleKeyDown: keydownHandler({
-      Tab: filter(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn),
-      'Mod-Backspace': handleDeleteLayoutColumn,
-      'Mod-Delete': handleDeleteLayoutColumn,
-      Backspace: handleDeleteLayoutColumn,
-      Delete: handleDeleteLayoutColumn
-    }),
-    handleClickOn: createSelectionClickHandler(['layoutColumn'], target => target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column'), {
-      useLongPressSelection: options.useLongPressSelection || false,
-      getNodeSelectionPos: (state, nodePos) => state.doc.resolve(nodePos).before()
-    })
-  },
-  appendTransaction: (transactions, _oldState, newState) => {
-    const changes = [];
-    transactions.forEach(prevTr => {
-      // remap change segments across the transaction set
-      changes.forEach(change => {
+    state: {
+      init: (_, state) => getInitialPluginState(options, state),
+      apply: (tr, pluginState, oldState, newState) => {
+        var _tr$getMeta, _pluginKey$getState;
+        const isResizing = editorExperiment('single_column_layouts', true) ? (_tr$getMeta = tr.getMeta('is-resizer-resizing')) !== null && _tr$getMeta !== void 0 ? _tr$getMeta : (_pluginKey$getState = pluginKey.getState(oldState)) === null || _pluginKey$getState === void 0 ? void 0 : _pluginKey$getState.isResizing : false;
+        if (tr.docChanged || tr.selectionSet) {
+          const maybeLayoutSection = getMaybeLayoutSection(newState);
+          const newPluginState = {
+            ...pluginState,
+            pos: maybeLayoutSection ? maybeLayoutSection.pos : null,
+            isResizing,
+            selectedLayout: getSelectedLayout(maybeLayoutSection && maybeLayoutSection.node,
+            // Ignored via go/ees005
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            pluginState.selectedLayout)
+          };
+          return newPluginState;
+        }
         return {
-          from: prevTr.mapping.map(change.from),
-          to: prevTr.mapping.map(change.to),
-          slice: change.slice
+          ...pluginState,
+          isResizing
         };
-      });
-
-      // don't consider transactions that don't mutate
-      if (!prevTr.docChanged) {
-        return;
-      }
-      const change = fixColumnSizes(prevTr, newState);
-      if (change) {
-        changes.push(change);
       }
-    });
-    if (editorExperiment('advanced_layouts', true) && changes.length === 1) {
-      var _change$slice$content, _change$slice$content2;
-      const change = changes[0];
-      // When editorExperiment('single_column_layouts', true) is on
-      // delete can create a single column layout
-      // otherwise we replace the single column layout with its content
-      if (!editorExperiment('single_column_layouts', true) && change.slice.content.childCount === 1 && ((_change$slice$content = change.slice.content.firstChild) === null || _change$slice$content === void 0 ? void 0 : _change$slice$content.type.name) === 'layoutColumn' && ((_change$slice$content2 = change.slice.content.firstChild) === null || _change$slice$content2 === void 0 ? void 0 : _change$slice$content2.attrs.width) === EVEN_DISTRIBUTED_COL_WIDTHS[1]) {
-        const tr = newState.tr;
-        const {
-          content
-        } = change.slice.content.firstChild;
-        tr.replaceWith(change.from - 1, change.to, content);
-        return tr;
-      }
-    }
-    if (changes.length) {
-      let tr = newState.tr;
-      const selection = newState.selection.toJSON();
-      changes.forEach(change => {
-        tr.replaceRange(change.from, change.to, change.slice);
+    },
+    props: {
+      decorations(state) {
+        const layoutState = pluginKey.getState(state);
+        if (editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true)) {
+          const dividerDecorations = getColumnDividerDecorations(state, editorViewRef);
+          const selectedDecorations = layoutState.pos !== null ? getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)) : [];
+          const allDecorations = [...selectedDecorations, ...dividerDecorations];
+          if (allDecorations.length > 0) {
+            return DecorationSet.create(state.doc, allDecorations);
+          }
+          return undefined;
+        }
+        if (layoutState.pos !== null) {
+          return DecorationSet.create(state.doc, getNodeDecoration(layoutState.pos, state.doc.nodeAt(layoutState.pos)));
+        }
+        return undefined;
+      },
+      handleKeyDown: keydownHandler({
+        Tab: filter(isWholeSelectionInsideLayoutColumn, moveCursorToNextColumn),
+        'Mod-Backspace': handleDeleteLayoutColumn,
+        'Mod-Delete': handleDeleteLayoutColumn,
+        Backspace: handleDeleteLayoutColumn,
+        Delete: handleDeleteLayoutColumn
+      }),
+      handleClickOn: createSelectionClickHandler(['layoutColumn'], target => target.hasAttribute('data-layout-section') || target.hasAttribute('data-layout-column'), {
+        useLongPressSelection: options.useLongPressSelection || false,
+        getNodeSelectionPos: (state, nodePos) => state.doc.resolve(nodePos).before()
+      })
+    },
+    appendTransaction: (transactions, _oldState, newState) => {
+      const changes = [];
+      transactions.forEach(prevTr => {
+        // remap change segments across the transaction set
+        changes.forEach(change => {
+          return {
+            from: prevTr.mapping.map(change.from),
+            to: prevTr.mapping.map(change.to),
+            slice: change.slice
+          };
+        });
+
+        // don't consider transactions that don't mutate
+        if (!prevTr.docChanged) {
+          return;
+        }
+
+        // Skip fixing column sizes for column resize drag transactions
+        if (editorExperiment('platform_editor_layout_column_resize_handle', true) && prevTr.getMeta('layoutColumnResize')) {
+          return;
+        }
+        const change = fixColumnSizes(prevTr, newState);
+        if (change) {
+          changes.push(change);
+        }
       });
+      if (editorExperiment('advanced_layouts', true) && changes.length === 1) {
+        var _change$slice$content, _change$slice$content2;
+        const change = changes[0];
+        // When editorExperiment('single_column_layouts', true) is on
+        // delete can create a single column layout
+        // otherwise we replace the single column layout with its content
+        if (!editorExperiment('single_column_layouts', true) && change.slice.content.childCount === 1 && ((_change$slice$content = change.slice.content.firstChild) === null || _change$slice$content === void 0 ? void 0 : _change$slice$content.type.name) === 'layoutColumn' && ((_change$slice$content2 = change.slice.content.firstChild) === null || _change$slice$content2 === void 0 ? void 0 : _change$slice$content2.attrs.width) === EVEN_DISTRIBUTED_COL_WIDTHS[1]) {
+          const tr = newState.tr;
+          const {
+            content
+          } = change.slice.content.firstChild;
+          tr.replaceWith(change.from - 1, change.to, content);
+          return tr;
+        }
+      }
+      if (changes.length) {
+        let tr = newState.tr;
+        const selection = newState.selection.toJSON();
+        changes.forEach(change => {
+          tr.replaceRange(change.from, change.to, change.slice);
+        });
 
-      // selecting and deleting across columns in 3 col layouts can remove
-      // a layoutColumn so we fix the structure here
-      tr = fixColumnStructure(newState) || tr;
-      if (tr.docChanged) {
-        tr.setSelection(Selection.fromJSON(tr.doc, selection));
-        return tr;
+        // selecting and deleting across columns in 3 col layouts can remove
+        // a layoutColumn so we fix the structure here
+        tr = fixColumnStructure(newState) || tr;
+        if (tr.docChanged) {
+          tr.setSelection(Selection.fromJSON(tr.doc, selection));
+          return tr;
+        }
       }
+      return;
     }
-    return;
-  }
-}));
+  });
+});

package/dist/es2019/pm-plugins/resizing.js

@@ -1,7 +1,61 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { LayoutSectionView } from '../nodeviews';
 export const pluginKey = new PluginKey('layoutResizingPlugin');
+
+/**
+ * Minimal node view for layoutColumn that delegates all DOM serialization to the
+ * NodeSpec's own toDOM, but overrides ignoreMutation to suppress style attribute
+ * mutations from ProseMirror's MutationObserver.
+ *
+ * This is necessary so that direct inline style mutations during column drag
+ * (e.g. setting flex-basis to give real-time visual feedback without dispatching
+ * PM transactions) are not "corrected" back by ProseMirror's DOM reconciliation.
+ */
+class LayoutColumnView {
+  constructor(node, view, getPos) {
+    // Use the NodeSpec's own toDOM to produce the correct DOM structure and attributes.
+    const nodeType = view.state.schema.nodes[node.type.name];
+
+    // Fallback: create a plain div so PM always has a valid DOM node to work with.
+    // This path should never be reached in practice — layoutColumn always has a toDOM.
+    if (!nodeType.spec.toDOM) {
+      const fallbackDiv = document.createElement('div');
+      this.dom = fallbackDiv;
+      this.contentDOM = fallbackDiv;
+      return;
+    }
+    const {
+      dom,
+      contentDOM
+    } = DOMSerializer.renderSpec(document, nodeType.spec.toDOM(node));
+    if (!(dom instanceof HTMLElement) || !(contentDOM instanceof HTMLElement)) {
+      const fallbackDiv = document.createElement('div');
+      this.dom = fallbackDiv;
+      this.contentDOM = fallbackDiv;
+      return;
+    }
+    this.dom = dom;
+    this.contentDOM = contentDOM;
+
+    // Stamp the column's index within its parent section onto the DOM element so that
+    // column-resize-divider can query columns by index rather than relying on positional
+    // order of [data-layout-column] elements (which could break if the DOM structure changes).
+    const pos = getPos();
+    if (pos !== undefined) {
+      const $pos = view.state.doc.resolve(pos);
+      this.dom.setAttribute('data-layout-column-index', String($pos.index()));
+    }
+  }
+  ignoreMutation(mutation) {
+    // Ignore style attribute mutations — these are direct DOM writes during column drag
+    // (setting flex-basis for real-time resize feedback). Without this, PM's
+    // MutationObserver would immediately revert our style changes.
+    return mutation.type === 'attributes' && mutation.attributeName === 'style';
+  }
+}
 export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher) => new SafePlugin({
   key: pluginKey,
   props: {
@@ -16,7 +70,13 @@ export default ((options, pluginInjectionApi, portalProviderAPI, eventDispatcher
           pluginInjectionApi,
           options
         }).init();
-      }
+      },
+      // Only register the column node view when the resize handle experiment is on.
+      // It exists solely to suppress style-attribute MutationObserver callbacks
+      // during drag, allowing direct flex-basis writes without PM interference.
+      ...(editorExperiment('platform_editor_layout_column_resize_handle', true) ? {
+        layoutColumn: (node, view, getPos) => new LayoutColumnView(node, view, getPos)
+      } : {})
     }
   }
 }));