@atlaskit/editor-plugin-block-controls 3.3.13 → 3.3.15

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.3.15
+
+### Patch Changes
+
+- [#127338](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/127338)
+  [`2492ca26f15ad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2492ca26f15ad) -
+  Change position of quick insert tooltip to ‘top’, changed icon color of quick insert to icon,
+  matches drag handle
+- Updated dependencies
+
+## 3.3.14
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.3.13
 
 ### Patch Changes

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

@@ -88,6 +88,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');
+};
 
 /**
  *
@@ -376,12 +380,25 @@ var moveNode = exports.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 = _model.Fragment.from(sourceNode.content);
+          var layoutColumnContent = sourceNode.content;
+          var fragment;
+          if (dragLayoutColumnIntoTable) {
+            var contentContainsExpand = (0, _utils2.findChildrenByType)(sourceNode, expand).length > 0;
+            fragment = contentContainsExpand ? (0, _validation.transformFragmentExpandToNestedExpand)(_model.Fragment.from(layoutColumnContent)) : _model.Fragment.from(layoutColumnContent);
+            if (!fragment) {
+              return tr;
+            }
+          } else {
+            fragment = _model.Fragment.from(layoutColumnContent);
+          }
           (0, _removeFromSource.removeFromSource)(tr, $handlePos, $handlePos.pos + sourceNode.nodeSize);
           var _mappedTo = tr.mapping.map(to);
           tr.insert(_mappedTo, fragment).setSelection(_state.Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();

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

@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.canMoveNodeToIndex = canMoveNodeToIndex;
 exports.canMoveSliceToIndex = canMoveSliceToIndex;
-exports.transformSliceExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isInSameLayout = exports.isExpand = exports.isDoc = void 0;
+exports.transformSliceExpandToNestedExpand = exports.transformFragmentExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isInSameLayout = exports.isExpand = exports.isDoc = void 0;
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _nesting = require("@atlaskit/editor-common/nesting");
 var _model = require("@atlaskit/editor-prosemirror/model");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var isInsideTable = exports.isInsideTable = function isInsideTable(nodeType) {
@@ -54,10 +55,10 @@ var transformExpandToNestedExpand = exports.transformExpandToNestedExpand = func
   }
   return null;
 };
-var transformSliceExpandToNestedExpand = exports.transformSliceExpandToNestedExpand = function transformSliceExpandToNestedExpand(slice) {
+var transformFragmentExpandToNestedExpand = exports.transformFragmentExpandToNestedExpand = function transformFragmentExpandToNestedExpand(fragment) {
   var children = [];
   try {
-    slice.content.forEach(function (node) {
+    fragment.forEach(function (node) {
       if (isExpand(node.type)) {
         var nestedExpandNode = transformExpandToNestedExpand(node);
         if (nestedExpandNode) {
@@ -70,7 +71,14 @@ var transformSliceExpandToNestedExpand = exports.transformSliceExpandToNestedExp
   } catch (e) {
     return null;
   }
-  return new _model.Slice(_model.Fragment.fromArray(children), slice.openStart, slice.openEnd);
+  return _model.Fragment.fromArray(children);
+};
+var transformSliceExpandToNestedExpand = exports.transformSliceExpandToNestedExpand = function transformSliceExpandToNestedExpand(slice) {
+  var fragment = transformFragmentExpandToNestedExpand(slice.content);
+  if (!fragment) {
+    return null;
+  }
+  return new _model.Slice(fragment, slice.openStart, slice.openEnd);
 };
 var memoizedTransformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = (0, _memoizeOne.default)(function (node) {
   try {
@@ -83,11 +91,40 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
   var srcNodeType = srcNode.type;
   var parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
   var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
+  var isNestingTablesSupported = (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes') && (0, _experiments.editorExperiment)('nested-tables-in-tables', true, {
+    exposure: true
+  });
+  var tableNodeType = srcNode.type.schema.nodes.table;
+  var expandNodeType = srcNode.type.schema.nodes.expand;
   if (activeNodeType === 'layoutColumn' && (0, _experiments.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') && (0, _platformFeatureFlags.fg)('platform_editor_drag_layout_column_into_nodes')) {
+      var maybeExpandNodesArray = (0, _utils.findChildrenByType)(srcNode, expandNodeType);
+      var layoutColumnContainExpand = maybeExpandNodesArray.length > 0;
+      var layoutColumnContainTable = (0, _utils.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) {
+        var nestingDepth = (0, _nesting.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) {
+        var isAnyTableNestedInExpand = maybeExpandNodesArray.some(function (result) {
+          return (0, _utils.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.
@@ -97,16 +134,11 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
     }
   }
 
-  // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
-  var isNestingTablesSupported = (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes') && (0, _experiments.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') {
-    var nestingDepth = (0, _nesting.getParentOfTypeCount)(srcNode === null || srcNode === void 0 ? void 0 : srcNode.type)($destNodePos);
-    if (!isNestingTablesSupported || isNestingTablesSupported && nestingDepth > 1) {
+    var _nestingDepth = (0, _nesting.getParentOfTypeCount)(tableNodeType)($destNodePos);
+    if (!isNestingTablesSupported || isNestingTablesSupported && _nestingDepth > 1) {
       return false;
     }
   }

package/dist/cjs/ui/quick-insert-button.js

@@ -34,7 +34,6 @@ var buttonStyles = (0, _primitives.xcss)({
   border: 'none',
   backgroundColor: 'color.background.neutral.subtle',
   borderRadius: '50%',
-  color: 'color.text.accent.gray',
   zIndex: 'card',
   outline: 'none',
   ':hover': {
@@ -163,7 +162,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
         }
       }
     }
-    api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
+    (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
   }, [api, getPos, view]);
   return (
     /*#__PURE__*/
@@ -172,6 +171,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       style: positionStyles,
       xcss: [containerStaticStyles]
     }, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+      position: "top",
       content: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {
         description: formatMessage(_messages.blockControlsMessages.insert)
       })
@@ -181,7 +181,8 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
       xcss: [buttonStyles],
       onClick: handleQuickInsert
     }, /*#__PURE__*/_react.default.createElement(_add.default, {
-      label: "add"
+      label: "add",
+      color: "var(--ds-icon, #44546F)"
     }))))
   );
 };

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

@@ -6,7 +6,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';
@@ -18,7 +18,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
@@ -81,6 +81,10 @@ const isDragLayoutColumnToTopLevel = ($from, $to) => {
   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;
 };
+const 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');
+};
 
 /**
  *
@@ -378,12 +382,25 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     const destType = $to.node().type;
     const destParent = $to.node($to.depth);
     const sourceNode = $handlePos.nodeAfter;
+    const dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
+    const 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.
-      const fragment = Fragment.from(sourceNode.content);
+      const layoutColumnContent = sourceNode.content;
+      let fragment;
+      if (dragLayoutColumnIntoTable) {
+        const 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);
       const mappedTo = tr.mapping.map(to);
       tr.insert(mappedTo, fragment).setSelection(Selection.near(tr.doc.resolve(mappedTo))).scrollIntoView();

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/quick-insert-button.js

@@ -23,7 +23,6 @@ const buttonStyles = xcss({
   border: 'none',
   backgroundColor: 'color.background.neutral.subtle',
   borderRadius: '50%',
-  color: 'color.text.accent.gray',
   zIndex: 'card',
   outline: 'none',
   ':hover': {
@@ -151,7 +150,7 @@ export const TypeAheadControl = ({
         }
       }
     }
-    api === null || api === void 0 ? void 0 : (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl');
+    (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl');
   }, [api, getPos, view]);
   return (
     /*#__PURE__*/
@@ -160,6 +159,7 @@ export const TypeAheadControl = ({
       style: positionStyles,
       xcss: [containerStaticStyles]
     }, /*#__PURE__*/React.createElement(Tooltip, {
+      position: "top",
       content: /*#__PURE__*/React.createElement(ToolTipContent, {
         description: formatMessage(messages.insert)
       })
@@ -169,7 +169,8 @@ export const TypeAheadControl = ({
       xcss: [buttonStyles],
       onClick: handleQuickInsert
     }, /*#__PURE__*/React.createElement(AddIcon, {
-      label: "add"
+      label: "add",
+      color: "var(--ds-icon, #44546F)"
     }))))
   );
 };

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/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 var isInsideTable = function isInsideTable(nodeType) {
@@ -45,10 +46,10 @@ export var transformExpandToNestedExpand = function transformExpandToNestedExpan
   }
   return null;
 };
-export var transformSliceExpandToNestedExpand = function transformSliceExpandToNestedExpand(slice) {
+export var transformFragmentExpandToNestedExpand = function transformFragmentExpandToNestedExpand(fragment) {
   var children = [];
   try {
-    slice.content.forEach(function (node) {
+    fragment.forEach(function (node) {
       if (isExpand(node.type)) {
         var nestedExpandNode = transformExpandToNestedExpand(node);
         if (nestedExpandNode) {
@@ -61,7 +62,14 @@ export var transformSliceExpandToNestedExpand = function transformSliceExpandToN
   } catch (e) {
     return null;
   }
-  return new Slice(Fragment.fromArray(children), slice.openStart, slice.openEnd);
+  return Fragment.fromArray(children);
+};
+export var transformSliceExpandToNestedExpand = function transformSliceExpandToNestedExpand(slice) {
+  var fragment = transformFragmentExpandToNestedExpand(slice.content);
+  if (!fragment) {
+    return null;
+  }
+  return new Slice(fragment, slice.openStart, slice.openEnd);
 };
 export var memoizedTransformExpandToNestedExpand = memoizeOne(function (node) {
   try {
@@ -74,11 +82,40 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
   var srcNodeType = srcNode.type;
   var parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
   var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
+  var isNestingTablesSupported = fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
+    exposure: true
+  });
+  var tableNodeType = srcNode.type.schema.nodes.table;
+  var 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')) {
+      var maybeExpandNodesArray = findChildrenByType(srcNode, expandNodeType);
+      var layoutColumnContainExpand = maybeExpandNodesArray.length > 0;
+      var 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) {
+        var 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) {
+        var isAnyTableNestedInExpand = maybeExpandNodesArray.some(function (result) {
+          return 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.
@@ -88,16 +125,11 @@ 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.
-  var 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') {
-    var nestingDepth = getParentOfTypeCount(srcNode === null || srcNode === void 0 ? void 0 : srcNode.type)($destNodePos);
-    if (!isNestingTablesSupported || isNestingTablesSupported && nestingDepth > 1) {
+    var _nestingDepth = getParentOfTypeCount(tableNodeType)($destNodePos);
+    if (!isNestingTablesSupported || isNestingTablesSupported && _nestingDepth > 1) {
       return false;
     }
   }

package/dist/esm/ui/quick-insert-button.js

@@ -24,7 +24,6 @@ var buttonStyles = xcss({
   border: 'none',
   backgroundColor: 'color.background.neutral.subtle',
   borderRadius: '50%',
-  color: 'color.text.accent.gray',
   zIndex: 'card',
   outline: 'none',
   ':hover': {
@@ -153,7 +152,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
         }
       }
     }
-    api === null || api === void 0 || (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
+    (_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl');
   }, [api, getPos, view]);
   return (
     /*#__PURE__*/
@@ -162,6 +161,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       style: positionStyles,
       xcss: [containerStaticStyles]
     }, /*#__PURE__*/React.createElement(Tooltip, {
+      position: "top",
       content: /*#__PURE__*/React.createElement(ToolTipContent, {
         description: formatMessage(messages.insert)
       })
@@ -171,7 +171,8 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       xcss: [buttonStyles],
       onClick: handleQuickInsert
     }, /*#__PURE__*/React.createElement(AddIcon, {
-      label: "add"
+      label: "add",
+      color: "var(--ds-icon, #44546F)"
     }))))
   );
 };

package/dist/types/pm-plugins/utils/validation.d.ts

@@ -1,4 +1,4 @@
-import { Slice } from '@atlaskit/editor-prosemirror/model';
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import type { NodeType, Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 export declare const isInsideTable: (nodeType: NodeType) => Boolean;
 export declare const isLayoutColumn: (nodeType: NodeType) => Boolean;
@@ -14,6 +14,7 @@ export declare const isInSameLayout: ($from: ResolvedPos, $to: ResolvedPos) => b
  * @throws RangeError: Invalid content for node nestedExpand
  */
 export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNode | null;
+export declare const transformFragmentExpandToNestedExpand: (fragment: Fragment) => Fragment | null;
 export declare const transformSliceExpandToNestedExpand: (slice: Slice) => Slice | null;
 export declare const memoizedTransformExpandToNestedExpand: import("memoize-one").MemoizedFn<(node: PMNode) => PMNode | null>;
 export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;

package/dist/types-ts4.5/pm-plugins/utils/validation.d.ts

@@ -1,4 +1,4 @@
-import { Slice } from '@atlaskit/editor-prosemirror/model';
+import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import type { NodeType, Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
 export declare const isInsideTable: (nodeType: NodeType) => Boolean;
 export declare const isLayoutColumn: (nodeType: NodeType) => Boolean;
@@ -14,6 +14,7 @@ export declare const isInSameLayout: ($from: ResolvedPos, $to: ResolvedPos) => b
  * @throws RangeError: Invalid content for node nestedExpand
  */
 export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNode | null;
+export declare const transformFragmentExpandToNestedExpand: (fragment: Fragment) => Fragment | null;
 export declare const transformSliceExpandToNestedExpand: (slice: Slice) => Slice | null;
 export declare const memoizedTransformExpandToNestedExpand: import("memoize-one").MemoizedFn<(node: PMNode) => PMNode | null>;
 export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.3.13",
+	"version": "3.3.15",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -33,7 +33,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.7.0",
+		"@atlaskit/editor-common": "^102.9.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
 		"@atlaskit/primitives": "^14.1.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.6.0",
+		"@atlaskit/tmp-editor-statsig": "^4.1.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -166,6 +166,9 @@
 		},
 		"platform_editor_remove_drag_handle_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_drag_layout_column_into_nodes": {
+			"type": "boolean"
 		}
 	}
 }