@atlaskit/editor-plugin-block-controls 3.8.1 → 3.8.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 3.8.2
+
+### Patch Changes
+
+- [#135614](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135614)
+  [`ed711343dbd01`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ed711343dbd01) -
+  ED-27111: Dnd layout column into panel
+- Updated dependencies
+
 ## 3.8.1
 
 ### Patch Changes

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

@@ -92,6 +92,10 @@ var isDragLayoutColumnIntoTable = function isDragLayoutColumnIntoTable($from, $t
   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');
 };
+var isDragLayoutColumnIntoPanel = function isDragLayoutColumnIntoPanel($from, $to) {
+  var _$from$nodeAfter3;
+  return ((_$from$nodeAfter3 = $from.nodeAfter) === null || _$from$nodeAfter3 === void 0 ? void 0 : _$from$nodeAfter3.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.parent.type.name === 'panel';
+};
 
 /**
  *
@@ -387,11 +391,13 @@ var moveNode = exports.moveNode = function moveNode(api) {
         var sourceNode = $handlePos.nodeAfter;
         var dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
         var dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
+        var dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
 
         //TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
         // Move a layout column to top level
         // Move a layout column into a table cell, only moves the content into the cell
-        if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable)) {
+        // Move a layout column into a panel, only moves the content into the panel
+        if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable || dragLayoutColumnIntoPanel)) {
           // need update after we support single column layout.
           var layoutColumnContent = sourceNode.content;
           var fragment;

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

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.canCreateNodeWithContentInsideAnotherNode = void 0;
 exports.canMoveNodeToIndex = canMoveNodeToIndex;
 exports.canMoveSliceToIndex = canMoveSliceToIndex;
 exports.transformSliceExpandToNestedExpand = exports.transformFragmentExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isInSameLayout = exports.isExpand = exports.isDoc = void 0;
@@ -87,69 +88,75 @@ var memoizedTransformExpandToNestedExpand = exports.memoizedTransformExpandToNes
     return null;
   }
 });
+var canCreateNodeWithContentInsideAnotherNode = exports.canCreateNodeWithContentInsideAnotherNode = function canCreateNodeWithContentInsideAnotherNode(nodeTypesToCreate, nodeWithTargetFragment) {
+  try {
+    return !!nodeTypesToCreate.every(function (nodeType) {
+      return nodeType.createChecked({}, nodeWithTargetFragment);
+    });
+  } catch (e) {
+    return false;
+  }
+};
 function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos, destNode) {
   var srcNodeType = srcNode.type;
-  var parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
+  var schema = srcNodeType.schema;
+  var destParentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
   var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
+  var layoutColumnContent = srcNode.content;
   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;
+  var tableNodeType = schema.nodes.table;
   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') {
+    if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || destParentNodeType === '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;
+    if ((0, _platformFeatureFlags.fg)('platform_editor_drag_layout_column_into_nodes')) {
+      if (destParentNodeType === 'tableCell' || destParentNodeType === 'tableHeader') {
+        var _schema$nodes = schema.nodes,
+          tableCell = _schema$nodes.tableCell,
+          tableHeader = _schema$nodes.tableHeader,
+          expand = _schema$nodes.expand;
+        var contentContainsExpand = (0, _utils.findChildrenByType)(srcNode, expand).length > 0;
+        //convert expand to nestedExpand if there are expands inside the layout column
+        // otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
+        var convertedFragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(layoutColumnContent) : layoutColumnContent;
+        if (!convertedFragment) {
+          return false;
+        }
+        return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
       }
-
-      // 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;
+      if (destParentNodeType === 'panel') {
+        var panel = schema.nodes.panel;
+        return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
       }
     }
   }
 
   // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
   if ((0, _experiments.editorExperiment)('nested-expand-in-expand', false)) {
-    if (parentNodeType === 'expand' && (activeNodeType === 'expand' || activeNodeType === 'nestedExpand')) {
+    if (destParentNodeType === 'expand' && (activeNodeType === 'expand' || activeNodeType === 'nestedExpand')) {
       return false;
     }
   }
 
   // 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)(tableNodeType)($destNodePos);
-    if (!isNestingTablesSupported || isNestingTablesSupported && _nestingDepth > 1) {
+  if ((destParentNodeType === 'tableCell' || destParentNodeType === 'tableHeader') && activeNodeType === 'table') {
+    var nestingDepth = (0, _nesting.getParentOfTypeCount)(tableNodeType)($destNodePos);
+    if (!isNestingTablesSupported || isNestingTablesSupported && nestingDepth > 1) {
       return false;
     }
   }
   if (isInsideTable(destParent.type) && isExpand(srcNodeType)) {
     if (memoizedTransformExpandToNestedExpand(srcNode)) {
-      srcNodeType = srcNodeType.schema.nodes.nestedExpand;
+      srcNodeType = schema.nodes.nestedExpand;
     } else {
       return false;
     }
   } else if ((isDoc(destParent.type) || isLayoutColumn(destParent.type)) && isNestedExpand(srcNodeType)) {
-    srcNodeType = srcNodeType.schema.nodes.expand;
+    srcNodeType = schema.nodes.expand;
   }
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }

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

@@ -246,7 +246,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
         }
       }
     }
-    (_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', true);
   }, [api, getPos, view]);
   var handleMouseDown = (0, _react.useCallback)(function () {
     var _api$typeAhead;

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

@@ -85,6 +85,10 @@ 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');
 };
+const isDragLayoutColumnIntoPanel = ($from, $to) => {
+  var _$from$nodeAfter3;
+  return ((_$from$nodeAfter3 = $from.nodeAfter) === null || _$from$nodeAfter3 === void 0 ? void 0 : _$from$nodeAfter3.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.parent.type.name === 'panel';
+};
 
 /**
  *
@@ -390,11 +394,13 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
     const sourceNode = $handlePos.nodeAfter;
     const dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
     const dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
+    const dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
 
     //TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
     // Move a layout column to top level
     // Move a layout column into a table cell, only moves the content into the cell
-    if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable)) {
+    // Move a layout column into a panel, only moves the content into the panel
+    if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable || dragLayoutColumnIntoPanel)) {
       // need update after we support single column layout.
       const layoutColumnContent = sourceNode.content;
       let fragment;

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

@@ -80,54 +80,63 @@ export const memoizedTransformExpandToNestedExpand = memoizeOne(node => {
     return null;
   }
 });
+export const canCreateNodeWithContentInsideAnotherNode = (nodeTypesToCreate, nodeWithTargetFragment) => {
+  try {
+    return !!nodeTypesToCreate.every(nodeType => nodeType.createChecked({}, nodeWithTargetFragment));
+  } catch (e) {
+    return false;
+  }
+};
 export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos, destNode) {
   let srcNodeType = srcNode.type;
-  const parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
+  const schema = srcNodeType.schema;
+  const destParentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
   const activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
+  const layoutColumnContent = srcNode.content;
   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;
+  const tableNodeType = schema.nodes.table;
   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') {
+    if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || destParentNodeType === '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;
+    if (fg('platform_editor_drag_layout_column_into_nodes')) {
+      if (destParentNodeType === 'tableCell' || destParentNodeType === 'tableHeader') {
+        const {
+          tableCell,
+          tableHeader,
+          expand
+        } = schema.nodes;
+        const contentContainsExpand = findChildrenByType(srcNode, expand).length > 0;
+        //convert expand to nestedExpand if there are expands inside the layout column
+        // otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
+        const convertedFragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(layoutColumnContent) : layoutColumnContent;
+        if (!convertedFragment) {
+          return false;
+        }
+        return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
       }
-
-      // 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;
+      if (destParentNodeType === 'panel') {
+        const {
+          panel
+        } = schema.nodes;
+        return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
       }
     }
   }
 
   // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
   if (editorExperiment('nested-expand-in-expand', false)) {
-    if (parentNodeType === 'expand' && (activeNodeType === 'expand' || activeNodeType === 'nestedExpand')) {
+    if (destParentNodeType === 'expand' && (activeNodeType === 'expand' || activeNodeType === 'nestedExpand')) {
       return false;
     }
   }
 
   // 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') {
+  if ((destParentNodeType === 'tableCell' || destParentNodeType === 'tableHeader') && activeNodeType === 'table') {
     const nestingDepth = getParentOfTypeCount(tableNodeType)($destNodePos);
     if (!isNestingTablesSupported || isNestingTablesSupported && nestingDepth > 1) {
       return false;
@@ -135,12 +144,12 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
   }
   if (isInsideTable(destParent.type) && isExpand(srcNodeType)) {
     if (memoizedTransformExpandToNestedExpand(srcNode)) {
-      srcNodeType = srcNodeType.schema.nodes.nestedExpand;
+      srcNodeType = schema.nodes.nestedExpand;
     } else {
       return false;
     }
   } else if ((isDoc(destParent.type) || isLayoutColumn(destParent.type)) && isNestedExpand(srcNodeType)) {
-    srcNodeType = srcNodeType.schema.nodes.expand;
+    srcNodeType = schema.nodes.expand;
   }
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }

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

@@ -232,7 +232,7 @@ export const TypeAheadControl = ({
         }
       }
     }
-    (_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', true);
   }, [api, getPos, view]);
   const handleMouseDown = useCallback(() => {
     var _api$typeAhead;

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

@@ -86,6 +86,10 @@ var isDragLayoutColumnIntoTable = function isDragLayoutColumnIntoTable($from, $t
   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');
 };
+var isDragLayoutColumnIntoPanel = function isDragLayoutColumnIntoPanel($from, $to) {
+  var _$from$nodeAfter3;
+  return ((_$from$nodeAfter3 = $from.nodeAfter) === null || _$from$nodeAfter3 === void 0 ? void 0 : _$from$nodeAfter3.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.parent.type.name === 'panel';
+};
 
 /**
  *
@@ -381,11 +385,13 @@ export var moveNode = function moveNode(api) {
         var sourceNode = $handlePos.nodeAfter;
         var dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
         var dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
+        var dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
 
         //TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
         // Move a layout column to top level
         // Move a layout column into a table cell, only moves the content into the cell
-        if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable)) {
+        // Move a layout column into a panel, only moves the content into the panel
+        if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable || dragLayoutColumnIntoPanel)) {
           // need update after we support single column layout.
           var layoutColumnContent = sourceNode.content;
           var fragment;

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

@@ -78,69 +78,75 @@ export var memoizedTransformExpandToNestedExpand = memoizeOne(function (node) {
     return null;
   }
 });
+export var canCreateNodeWithContentInsideAnotherNode = function canCreateNodeWithContentInsideAnotherNode(nodeTypesToCreate, nodeWithTargetFragment) {
+  try {
+    return !!nodeTypesToCreate.every(function (nodeType) {
+      return nodeType.createChecked({}, nodeWithTargetFragment);
+    });
+  } catch (e) {
+    return false;
+  }
+};
 export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos, destNode) {
   var srcNodeType = srcNode.type;
-  var parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
+  var schema = srcNodeType.schema;
+  var destParentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
   var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
+  var layoutColumnContent = srcNode.content;
   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;
+  var tableNodeType = schema.nodes.table;
   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') {
+    if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || destParentNodeType === '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;
+    if (fg('platform_editor_drag_layout_column_into_nodes')) {
+      if (destParentNodeType === 'tableCell' || destParentNodeType === 'tableHeader') {
+        var _schema$nodes = schema.nodes,
+          tableCell = _schema$nodes.tableCell,
+          tableHeader = _schema$nodes.tableHeader,
+          expand = _schema$nodes.expand;
+        var contentContainsExpand = findChildrenByType(srcNode, expand).length > 0;
+        //convert expand to nestedExpand if there are expands inside the layout column
+        // otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
+        var convertedFragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(layoutColumnContent) : layoutColumnContent;
+        if (!convertedFragment) {
+          return false;
+        }
+        return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
       }
-
-      // 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;
+      if (destParentNodeType === 'panel') {
+        var panel = schema.nodes.panel;
+        return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
       }
     }
   }
 
   // Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
   if (editorExperiment('nested-expand-in-expand', false)) {
-    if (parentNodeType === 'expand' && (activeNodeType === 'expand' || activeNodeType === 'nestedExpand')) {
+    if (destParentNodeType === 'expand' && (activeNodeType === 'expand' || activeNodeType === 'nestedExpand')) {
       return false;
     }
   }
 
   // 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(tableNodeType)($destNodePos);
-    if (!isNestingTablesSupported || isNestingTablesSupported && _nestingDepth > 1) {
+  if ((destParentNodeType === 'tableCell' || destParentNodeType === 'tableHeader') && activeNodeType === 'table') {
+    var nestingDepth = getParentOfTypeCount(tableNodeType)($destNodePos);
+    if (!isNestingTablesSupported || isNestingTablesSupported && nestingDepth > 1) {
       return false;
     }
   }
   if (isInsideTable(destParent.type) && isExpand(srcNodeType)) {
     if (memoizedTransformExpandToNestedExpand(srcNode)) {
-      srcNodeType = srcNodeType.schema.nodes.nestedExpand;
+      srcNodeType = schema.nodes.nestedExpand;
     } else {
       return false;
     }
   } else if ((isDoc(destParent.type) || isLayoutColumn(destParent.type)) && isNestedExpand(srcNodeType)) {
-    srcNodeType = srcNodeType.schema.nodes.expand;
+    srcNodeType = schema.nodes.expand;
   }
   return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
 }

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

@@ -236,7 +236,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
         }
       }
     }
-    (_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', true);
   }, [api, getPos, view]);
   var handleMouseDown = useCallback(function () {
     var _api$typeAhead;

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

@@ -17,5 +17,6 @@ export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNo
 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 const canCreateNodeWithContentInsideAnotherNode: (nodeTypesToCreate: NodeType[], nodeWithTargetFragment: Fragment) => boolean;
 export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
 export declare function canMoveSliceToIndex(slice: Slice, sliceFromPos: number, sliceToPos: number, destParent: PMNode, indexIntoParent: number, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;

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

@@ -17,5 +17,6 @@ export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNo
 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 const canCreateNodeWithContentInsideAnotherNode: (nodeTypesToCreate: NodeType[], nodeWithTargetFragment: Fragment) => boolean;
 export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
 export declare function canMoveSliceToIndex(slice: Slice, sliceFromPos: number, sliceToPos: number, destParent: PMNode, indexIntoParent: number, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "3.8.1",
+	"version": "3.8.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",