@atlaskit/editor-plugin-panel 12.1.2 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-panel
 
+## 12.2.0
+
+### Minor Changes
+
+- [`ad45394a4fed6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ad45394a4fed6) -
+  [ux] EDITOR-7171 add panel plugin support for new panel_c1 node variant which can have tables
+  nested inside
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.1.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.1.2
 
 ### Patch Changes

package/dist/cjs/editor-actions/actions.js

@@ -10,6 +10,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _panel = require("@atlaskit/editor-common/panel");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _utils2 = require("../pm-plugins/utils/utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -25,11 +26,12 @@ var removePanel = exports.removePanel = function removePanel(editorAnalyticsAPI)
       },
       eventType: _analytics.EVENT_TYPE.TRACK
     };
+    var panelNodeTypes = (0, _utils2.panelTypes)(nodes);
     var deleteTr = tr;
-    if ((0, _utils.findSelectedNodeOfType)(nodes.panel)(tr.selection)) {
+    if ((0, _utils.findSelectedNodeOfType)(panelNodeTypes)(tr.selection)) {
       deleteTr = (0, _utils.removeSelectedNode)(tr);
-    } else if ((0, _utils.findParentNodeOfType)(nodes.panel)(tr.selection)) {
-      deleteTr = (0, _utils.removeParentNodeOfType)(nodes.panel)(tr);
+    } else if ((0, _utils.findParentNodeOfType)(panelNodeTypes)(tr.selection)) {
+      deleteTr = (0, _utils.removeParentNodeOfType)(panelNodeTypes)(tr);
     }
     if (!deleteTr) {
       return false;
@@ -55,6 +57,7 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
       var newType = panelType;
       var previousType = panelNode.node.attrs.panelType;
       var newTr;
+      var panelNodeType = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? panelNode.node.type : nodes.panel;
       if (allowCustomPanel) {
         var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : (0, _panel.getPanelTypeBackgroundNoTokens)(previousType);
         var previousIcon = panelNode.node.attrs.panelIcon;
@@ -66,7 +69,7 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
           emojiId: previousIconId,
           emojiText: previousIconText
         }, panelOptions);
-        newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
+        newTr = tr.setNodeMarkup(panelNode.pos, panelNodeType, {
           panelIcon: newPanelOptions.emoji,
           panelIconId: newPanelOptions.emojiId,
           panelIconText: newPanelOptions.emojiText,
@@ -74,7 +77,7 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
           panelType: panelType
         });
       } else {
-        newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
+        newTr = tr.setNodeMarkup(panelNode.pos, panelNodeType, {
           panelType: panelType
         });
       }
@@ -89,7 +92,7 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
       };
 
       // Select the panel if it was previously selected
-      var newTrWithSelection = state.selection instanceof _state.NodeSelection && state.selection.node.type.name === 'panel' ? newTr.setSelection(new _state.NodeSelection(tr.doc.resolve(panelNode.pos))) : newTr;
+      var newTrWithSelection = state.selection instanceof _state.NodeSelection && (0, _utils2.isPanel)(state.selection.node.type.name) ? newTr.setSelection(new _state.NodeSelection(tr.doc.resolve(panelNode.pos))) : newTr;
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(newTrWithSelection);
       newTrWithSelection.setMeta('scrollIntoView', false);
       if (dispatch) {

package/dist/cjs/panelPlugin.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
@@ -15,9 +16,11 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _quickInsert = require("@atlaskit/editor-common/quick-insert");
 var _utils = require("@atlaskit/editor-common/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _keymaps = _interopRequireDefault(require("./pm-plugins/keymaps"));
 var _main = require("./pm-plugins/main");
+var _utils2 = require("./pm-plugins/utils/utils");
 var _panelBlockMenuItem = require("./ui/panelBlockMenuItem");
 var _toolbar = require("./ui/toolbar");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -57,12 +60,20 @@ var panelPlugin = function panelPlugin(_ref) {
           node: _objectSpread(_objectSpread({}, (0, _adfSchema.extendedPanelWithLocalId)(!!allowCustomPanel)), {}, {
             definingAsContext: true
           })
-        }];
+        }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? [{
+          name: 'panel_c1',
+          node: _objectSpread(_objectSpread({}, (0, _adfSchema.extendedPanelC1WithLocalId)(!!allowCustomPanel)), {}, {
+            definingAsContext: true
+          })
+        }] : []));
       }
       return [{
         name: 'panel',
         node: (0, _adfSchema.extendedPanel)(!!allowCustomPanel)
-      }];
+      }].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? [{
+        name: 'panel_c1',
+        node: (0, _adfSchema.extendedPanelC1)(!!allowCustomPanel)
+      }] : []));
     },
     pmPlugins: function pmPlugins() {
       return [{
@@ -260,11 +271,11 @@ function createPanelAction(_ref4) {
     typeAheadInsert = _ref4.typeAheadInsert,
     _ref4$inputMethod = _ref4.inputMethod,
     inputMethod = _ref4$inputMethod === void 0 ? _analytics.INPUT_METHOD.QUICK_INSERT : _ref4$inputMethod;
-  var panel = state.schema.nodes.panel;
+  var panelNodeType = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (0, _utils2.pickPanelTypeForInsertion)(state) : state.schema.nodes.panel;
   var tr;
   // If the selection is empty, we want to insert the panel on a new line
   if (state.selection.empty) {
-    var node = panel.createAndFill(_objectSpread({}, attributes));
+    var node = panelNodeType.createAndFill(_objectSpread({}, attributes));
     if (!node) {
       return false;
     }
@@ -279,7 +290,7 @@ function createPanelAction(_ref4) {
   } else {
     tr = (0, _utils.createWrapSelectionTransaction)({
       state: state,
-      type: panel,
+      type: panelNodeType,
       nodeAttributes: _objectSpread({}, attributes)
     });
   }

package/dist/cjs/pm-plugins/keymaps.js

@@ -8,6 +8,7 @@ exports.keymapPlugin = keymapPlugin;
 var _utils = require("@atlaskit/editor-common/utils");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _utils3 = require("./utils/utils");
 function findParentNode(selection, nodeType) {
   var parentPosition = (0, _utils2.findParentNodeOfType)(nodeType)(selection);
   if (parentPosition) {
@@ -31,13 +32,13 @@ function keymapPlugin() {
       var selection = state.selection,
         nodes = state.schema.nodes,
         tr = state.tr;
-      var panel = nodes.panel,
-        blockquote = nodes.blockquote,
+      var blockquote = nodes.blockquote,
         orderedList = nodes.orderedList,
         bulletList = nodes.bulletList,
         mediaSingle = nodes.mediaSingle,
         mediaGroup = nodes.mediaGroup,
         extension = nodes.extension;
+      var panelNodeTypes = (0, _utils3.panelTypes)(nodes);
       var $from = selection.$from,
         $to = selection.$to;
       // Don't do anything if selection is a range
@@ -52,8 +53,8 @@ function keymapPlugin() {
       var $previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
       var previousNodeType = $previousPos.pos > 0 && $previousPos.parent && $previousPos.parent.type;
       var parentNodeType = $from.parent.type;
-      var isPreviousNodeAPanel = previousNodeType === panel;
-      var isParentNodeAPanel = parentNodeType === panel;
+      var isPreviousNodeAPanel = previousNodeType && (0, _utils3.isPanel)(previousNodeType.name);
+      var isParentNodeAPanel = (0, _utils3.isPanel)(parentNodeType.name);
       var nodeBeforePanel = $previousPos === null || $previousPos === void 0 ? void 0 : $previousPos.nodeBefore;
       var isPreviousNodeMedia = previousNodeType === mediaSingle || previousNodeType === mediaGroup;
       var isPreviousNodeAList = previousNodeType === bulletList || previousNodeType === orderedList;
@@ -63,13 +64,15 @@ function keymapPlugin() {
 
       // Stops merging panels when deleting empty paragraph in between
       // Stops merging blockquotes with panels when deleting from start of blockquote
-      if (isPreviousNodeAPanel && !isParentNodeAPanel && !isPreviousPosAtExtension || isInsideAnEmptyNode(selection, panel, state.schema) || (0, _utils2.hasParentNodeOfType)(blockquote)(selection) && !isPreviousNodeAList && !isPreviousNodeMedia && !isPreviousPosAtExtension ||
+      if (isPreviousNodeAPanel && !isParentNodeAPanel && !isPreviousPosAtExtension || panelNodeTypes.some(function (type) {
+        return isInsideAnEmptyNode(selection, type, state.schema);
+      }) || (0, _utils2.hasParentNodeOfType)(blockquote)(selection) && !isPreviousNodeAList && !isPreviousNodeMedia && !isPreviousPosAtExtension ||
       // Lift line of panel content up and out of the panel, when backspacing
       // at the start of a panel, if the node before the panel is an 'isolating' node
       // (for e.g. a table, or an expand), otherwise the default prosemirror backspace
       // behaviour will fallback to 'select node backward' logic because the node
       // before is an isolating node.
-      nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type !== void 0 && _nodeBeforePanel$type.isolating && (0, _utils2.hasParentNodeOfType)(panel)(selection)) {
+      nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type !== void 0 && _nodeBeforePanel$type.isolating && (0, _utils2.hasParentNodeOfType)(panelNodeTypes)(selection)) {
         var content = $from.node($from.depth).content;
         var insertPos = $previousPos.pos;
         deleteCurrentItem($from, tr).insert(insertPos, content);
@@ -79,7 +82,7 @@ function keymapPlugin() {
         return true;
       }
       var nodeType = $from.node().type;
-      if (nodeType !== panel) {
+      if (!(0, _utils3.isPanel)(nodeType.name)) {
         return false;
       }
       return true;

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

@@ -1,15 +1,20 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.createPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _panel = require("@atlaskit/editor-common/panel");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _selection = require("@atlaskit/editor-common/selection");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _panel2 = require("../nodeviews/panel");
 var _panelPluginType = require("../panelPluginType");
 var _utils = require("./utils/utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var createPlugin = exports.createPlugin = function createPlugin(dispatch, providerFactory, pluginOptions, api, nodeViewPortalProviderAPI) {
   var _pluginOptions$useLon = pluginOptions.useLongPressSelection,
     useLongPressSelection = _pluginOptions$useLon === void 0 ? false : _pluginOptions$useLon;
@@ -24,10 +29,12 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, provid
       }
     },
     props: {
-      nodeViews: {
+      nodeViews: _objectSpread({
         panel: (0, _panel2.getPanelNodeView)(pluginOptions, api, nodeViewPortalProviderAPI, providerFactory)
-      },
-      handleClickOn: (0, _selection.createSelectionClickHandler)(['panel'], function (target) {
+      }, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? {
+        panel_c1: (0, _panel2.getPanelNodeView)(pluginOptions, api, nodeViewPortalProviderAPI, providerFactory)
+      } : {}),
+      handleClickOn: (0, _selection.createSelectionClickHandler)((0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? ['panel', 'panel_c1'] : ['panel'], function (target) {
         return !!target.closest(".".concat(_panel.PanelSharedCssClassName.prefix));
       }, {
         useLongPressSelection: useLongPressSelection

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.panelContentCheck = exports.panelAttrsToDom = exports.handleCut = exports.findPanel = void 0;
+exports.pickPanelTypeForInsertion = exports.panelTypes = exports.panelContentCheck = exports.panelAttrsToDom = exports.isPanel = exports.handleCut = exports.findPanel = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _panel = require("@atlaskit/editor-common/panel");
@@ -15,9 +15,38 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var isPanel = exports.isPanel = function isPanel(nodeName) {
+  return (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? ['panel', 'panel_c1'].includes(nodeName) : nodeName === 'panel';
+};
+var panelTypes = exports.panelTypes = function panelTypes(nodes) {
+  var panel = nodes.panel,
+    panel_c1 = nodes.panel_c1;
+  return (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? [panel, panel_c1] : [panel];
+};
 var findPanel = exports.findPanel = function findPanel(state, selection) {
-  var panel = state.schema.nodes.panel;
-  return (0, _utils.findSelectedNodeOfType)(panel)(selection || state.selection) || (0, _utils.findParentNodeOfType)(panel)(selection || state.selection);
+  return (0, _utils.findSelectedNodeOfType)(panelTypes(state.schema.nodes))(selection || state.selection) || (0, _utils.findParentNodeOfType)(panelTypes(state.schema.nodes))(selection || state.selection);
+};
+var pickPanelTypeForInsertion = exports.pickPanelTypeForInsertion = function pickPanelTypeForInsertion(input) {
+  var selection = 'selection' in input ? input.selection : input;
+  var schema = selection.$from.doc.type.schema;
+  var _schema$nodes = schema.nodes,
+    panel = _schema$nodes.panel,
+    panel_c1 = _schema$nodes.panel_c1;
+  var $from = selection.$from;
+  for (var depth = $from.depth; depth >= 0; depth--) {
+    var parent = $from.node(depth);
+    var index = $from.index(depth);
+    if (parent.canReplaceWith(index, index, panel_c1)) {
+      return panel_c1;
+    }
+    var spec = parent.type.spec;
+    // Stop at isolating containers (e.g. expand, tableCell) — hard walls where
+    // the panel stays inside and should use the regular panel type.
+    if (spec.isolating) {
+      return panel;
+    }
+  }
+  return panel;
 };
 var panelAttrsToDom = exports.panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
   var panelColor = attrs.panelColor,
@@ -75,14 +104,16 @@ var handleCut = exports.handleCut = function handleCut(newState, oldState) {
   var newTr = newState.tr;
   var schema = newState.doc.type.schema;
   if (panelContentCheck(newState, oldState)) {
+    var _oldPanelNode$node$ty;
     // Create a panel using oldState with an empty paragraph node
     // and insert it in the same location when panel previously existed
     var emptyParagraph = schema.nodes.paragraph.create();
     var oldPanelNode = (0, _utils.findParentNode)(function (node) {
-      return node.type.name === 'panel';
+      return isPanel(node.type.name);
     })(oldState.tr.selection);
     var clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
-    var newPanelNode = schema.nodes.panel.create(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), emptyParagraph);
+    var panelNodeType = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (_oldPanelNode$node$ty = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.type) !== null && _oldPanelNode$node$ty !== void 0 ? _oldPanelNode$node$ty : schema.nodes.panel : schema.nodes.panel;
+    var newPanelNode = panelNodeType.create(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), emptyParagraph);
     var endPos = oldState.tr.selection.$from.pos;
     if (oldPanelNode) {
       newTr.insert(oldPanelNode.pos, newPanelNode).setSelection(new _state.TextSelection(newTr.doc.resolve(endPos)));
@@ -98,7 +129,7 @@ var panelContentCheck = exports.panelContentCheck = function panelContentCheck(n
   //     OR old selection is a codeblock OR old selection is a rule
   var isNodeSelection = oldState.tr.selection instanceof _state.NodeSelection;
   var isNodeTypeRuleOrCodeBlock = isNodeSelection && ['codeBlock', 'rule'].includes(oldState.tr.selection.node.type.name);
-  var isParentTypePanel = (0, _utils.findParentNodeOfType)(newState.schema.nodes.panel)(oldState.tr.selection);
+  var isParentTypePanel = (0, _utils.findParentNodeOfType)(panelTypes(newState.schema.nodes))(oldState.tr.selection);
   var isparentTypeDecision = (0, _utils.findParentNodeOfType)(newState.schema.nodes.decisionList)(oldState.tr.selection);
   return Boolean(isNodeSelection && (isParentTypePanel === null || isParentTypePanel === void 0 ? void 0 : isParentTypePanel.node.childCount) === 1 && ((isparentTypeDecision === null || isparentTypeDecision === void 0 ? void 0 : isparentTypeDecision.node.childCount) === 1 || isNodeTypeRuleOrCodeBlock));
 };

package/dist/cjs/ui/toolbar.js

@@ -26,6 +26,7 @@ var _statusDiscovery = _interopRequireDefault(require("@atlaskit/icon/core/statu
 var _statusInformation = _interopRequireDefault(require("@atlaskit/icon/core/status-information"));
 var _statusSuccess = _interopRequireDefault(require("@atlaskit/icon/core/status-success"));
 var _statusWarning = _interopRequireDefault(require("@atlaskit/icon/core/status-warning"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _actions = require("../editor-actions/actions");
 var _utils2 = require("../pm-plugins/utils/utils");
 var _panelTypeDropdown = require("./panelTypeDropdown");
@@ -332,7 +333,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(stat
   var panelObject = (0, _utils2.findPanel)(state);
   if (panelObject) {
     var _api$decorations, _api$analytics;
-    var nodeType = state.schema.nodes.panel;
+    var nodeType = (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? panelObject.node.type : state.schema.nodes.panel;
     var _panelObject$node$att = panelObject.node.attrs,
       panelType = _panelObject$node$att.panelType,
       panelColor = _panelObject$node$att.panelColor,

package/dist/es2019/editor-actions/actions.js

@@ -2,7 +2,8 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/edit
 import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
-import { findPanel } from '../pm-plugins/utils/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { findPanel, isPanel, panelTypes } from '../pm-plugins/utils/utils';
 export const removePanel = editorAnalyticsAPI => (state, dispatch) => {
   const {
     schema: {
@@ -18,11 +19,12 @@ export const removePanel = editorAnalyticsAPI => (state, dispatch) => {
     },
     eventType: EVENT_TYPE.TRACK
   };
+  const panelNodeTypes = panelTypes(nodes);
   let deleteTr = tr;
-  if (findSelectedNodeOfType(nodes.panel)(tr.selection)) {
+  if (findSelectedNodeOfType(panelNodeTypes)(tr.selection)) {
     deleteTr = removeSelectedNode(tr);
-  } else if (findParentNodeOfType(nodes.panel)(tr.selection)) {
-    deleteTr = removeParentNodeOfType(nodes.panel)(tr);
+  } else if (findParentNodeOfType(panelNodeTypes)(tr.selection)) {
+    deleteTr = removeParentNodeOfType(panelNodeTypes)(tr);
   }
   if (!deleteTr) {
     return false;
@@ -47,6 +49,7 @@ export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions =
   const newType = panelType;
   const previousType = panelNode.node.attrs.panelType;
   let newTr;
+  const panelNodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? panelNode.node.type : nodes.panel;
   if (allowCustomPanel) {
     const previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(previousType);
     const previousIcon = panelNode.node.attrs.panelIcon;
@@ -59,7 +62,7 @@ export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions =
       emojiText: previousIconText,
       ...panelOptions
     };
-    newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
+    newTr = tr.setNodeMarkup(panelNode.pos, panelNodeType, {
       panelIcon: newPanelOptions.emoji,
       panelIconId: newPanelOptions.emojiId,
       panelIconText: newPanelOptions.emojiText,
@@ -67,7 +70,7 @@ export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions =
       panelType
     });
   } else {
-    newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
+    newTr = tr.setNodeMarkup(panelNode.pos, panelNodeType, {
       panelType
     });
   }
@@ -82,7 +85,7 @@ export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions =
   };
 
   // Select the panel if it was previously selected
-  const newTrWithSelection = state.selection instanceof NodeSelection && state.selection.node.type.name === 'panel' ? newTr.setSelection(new NodeSelection(tr.doc.resolve(panelNode.pos))) : newTr;
+  const newTrWithSelection = state.selection instanceof NodeSelection && isPanel(state.selection.node.type.name) ? newTr.setSelection(new NodeSelection(tr.doc.resolve(panelNode.pos))) : newTr;
   editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent(payload)(newTrWithSelection);
   newTrWithSelection.setMeta('scrollIntoView', false);
   if (dispatch) {

package/dist/es2019/panelPlugin.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { extendedPanel, extendedPanelWithLocalId, PanelType } from '@atlaskit/adf-schema';
+import { extendedPanel, extendedPanelC1, extendedPanelC1WithLocalId, extendedPanelWithLocalId, PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { TRANSFORM_STRUCTURE_PANEL_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
 import { insertSelectedItem } from '@atlaskit/editor-common/insert';
@@ -7,9 +7,11 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconCustomPanel, IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import keymap from './pm-plugins/keymaps';
 import { createPlugin } from './pm-plugins/main';
+import { pickPanelTypeForInsertion } from './pm-plugins/utils/utils';
 import { createPanelBlockMenuItem } from './ui/panelBlockMenuItem';
 import { getToolbarConfig } from './ui/toolbar';
 const PANEL_NODE_NAME = 'panel';
@@ -47,12 +49,21 @@ const panelPlugin = ({
             ...extendedPanelWithLocalId(!!allowCustomPanel),
             definingAsContext: true
           }
-        }];
+        }, ...(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? [{
+          name: 'panel_c1',
+          node: {
+            ...extendedPanelC1WithLocalId(!!allowCustomPanel),
+            definingAsContext: true
+          }
+        }] : [])];
       }
       return [{
         name: 'panel',
         node: extendedPanel(!!allowCustomPanel)
-      }];
+      }, ...(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? [{
+        name: 'panel_c1',
+        node: extendedPanelC1(!!allowCustomPanel)
+      }] : [])];
     },
     pmPlugins() {
       return [{
@@ -235,13 +246,11 @@ function createPanelAction({
   inputMethod = INPUT_METHOD.QUICK_INSERT
 }) {
   var _tr;
-  const {
-    panel
-  } = state.schema.nodes;
+  const panelNodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? pickPanelTypeForInsertion(state) : state.schema.nodes.panel;
   let tr;
   // If the selection is empty, we want to insert the panel on a new line
   if (state.selection.empty) {
-    const node = panel.createAndFill({
+    const node = panelNodeType.createAndFill({
       ...attributes
     });
     if (!node) {
@@ -258,7 +267,7 @@ function createPanelAction({
   } else {
     tr = createWrapSelectionTransaction({
       state,
-      type: panel,
+      type: panelNodeType,
       nodeAttributes: {
         ...attributes
       }

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

@@ -1,6 +1,7 @@
 import { isEmptyNode } from '@atlaskit/editor-common/utils';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { findParentNodeOfType, hasParentNodeOfType, setTextSelection } from '@atlaskit/editor-prosemirror/utils';
+import { isPanel, panelTypes } from './utils/utils';
 function findParentNode(selection, nodeType) {
   const parentPosition = findParentNodeOfType(nodeType)(selection);
   if (parentPosition) {
@@ -29,7 +30,6 @@ export function keymapPlugin() {
         tr
       } = state;
       const {
-        panel,
         blockquote,
         orderedList,
         bulletList,
@@ -37,6 +37,7 @@ export function keymapPlugin() {
         mediaGroup,
         extension
       } = nodes;
+      const panelNodeTypes = panelTypes(nodes);
       const {
         $from,
         $to
@@ -53,8 +54,8 @@ export function keymapPlugin() {
       const $previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
       const previousNodeType = $previousPos.pos > 0 && $previousPos.parent && $previousPos.parent.type;
       const parentNodeType = $from.parent.type;
-      const isPreviousNodeAPanel = previousNodeType === panel;
-      const isParentNodeAPanel = parentNodeType === panel;
+      const isPreviousNodeAPanel = previousNodeType && isPanel(previousNodeType.name);
+      const isParentNodeAPanel = isPanel(parentNodeType.name);
       const nodeBeforePanel = $previousPos === null || $previousPos === void 0 ? void 0 : $previousPos.nodeBefore;
       const isPreviousNodeMedia = previousNodeType === mediaSingle || previousNodeType === mediaGroup;
       const isPreviousNodeAList = previousNodeType === bulletList || previousNodeType === orderedList;
@@ -64,13 +65,13 @@ export function keymapPlugin() {
 
       // Stops merging panels when deleting empty paragraph in between
       // Stops merging blockquotes with panels when deleting from start of blockquote
-      if (isPreviousNodeAPanel && !isParentNodeAPanel && !isPreviousPosAtExtension || isInsideAnEmptyNode(selection, panel, state.schema) || hasParentNodeOfType(blockquote)(selection) && !isPreviousNodeAList && !isPreviousNodeMedia && !isPreviousPosAtExtension ||
+      if (isPreviousNodeAPanel && !isParentNodeAPanel && !isPreviousPosAtExtension || panelNodeTypes.some(type => isInsideAnEmptyNode(selection, type, state.schema)) || hasParentNodeOfType(blockquote)(selection) && !isPreviousNodeAList && !isPreviousNodeMedia && !isPreviousPosAtExtension ||
       // Lift line of panel content up and out of the panel, when backspacing
       // at the start of a panel, if the node before the panel is an 'isolating' node
       // (for e.g. a table, or an expand), otherwise the default prosemirror backspace
       // behaviour will fallback to 'select node backward' logic because the node
       // before is an isolating node.
-      nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type2 = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type2 !== void 0 && _nodeBeforePanel$type2.isolating && hasParentNodeOfType(panel)(selection)) {
+      nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type2 = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type2 !== void 0 && _nodeBeforePanel$type2.isolating && hasParentNodeOfType(panelNodeTypes)(selection)) {
         const content = $from.node($from.depth).content;
         const insertPos = $previousPos.pos;
         deleteCurrentItem($from, tr).insert(insertPos, content);
@@ -80,7 +81,7 @@ export function keymapPlugin() {
         return true;
       }
       const nodeType = $from.node().type;
-      if (nodeType !== panel) {
+      if (!isPanel(nodeType.name)) {
         return false;
       }
       return true;

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

@@ -1,6 +1,7 @@
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPanelNodeView } from '../nodeviews/panel';
 import { pluginKey } from '../panelPluginType';
 import { handleCut } from './utils/utils';
@@ -18,9 +19,12 @@ export const createPlugin = (dispatch, providerFactory, pluginOptions, api, node
     },
     props: {
       nodeViews: {
-        panel: getPanelNodeView(pluginOptions, api, nodeViewPortalProviderAPI, providerFactory)
+        panel: getPanelNodeView(pluginOptions, api, nodeViewPortalProviderAPI, providerFactory),
+        ...(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? {
+          panel_c1: getPanelNodeView(pluginOptions, api, nodeViewPortalProviderAPI, providerFactory)
+        } : {})
       },
-      handleClickOn: createSelectionClickHandler(['panel'], target => !!target.closest(`.${PanelSharedCssClassName.prefix}`), {
+      handleClickOn: createSelectionClickHandler(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? ['panel', 'panel_c1'] : ['panel'], target => !!target.closest(`.${PanelSharedCssClassName.prefix}`), {
         useLongPressSelection
       })
     }

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

@@ -5,11 +5,41 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
 import { findParentNode, findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+export const isPanel = nodeName => {
+  return expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? ['panel', 'panel_c1'].includes(nodeName) : nodeName === 'panel';
+};
+export const panelTypes = nodes => {
+  const {
+    panel,
+    panel_c1
+  } = nodes;
+  return expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? [panel, panel_c1] : [panel];
+};
 export const findPanel = (state, selection) => {
+  return findSelectedNodeOfType(panelTypes(state.schema.nodes))(selection || state.selection) || findParentNodeOfType(panelTypes(state.schema.nodes))(selection || state.selection);
+};
+export const pickPanelTypeForInsertion = input => {
+  const selection = 'selection' in input ? input.selection : input;
+  const schema = selection.$from.doc.type.schema;
   const {
-    panel
-  } = state.schema.nodes;
-  return findSelectedNodeOfType(panel)(selection || state.selection) || findParentNodeOfType(panel)(selection || state.selection);
+    panel,
+    panel_c1
+  } = schema.nodes;
+  const $from = selection.$from;
+  for (let depth = $from.depth; depth >= 0; depth--) {
+    const parent = $from.node(depth);
+    const index = $from.index(depth);
+    if (parent.canReplaceWith(index, index, panel_c1)) {
+      return panel_c1;
+    }
+    const spec = parent.type.spec;
+    // Stop at isolating containers (e.g. expand, tableCell) — hard walls where
+    // the panel stays inside and should use the regular panel type.
+    if (spec.isolating) {
+      return panel;
+    }
+  }
+  return panel;
 };
 export const panelAttrsToDom = (attrs, allowCustomPanel) => {
   const {
@@ -74,12 +104,14 @@ export const handleCut = (newState, oldState) => {
     schema
   } = newState.doc.type;
   if (panelContentCheck(newState, oldState)) {
+    var _oldPanelNode$node$ty;
     // Create a panel using oldState with an empty paragraph node
     // and insert it in the same location when panel previously existed
     const emptyParagraph = schema.nodes.paragraph.create();
-    const oldPanelNode = findParentNode(node => node.type.name === 'panel')(oldState.tr.selection);
+    const oldPanelNode = findParentNode(node => isPanel(node.type.name))(oldState.tr.selection);
     const clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
-    const newPanelNode = schema.nodes.panel.create({
+    const panelNodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (_oldPanelNode$node$ty = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.type) !== null && _oldPanelNode$node$ty !== void 0 ? _oldPanelNode$node$ty : schema.nodes.panel : schema.nodes.panel;
+    const newPanelNode = panelNodeType.create({
       ...(clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs)
     }, emptyParagraph);
     const endPos = oldState.tr.selection.$from.pos;
@@ -97,7 +129,7 @@ export const panelContentCheck = (newState, oldState) => {
   //     OR old selection is a codeblock OR old selection is a rule
   const isNodeSelection = oldState.tr.selection instanceof NodeSelection;
   const isNodeTypeRuleOrCodeBlock = isNodeSelection && ['codeBlock', 'rule'].includes(oldState.tr.selection.node.type.name);
-  const isParentTypePanel = findParentNodeOfType(newState.schema.nodes.panel)(oldState.tr.selection);
+  const isParentTypePanel = findParentNodeOfType(panelTypes(newState.schema.nodes))(oldState.tr.selection);
   const isparentTypeDecision = findParentNodeOfType(newState.schema.nodes.decisionList)(oldState.tr.selection);
   return Boolean(isNodeSelection && (isParentTypePanel === null || isParentTypePanel === void 0 ? void 0 : isParentTypePanel.node.childCount) === 1 && ((isparentTypeDecision === null || isparentTypeDecision === void 0 ? void 0 : isparentTypeDecision.node.childCount) === 1 || isNodeTypeRuleOrCodeBlock));
 };

package/dist/es2019/ui/toolbar.js

@@ -16,6 +16,7 @@ import StatusDiscoveryIcon from '@atlaskit/icon/core/status-discovery';
 import InformationIcon from '@atlaskit/icon/core/status-information';
 import SuccessIcon from '@atlaskit/icon/core/status-success';
 import WarningIcon from '@atlaskit/icon/core/status-warning';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { changePanelType, removePanel } from '../editor-actions/actions';
 import { findPanel } from '../pm-plugins/utils/utils';
 import { panelTypeDropdown } from './panelTypeDropdown';
@@ -311,7 +312,7 @@ export const getToolbarConfig = (state, intl, options = {}, providerFactory, api
   const panelObject = findPanel(state);
   if (panelObject) {
     var _api$decorations, _api$analytics;
-    const nodeType = state.schema.nodes.panel;
+    const nodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? panelObject.node.type : state.schema.nodes.panel;
     const {
       panelType,
       panelColor,

package/dist/esm/editor-actions/actions.js

@@ -5,7 +5,8 @@ import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/edit
 import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
-import { findPanel } from '../pm-plugins/utils/utils';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { findPanel, isPanel, panelTypes } from '../pm-plugins/utils/utils';
 export var removePanel = function removePanel(editorAnalyticsAPI) {
   return function (state, dispatch) {
     var nodes = state.schema.nodes,
@@ -18,11 +19,12 @@ export var removePanel = function removePanel(editorAnalyticsAPI) {
       },
       eventType: EVENT_TYPE.TRACK
     };
+    var panelNodeTypes = panelTypes(nodes);
     var deleteTr = tr;
-    if (findSelectedNodeOfType(nodes.panel)(tr.selection)) {
+    if (findSelectedNodeOfType(panelNodeTypes)(tr.selection)) {
       deleteTr = removeSelectedNode(tr);
-    } else if (findParentNodeOfType(nodes.panel)(tr.selection)) {
-      deleteTr = removeParentNodeOfType(nodes.panel)(tr);
+    } else if (findParentNodeOfType(panelNodeTypes)(tr.selection)) {
+      deleteTr = removeParentNodeOfType(panelNodeTypes)(tr);
     }
     if (!deleteTr) {
       return false;
@@ -48,6 +50,7 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
       var newType = panelType;
       var previousType = panelNode.node.attrs.panelType;
       var newTr;
+      var panelNodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? panelNode.node.type : nodes.panel;
       if (allowCustomPanel) {
         var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(previousType);
         var previousIcon = panelNode.node.attrs.panelIcon;
@@ -59,7 +62,7 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
           emojiId: previousIconId,
           emojiText: previousIconText
         }, panelOptions);
-        newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
+        newTr = tr.setNodeMarkup(panelNode.pos, panelNodeType, {
           panelIcon: newPanelOptions.emoji,
           panelIconId: newPanelOptions.emojiId,
           panelIconText: newPanelOptions.emojiText,
@@ -67,7 +70,7 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
           panelType: panelType
         });
       } else {
-        newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
+        newTr = tr.setNodeMarkup(panelNode.pos, panelNodeType, {
           panelType: panelType
         });
       }
@@ -82,7 +85,7 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
       };
 
       // Select the panel if it was previously selected
-      var newTrWithSelection = state.selection instanceof NodeSelection && state.selection.node.type.name === 'panel' ? newTr.setSelection(new NodeSelection(tr.doc.resolve(panelNode.pos))) : newTr;
+      var newTrWithSelection = state.selection instanceof NodeSelection && isPanel(state.selection.node.type.name) ? newTr.setSelection(new NodeSelection(tr.doc.resolve(panelNode.pos))) : newTr;
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent(payload)(newTrWithSelection);
       newTrWithSelection.setMeta('scrollIntoView', false);
       if (dispatch) {

package/dist/esm/panelPlugin.js

@@ -1,8 +1,9 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import React from 'react';
-import { extendedPanel, extendedPanelWithLocalId, PanelType } from '@atlaskit/adf-schema';
+import { extendedPanel, extendedPanelC1, extendedPanelC1WithLocalId, extendedPanelWithLocalId, PanelType } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { TRANSFORM_STRUCTURE_PANEL_MENU_ITEM, TRANSFORM_STRUCTURE_MENU_SECTION, TRANSFORM_STRUCTURE_MENU_SECTION_RANK } from '@atlaskit/editor-common/block-menu';
 import { insertSelectedItem } from '@atlaskit/editor-common/insert';
@@ -10,9 +11,11 @@ import { blockTypeMessages } from '@atlaskit/editor-common/messages';
 import { IconCustomPanel, IconPanel, IconPanelError, IconPanelNote, IconPanelSuccess, IconPanelWarning } from '@atlaskit/editor-common/quick-insert';
 import { createWrapSelectionTransaction } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import keymap from './pm-plugins/keymaps';
 import { createPlugin } from './pm-plugins/main';
+import { pickPanelTypeForInsertion } from './pm-plugins/utils/utils';
 import { createPanelBlockMenuItem } from './ui/panelBlockMenuItem';
 import { getToolbarConfig } from './ui/toolbar';
 var PANEL_NODE_NAME = 'panel';
@@ -50,12 +53,20 @@ var panelPlugin = function panelPlugin(_ref) {
           node: _objectSpread(_objectSpread({}, extendedPanelWithLocalId(!!allowCustomPanel)), {}, {
             definingAsContext: true
           })
-        }];
+        }].concat(_toConsumableArray(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? [{
+          name: 'panel_c1',
+          node: _objectSpread(_objectSpread({}, extendedPanelC1WithLocalId(!!allowCustomPanel)), {}, {
+            definingAsContext: true
+          })
+        }] : []));
       }
       return [{
         name: 'panel',
         node: extendedPanel(!!allowCustomPanel)
-      }];
+      }].concat(_toConsumableArray(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? [{
+        name: 'panel_c1',
+        node: extendedPanelC1(!!allowCustomPanel)
+      }] : []));
     },
     pmPlugins: function pmPlugins() {
       return [{
@@ -253,11 +264,11 @@ function createPanelAction(_ref4) {
     typeAheadInsert = _ref4.typeAheadInsert,
     _ref4$inputMethod = _ref4.inputMethod,
     inputMethod = _ref4$inputMethod === void 0 ? INPUT_METHOD.QUICK_INSERT : _ref4$inputMethod;
-  var panel = state.schema.nodes.panel;
+  var panelNodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? pickPanelTypeForInsertion(state) : state.schema.nodes.panel;
   var tr;
   // If the selection is empty, we want to insert the panel on a new line
   if (state.selection.empty) {
-    var node = panel.createAndFill(_objectSpread({}, attributes));
+    var node = panelNodeType.createAndFill(_objectSpread({}, attributes));
     if (!node) {
       return false;
     }
@@ -272,7 +283,7 @@ function createPanelAction(_ref4) {
   } else {
     tr = createWrapSelectionTransaction({
       state: state,
-      type: panel,
+      type: panelNodeType,
       nodeAttributes: _objectSpread({}, attributes)
     });
   }

package/dist/esm/pm-plugins/keymaps.js

@@ -1,6 +1,7 @@
 import { isEmptyNode } from '@atlaskit/editor-common/utils';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
 import { findParentNodeOfType, hasParentNodeOfType, setTextSelection } from '@atlaskit/editor-prosemirror/utils';
+import { isPanel, panelTypes } from './utils/utils';
 function findParentNode(selection, nodeType) {
   var parentPosition = findParentNodeOfType(nodeType)(selection);
   if (parentPosition) {
@@ -24,13 +25,13 @@ export function keymapPlugin() {
       var selection = state.selection,
         nodes = state.schema.nodes,
         tr = state.tr;
-      var panel = nodes.panel,
-        blockquote = nodes.blockquote,
+      var blockquote = nodes.blockquote,
         orderedList = nodes.orderedList,
         bulletList = nodes.bulletList,
         mediaSingle = nodes.mediaSingle,
         mediaGroup = nodes.mediaGroup,
         extension = nodes.extension;
+      var panelNodeTypes = panelTypes(nodes);
       var $from = selection.$from,
         $to = selection.$to;
       // Don't do anything if selection is a range
@@ -45,8 +46,8 @@ export function keymapPlugin() {
       var $previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
       var previousNodeType = $previousPos.pos > 0 && $previousPos.parent && $previousPos.parent.type;
       var parentNodeType = $from.parent.type;
-      var isPreviousNodeAPanel = previousNodeType === panel;
-      var isParentNodeAPanel = parentNodeType === panel;
+      var isPreviousNodeAPanel = previousNodeType && isPanel(previousNodeType.name);
+      var isParentNodeAPanel = isPanel(parentNodeType.name);
       var nodeBeforePanel = $previousPos === null || $previousPos === void 0 ? void 0 : $previousPos.nodeBefore;
       var isPreviousNodeMedia = previousNodeType === mediaSingle || previousNodeType === mediaGroup;
       var isPreviousNodeAList = previousNodeType === bulletList || previousNodeType === orderedList;
@@ -56,13 +57,15 @@ export function keymapPlugin() {
 
       // Stops merging panels when deleting empty paragraph in between
       // Stops merging blockquotes with panels when deleting from start of blockquote
-      if (isPreviousNodeAPanel && !isParentNodeAPanel && !isPreviousPosAtExtension || isInsideAnEmptyNode(selection, panel, state.schema) || hasParentNodeOfType(blockquote)(selection) && !isPreviousNodeAList && !isPreviousNodeMedia && !isPreviousPosAtExtension ||
+      if (isPreviousNodeAPanel && !isParentNodeAPanel && !isPreviousPosAtExtension || panelNodeTypes.some(function (type) {
+        return isInsideAnEmptyNode(selection, type, state.schema);
+      }) || hasParentNodeOfType(blockquote)(selection) && !isPreviousNodeAList && !isPreviousNodeMedia && !isPreviousPosAtExtension ||
       // Lift line of panel content up and out of the panel, when backspacing
       // at the start of a panel, if the node before the panel is an 'isolating' node
       // (for e.g. a table, or an expand), otherwise the default prosemirror backspace
       // behaviour will fallback to 'select node backward' logic because the node
       // before is an isolating node.
-      nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type !== void 0 && _nodeBeforePanel$type.isolating && hasParentNodeOfType(panel)(selection)) {
+      nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type !== void 0 && _nodeBeforePanel$type.isolating && hasParentNodeOfType(panelNodeTypes)(selection)) {
         var content = $from.node($from.depth).content;
         var insertPos = $previousPos.pos;
         deleteCurrentItem($from, tr).insert(insertPos, content);
@@ -72,7 +75,7 @@ export function keymapPlugin() {
         return true;
       }
       var nodeType = $from.node().type;
-      if (nodeType !== panel) {
+      if (!isPanel(nodeType.name)) {
         return false;
       }
       return true;

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

@@ -1,6 +1,10 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { createSelectionClickHandler } from '@atlaskit/editor-common/selection';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getPanelNodeView } from '../nodeviews/panel';
 import { pluginKey } from '../panelPluginType';
 import { handleCut } from './utils/utils';
@@ -18,10 +22,12 @@ export var createPlugin = function createPlugin(dispatch, providerFactory, plugi
       }
     },
     props: {
-      nodeViews: {
+      nodeViews: _objectSpread({
         panel: getPanelNodeView(pluginOptions, api, nodeViewPortalProviderAPI, providerFactory)
-      },
-      handleClickOn: createSelectionClickHandler(['panel'], function (target) {
+      }, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? {
+        panel_c1: getPanelNodeView(pluginOptions, api, nodeViewPortalProviderAPI, providerFactory)
+      } : {}),
+      handleClickOn: createSelectionClickHandler(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? ['panel', 'panel_c1'] : ['panel'], function (target) {
         return !!target.closest(".".concat(PanelSharedCssClassName.prefix));
       }, {
         useLongPressSelection: useLongPressSelection

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

@@ -8,9 +8,38 @@ import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state
 import { findParentNode, findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+export var isPanel = function isPanel(nodeName) {
+  return expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? ['panel', 'panel_c1'].includes(nodeName) : nodeName === 'panel';
+};
+export var panelTypes = function panelTypes(nodes) {
+  var panel = nodes.panel,
+    panel_c1 = nodes.panel_c1;
+  return expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? [panel, panel_c1] : [panel];
+};
 export var findPanel = function findPanel(state, selection) {
-  var panel = state.schema.nodes.panel;
-  return findSelectedNodeOfType(panel)(selection || state.selection) || findParentNodeOfType(panel)(selection || state.selection);
+  return findSelectedNodeOfType(panelTypes(state.schema.nodes))(selection || state.selection) || findParentNodeOfType(panelTypes(state.schema.nodes))(selection || state.selection);
+};
+export var pickPanelTypeForInsertion = function pickPanelTypeForInsertion(input) {
+  var selection = 'selection' in input ? input.selection : input;
+  var schema = selection.$from.doc.type.schema;
+  var _schema$nodes = schema.nodes,
+    panel = _schema$nodes.panel,
+    panel_c1 = _schema$nodes.panel_c1;
+  var $from = selection.$from;
+  for (var depth = $from.depth; depth >= 0; depth--) {
+    var parent = $from.node(depth);
+    var index = $from.index(depth);
+    if (parent.canReplaceWith(index, index, panel_c1)) {
+      return panel_c1;
+    }
+    var spec = parent.type.spec;
+    // Stop at isolating containers (e.g. expand, tableCell) — hard walls where
+    // the panel stays inside and should use the regular panel type.
+    if (spec.isolating) {
+      return panel;
+    }
+  }
+  return panel;
 };
 export var panelAttrsToDom = function panelAttrsToDom(attrs, allowCustomPanel) {
   var panelColor = attrs.panelColor,
@@ -68,14 +97,16 @@ export var handleCut = function handleCut(newState, oldState) {
   var newTr = newState.tr;
   var schema = newState.doc.type.schema;
   if (panelContentCheck(newState, oldState)) {
+    var _oldPanelNode$node$ty;
     // Create a panel using oldState with an empty paragraph node
     // and insert it in the same location when panel previously existed
     var emptyParagraph = schema.nodes.paragraph.create();
     var oldPanelNode = findParentNode(function (node) {
-      return node.type.name === 'panel';
+      return isPanel(node.type.name);
     })(oldState.tr.selection);
     var clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
-    var newPanelNode = schema.nodes.panel.create(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), emptyParagraph);
+    var panelNodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? (_oldPanelNode$node$ty = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.type) !== null && _oldPanelNode$node$ty !== void 0 ? _oldPanelNode$node$ty : schema.nodes.panel : schema.nodes.panel;
+    var newPanelNode = panelNodeType.create(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), emptyParagraph);
     var endPos = oldState.tr.selection.$from.pos;
     if (oldPanelNode) {
       newTr.insert(oldPanelNode.pos, newPanelNode).setSelection(new TextSelection(newTr.doc.resolve(endPos)));
@@ -91,7 +122,7 @@ export var panelContentCheck = function panelContentCheck(newState, oldState) {
   //     OR old selection is a codeblock OR old selection is a rule
   var isNodeSelection = oldState.tr.selection instanceof NodeSelection;
   var isNodeTypeRuleOrCodeBlock = isNodeSelection && ['codeBlock', 'rule'].includes(oldState.tr.selection.node.type.name);
-  var isParentTypePanel = findParentNodeOfType(newState.schema.nodes.panel)(oldState.tr.selection);
+  var isParentTypePanel = findParentNodeOfType(panelTypes(newState.schema.nodes))(oldState.tr.selection);
   var isparentTypeDecision = findParentNodeOfType(newState.schema.nodes.decisionList)(oldState.tr.selection);
   return Boolean(isNodeSelection && (isParentTypePanel === null || isParentTypePanel === void 0 ? void 0 : isParentTypePanel.node.childCount) === 1 && ((isparentTypeDecision === null || isparentTypeDecision === void 0 ? void 0 : isparentTypeDecision.node.childCount) === 1 || isNodeTypeRuleOrCodeBlock));
 };

package/dist/esm/ui/toolbar.js

@@ -20,6 +20,7 @@ import StatusDiscoveryIcon from '@atlaskit/icon/core/status-discovery';
 import InformationIcon from '@atlaskit/icon/core/status-information';
 import SuccessIcon from '@atlaskit/icon/core/status-success';
 import WarningIcon from '@atlaskit/icon/core/status-warning';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { changePanelType, removePanel } from '../editor-actions/actions';
 import { findPanel } from '../pm-plugins/utils/utils';
 import { panelTypeDropdown } from './panelTypeDropdown';
@@ -323,7 +324,7 @@ export var getToolbarConfig = function getToolbarConfig(state, intl) {
   var panelObject = findPanel(state);
   if (panelObject) {
     var _api$decorations, _api$analytics;
-    var nodeType = state.schema.nodes.panel;
+    var nodeType = expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? panelObject.node.type : state.schema.nodes.panel;
     var _panelObject$node$att = panelObject.node.attrs,
       panelType = _panelObject$node$att.panelType,
       panelColor = _panelObject$node$att.panelColor,

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

@@ -1,8 +1,13 @@
 import type { PanelAttributes } from '@atlaskit/adf-schema';
-import type { DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
+import type { DOMOutputSpec, NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+export declare const isPanel: (nodeName: string) => boolean;
+export declare const panelTypes: (nodes: {
+    [key: string]: NodeType;
+}) => NodeType[];
 export declare const findPanel: (state: EditorState, selection?: Selection | null) => ReturnType<ReturnType<typeof findSelectedNodeOfType>> | ReturnType<ReturnType<typeof findParentNodeOfType>>;
+export declare const pickPanelTypeForInsertion: (input: EditorState | Selection) => NodeType;
 export declare const panelAttrsToDom: (attrs: PanelAttributes, allowCustomPanel: boolean) => DOMOutputSpec;
 export declare const handleCut: (newState: EditorState, oldState: EditorState) => Transaction | undefined;
 export declare const panelContentCheck: (newState: EditorState, oldState: EditorState) => boolean;

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

@@ -1,8 +1,13 @@
 import type { PanelAttributes } from '@atlaskit/adf-schema';
-import type { DOMOutputSpec } from '@atlaskit/editor-prosemirror/model';
+import type { DOMOutputSpec, NodeType } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState, Selection, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType } from '@atlaskit/editor-prosemirror/utils';
+export declare const isPanel: (nodeName: string) => boolean;
+export declare const panelTypes: (nodes: {
+    [key: string]: NodeType;
+}) => NodeType[];
 export declare const findPanel: (state: EditorState, selection?: Selection | null) => ReturnType<ReturnType<typeof findSelectedNodeOfType>> | ReturnType<ReturnType<typeof findParentNodeOfType>>;
+export declare const pickPanelTypeForInsertion: (input: EditorState | Selection) => NodeType;
 export declare const panelAttrsToDom: (attrs: PanelAttributes, allowCustomPanel: boolean) => DOMOutputSpec;
 export declare const handleCut: (newState: EditorState, oldState: EditorState) => Transaction | undefined;
 export declare const panelContentCheck: (newState: EditorState, oldState: EditorState) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-panel",
-	"version": "12.1.2",
+	"version": "12.2.0",
 	"description": "Panel plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -27,27 +27,27 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^52.11.0",
+		"@atlaskit/adf-schema": "^52.13.0",
 		"@atlaskit/editor-palette": "^2.2.0",
 		"@atlaskit/editor-plugin-analytics": "^10.1.0",
 		"@atlaskit/editor-plugin-block-menu": "^9.2.0",
 		"@atlaskit/editor-plugin-decorations": "^10.1.0",
-		"@atlaskit/editor-plugin-emoji": "^11.1.0",
+		"@atlaskit/editor-plugin-emoji": "^11.2.0",
 		"@atlaskit/editor-plugin-selection": "^10.1.0",
 		"@atlaskit/editor-plugin-toolbar": "^7.3.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.11.0",
-		"@atlaskit/editor-toolbar": "^1.5.0",
-		"@atlaskit/emoji": "^70.9.0",
+		"@atlaskit/editor-toolbar": "^1.7.0",
+		"@atlaskit/emoji": "^70.10.0",
 		"@atlaskit/icon": "^35.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/tmp-editor-statsig": "^81.1.0",
+		"@atlaskit/tmp-editor-statsig": "^82.3.0",
 		"@atlaskit/tokens": "^13.0.0",
 		"@babel/runtime": "^7.0.0",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^114.35.0",
+		"@atlaskit/editor-common": "^114.41.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
@@ -108,6 +108,8 @@
 		}
 	},
 	"devDependencies": {
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
 		"react-intl": "^6.6.2"
 	}
 }