@atlaskit/editor-plugin-expand 2.7.0 → 2.7.2

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-expand
 
+## 2.7.2
+
+### Patch Changes
+
+- [#141778](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141778)
+  [`1c6f578277694`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1c6f578277694) -
+  ED-24870 & ED-24864 - Add the logic to gate the nested media in quotes functionality behind the
+  nest-media-and-codeblock-in-quote experiment. Also adjust the logic so the nested expands are now
+  behind the nested-expand-in-expand experiment.
+
+## 2.7.1
+
+### Patch Changes
+
+- [#142108](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/142108)
+  [`a1776d86877fe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a1776d86877fe) -
+  ED-24864 ED-24931 Add logic to handle dragging expands inside and outside of eachother, converting
+  them to and from nested expands when required. Also add experiment gating for nested-dnd.
+
 ## 2.7.0
 
 ### Minor Changes

package/dist/cjs/legacyExpand/pm-plugins/main.js

@@ -6,12 +6,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.containsClass = containsClass;
 exports.createPlugin = void 0;
-exports.handleDraggingOfNestedExpand = handleDraggingOfNestedExpand;
+exports.handleExpandDrag = handleExpandDrag;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _commands = require("../commands");
 var _nodeviews = _interopRequireDefault(require("../nodeviews"));
 var _utils2 = require("../utils");
@@ -64,7 +65,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
       }),
       handleDrop: function handleDrop(view, event, slice, moved) {
         if ((0, _platformFeatureFlags.fg)('platform_editor_nest_nested_expand_drag_fix')) {
-          return handleDraggingOfNestedExpand(view, event, slice);
+          return handleExpandDrag(view, event, slice);
         }
         return false;
       }
@@ -96,20 +97,28 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
 };
 
 /**
- * As the nestedExpand node is not supported outside of the expand node, it must be converted to an expand node when dragged outside of the expand node.
+ * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */
-function handleDraggingOfNestedExpand(view, event, slice) {
-  var _slice$content$firstC;
+function handleExpandDrag(view, event, slice) {
   var state = view.state,
     dispatch = view.dispatch;
   var tr = state.tr;
   var selection = state.selection;
   var from = selection.from,
     to = selection.to;
-  var supportedDropLocations = [state.schema.nodes.doc, state.schema.nodes.layoutSection, state.schema.nodes.layoutColumn];
+  var sliceContainsExpand = false;
+  var sliceContainsNestedExpand = false;
+  slice.content.forEach(function (node) {
+    if (node.type === state.schema.nodes.expand) {
+      sliceContainsExpand = true;
+    } else if (node.type === state.schema.nodes.nestedExpand) {
+      sliceContainsNestedExpand = true;
+    }
+  });
 
-  // Check if the contents of the dragged slice contain a nested expand node.
-  if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type) !== state.schema.nodes.nestedExpand) {
+  // Check if the contents of the dragged slice contain a nested expand node or expand node.
+  // Also not handling expands with nested expands for now.
+  if (!sliceContainsExpand && !sliceContainsNestedExpand || sliceContainsExpand && sliceContainsNestedExpand) {
     return false;
   }
   var dropPos = view.posAtCoords({
@@ -120,22 +129,34 @@ function handleDraggingOfNestedExpand(view, event, slice) {
     return false;
   }
   var resolvedPos = state.doc.resolve(dropPos.pos);
-
-  // If not dropping into the root of the document, check if the parent node type of the drop location is supported.
-  if (resolvedPos.depth > 1) {
-    var parentNodeType = resolvedPos.node(resolvedPos.depth - 1).type;
-    // If you're not dropping into a doc or layoutSection, don't transform the nested expand, return false and allow default behaviour.
-    if (!supportedDropLocations.includes(parentNodeType)) {
-      return false;
+  var dropLocationNodeType = resolvedPos.node().type;
+  var dropLocationParentNodeType = resolvedPos.depth > 0 ? resolvedPos.node(resolvedPos.depth - 1).type : dropLocationNodeType;
+  var nodesWithNestedExpandSupport = [state.schema.nodes.expand, state.schema.nodes.tableHeader, state.schema.nodes.tableCell];
+  var isNodeAtDropPosInsideNodesWithNestedExpandSupport = nodesWithNestedExpandSupport.includes(dropLocationNodeType) || nodesWithNestedExpandSupport.includes(dropLocationParentNodeType);
+  if ((0, _experiments.editorExperiment)('nested-expand-in-expand', false)) {
+    if ((sliceContainsExpand || sliceContainsNestedExpand) && (dropLocationNodeType === state.schema.nodes.expand || dropLocationParentNodeType === state.schema.nodes.expand)) {
+      event.preventDefault();
+      return true;
     }
   }
-  var updatedSlice = (0, _utils2.transformSliceNestedExpandToExpand)(slice, state.schema);
-  if (updatedSlice.eq(slice)) {
+  var updatedSlice = slice;
+  if (sliceContainsExpand && isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = (0, _utils2.transformSliceExpandToNestedExpand)(slice);
+  } else if (sliceContainsNestedExpand && !isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = (0, _utils2.transformSliceNestedExpandToExpand)(slice, state.schema);
+  }
+  if (!updatedSlice || updatedSlice.eq(slice)) {
     return false;
   }
 
   // The drop position will be affected when the original slice is deleted from the document.
   var updatedDropPos = dropPos.pos > from ? dropPos.pos - updatedSlice.content.size : dropPos.pos;
+
+  // Adjust the drop position to place the slice before the node at the position the cursor is pointing at, except when the drop location is the document node.
+  // Otherwise causes weird behaviour with tables & quotes, splits them apart. Only do this for nested expand slice transformed to expand.
+  if (dropLocationNodeType !== state.schema.nodes.doc && !sliceContainsExpand) {
+    updatedDropPos = updatedDropPos - 1;
+  }
   tr.delete(from, to);
   tr.insert(updatedDropPos, updatedSlice.content);
   dispatch(tr);

package/dist/cjs/legacyExpand/utils.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "findExpand", {
     return _transforms.findExpand;
   }
 });
+Object.defineProperty(exports, "transformSliceExpandToNestedExpand", {
+  enumerable: true,
+  get: function get() {
+    return _transforms.transformSliceExpandToNestedExpand;
+  }
+});
 Object.defineProperty(exports, "transformSliceNestedExpandToExpand", {
   enumerable: true,
   get: function get() {

package/dist/cjs/singlePlayerExpand/pm-plugins/main.js

@@ -6,13 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.containsClass = containsClass;
 exports.createPlugin = void 0;
-exports.handleDraggingOfNestedExpand = handleDraggingOfNestedExpand;
+exports.handleExpandDrag = handleExpandDrag;
 exports.pluginKey = void 0;
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
 var _styles = require("@atlaskit/editor-common/styles");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _nodeViews = _interopRequireDefault(require("../node-views"));
 var _utils = require("../utils");
 var pluginKey = exports.pluginKey = new _state.PluginKey('expandPlugin');
@@ -62,7 +63,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
       }),
       handleDrop: function handleDrop(view, event, slice, moved) {
         if ((0, _platformFeatureFlags.fg)('platform_editor_nest_nested_expand_drag_fix')) {
-          return handleDraggingOfNestedExpand(view, event, slice);
+          return handleExpandDrag(view, event, slice);
         }
         return false;
       }
@@ -78,20 +79,28 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, getInt
 };
 
 /**
- * As the nestedExpand node is not supported outside of the expand node, it must be converted to an expand node when dragged outside of the expand node.
+ * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */
-function handleDraggingOfNestedExpand(view, event, slice) {
-  var _slice$content$firstC;
+function handleExpandDrag(view, event, slice) {
   var state = view.state,
     dispatch = view.dispatch;
   var tr = state.tr;
   var selection = state.selection;
   var from = selection.from,
     to = selection.to;
-  var supportedDropLocations = [state.schema.nodes.doc, state.schema.nodes.layoutSection, state.schema.nodes.layoutColumn];
+  var sliceContainsExpand = false;
+  var sliceContainsNestedExpand = false;
+  slice.content.forEach(function (node) {
+    if (node.type === state.schema.nodes.expand) {
+      sliceContainsExpand = true;
+    } else if (node.type === state.schema.nodes.nestedExpand) {
+      sliceContainsNestedExpand = true;
+    }
+  });
 
-  // Check if the contents of the dragged slice contain a nested expand node.
-  if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type) !== state.schema.nodes.nestedExpand) {
+  // Check if the contents of the dragged slice contain a nested expand node or expand node.
+  // Also not handling expands with nested expands for now.
+  if (!sliceContainsExpand && !sliceContainsNestedExpand || sliceContainsExpand && sliceContainsNestedExpand) {
     return false;
   }
   var dropPos = view.posAtCoords({
@@ -102,22 +111,34 @@ function handleDraggingOfNestedExpand(view, event, slice) {
     return false;
   }
   var resolvedPos = state.doc.resolve(dropPos.pos);
-
-  // If not dropping into the root of the document, check if the parent node type of the drop location is supported.
-  if (resolvedPos.depth > 1) {
-    var parentNodeType = resolvedPos.node(resolvedPos.depth - 1).type;
-    // If you're not dropping into a doc or layoutSection, don't transform the nested expand, return false and allow default behaviour.
-    if (!supportedDropLocations.includes(parentNodeType)) {
-      return false;
+  var dropLocationNodeType = resolvedPos.node().type;
+  var dropLocationParentNodeType = resolvedPos.depth > 0 ? resolvedPos.node(resolvedPos.depth - 1).type : dropLocationNodeType;
+  var nodesWithNestedExpandSupport = [state.schema.nodes.expand, state.schema.nodes.tableHeader, state.schema.nodes.tableCell];
+  var isNodeAtDropPosInsideNodesWithNestedExpandSupport = nodesWithNestedExpandSupport.includes(dropLocationNodeType) || nodesWithNestedExpandSupport.includes(dropLocationParentNodeType);
+  if ((0, _experiments.editorExperiment)('nested-expand-in-expand', false)) {
+    if ((sliceContainsExpand || sliceContainsNestedExpand) && (dropLocationNodeType === state.schema.nodes.expand || dropLocationParentNodeType === state.schema.nodes.expand)) {
+      event.preventDefault();
+      return true;
     }
   }
-  var updatedSlice = (0, _utils.transformSliceNestedExpandToExpand)(slice, state.schema);
-  if (updatedSlice.eq(slice)) {
+  var updatedSlice = slice;
+  if (sliceContainsExpand && isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = (0, _utils.transformSliceExpandToNestedExpand)(slice);
+  } else if (sliceContainsNestedExpand && !isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = (0, _utils.transformSliceNestedExpandToExpand)(slice, state.schema);
+  }
+  if (!updatedSlice || updatedSlice.eq(slice)) {
     return false;
   }
 
   // The drop position will be affected when the original slice is deleted from the document.
   var updatedDropPos = dropPos.pos > from ? dropPos.pos - updatedSlice.content.size : dropPos.pos;
+
+  // Adjust the drop position to place the slice before the node at the position the cursor is pointing at, except when the drop location is the document node.
+  // Otherwise causes weird behaviour with tables & quotes, splits them apart. Only do this for nested expand slice transformed to expand.
+  if (dropLocationNodeType !== state.schema.nodes.doc && !sliceContainsExpand) {
+    updatedDropPos = updatedDropPos - 1;
+  }
   tr.delete(from, to);
   tr.insert(updatedDropPos, updatedSlice.content);
   dispatch(tr);

package/dist/cjs/singlePlayerExpand/utils.js

@@ -10,6 +10,12 @@ Object.defineProperty(exports, "findExpand", {
   }
 });
 exports.findParentExpandNode = void 0;
+Object.defineProperty(exports, "transformSliceExpandToNestedExpand", {
+  enumerable: true,
+  get: function get() {
+    return _transforms.transformSliceExpandToNestedExpand;
+  }
+});
 Object.defineProperty(exports, "transformSliceNestedExpandToExpand", {
   enumerable: true,
   get: function get() {

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

@@ -3,9 +3,10 @@ import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setExpandRef } from '../commands';
 import ExpandNodeView from '../nodeviews';
-import { findExpand, transformSliceNestedExpandToExpand } from '../utils';
+import { findExpand, transformSliceExpandToNestedExpand, transformSliceNestedExpandToExpand } from '../utils';
 import { createPluginState, getPluginState, pluginKey } from './plugin-factory';
 export function containsClass(element, className) {
   var _element$classList;
@@ -48,7 +49,7 @@ export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLon
       }),
       handleDrop(view, event, slice, moved) {
         if (fg('platform_editor_nest_nested_expand_drag_fix')) {
-          return handleDraggingOfNestedExpand(view, event, slice);
+          return handleExpandDrag(view, event, slice);
         }
         return false;
       }
@@ -82,10 +83,9 @@ export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLon
 };
 
 /**
- * As the nestedExpand node is not supported outside of the expand node, it must be converted to an expand node when dragged outside of the expand node.
+ * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */
-export function handleDraggingOfNestedExpand(view, event, slice) {
-  var _slice$content$firstC;
+export function handleExpandDrag(view, event, slice) {
   const {
     state,
     dispatch
@@ -98,13 +98,22 @@ export function handleDraggingOfNestedExpand(view, event, slice) {
     from,
     to
   } = selection;
-  const supportedDropLocations = [state.schema.nodes.doc, state.schema.nodes.layoutSection, state.schema.nodes.layoutColumn];
+  let sliceContainsExpand = false;
+  let sliceContainsNestedExpand = false;
+  slice.content.forEach(node => {
+    if (node.type === state.schema.nodes.expand) {
+      sliceContainsExpand = true;
+    } else if (node.type === state.schema.nodes.nestedExpand) {
+      sliceContainsNestedExpand = true;
+    }
+  });
 
-  // Check if the contents of the dragged slice contain a nested expand node.
-  if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type) !== state.schema.nodes.nestedExpand) {
+  // Check if the contents of the dragged slice contain a nested expand node or expand node.
+  // Also not handling expands with nested expands for now.
+  if (!sliceContainsExpand && !sliceContainsNestedExpand || sliceContainsExpand && sliceContainsNestedExpand) {
     return false;
   }
-  const dropPos = view.posAtCoords({
+  let dropPos = view.posAtCoords({
     left: event.clientX,
     top: event.clientY
   });
@@ -112,22 +121,34 @@ export function handleDraggingOfNestedExpand(view, event, slice) {
     return false;
   }
   const resolvedPos = state.doc.resolve(dropPos.pos);
-
-  // If not dropping into the root of the document, check if the parent node type of the drop location is supported.
-  if (resolvedPos.depth > 1) {
-    const parentNodeType = resolvedPos.node(resolvedPos.depth - 1).type;
-    // If you're not dropping into a doc or layoutSection, don't transform the nested expand, return false and allow default behaviour.
-    if (!supportedDropLocations.includes(parentNodeType)) {
-      return false;
+  const dropLocationNodeType = resolvedPos.node().type;
+  const dropLocationParentNodeType = resolvedPos.depth > 0 ? resolvedPos.node(resolvedPos.depth - 1).type : dropLocationNodeType;
+  const nodesWithNestedExpandSupport = [state.schema.nodes.expand, state.schema.nodes.tableHeader, state.schema.nodes.tableCell];
+  const isNodeAtDropPosInsideNodesWithNestedExpandSupport = nodesWithNestedExpandSupport.includes(dropLocationNodeType) || nodesWithNestedExpandSupport.includes(dropLocationParentNodeType);
+  if (editorExperiment('nested-expand-in-expand', false)) {
+    if ((sliceContainsExpand || sliceContainsNestedExpand) && (dropLocationNodeType === state.schema.nodes.expand || dropLocationParentNodeType === state.schema.nodes.expand)) {
+      event.preventDefault();
+      return true;
     }
   }
-  const updatedSlice = transformSliceNestedExpandToExpand(slice, state.schema);
-  if (updatedSlice.eq(slice)) {
+  let updatedSlice = slice;
+  if (sliceContainsExpand && isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = transformSliceExpandToNestedExpand(slice);
+  } else if (sliceContainsNestedExpand && !isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = transformSliceNestedExpandToExpand(slice, state.schema);
+  }
+  if (!updatedSlice || updatedSlice.eq(slice)) {
     return false;
   }
 
   // The drop position will be affected when the original slice is deleted from the document.
-  const updatedDropPos = dropPos.pos > from ? dropPos.pos - updatedSlice.content.size : dropPos.pos;
+  let updatedDropPos = dropPos.pos > from ? dropPos.pos - updatedSlice.content.size : dropPos.pos;
+
+  // Adjust the drop position to place the slice before the node at the position the cursor is pointing at, except when the drop location is the document node.
+  // Otherwise causes weird behaviour with tables & quotes, splits them apart. Only do this for nested expand slice transformed to expand.
+  if (dropLocationNodeType !== state.schema.nodes.doc && !sliceContainsExpand) {
+    updatedDropPos = updatedDropPos - 1;
+  }
   tr.delete(from, to);
   tr.insert(updatedDropPos, updatedSlice.content);
   dispatch(tr);

package/dist/es2019/legacyExpand/utils.js

@@ -1 +1 @@
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, transformSliceExpandToNestedExpand } from '@atlaskit/editor-common/transforms';

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

@@ -3,8 +3,9 @@ import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import ExpandNodeView from '../node-views';
-import { transformSliceNestedExpandToExpand } from '../utils';
+import { transformSliceExpandToNestedExpand, transformSliceNestedExpandToExpand } from '../utils';
 export const pluginKey = new PluginKey('expandPlugin');
 export function containsClass(element, className) {
   var _element$classList;
@@ -45,7 +46,7 @@ export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLon
       }),
       handleDrop(view, event, slice, moved) {
         if (fg('platform_editor_nest_nested_expand_drag_fix')) {
-          return handleDraggingOfNestedExpand(view, event, slice);
+          return handleExpandDrag(view, event, slice);
         }
         return false;
       }
@@ -61,10 +62,9 @@ export const createPlugin = (dispatch, getIntl, appearance = 'full-page', useLon
 };
 
 /**
- * As the nestedExpand node is not supported outside of the expand node, it must be converted to an expand node when dragged outside of the expand node.
+ * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */
-export function handleDraggingOfNestedExpand(view, event, slice) {
-  var _slice$content$firstC;
+export function handleExpandDrag(view, event, slice) {
   const {
     state,
     dispatch
@@ -77,13 +77,22 @@ export function handleDraggingOfNestedExpand(view, event, slice) {
     from,
     to
   } = selection;
-  const supportedDropLocations = [state.schema.nodes.doc, state.schema.nodes.layoutSection, state.schema.nodes.layoutColumn];
+  let sliceContainsExpand = false;
+  let sliceContainsNestedExpand = false;
+  slice.content.forEach(node => {
+    if (node.type === state.schema.nodes.expand) {
+      sliceContainsExpand = true;
+    } else if (node.type === state.schema.nodes.nestedExpand) {
+      sliceContainsNestedExpand = true;
+    }
+  });
 
-  // Check if the contents of the dragged slice contain a nested expand node.
-  if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type) !== state.schema.nodes.nestedExpand) {
+  // Check if the contents of the dragged slice contain a nested expand node or expand node.
+  // Also not handling expands with nested expands for now.
+  if (!sliceContainsExpand && !sliceContainsNestedExpand || sliceContainsExpand && sliceContainsNestedExpand) {
     return false;
   }
-  const dropPos = view.posAtCoords({
+  let dropPos = view.posAtCoords({
     left: event.clientX,
     top: event.clientY
   });
@@ -91,22 +100,34 @@ export function handleDraggingOfNestedExpand(view, event, slice) {
     return false;
   }
   const resolvedPos = state.doc.resolve(dropPos.pos);
-
-  // If not dropping into the root of the document, check if the parent node type of the drop location is supported.
-  if (resolvedPos.depth > 1) {
-    const parentNodeType = resolvedPos.node(resolvedPos.depth - 1).type;
-    // If you're not dropping into a doc or layoutSection, don't transform the nested expand, return false and allow default behaviour.
-    if (!supportedDropLocations.includes(parentNodeType)) {
-      return false;
+  const dropLocationNodeType = resolvedPos.node().type;
+  const dropLocationParentNodeType = resolvedPos.depth > 0 ? resolvedPos.node(resolvedPos.depth - 1).type : dropLocationNodeType;
+  const nodesWithNestedExpandSupport = [state.schema.nodes.expand, state.schema.nodes.tableHeader, state.schema.nodes.tableCell];
+  const isNodeAtDropPosInsideNodesWithNestedExpandSupport = nodesWithNestedExpandSupport.includes(dropLocationNodeType) || nodesWithNestedExpandSupport.includes(dropLocationParentNodeType);
+  if (editorExperiment('nested-expand-in-expand', false)) {
+    if ((sliceContainsExpand || sliceContainsNestedExpand) && (dropLocationNodeType === state.schema.nodes.expand || dropLocationParentNodeType === state.schema.nodes.expand)) {
+      event.preventDefault();
+      return true;
     }
   }
-  const updatedSlice = transformSliceNestedExpandToExpand(slice, state.schema);
-  if (updatedSlice.eq(slice)) {
+  let updatedSlice = slice;
+  if (sliceContainsExpand && isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = transformSliceExpandToNestedExpand(slice);
+  } else if (sliceContainsNestedExpand && !isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = transformSliceNestedExpandToExpand(slice, state.schema);
+  }
+  if (!updatedSlice || updatedSlice.eq(slice)) {
     return false;
   }
 
   // The drop position will be affected when the original slice is deleted from the document.
-  const updatedDropPos = dropPos.pos > from ? dropPos.pos - updatedSlice.content.size : dropPos.pos;
+  let updatedDropPos = dropPos.pos > from ? dropPos.pos - updatedSlice.content.size : dropPos.pos;
+
+  // Adjust the drop position to place the slice before the node at the position the cursor is pointing at, except when the drop location is the document node.
+  // Otherwise causes weird behaviour with tables & quotes, splits them apart. Only do this for nested expand slice transformed to expand.
+  if (dropLocationNodeType !== state.schema.nodes.doc && !sliceContainsExpand) {
+    updatedDropPos = updatedDropPos - 1;
+  }
   tr.delete(from, to);
   tr.insert(updatedDropPos, updatedSlice.content);
   dispatch(tr);

package/dist/es2019/singlePlayerExpand/utils.js

@@ -1,5 +1,5 @@
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, transformSliceExpandToNestedExpand } from '@atlaskit/editor-common/transforms';
 export const findParentExpandNode = state => {
   return findParentNodeOfType(state.schema.nodes.nestedExpand)(state.selection) || findParentNodeOfType(state.schema.nodes.expand)(state.selection);
 };

package/dist/esm/legacyExpand/pm-plugins/main.js

@@ -3,9 +3,10 @@ import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { setExpandRef } from '../commands';
 import ExpandNodeView from '../nodeviews';
-import { findExpand, transformSliceNestedExpandToExpand } from '../utils';
+import { findExpand, transformSliceExpandToNestedExpand, transformSliceNestedExpandToExpand } from '../utils';
 import { createPluginState, getPluginState, pluginKey } from './plugin-factory';
 export function containsClass(element, className) {
   var _element$classList;
@@ -55,7 +56,7 @@ export var createPlugin = function createPlugin(dispatch, getIntl) {
       }),
       handleDrop: function handleDrop(view, event, slice, moved) {
         if (fg('platform_editor_nest_nested_expand_drag_fix')) {
-          return handleDraggingOfNestedExpand(view, event, slice);
+          return handleExpandDrag(view, event, slice);
         }
         return false;
       }
@@ -87,20 +88,28 @@ export var createPlugin = function createPlugin(dispatch, getIntl) {
 };
 
 /**
- * As the nestedExpand node is not supported outside of the expand node, it must be converted to an expand node when dragged outside of the expand node.
+ * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */
-export function handleDraggingOfNestedExpand(view, event, slice) {
-  var _slice$content$firstC;
+export function handleExpandDrag(view, event, slice) {
   var state = view.state,
     dispatch = view.dispatch;
   var tr = state.tr;
   var selection = state.selection;
   var from = selection.from,
     to = selection.to;
-  var supportedDropLocations = [state.schema.nodes.doc, state.schema.nodes.layoutSection, state.schema.nodes.layoutColumn];
+  var sliceContainsExpand = false;
+  var sliceContainsNestedExpand = false;
+  slice.content.forEach(function (node) {
+    if (node.type === state.schema.nodes.expand) {
+      sliceContainsExpand = true;
+    } else if (node.type === state.schema.nodes.nestedExpand) {
+      sliceContainsNestedExpand = true;
+    }
+  });
 
-  // Check if the contents of the dragged slice contain a nested expand node.
-  if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type) !== state.schema.nodes.nestedExpand) {
+  // Check if the contents of the dragged slice contain a nested expand node or expand node.
+  // Also not handling expands with nested expands for now.
+  if (!sliceContainsExpand && !sliceContainsNestedExpand || sliceContainsExpand && sliceContainsNestedExpand) {
     return false;
   }
   var dropPos = view.posAtCoords({
@@ -111,22 +120,34 @@ export function handleDraggingOfNestedExpand(view, event, slice) {
     return false;
   }
   var resolvedPos = state.doc.resolve(dropPos.pos);
-
-  // If not dropping into the root of the document, check if the parent node type of the drop location is supported.
-  if (resolvedPos.depth > 1) {
-    var parentNodeType = resolvedPos.node(resolvedPos.depth - 1).type;
-    // If you're not dropping into a doc or layoutSection, don't transform the nested expand, return false and allow default behaviour.
-    if (!supportedDropLocations.includes(parentNodeType)) {
-      return false;
+  var dropLocationNodeType = resolvedPos.node().type;
+  var dropLocationParentNodeType = resolvedPos.depth > 0 ? resolvedPos.node(resolvedPos.depth - 1).type : dropLocationNodeType;
+  var nodesWithNestedExpandSupport = [state.schema.nodes.expand, state.schema.nodes.tableHeader, state.schema.nodes.tableCell];
+  var isNodeAtDropPosInsideNodesWithNestedExpandSupport = nodesWithNestedExpandSupport.includes(dropLocationNodeType) || nodesWithNestedExpandSupport.includes(dropLocationParentNodeType);
+  if (editorExperiment('nested-expand-in-expand', false)) {
+    if ((sliceContainsExpand || sliceContainsNestedExpand) && (dropLocationNodeType === state.schema.nodes.expand || dropLocationParentNodeType === state.schema.nodes.expand)) {
+      event.preventDefault();
+      return true;
     }
   }
-  var updatedSlice = transformSliceNestedExpandToExpand(slice, state.schema);
-  if (updatedSlice.eq(slice)) {
+  var updatedSlice = slice;
+  if (sliceContainsExpand && isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = transformSliceExpandToNestedExpand(slice);
+  } else if (sliceContainsNestedExpand && !isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = transformSliceNestedExpandToExpand(slice, state.schema);
+  }
+  if (!updatedSlice || updatedSlice.eq(slice)) {
     return false;
   }
 
   // The drop position will be affected when the original slice is deleted from the document.
   var updatedDropPos = dropPos.pos > from ? dropPos.pos - updatedSlice.content.size : dropPos.pos;
+
+  // Adjust the drop position to place the slice before the node at the position the cursor is pointing at, except when the drop location is the document node.
+  // Otherwise causes weird behaviour with tables & quotes, splits them apart. Only do this for nested expand slice transformed to expand.
+  if (dropLocationNodeType !== state.schema.nodes.doc && !sliceContainsExpand) {
+    updatedDropPos = updatedDropPos - 1;
+  }
   tr.delete(from, to);
   tr.insert(updatedDropPos, updatedSlice.content);
   dispatch(tr);

package/dist/esm/legacyExpand/utils.js

@@ -1 +1 @@
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, transformSliceExpandToNestedExpand } from '@atlaskit/editor-common/transforms';

package/dist/esm/singlePlayerExpand/pm-plugins/main.js

@@ -3,8 +3,9 @@ import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
 import { expandClassNames } from '@atlaskit/editor-common/styles';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import ExpandNodeView from '../node-views';
-import { transformSliceNestedExpandToExpand } from '../utils';
+import { transformSliceExpandToNestedExpand, transformSliceNestedExpandToExpand } from '../utils';
 export var pluginKey = new PluginKey('expandPlugin');
 export function containsClass(element, className) {
   var _element$classList;
@@ -52,7 +53,7 @@ export var createPlugin = function createPlugin(dispatch, getIntl) {
       }),
       handleDrop: function handleDrop(view, event, slice, moved) {
         if (fg('platform_editor_nest_nested_expand_drag_fix')) {
-          return handleDraggingOfNestedExpand(view, event, slice);
+          return handleExpandDrag(view, event, slice);
         }
         return false;
       }
@@ -68,20 +69,28 @@ export var createPlugin = function createPlugin(dispatch, getIntl) {
 };
 
 /**
- * As the nestedExpand node is not supported outside of the expand node, it must be converted to an expand node when dragged outside of the expand node.
+ * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */
-export function handleDraggingOfNestedExpand(view, event, slice) {
-  var _slice$content$firstC;
+export function handleExpandDrag(view, event, slice) {
   var state = view.state,
     dispatch = view.dispatch;
   var tr = state.tr;
   var selection = state.selection;
   var from = selection.from,
     to = selection.to;
-  var supportedDropLocations = [state.schema.nodes.doc, state.schema.nodes.layoutSection, state.schema.nodes.layoutColumn];
+  var sliceContainsExpand = false;
+  var sliceContainsNestedExpand = false;
+  slice.content.forEach(function (node) {
+    if (node.type === state.schema.nodes.expand) {
+      sliceContainsExpand = true;
+    } else if (node.type === state.schema.nodes.nestedExpand) {
+      sliceContainsNestedExpand = true;
+    }
+  });
 
-  // Check if the contents of the dragged slice contain a nested expand node.
-  if (((_slice$content$firstC = slice.content.firstChild) === null || _slice$content$firstC === void 0 ? void 0 : _slice$content$firstC.type) !== state.schema.nodes.nestedExpand) {
+  // Check if the contents of the dragged slice contain a nested expand node or expand node.
+  // Also not handling expands with nested expands for now.
+  if (!sliceContainsExpand && !sliceContainsNestedExpand || sliceContainsExpand && sliceContainsNestedExpand) {
     return false;
   }
   var dropPos = view.posAtCoords({
@@ -92,22 +101,34 @@ export function handleDraggingOfNestedExpand(view, event, slice) {
     return false;
   }
   var resolvedPos = state.doc.resolve(dropPos.pos);
-
-  // If not dropping into the root of the document, check if the parent node type of the drop location is supported.
-  if (resolvedPos.depth > 1) {
-    var parentNodeType = resolvedPos.node(resolvedPos.depth - 1).type;
-    // If you're not dropping into a doc or layoutSection, don't transform the nested expand, return false and allow default behaviour.
-    if (!supportedDropLocations.includes(parentNodeType)) {
-      return false;
+  var dropLocationNodeType = resolvedPos.node().type;
+  var dropLocationParentNodeType = resolvedPos.depth > 0 ? resolvedPos.node(resolvedPos.depth - 1).type : dropLocationNodeType;
+  var nodesWithNestedExpandSupport = [state.schema.nodes.expand, state.schema.nodes.tableHeader, state.schema.nodes.tableCell];
+  var isNodeAtDropPosInsideNodesWithNestedExpandSupport = nodesWithNestedExpandSupport.includes(dropLocationNodeType) || nodesWithNestedExpandSupport.includes(dropLocationParentNodeType);
+  if (editorExperiment('nested-expand-in-expand', false)) {
+    if ((sliceContainsExpand || sliceContainsNestedExpand) && (dropLocationNodeType === state.schema.nodes.expand || dropLocationParentNodeType === state.schema.nodes.expand)) {
+      event.preventDefault();
+      return true;
     }
   }
-  var updatedSlice = transformSliceNestedExpandToExpand(slice, state.schema);
-  if (updatedSlice.eq(slice)) {
+  var updatedSlice = slice;
+  if (sliceContainsExpand && isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = transformSliceExpandToNestedExpand(slice);
+  } else if (sliceContainsNestedExpand && !isNodeAtDropPosInsideNodesWithNestedExpandSupport) {
+    updatedSlice = transformSliceNestedExpandToExpand(slice, state.schema);
+  }
+  if (!updatedSlice || updatedSlice.eq(slice)) {
     return false;
   }
 
   // The drop position will be affected when the original slice is deleted from the document.
   var updatedDropPos = dropPos.pos > from ? dropPos.pos - updatedSlice.content.size : dropPos.pos;
+
+  // Adjust the drop position to place the slice before the node at the position the cursor is pointing at, except when the drop location is the document node.
+  // Otherwise causes weird behaviour with tables & quotes, splits them apart. Only do this for nested expand slice transformed to expand.
+  if (dropLocationNodeType !== state.schema.nodes.doc && !sliceContainsExpand) {
+    updatedDropPos = updatedDropPos - 1;
+  }
   tr.delete(from, to);
   tr.insert(updatedDropPos, updatedSlice.content);
   dispatch(tr);

package/dist/esm/singlePlayerExpand/utils.js

@@ -1,5 +1,5 @@
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/transforms';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, transformSliceExpandToNestedExpand } from '@atlaskit/editor-common/transforms';
 export var findParentExpandNode = function findParentExpandNode(state) {
   return findParentNodeOfType(state.schema.nodes.nestedExpand)(state.selection) || findParentNodeOfType(state.schema.nodes.expand)(state.selection);
 };

package/dist/types/legacyExpand/pm-plugins/main.d.ts

@@ -8,6 +8,6 @@ import type { ExpandPlugin } from '../../types';
 export declare function containsClass(element: Element | null, className: string): boolean;
 export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<import("../../types").ExpandPluginState>;
 /**
- * As the nestedExpand node is not supported outside of the expand node, it must be converted to an expand node when dragged outside of the expand node.
+ * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */
-export declare function handleDraggingOfNestedExpand(view: EditorView, event: DragEvent, slice: Slice): boolean;
+export declare function handleExpandDrag(view: EditorView, event: DragEvent, slice: Slice): boolean;

package/dist/types/legacyExpand/utils.d.ts

@@ -1 +1 @@
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, } from '@atlaskit/editor-common/transforms';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, transformSliceExpandToNestedExpand, } from '@atlaskit/editor-common/transforms';

package/dist/types/singlePlayerExpand/pm-plugins/main.d.ts

@@ -10,6 +10,6 @@ export declare const pluginKey: PluginKey<any>;
 export declare function containsClass(element: Element | null, className: string): boolean;
 export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<any>;
 /**
- * As the nestedExpand node is not supported outside of the expand node, it must be converted to an expand node when dragged outside of the expand node.
+ * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */
-export declare function handleDraggingOfNestedExpand(view: EditorView, event: DragEvent, slice: Slice): boolean;
+export declare function handleExpandDrag(view: EditorView, event: DragEvent, slice: Slice): boolean;

package/dist/types/singlePlayerExpand/utils.d.ts

@@ -1,4 +1,4 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, } from '@atlaskit/editor-common/transforms';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, transformSliceExpandToNestedExpand, } from '@atlaskit/editor-common/transforms';
 export declare const findParentExpandNode: (state: EditorState) => ReturnType<ReturnType<typeof findParentNodeOfType>>;

package/dist/types-ts4.5/legacyExpand/pm-plugins/main.d.ts

@@ -8,6 +8,6 @@ import type { ExpandPlugin } from '../../types';
 export declare function containsClass(element: Element | null, className: string): boolean;
 export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<import("../../types").ExpandPluginState>;
 /**
- * As the nestedExpand node is not supported outside of the expand node, it must be converted to an expand node when dragged outside of the expand node.
+ * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */
-export declare function handleDraggingOfNestedExpand(view: EditorView, event: DragEvent, slice: Slice): boolean;
+export declare function handleExpandDrag(view: EditorView, event: DragEvent, slice: Slice): boolean;

package/dist/types-ts4.5/legacyExpand/utils.d.ts

@@ -1 +1 @@
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, } from '@atlaskit/editor-common/transforms';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, transformSliceExpandToNestedExpand, } from '@atlaskit/editor-common/transforms';

package/dist/types-ts4.5/singlePlayerExpand/pm-plugins/main.d.ts

@@ -10,6 +10,6 @@ export declare const pluginKey: PluginKey<any>;
 export declare function containsClass(element: Element | null, className: string): boolean;
 export declare const createPlugin: (dispatch: Dispatch, getIntl: () => IntlShape, appearance: EditorAppearance | undefined, useLongPressSelection: boolean | undefined, api: ExtractInjectionAPI<ExpandPlugin> | undefined, allowInteractiveExpand?: boolean, __livePage?: boolean) => SafePlugin<any>;
 /**
- * As the nestedExpand node is not supported outside of the expand node, it must be converted to an expand node when dragged outside of the expand node.
+ * Convert a nested expand to an expand when dropped outside an expand or table. Convert an expand to a nested expand when dropped inside an expand or table.
  */
-export declare function handleDraggingOfNestedExpand(view: EditorView, event: DragEvent, slice: Slice): boolean;
+export declare function handleExpandDrag(view: EditorView, event: DragEvent, slice: Slice): boolean;

package/dist/types-ts4.5/singlePlayerExpand/utils.d.ts

@@ -1,4 +1,4 @@
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
-export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, } from '@atlaskit/editor-common/transforms';
+export { findExpand, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenNestedExpand, transformSliceNestedExpandToExpand, transformSliceExpandToNestedExpand, } from '@atlaskit/editor-common/transforms';
 export declare const findParentExpandNode: (state: EditorState) => ReturnType<ReturnType<typeof findParentNodeOfType>>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-expand",
-	"version": "2.7.0",
+	"version": "2.7.2",
 	"description": "Expand plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -44,6 +44,7 @@
 		"@atlaskit/editor-tables": "^2.8.0",
 		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/tmp-editor-statsig": "^2.1.8",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -59,7 +60,7 @@
 		"@atlaskit/editor-plugin-content-insertion": "^1.8.0",
 		"@atlaskit/editor-plugin-guideline": "^1.2.0",
 		"@atlaskit/editor-plugin-quick-insert": "^1.3.0",
-		"@atlaskit/editor-plugin-table": "^7.26.0",
+		"@atlaskit/editor-plugin-table": "^7.27.0",
 		"@atlaskit/editor-plugin-type-ahead": "^1.8.0",
 		"@atlaskit/editor-plugin-width": "^1.3.0",
 		"@testing-library/react": "^12.1.5",