@atlaskit/editor-plugin-block-controls 3.3.12 → 3.3.14

package/dist/es2019/editor-commands/move-to-layout.js

@@ -4,12 +4,11 @@ import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { fireInsertLayoutAnalytics, attachMoveNodeAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
-import { isFragmentOfType, containsNodeOfType } from '../pm-plugins/utils/check-fragment';
+import { attachMoveNodeAnalytics, fireInsertLayoutAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
+import { containsNodeOfType, isFragmentOfType } from '../pm-plugins/utils/check-fragment';
 import { maxLayoutColumnSupported } from '../pm-plugins/utils/consts';
 import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
 import { getMultiSelectionIfPosInside } from '../pm-plugins/utils/selection';
-import { updateColumnWidths } from '../pm-plugins/utils/update-column-widths';
 import { isInSameLayout } from '../pm-plugins/utils/validation';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
 const createNewLayout = (schema, layoutContents) => {
@@ -65,20 +64,14 @@ const moveToExistingLayout = (toLayout, toLayoutPos, sourceContent, from, to, tr
     tr.delete(from, sourceContentEndPos);
     const mappedTo = tr.mapping.map(to);
     tr.insert(mappedTo, sourceContent);
-    if (!fg('platform_editor_advanced_layouts_post_fix_patch_1') || selectMovedNode) {
+    if (selectMovedNode) {
       tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
     }
     attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api, sourceNodeTypes, hasSelectedMultipleNodes);
   } else if (toLayout.childCount < maxLayoutColumnSupported()) {
     var _$originalFrom$nodeAf2;
-    if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-      removeFromSource(tr, tr.doc.resolve(from), sourceContentEndPos);
-      insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceContent);
-    } else {
-      insertToDestination(tr, to, sourceContent, toLayout, toLayoutPos);
-      const mappedFrom = tr.mapping.map(from);
-      removeFromSource(tr, tr.doc.resolve(mappedFrom), tr.mapping.map(sourceContentEndPos));
-    }
+    removeFromSource(tr, tr.doc.resolve(from), sourceContentEndPos);
+    insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceContent);
     attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf2 = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf2 === void 0 ? void 0 : _$originalFrom$nodeAf2.type.name) || '', 1, 'layoutSection', false, api, sourceNodeTypes, hasSelectedMultipleNodes);
   }
   return tr;
@@ -124,42 +117,6 @@ const insertToDestinationNoWidthUpdate = (tr, to, sourceContent) => {
   }
   return tr;
 };
-const insertToDestination = (tr, to, sourceContent, toLayout, toLayoutPos) => {
-  const {
-    newColumnWidth
-  } = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {};
-  const {
-    layoutColumn
-  } = tr.doc.type.schema.nodes || {};
-  let content = null;
-  try {
-    if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
-      if (sourceContent instanceof Fragment) {
-        var _sourceContent$firstC;
-        content = layoutColumn.createChecked({
-          width: newColumnWidth
-        }, isFragmentOfType(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
-      }
-    } else {
-      if (sourceContent instanceof PMNode) {
-        content = layoutColumn.createChecked({
-          width: newColumnWidth
-        }, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
-      }
-    }
-  } catch (error) {
-    logException(error, {
-      location: 'editor-plugin-block-controls/move-to-layout'
-    });
-  }
-  if (content) {
-    tr.insert(to, content);
-  }
-  if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-    tr.setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
-  }
-  return tr;
-};
 
 /**
  * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
@@ -356,9 +313,6 @@ export const moveToLayout = api => (from, to, options) => ({
       tr = removeFromSource(tr, $sourceFrom, sourceTo);
       const mappedTo = tr.mapping.map(to);
       tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
-      if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-        tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
-      }
       breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
         mode: breakoutMode
       })]);

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -41,7 +41,7 @@ export const handleMouseOver = (view, event, api) => {
     }
     const parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     const parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
-    if (editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+    if (editorExperiment('advanced_layouts', true)) {
       // We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
       if (parentElement && (parentElementType === 'table' || parentElementType === 'tableRow') && editorExperiment('nested-dnd', true)) {
         rootElement = parentElement;

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

@@ -624,7 +624,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI) => {
           // Currently we can only drag one node at a time
           // so we only need to check first child
           const draggable = dragging === null || dragging === void 0 ? void 0 : dragging.slice.content.firstChild;
-          if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn' && fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+          if (dndDragCancelled && isMultiSelectEnabled || (draggable === null || draggable === void 0 ? void 0 : draggable.type.name) === 'layoutColumn') {
             // we prevent native DnD for layoutColumn to prevent single column layout.
             event.preventDefault();
             return false;

package/dist/es2019/pm-plugins/utils/drag-handle-positions.js

@@ -1,21 +1,16 @@
-import { fg } from '@atlaskit/platform-feature-flags';
 import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, DRAG_HANDLE_WIDTH, dragHandleGap } from '../../ui/consts';
 export const getTopPosition = (dom, type) => {
   if (!dom) {
     return 'auto';
   }
   const table = dom.querySelector('table');
-  const isTable = fg('platform_editor_advanced_layouts_post_fix_patch_1') ? table && (!type || type === 'table') : table;
+  const isTable = table && (!type || type === 'table');
   if (isTable) {
     return `${dom.offsetTop + ((table === null || table === void 0 ? void 0 : table.offsetTop) || 0)}px`;
   } else if (type === 'rule') {
     return `${dom.offsetTop - DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT}px`;
   } else if (type === 'layoutColumn') {
-    if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-      return `${-dom.offsetTop / 2}px`;
-    } else {
-      return `${-DRAG_HANDLE_WIDTH}px`;
-    }
+    return `${-dom.offsetTop / 2}px`;
   } else if (type === 'heading-1') {
     return `${dom.offsetTop + DRAG_HANDLE_H1_TOP_ADJUSTMENT}px`;
   } else if (type === 'heading-2') {

package/dist/es2019/pm-plugins/utils/validation.js

@@ -1,6 +1,7 @@
 import memoizeOne from 'memoize-one';
 import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
+import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 export const isInsideTable = nodeType => {
@@ -47,10 +48,10 @@ export const transformExpandToNestedExpand = expandNode => {
   }
   return null;
 };
-export const transformSliceExpandToNestedExpand = slice => {
+export const transformFragmentExpandToNestedExpand = fragment => {
   const children = [];
   try {
-    slice.content.forEach(node => {
+    fragment.forEach(node => {
       if (isExpand(node.type)) {
         const nestedExpandNode = transformExpandToNestedExpand(node);
         if (nestedExpandNode) {
@@ -63,7 +64,14 @@ export const transformSliceExpandToNestedExpand = slice => {
   } catch (e) {
     return null;
   }
-  return new Slice(Fragment.fromArray(children), slice.openStart, slice.openEnd);
+  return Fragment.fromArray(children);
+};
+export const transformSliceExpandToNestedExpand = slice => {
+  const fragment = transformFragmentExpandToNestedExpand(slice.content);
+  if (!fragment) {
+    return null;
+  }
+  return new Slice(fragment, slice.openStart, slice.openEnd);
 };
 export const memoizedTransformExpandToNestedExpand = memoizeOne(node => {
   try {
@@ -76,11 +84,38 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
   let srcNodeType = srcNode.type;
   const parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
   const activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
+  const isNestingTablesSupported = fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
+    exposure: true
+  });
+  const tableNodeType = srcNode.type.schema.nodes.table;
+  const expandNodeType = srcNode.type.schema.nodes.expand;
   if (activeNodeType === 'layoutColumn' && editorExperiment('advanced_layouts', true)) {
     // Allow drag layout column and drop into layout section
     if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || parentNodeType === 'doc') {
       return true;
     }
+    if ((parentNodeType === 'tableCell' || parentNodeType === 'tableHeader') && fg('platform_editor_drag_layout_column_into_nodes')) {
+      const maybeExpandNodesArray = findChildrenByType(srcNode, expandNodeType);
+      const layoutColumnContainExpand = maybeExpandNodesArray.length > 0;
+      const layoutColumnContainTable = findChildrenByType(srcNode, tableNodeType).length > 0;
+
+      // when layout column content does not contain table, allow to drop into table cell
+      if (!layoutColumnContainTable) {
+        return true;
+      }
+
+      // when layout column content contains table, but does not contain expand, allow drop into table cell if nesting tables is supported, and the nesting depth does not exceed 1
+      if (layoutColumnContainTable && !layoutColumnContainExpand) {
+        const nestingDepth = getParentOfTypeCount(tableNodeType)($destNodePos);
+        return isNestingTablesSupported && nestingDepth <= 1;
+      }
+
+      // when layout column content contains an expand, and there is a table inside the expand, should not allow to drop into table cell
+      if (layoutColumnContainTable && layoutColumnContainExpand) {
+        const isAnyTableNestedInExpand = maybeExpandNodesArray.some(result => findChildrenByType(result.node, tableNodeType).length > 0);
+        return !isAnyTableNestedInExpand;
+      }
+    }
   }
 
   // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
@@ -90,15 +125,10 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
     }
   }
 
-  // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
-  const isNestingTablesSupported = fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
-    exposure: true
-  });
-
   // NOTE: this will block drop targets from showing for dragging a table into another table
   // unless nested tables are supported and the nesting depth does not exceed 1
   if ((parentNodeType === 'tableCell' || parentNodeType === 'tableHeader') && activeNodeType === 'table') {
-    const nestingDepth = getParentOfTypeCount(srcNode === null || srcNode === void 0 ? void 0 : srcNode.type)($destNodePos);
+    const nestingDepth = getParentOfTypeCount(tableNodeType)($destNodePos);
     if (!isNestingTablesSupported || isNestingTablesSupported && nestingDepth > 1) {
       return false;
     }

package/dist/es2019/ui/drag-handle.js

@@ -222,11 +222,9 @@ export const DragHandle = ({
   // but ensures the preview is generated correctly.
   const handleMouseDown = useCallback(() => {
     if (editorExperiment('advanced_layouts', true)) {
+      var _buttonRef$current;
       // prevent native drag and drop.
-      if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-        var _buttonRef$current;
-        (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
-      }
+      (_buttonRef$current = buttonRef.current) === null || _buttonRef$current === void 0 ? void 0 : _buttonRef$current.focus();
       if (!isLayoutColumn) {
         return undefined;
       }

package/dist/es2019/ui/drag-preview.js

@@ -1,29 +1,19 @@
 import { browser } from '@atlaskit/editor-common/browser';
-import { fg } from '@atlaskit/platform-feature-flags';
-import { B200, N20, N30 } from '@atlaskit/theme/colors';
-const previewStyleNew = {
+import { N20, N30 } from '@atlaskit/theme/colors';
+const previewStyle = {
   borderColor: `var(--ds-border, ${N30})`,
   borderStyle: 'solid',
   borderRadius: "var(--ds-border-radius-100, 3px)",
   borderWidth: "var(--ds-border-width-outline, 2px)",
   backgroundColor: `var(--ds-skeleton-subtle, ${N20})`
 };
-const previewStyleOld = {
-  borderColor: `var(--ds-border-focused, ${B200})`,
-  borderStyle: 'solid',
-  borderRadius: "var(--ds-border-radius-100, 3px)",
-  borderWidth: "var(--ds-border-width-outline, 2px)",
-  backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
-};
 const getPreviewContainerDimensionsForSingle = (dom, nodeType) => {
   let nodeContainer = dom;
-  if (fg('platform_editor_elements_drag_and_drop_ed_23189')) {
-    const iframeContainer = dom.querySelector('iframe');
-    if (nodeType === 'embedCard') {
-      nodeContainer = dom.querySelector('.rich-media-item') || dom;
-    } else if (nodeType === 'extension' && iframeContainer) {
-      nodeContainer = iframeContainer;
-    }
+  const iframeContainer = dom.querySelector('iframe');
+  if (nodeType === 'embedCard') {
+    nodeContainer = dom.querySelector('.rich-media-item') || dom;
+  } else if (nodeType === 'extension' && iframeContainer) {
+    nodeContainer = iframeContainer;
   }
   const nodeContainerRect = nodeContainer.getBoundingClientRect();
   return {
@@ -54,7 +44,6 @@ const createGenericPreview = () => {
   const generalPreview = document.createElement('div');
   // ProseMirror class is required to make sure the cloned dom is styled correctly
   generalPreview.classList.add('ProseMirror', 'block-ctrl-drag-preview');
-  const previewStyle = fg('platform_editor_elements_drag_and_drop_ed_23189') ? previewStyleNew : previewStyleOld;
   generalPreview.style.border = `${previewStyle.borderWidth} ${previewStyle.borderStyle} ${previewStyle.borderColor}`;
   generalPreview.style.borderRadius = previewStyle.borderRadius;
   generalPreview.style.backgroundColor = previewStyle.backgroundColor;
@@ -78,13 +67,13 @@ const createContentPreviewElement = (dom, nodeType, nodeSpacing) => {
   clonedDom.style.marginRight = '0';
   clonedDom.style.marginBottom = nodeSpacing ? `${nodeSpacing.bottom}` : '0';
   clonedDom.style.boxShadow = 'none';
-  clonedDom.style.opacity = browser.windows ? '1' : fg('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
+  clonedDom.style.opacity = browser.windows ? '1' : '0.31';
   contentPreviewOneElement.appendChild(clonedDom);
   return contentPreviewOneElement;
 };
 const isGenericPreview = (dom, nodeType) => {
   const embedCard = dom.querySelector('.embedCardView-content-wrap');
-  return fg('platform_editor_elements_drag_and_drop_ed_23189') ? nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!dom.querySelector('iframe') : nodeType === 'embedCard' || !!embedCard || nodeType === 'extension';
+  return nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!dom.querySelector('iframe');
 };
 const createPreviewForElement = (dom, nodeType, nodeSpacing) => {
   const shouldBeGenericPreview = isGenericPreview(dom, nodeType);

package/dist/es2019/ui/drop-target-layout.js

@@ -7,7 +7,6 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
 import { layoutBreakpointWidth } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { B200 } from '@atlaskit/theme/colors';
@@ -73,7 +72,7 @@ export const DropTargetLayout = props => {
     const to = getPos();
     let mappedTo;
     if (to !== undefined) {
-      var _api$core;
+      var _api$core, _api$core2;
       const {
         pos: from
       } = activeNode;
@@ -84,23 +83,18 @@ export const DropTargetLayout = props => {
         api === null || api === void 0 ? void 0 : (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 ? void 0 : (_api$blockControls2$c = _api$blockControls2.commands) === null || _api$blockControls2$c === void 0 ? void 0 : _api$blockControls2$c.moveToLayout(from, to)({
           tr
         });
-        if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-          const insertColumnStep = getInsertLayoutStep(tr);
-          mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+        const insertColumnStep = getInsertLayoutStep(tr);
+        mappedTo = insertColumnStep === null || insertColumnStep === void 0 ? void 0 : insertColumnStep.from;
+        return tr;
+      });
+      api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+        tr
+      }) => {
+        if (mappedTo !== undefined) {
+          updateSelection(tr, mappedTo);
         }
         return tr;
       });
-      if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-        var _api$core2;
-        api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
-          tr
-        }) => {
-          if (mappedTo !== undefined) {
-            updateSelection(tr, mappedTo);
-          }
-          return tr;
-        });
-      }
     }
   }, [api, getPos, activeNode]);
   useEffect(() => {

package/dist/es2019/ui/global-styles.js

@@ -5,7 +5,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, Global, jsx } from '@emotion/react';
 import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DRAG_HANDLE_MAX_WIDTH_PLUS_GAP, DRAG_HANDLE_WIDTH } from './consts';
 
@@ -260,6 +259,6 @@ const blockCardWithoutLayout = css({
 });
 export const GlobalStylesWrapper = () => {
   return jsx(Global, {
-    styles: [globalStyles(), fg('platform_editor_advanced_layouts_post_fix_patch_1') && globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
+    styles: [globalStyles(), globalDnDStyle, editorExperiment('nested-dnd', true) ? extendedHoverZoneNested() : extendedHoverZone(), withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, withRelativePosStyle, topLevelNodeMarginStyles, editorExperiment('nested-dnd', true) ? withAnchorNameZindexNestedStyle : withAnchorNameZindexStyle,,]
   });
 };

package/dist/es2019/ui/inline-drop-target.js

@@ -9,7 +9,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
 import { css, jsx } from '@emotion/react';
 import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { B200 } from '@atlaskit/theme/colors';
@@ -178,7 +177,7 @@ export const InlineDropTarget = ({
     const toPos = getPos();
     let mappedTo;
     if (activeNode && toPos !== undefined) {
-      var _api$core;
+      var _api$core, _api$core2;
       const {
         pos: start
       } = activeNode;
@@ -192,23 +191,18 @@ export const InlineDropTarget = ({
         })({
           tr
         });
-        if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-          const insertLayoutStep = getInsertLayoutStep(tr);
-          mappedTo = insertLayoutStep === null || insertLayoutStep === void 0 ? void 0 : insertLayoutStep.from;
+        const insertLayoutStep = getInsertLayoutStep(tr);
+        mappedTo = insertLayoutStep === null || insertLayoutStep === void 0 ? void 0 : insertLayoutStep.from;
+        return tr;
+      });
+      api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
+        tr
+      }) => {
+        if (mappedTo !== undefined) {
+          updateSelection(tr, mappedTo, moveToEnd);
         }
         return tr;
       });
-      if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-        var _api$core2;
-        api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({
-          tr
-        }) => {
-          if (mappedTo !== undefined) {
-            updateSelection(tr, mappedTo, moveToEnd);
-          }
-          return tr;
-        });
-      }
     }
   }, [api, getPos, position]);
   const hoverZoneRectStyle = useMemo(() => {

package/dist/esm/editor-commands/move-node.js

@@ -9,7 +9,7 @@ import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/tran
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment } from '@atlaskit/editor-prosemirror/model';
 import { Selection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
+import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -21,7 +21,7 @@ import { selectNode, setCursorPositionAtMovedNode } from '../pm-plugins/utils/ge
 import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
 import { getSelectedSlicePosition } from '../pm-plugins/utils/selection';
 import { getInsertLayoutStep, updateSelection } from '../pm-plugins/utils/update-selection';
-import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../pm-plugins/utils/validation';
+import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand, transformFragmentExpandToNestedExpand } from '../pm-plugins/utils/validation';
 
 /**
  * This function transforms the slice to move
@@ -82,6 +82,10 @@ var isDragLayoutColumnToTopLevel = function isDragLayoutColumnToTopLevel($from,
   var _$from$nodeAfter;
   return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.depth === 0;
 };
+var isDragLayoutColumnIntoTable = function isDragLayoutColumnIntoTable($from, $to) {
+  var _$from$nodeAfter2;
+  return ((_$from$nodeAfter2 = $from.nodeAfter) === null || _$from$nodeAfter2 === void 0 ? void 0 : _$from$nodeAfter2.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && ($to.parent.type.name === 'tableCell' || $to.parent.type.name === 'tableHeader');
+};
 
 /**
  *
@@ -370,12 +374,25 @@ export var moveNode = function moveNode(api) {
         var destType = $to.node().type;
         var destParent = $to.node($to.depth);
         var sourceNode = $handlePos.nodeAfter;
+        var dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
+        var dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
 
         //TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
         // Move a layout column to top level
-        if (sourceNode && isDragLayoutColumnToTopLevel($handlePos, $to)) {
+        // Move a layout column into a table cell, only moves the content into the cell
+        if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable)) {
           // need update after we support single column layout.
-          var fragment = Fragment.from(sourceNode.content);
+          var layoutColumnContent = sourceNode.content;
+          var fragment;
+          if (dragLayoutColumnIntoTable) {
+            var contentContainsExpand = findChildrenByType(sourceNode, expand).length > 0;
+            fragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(Fragment.from(layoutColumnContent)) : Fragment.from(layoutColumnContent);
+            if (!fragment) {
+              return tr;
+            }
+          } else {
+            fragment = Fragment.from(layoutColumnContent);
+          }
           removeFromSource(tr, $handlePos, $handlePos.pos + sourceNode.nodeSize);
           var _mappedTo = tr.mapping.map(to);
           tr.insert(_mappedTo, fragment).setSelection(Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();

package/dist/esm/editor-commands/move-to-layout.js

@@ -4,12 +4,11 @@ import { Fragment, Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { fireInsertLayoutAnalytics, attachMoveNodeAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
-import { isFragmentOfType, containsNodeOfType } from '../pm-plugins/utils/check-fragment';
+import { attachMoveNodeAnalytics, fireInsertLayoutAnalytics, getMultiSelectAnalyticsAttributes } from '../pm-plugins/utils/analytics';
+import { containsNodeOfType, isFragmentOfType } from '../pm-plugins/utils/check-fragment';
 import { maxLayoutColumnSupported } from '../pm-plugins/utils/consts';
 import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
 import { getMultiSelectionIfPosInside } from '../pm-plugins/utils/selection';
-import { updateColumnWidths } from '../pm-plugins/utils/update-column-widths';
 import { isInSameLayout } from '../pm-plugins/utils/validation';
 import { DEFAULT_COLUMN_DISTRIBUTIONS } from '../ui/consts';
 var createNewLayout = function createNewLayout(schema, layoutContents) {
@@ -64,20 +63,14 @@ var moveToExistingLayout = function moveToExistingLayout(toLayout, toLayoutPos,
     tr.delete(from, sourceContentEndPos);
     var mappedTo = tr.mapping.map(to);
     tr.insert(mappedTo, sourceContent);
-    if (!fg('platform_editor_advanced_layouts_post_fix_patch_1') || selectMovedNode) {
+    if (selectMovedNode) {
       tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
     }
     attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf === void 0 ? void 0 : _$originalFrom$nodeAf.type.name) || '', 1, 'layoutSection', true, api, sourceNodeTypes, hasSelectedMultipleNodes);
   } else if (toLayout.childCount < maxLayoutColumnSupported()) {
     var _$originalFrom$nodeAf2;
-    if (fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-      removeFromSource(tr, tr.doc.resolve(from), sourceContentEndPos);
-      insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceContent);
-    } else {
-      insertToDestination(tr, to, sourceContent, toLayout, toLayoutPos);
-      var mappedFrom = tr.mapping.map(from);
-      removeFromSource(tr, tr.doc.resolve(mappedFrom), tr.mapping.map(sourceContentEndPos));
-    }
+    removeFromSource(tr, tr.doc.resolve(from), sourceContentEndPos);
+    insertToDestinationNoWidthUpdate(tr, tr.mapping.map(to), sourceContent);
     attachMoveNodeAnalytics(tr, INPUT_METHOD.DRAG_AND_DROP, $originalFrom.depth, ((_$originalFrom$nodeAf2 = $originalFrom.nodeAfter) === null || _$originalFrom$nodeAf2 === void 0 ? void 0 : _$originalFrom$nodeAf2.type.name) || '', 1, 'layoutSection', false, api, sourceNodeTypes, hasSelectedMultipleNodes);
   }
   return tr;
@@ -122,40 +115,6 @@ var insertToDestinationNoWidthUpdate = function insertToDestinationNoWidthUpdate
   }
   return tr;
 };
-var insertToDestination = function insertToDestination(tr, to, sourceContent, toLayout, toLayoutPos) {
-  var _ref3 = updateColumnWidths(tr, toLayout, toLayoutPos, toLayout.childCount + 1) || {},
-    newColumnWidth = _ref3.newColumnWidth;
-  var _ref4 = tr.doc.type.schema.nodes || {},
-    layoutColumn = _ref4.layoutColumn;
-  var content = null;
-  try {
-    if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
-      if (sourceContent instanceof Fragment) {
-        var _sourceContent$firstC;
-        content = layoutColumn.createChecked({
-          width: newColumnWidth
-        }, isFragmentOfType(sourceContent, 'layoutColumn') ? (_sourceContent$firstC = sourceContent.firstChild) === null || _sourceContent$firstC === void 0 ? void 0 : _sourceContent$firstC.content : sourceContent);
-      }
-    } else {
-      if (sourceContent instanceof PMNode) {
-        content = layoutColumn.createChecked({
-          width: newColumnWidth
-        }, sourceContent.type.name === 'layoutColumn' ? sourceContent.content : sourceContent);
-      }
-    }
-  } catch (error) {
-    logException(error, {
-      location: 'editor-plugin-block-controls/move-to-layout'
-    });
-  }
-  if (content) {
-    tr.insert(to, content);
-  }
-  if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-    tr.setSelection(new NodeSelection(tr.doc.resolve(to))).scrollIntoView();
-  }
-  return tr;
-};
 
 /**
  * Check if the node at `from` can be moved to node at `to` to create/expand a layout.
@@ -165,10 +124,10 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCurs
   if (from === to) {
     return;
   }
-  var _ref5 = tr.doc.type.schema.nodes || {},
-    layoutSection = _ref5.layoutSection,
-    layoutColumn = _ref5.layoutColumn,
-    doc = _ref5.doc;
+  var _ref3 = tr.doc.type.schema.nodes || {},
+    layoutSection = _ref3.layoutSection,
+    layoutColumn = _ref3.layoutColumn,
+    doc = _ref3.doc;
 
   // layout plugin does not exist
   if (!layoutSection || !layoutColumn) {
@@ -218,8 +177,8 @@ var canMoveToLayout = function canMoveToLayout(api, from, to, tr, moveNodeAtCurs
 };
 var removeBreakoutMarks = function removeBreakoutMarks(tr, $from, to) {
   var fromContentWithoutBreakout = $from.nodeAfter;
-  var _ref6 = tr.doc.type.schema.marks || {},
-    breakout = _ref6.breakout;
+  var _ref4 = tr.doc.type.schema.marks || {},
+    breakout = _ref4.breakout;
   if (editorExperiment('platform_editor_element_drag_and_drop_multiselect', true)) {
     tr.doc.nodesBetween($from.pos, to, function (node, pos, parent) {
       // breakout doesn't exist on nested nodes
@@ -282,8 +241,8 @@ var getBreakoutMode = function getBreakoutMode(content, breakout) {
 // source content variable that has type of `PMNode | Fragment` should be updated to `Fragment` only
 export var moveToLayout = function moveToLayout(api) {
   return function (from, to, options) {
-    return function (_ref7) {
-      var tr = _ref7.tr;
+    return function (_ref5) {
+      var tr = _ref5.tr;
       if (!api) {
         return tr;
       }
@@ -296,11 +255,11 @@ export var moveToLayout = function moveToLayout(api) {
         sourceContent = canMove.sourceContent,
         $sourceFrom = canMove.$sourceFrom,
         sourceTo = canMove.sourceTo;
-      var _ref8 = tr.doc.type.schema.nodes || {},
-        layoutSection = _ref8.layoutSection,
-        layoutColumn = _ref8.layoutColumn;
-      var _ref9 = tr.doc.type.schema.marks || {},
-        breakout = _ref9.breakout;
+      var _ref6 = tr.doc.type.schema.nodes || {},
+        layoutSection = _ref6.layoutSection,
+        layoutColumn = _ref6.layoutColumn;
+      var _ref7 = tr.doc.type.schema.marks || {},
+        breakout = _ref7.breakout;
 
       // get breakout mode from destination node,
       // if not found, get from source node,
@@ -358,9 +317,6 @@ export var moveToLayout = function moveToLayout(api) {
           tr = removeFromSource(tr, $sourceFrom, sourceTo);
           var mappedTo = tr.mapping.map(to);
           tr.delete(mappedTo, mappedTo + toNodeWithoutBreakout.nodeSize).insert(mappedTo, newLayout);
-          if (!fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
-            tr.setSelection(new NodeSelection(tr.doc.resolve(mappedTo))).scrollIntoView();
-          }
           breakoutMode && tr.setNodeMarkup(mappedTo, newLayout.type, newLayout.attrs, [breakout.create({
             mode: breakoutMode
           })]);

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -40,7 +40,7 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
     }
     var parentElement = (_rootElement$parentEl = rootElement.parentElement) === null || _rootElement$parentEl === void 0 ? void 0 : _rootElement$parentEl.closest('[data-drag-handler-anchor-name]');
     var parentElementType = parentElement === null || parentElement === void 0 ? void 0 : parentElement.getAttribute('data-drag-handler-node-type');
-    if (editorExperiment('advanced_layouts', true) && fg('platform_editor_advanced_layouts_post_fix_patch_1')) {
+    if (editorExperiment('advanced_layouts', true)) {
       // We want to exclude handles from showing for direct descendant of table nodes (i.e. nodes in cells)
       if (parentElement && (parentElementType === 'table' || parentElementType === 'tableRow') && editorExperiment('nested-dnd', true)) {
         rootElement = parentElement;