@atlaskit/editor-plugin-panel 5.2.4 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/editor-plugin-panel
 
+## 5.3.0
+
+### Minor Changes
+
+- [`a0e6cdeb5a90c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a0e6cdeb5a90c) -
+  [ux] New experiment to unify the handling of panel insertion to more consistent behaviour.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.2.5
+
+### Patch Changes
+
+- [#195353](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195353)
+  [`dc5e7898ce269`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dc5e7898ce269) -
+  EDITOR-1104 Replace panel with panelWithLocalId behind platform_editor_adf_with_localid feature
+  gate.
+- [#195649](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195649)
+  [`231bb33e06dfe`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/231bb33e06dfe) -
+  EDITOR-1131 Bump adf-schema version to 50.2.0
+- Updated dependencies
+
 ## 5.2.4
 
 ### Patch Changes

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

@@ -15,6 +15,7 @@ var _panel = require("@atlaskit/editor-common/panel");
 var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils3 = 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; }
@@ -51,6 +52,7 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
     var panelOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var allowCustomPanel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     return function (state, dispatch) {
+      var _panelNode$node$attrs;
       var nodes = state.schema.nodes,
         tr = state.tr;
       var panelNode = (0, _utils3.findPanel)(state);
@@ -60,6 +62,7 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
       var newType = panelType;
       var previousType = panelNode.node.attrs.panelType;
       var newTr;
+      var localId = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? ((_panelNode$node$attrs = panelNode.node.attrs) === null || _panelNode$node$attrs === void 0 ? void 0 : _panelNode$node$attrs.localId) || _adfSchema.uuid.generate() : undefined;
       if (allowCustomPanel) {
         var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : (0, _panel.getPanelTypeBackgroundNoTokens)(previousType);
         var previousIcon = panelNode.node.attrs.panelIcon;
@@ -76,11 +79,13 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
           panelIconId: newPanelOptions.emojiId,
           panelIconText: newPanelOptions.emojiText,
           panelColor: newPanelOptions.color,
-          panelType: panelType
+          panelType: panelType,
+          localId: localId
         });
       } else {
         newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
-          panelType: panelType
+          panelType: panelType,
+          localId: localId
         });
       }
       var payload = {
@@ -104,6 +109,8 @@ var changePanelType = exports.changePanelType = function changePanelType(editorA
     };
   };
 };
+
+// Delete with 'platform_editor_fix_quick_insert_consistency_exp'
 function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
   return (0, _editorAnalytics.withAnalytics)(analyticsAPI, {
     action: _analytics.ACTION.INSERTED,
@@ -117,7 +124,10 @@ function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
   })(function (state, dispatch) {
     var nodes = state.schema.nodes;
     if (nodes.panel && nodes.paragraph) {
-      return (0, _utils.wrapSelectionIn)(nodes.panel)(state, dispatch);
+      var panelAttrs = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? {
+        localId: _adfSchema.uuid.generate()
+      } : {};
+      return (0, _utils.wrapSelectionIn)(nodes.panel, panelAttrs)(state, dispatch);
     }
     return false;
   });

package/dist/cjs/panelPlugin.js

@@ -5,18 +5,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _insert = require("@atlaskit/editor-common/insert");
 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 _colors = require("@atlaskit/theme/colors");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("./editor-actions/actions");
 var _keymaps = _interopRequireDefault(require("./pm-plugins/keymaps"));
 var _main = require("./pm-plugins/main");
 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; }
+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 panelPlugin = function panelPlugin(_ref) {
   var _ref$config = _ref.config,
     options = _ref$config === void 0 ? {} : _ref$config,
@@ -24,10 +30,15 @@ var panelPlugin = function panelPlugin(_ref) {
   return {
     name: 'panel',
     nodes: function nodes() {
-      var panelNode = (0, _adfSchema.extendedPanel)(!!options.allowCustomPanel);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid')) {
+        return [{
+          name: 'panel',
+          node: (0, _adfSchema.extendedPanelWithLocalId)(!!options.allowCustomPanel)
+        }];
+      }
       return [{
         name: 'panel',
-        node: panelNode
+        node: (0, _adfSchema.extendedPanel)(!!options.allowCustomPanel)
       }];
     },
     pmPlugins: function pmPlugins() {
@@ -48,8 +59,28 @@ var panelPlugin = function panelPlugin(_ref) {
     },
     actions: {
       insertPanel: function insertPanel(inputMethod) {
-        var _api$analytics;
-        return (0, _actions.insertPanelWithAnalytics)(inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+        if ((0, _expValEquals.expValEquals)('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
+          return function (state, dispatch) {
+            var tr = createPanelAction({
+              state: state,
+              attributes: {
+                panelType: _adfSchema.PanelType.INFO
+              },
+              api: api,
+              inputMethod: inputMethod
+            });
+            if (!tr) {
+              return false;
+            }
+            if (dispatch) {
+              dispatch(tr);
+            }
+            return true;
+          };
+        } else {
+          var _api$analytics;
+          return (0, _actions.insertPanelWithAnalytics)(inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+        }
       }
     },
     pluginsOptions: {
@@ -65,14 +96,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanel, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: _adfSchema.PanelType.INFO
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }];
@@ -86,14 +117,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanel, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: _adfSchema.PanelType.INFO
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }, {
@@ -104,14 +135,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelNote, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: _adfSchema.PanelType.NOTE
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }, {
@@ -123,14 +154,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelSuccess, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: _adfSchema.PanelType.SUCCESS
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }, {
@@ -141,14 +172,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelWarning, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: _adfSchema.PanelType.WARNING
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }, {
@@ -159,14 +190,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/_react.default.createElement(_quickInsert.IconPanelError, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: _adfSchema.PanelType.ERROR
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }];
@@ -179,7 +210,7 @@ var panelPlugin = function panelPlugin(_ref) {
               icon: function icon() {
                 return /*#__PURE__*/_react.default.createElement(_quickInsert.IconCustomPanel, null);
               },
-              action: function action(insert, state) {
+              action: function action(typeAheadInsert, state) {
                 return createPanelAction({
                   state: state,
                   attributes: {
@@ -194,7 +225,7 @@ var panelPlugin = function panelPlugin(_ref) {
                     panelColor: _colors.T50
                   },
                   api: api,
-                  insert: insert
+                  typeAheadInsert: typeAheadInsert
                 });
               }
             });
@@ -225,24 +256,60 @@ function createPanelAction(_ref4) {
   var state = _ref4.state,
     attributes = _ref4.attributes,
     api = _ref4.api,
-    insert = _ref4.insert;
+    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 tr;
+  var panelAttrs = (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') ? _objectSpread(_objectSpread({}, attributes), {}, {
+    localId: attributes.localId || _adfSchema.uuid.generate()
+  }) : _objectSpread({}, attributes);
 
-  // Panels should wrap content by default when inserted, the quickInsert `insert` method
-  // will insert the node on a newline
-  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
-    tr = state.selection.empty && (0, _utils.createWrapSelectionTransaction)({
-      state: state,
-      type: panel,
-      nodeAttributes: attributes
-    });
+  /*
+  	During investigation of go/j/ED-26928 I found that the behaviour of this experience was very
+  	inconsistent. I reached out to Nicole* for a design review, and she confirmed that the desired
+  	behaviour is to insert the panel on a new line if the selection is empty.
+  	 *Confluence Editor Lead Product Designer
+   */
+  if ((0, _expValEquals.expValEquals)('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
+    // If the selection is empty, we want to insert the panel on a new line
+    if (state.selection.empty) {
+      var node = panel.createAndFill(panelAttrs);
+      if (!node) {
+        return false;
+      }
+      if (typeAheadInsert !== undefined) {
+        // If the type-ahead insert is provided, we should use that to insert the node
+        tr = typeAheadInsert(node);
+      } else {
+        var _insertSelectedItem;
+        // Otherwise we can use insertSelectedItem to insert the node
+        tr = (_insertSelectedItem = (0, _insert.insertSelectedItem)(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+      }
+    } else {
+      tr = (0, _utils.createWrapSelectionTransaction)({
+        state: state,
+        type: panel,
+        nodeAttributes: panelAttrs
+      });
+    }
   } else {
-    var node = panel.createAndFill(attributes);
-    if (!node) {
-      return false;
+    // Panels should wrap content by default when inserted, the quickInsert `insert` method
+    // will insert the node on a newline
+    if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
+      tr = state.selection.empty && (0, _utils.createWrapSelectionTransaction)({
+        state: state,
+        type: panel,
+        nodeAttributes: panelAttrs
+      });
+    } else {
+      var _node = panel.createAndFill(panelAttrs);
+      if (!_node) {
+        return false;
+      }
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- This is only optional within the experiment, so safe to assume non-null here
+      tr = state.selection.empty && typeAheadInsert(_node);
     }
-    tr = state.selection.empty && insert(node);
   }
   if (tr) {
     var _api$analytics2;
@@ -251,12 +318,12 @@ function createPanelAction(_ref4) {
       actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
       actionSubjectId: _analytics.ACTION_SUBJECT_ID.PANEL,
       attributes: {
-        inputMethod: _analytics.INPUT_METHOD.QUICK_INSERT,
+        inputMethod: inputMethod,
         panelType: attributes.panelType
       },
       eventType: _analytics.EVENT_TYPE.TRACK
     })(tr);
   }
-  return tr;
+  return tr !== null && tr !== void 0 ? tr : false;
 }
 var _default = exports.default = panelPlugin;

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

@@ -69,7 +69,9 @@ var handleCut = exports.handleCut = function handleCut(newState, oldState) {
       return node.type.name === 'panel';
     })(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 newPanelNode = schema.nodes.panel.create(_objectSpread(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), (0, _platformFeatureFlags.fg)('platform_editor_adf_with_localid') && {
+      localId: _adfSchema.uuid.generate()
+    }), emptyParagraph);
     var endPos = oldState.tr.selection.$from.pos;
     if (oldPanelNode) {
       newTr.insert(oldPanelNode.pos, newPanelNode).setSelection(new _state.TextSelection(newTr.doc.resolve(endPos)));

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

@@ -1,10 +1,11 @@
-import { PanelType } from '@atlaskit/adf-schema';
+import { PanelType, uuid } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 import { wrapSelectionIn } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { findPanel } from '../pm-plugins/utils/utils';
 export const removePanel = editorAnalyticsAPI => (state, dispatch) => {
   const {
@@ -37,6 +38,7 @@ export const removePanel = editorAnalyticsAPI => (state, dispatch) => {
   return true;
 };
 export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions = {}, allowCustomPanel = false) => (state, dispatch) => {
+  var _panelNode$node$attrs;
   const {
     schema: {
       nodes
@@ -50,6 +52,7 @@ export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions =
   const newType = panelType;
   const previousType = panelNode.node.attrs.panelType;
   let newTr;
+  const localId = fg('platform_editor_adf_with_localid') ? ((_panelNode$node$attrs = panelNode.node.attrs) === null || _panelNode$node$attrs === void 0 ? void 0 : _panelNode$node$attrs.localId) || uuid.generate() : undefined;
   if (allowCustomPanel) {
     const previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(previousType);
     const previousIcon = panelNode.node.attrs.panelIcon;
@@ -67,11 +70,13 @@ export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions =
       panelIconId: newPanelOptions.emojiId,
       panelIconText: newPanelOptions.emojiText,
       panelColor: newPanelOptions.color,
-      panelType
+      panelType,
+      localId
     });
   } else {
     newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
-      panelType
+      panelType,
+      localId
     });
   }
   const payload = {
@@ -93,6 +98,8 @@ export const changePanelType = editorAnalyticsAPI => (panelType, panelOptions =
   }
   return true;
 };
+
+// Delete with 'platform_editor_fix_quick_insert_consistency_exp'
 export function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
   return withAnalytics(analyticsAPI, {
     action: ACTION.INSERTED,
@@ -108,7 +115,10 @@ export function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
       nodes
     } = state.schema;
     if (nodes.panel && nodes.paragraph) {
-      return wrapSelectionIn(nodes.panel)(state, dispatch);
+      const panelAttrs = fg('platform_editor_adf_with_localid') ? {
+        localId: uuid.generate()
+      } : {};
+      return wrapSelectionIn(nodes.panel, panelAttrs)(state, dispatch);
     }
     return false;
   });

package/dist/es2019/panelPlugin.js

@@ -1,10 +1,13 @@
 import React from 'react';
-import { extendedPanel, PanelType } from '@atlaskit/adf-schema';
+import { extendedPanel, extendedPanelWithLocalId, PanelType, uuid } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
 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 { T50 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { insertPanelWithAnalytics } from './editor-actions/actions';
 import keymap from './pm-plugins/keymaps';
@@ -16,10 +19,15 @@ const panelPlugin = ({
 }) => ({
   name: 'panel',
   nodes() {
-    const panelNode = extendedPanel(!!options.allowCustomPanel);
+    if (fg('platform_editor_adf_with_localid')) {
+      return [{
+        name: 'panel',
+        node: extendedPanelWithLocalId(!!options.allowCustomPanel)
+      }];
+    }
     return [{
       name: 'panel',
-      node: panelNode
+      node: extendedPanel(!!options.allowCustomPanel)
     }];
   },
   pmPlugins() {
@@ -37,8 +45,28 @@ const panelPlugin = ({
   },
   actions: {
     insertPanel(inputMethod) {
-      var _api$analytics;
-      return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+      if (expValEquals('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
+        return function (state, dispatch) {
+          const tr = createPanelAction({
+            state,
+            attributes: {
+              panelType: PanelType.INFO
+            },
+            api,
+            inputMethod
+          });
+          if (!tr) {
+            return false;
+          }
+          if (dispatch) {
+            dispatch(tr);
+          }
+          return true;
+        };
+      } else {
+        var _api$analytics;
+        return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+      }
     }
   },
   pluginsOptions: {
@@ -53,14 +81,14 @@ const panelPlugin = ({
           description: formatMessage(blockTypeMessages.infoPanelDescription),
           priority: 800,
           icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
-          action(insert, state) {
+          action(typeAheadInsert, state) {
             return createPanelAction({
               state,
               attributes: {
                 panelType: PanelType.INFO
               },
               api,
-              insert
+              typeAheadInsert
             });
           }
         }];
@@ -72,14 +100,14 @@ const panelPlugin = ({
           description: formatMessage(blockTypeMessages.infoPanelDescription),
           priority: 800,
           icon: () => /*#__PURE__*/React.createElement(IconPanel, null),
-          action(insert, state) {
+          action(typeAheadInsert, state) {
             return createPanelAction({
               state,
               attributes: {
                 panelType: PanelType.INFO
               },
               api,
-              insert
+              typeAheadInsert
             });
           }
         }, {
@@ -88,14 +116,14 @@ const panelPlugin = ({
           description: formatMessage(blockTypeMessages.notePanelDescription),
           priority: 1000,
           icon: () => /*#__PURE__*/React.createElement(IconPanelNote, null),
-          action(insert, state) {
+          action(typeAheadInsert, state) {
             return createPanelAction({
               state,
               attributes: {
                 panelType: PanelType.NOTE
               },
               api,
-              insert
+              typeAheadInsert
             });
           }
         }, {
@@ -105,14 +133,14 @@ const panelPlugin = ({
           keywords: ['tip'],
           priority: 1000,
           icon: () => /*#__PURE__*/React.createElement(IconPanelSuccess, null),
-          action(insert, state) {
+          action(typeAheadInsert, state) {
             return createPanelAction({
               state,
               attributes: {
                 panelType: PanelType.SUCCESS
               },
               api,
-              insert
+              typeAheadInsert
             });
           }
         }, {
@@ -121,14 +149,14 @@ const panelPlugin = ({
           description: formatMessage(blockTypeMessages.warningPanelDescription),
           priority: 1000,
           icon: () => /*#__PURE__*/React.createElement(IconPanelWarning, null),
-          action(insert, state) {
+          action(typeAheadInsert, state) {
             return createPanelAction({
               state,
               attributes: {
                 panelType: PanelType.WARNING
               },
               api,
-              insert
+              typeAheadInsert
             });
           }
         }, {
@@ -137,14 +165,14 @@ const panelPlugin = ({
           description: formatMessage(blockTypeMessages.errorPanelDescription),
           priority: 1000,
           icon: () => /*#__PURE__*/React.createElement(IconPanelError, null),
-          action(insert, state) {
+          action(typeAheadInsert, state) {
             return createPanelAction({
               state,
               attributes: {
                 panelType: PanelType.ERROR
               },
               api,
-              insert
+              typeAheadInsert
             });
           }
         }];
@@ -155,7 +183,7 @@ const panelPlugin = ({
             description: formatMessage(blockTypeMessages.customPanelDescription),
             priority: 1000,
             icon: () => /*#__PURE__*/React.createElement(IconCustomPanel, null),
-            action(insert, state) {
+            action(typeAheadInsert, state) {
               return createPanelAction({
                 state,
                 attributes: {
@@ -170,7 +198,7 @@ const panelPlugin = ({
                   panelColor: T50
                 },
                 api,
-                insert
+                typeAheadInsert
               });
             }
           });
@@ -198,27 +226,66 @@ function createPanelAction({
   state,
   attributes,
   api,
-  insert
+  typeAheadInsert,
+  inputMethod = INPUT_METHOD.QUICK_INSERT
 }) {
+  var _tr;
   const {
     panel
   } = state.schema.nodes;
   let tr;
+  const panelAttrs = fg('platform_editor_adf_with_localid') ? {
+    ...attributes,
+    localId: attributes.localId || uuid.generate()
+  } : {
+    ...attributes
+  };
 
-  // Panels should wrap content by default when inserted, the quickInsert `insert` method
-  // will insert the node on a newline
-  if (editorExperiment('platform_editor_controls', 'variant1')) {
-    tr = state.selection.empty && createWrapSelectionTransaction({
-      state,
-      type: panel,
-      nodeAttributes: attributes
-    });
+  /*
+  	During investigation of go/j/ED-26928 I found that the behaviour of this experience was very
+  	inconsistent. I reached out to Nicole* for a design review, and she confirmed that the desired
+  	behaviour is to insert the panel on a new line if the selection is empty.
+  	 *Confluence Editor Lead Product Designer
+   */
+  if (expValEquals('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
+    // If the selection is empty, we want to insert the panel on a new line
+    if (state.selection.empty) {
+      const node = panel.createAndFill(panelAttrs);
+      if (!node) {
+        return false;
+      }
+      if (typeAheadInsert !== undefined) {
+        // If the type-ahead insert is provided, we should use that to insert the node
+        tr = typeAheadInsert(node);
+      } else {
+        var _insertSelectedItem;
+        // Otherwise we can use insertSelectedItem to insert the node
+        tr = (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+      }
+    } else {
+      tr = createWrapSelectionTransaction({
+        state,
+        type: panel,
+        nodeAttributes: panelAttrs
+      });
+    }
   } else {
-    const node = panel.createAndFill(attributes);
-    if (!node) {
-      return false;
+    // Panels should wrap content by default when inserted, the quickInsert `insert` method
+    // will insert the node on a newline
+    if (editorExperiment('platform_editor_controls', 'variant1')) {
+      tr = state.selection.empty && createWrapSelectionTransaction({
+        state,
+        type: panel,
+        nodeAttributes: panelAttrs
+      });
+    } else {
+      const node = panel.createAndFill(panelAttrs);
+      if (!node) {
+        return false;
+      }
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- This is only optional within the experiment, so safe to assume non-null here
+      tr = state.selection.empty && typeAheadInsert(node);
     }
-    tr = state.selection.empty && insert(node);
   }
   if (tr) {
     var _api$analytics2;
@@ -227,12 +294,12 @@ function createPanelAction({
       actionSubject: ACTION_SUBJECT.DOCUMENT,
       actionSubjectId: ACTION_SUBJECT_ID.PANEL,
       attributes: {
-        inputMethod: INPUT_METHOD.QUICK_INSERT,
+        inputMethod,
         panelType: attributes.panelType
       },
       eventType: EVENT_TYPE.TRACK
     })(tr);
   }
-  return tr;
+  return (_tr = tr) !== null && _tr !== void 0 ? _tr : false;
 }
 export default panelPlugin;

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

@@ -1,4 +1,4 @@
-import { PanelType } from '@atlaskit/adf-schema';
+import { PanelType, uuid } from '@atlaskit/adf-schema';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -65,7 +65,10 @@ export const handleCut = (newState, oldState) => {
     const oldPanelNode = findParentNode(node => node.type.name === 'panel')(oldState.tr.selection);
     const clonedPanelNode = oldPanelNode === null || oldPanelNode === void 0 ? void 0 : oldPanelNode.node.copy();
     const newPanelNode = schema.nodes.panel.create({
-      ...(clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs)
+      ...(clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs),
+      ...(fg('platform_editor_adf_with_localid') && {
+        localId: uuid.generate()
+      })
     }, emptyParagraph);
     const endPos = oldState.tr.selection.$from.pos;
     if (oldPanelNode) {

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

@@ -1,13 +1,14 @@
 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 { PanelType } from '@atlaskit/adf-schema';
+import { PanelType, uuid } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { withAnalytics } from '@atlaskit/editor-common/editor-analytics';
 import { getPanelTypeBackgroundNoTokens } from '@atlaskit/editor-common/panel';
 import { wrapSelectionIn } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfType, findSelectedNodeOfType, removeParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { findPanel } from '../pm-plugins/utils/utils';
 export var removePanel = function removePanel(editorAnalyticsAPI) {
   return function (state, dispatch) {
@@ -42,6 +43,7 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
     var panelOptions = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
     var allowCustomPanel = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     return function (state, dispatch) {
+      var _panelNode$node$attrs;
       var nodes = state.schema.nodes,
         tr = state.tr;
       var panelNode = findPanel(state);
@@ -51,6 +53,7 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
       var newType = panelType;
       var previousType = panelNode.node.attrs.panelType;
       var newTr;
+      var localId = fg('platform_editor_adf_with_localid') ? ((_panelNode$node$attrs = panelNode.node.attrs) === null || _panelNode$node$attrs === void 0 ? void 0 : _panelNode$node$attrs.localId) || uuid.generate() : undefined;
       if (allowCustomPanel) {
         var previousColor = panelNode.node.attrs.panelType === 'custom' ? panelNode.node.attrs.panelColor || 'none' : getPanelTypeBackgroundNoTokens(previousType);
         var previousIcon = panelNode.node.attrs.panelIcon;
@@ -67,11 +70,13 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
           panelIconId: newPanelOptions.emojiId,
           panelIconText: newPanelOptions.emojiText,
           panelColor: newPanelOptions.color,
-          panelType: panelType
+          panelType: panelType,
+          localId: localId
         });
       } else {
         newTr = tr.setNodeMarkup(panelNode.pos, nodes.panel, {
-          panelType: panelType
+          panelType: panelType,
+          localId: localId
         });
       }
       var payload = {
@@ -95,6 +100,8 @@ export var changePanelType = function changePanelType(editorAnalyticsAPI) {
     };
   };
 };
+
+// Delete with 'platform_editor_fix_quick_insert_consistency_exp'
 export function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
   return withAnalytics(analyticsAPI, {
     action: ACTION.INSERTED,
@@ -108,7 +115,10 @@ export function insertPanelWithAnalytics(inputMethod, analyticsAPI) {
   })(function (state, dispatch) {
     var nodes = state.schema.nodes;
     if (nodes.panel && nodes.paragraph) {
-      return wrapSelectionIn(nodes.panel)(state, dispatch);
+      var panelAttrs = fg('platform_editor_adf_with_localid') ? {
+        localId: uuid.generate()
+      } : {};
+      return wrapSelectionIn(nodes.panel, panelAttrs)(state, dispatch);
     }
     return false;
   });

package/dist/esm/panelPlugin.js

@@ -1,10 +1,16 @@
+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 React from 'react';
-import { extendedPanel, PanelType } from '@atlaskit/adf-schema';
+import { extendedPanel, extendedPanelWithLocalId, PanelType, uuid } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { insertSelectedItem } from '@atlaskit/editor-common/insert';
 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 { T50 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { insertPanelWithAnalytics } from './editor-actions/actions';
 import keymap from './pm-plugins/keymaps';
@@ -17,10 +23,15 @@ var panelPlugin = function panelPlugin(_ref) {
   return {
     name: 'panel',
     nodes: function nodes() {
-      var panelNode = extendedPanel(!!options.allowCustomPanel);
+      if (fg('platform_editor_adf_with_localid')) {
+        return [{
+          name: 'panel',
+          node: extendedPanelWithLocalId(!!options.allowCustomPanel)
+        }];
+      }
       return [{
         name: 'panel',
-        node: panelNode
+        node: extendedPanel(!!options.allowCustomPanel)
       }];
     },
     pmPlugins: function pmPlugins() {
@@ -41,8 +52,28 @@ var panelPlugin = function panelPlugin(_ref) {
     },
     actions: {
       insertPanel: function insertPanel(inputMethod) {
-        var _api$analytics;
-        return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+        if (expValEquals('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
+          return function (state, dispatch) {
+            var tr = createPanelAction({
+              state: state,
+              attributes: {
+                panelType: PanelType.INFO
+              },
+              api: api,
+              inputMethod: inputMethod
+            });
+            if (!tr) {
+              return false;
+            }
+            if (dispatch) {
+              dispatch(tr);
+            }
+            return true;
+          };
+        } else {
+          var _api$analytics;
+          return insertPanelWithAnalytics(inputMethod, api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions);
+        }
       }
     },
     pluginsOptions: {
@@ -58,14 +89,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/React.createElement(IconPanel, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: PanelType.INFO
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }];
@@ -79,14 +110,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/React.createElement(IconPanel, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: PanelType.INFO
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }, {
@@ -97,14 +128,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/React.createElement(IconPanelNote, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: PanelType.NOTE
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }, {
@@ -116,14 +147,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/React.createElement(IconPanelSuccess, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: PanelType.SUCCESS
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }, {
@@ -134,14 +165,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/React.createElement(IconPanelWarning, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: PanelType.WARNING
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }, {
@@ -152,14 +183,14 @@ var panelPlugin = function panelPlugin(_ref) {
             icon: function icon() {
               return /*#__PURE__*/React.createElement(IconPanelError, null);
             },
-            action: function action(insert, state) {
+            action: function action(typeAheadInsert, state) {
               return createPanelAction({
                 state: state,
                 attributes: {
                   panelType: PanelType.ERROR
                 },
                 api: api,
-                insert: insert
+                typeAheadInsert: typeAheadInsert
               });
             }
           }];
@@ -172,7 +203,7 @@ var panelPlugin = function panelPlugin(_ref) {
               icon: function icon() {
                 return /*#__PURE__*/React.createElement(IconCustomPanel, null);
               },
-              action: function action(insert, state) {
+              action: function action(typeAheadInsert, state) {
                 return createPanelAction({
                   state: state,
                   attributes: {
@@ -187,7 +218,7 @@ var panelPlugin = function panelPlugin(_ref) {
                     panelColor: T50
                   },
                   api: api,
-                  insert: insert
+                  typeAheadInsert: typeAheadInsert
                 });
               }
             });
@@ -218,24 +249,60 @@ function createPanelAction(_ref4) {
   var state = _ref4.state,
     attributes = _ref4.attributes,
     api = _ref4.api,
-    insert = _ref4.insert;
+    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 tr;
+  var panelAttrs = fg('platform_editor_adf_with_localid') ? _objectSpread(_objectSpread({}, attributes), {}, {
+    localId: attributes.localId || uuid.generate()
+  }) : _objectSpread({}, attributes);
 
-  // Panels should wrap content by default when inserted, the quickInsert `insert` method
-  // will insert the node on a newline
-  if (editorExperiment('platform_editor_controls', 'variant1')) {
-    tr = state.selection.empty && createWrapSelectionTransaction({
-      state: state,
-      type: panel,
-      nodeAttributes: attributes
-    });
+  /*
+  	During investigation of go/j/ED-26928 I found that the behaviour of this experience was very
+  	inconsistent. I reached out to Nicole* for a design review, and she confirmed that the desired
+  	behaviour is to insert the panel on a new line if the selection is empty.
+  	 *Confluence Editor Lead Product Designer
+   */
+  if (expValEquals('platform_editor_fix_quick_insert_consistency_exp', 'isEnabled', true)) {
+    // If the selection is empty, we want to insert the panel on a new line
+    if (state.selection.empty) {
+      var node = panel.createAndFill(panelAttrs);
+      if (!node) {
+        return false;
+      }
+      if (typeAheadInsert !== undefined) {
+        // If the type-ahead insert is provided, we should use that to insert the node
+        tr = typeAheadInsert(node);
+      } else {
+        var _insertSelectedItem;
+        // Otherwise we can use insertSelectedItem to insert the node
+        tr = (_insertSelectedItem = insertSelectedItem(node)(state, state.tr, state.selection.head)) === null || _insertSelectedItem === void 0 ? void 0 : _insertSelectedItem.scrollIntoView();
+      }
+    } else {
+      tr = createWrapSelectionTransaction({
+        state: state,
+        type: panel,
+        nodeAttributes: panelAttrs
+      });
+    }
   } else {
-    var node = panel.createAndFill(attributes);
-    if (!node) {
-      return false;
+    // Panels should wrap content by default when inserted, the quickInsert `insert` method
+    // will insert the node on a newline
+    if (editorExperiment('platform_editor_controls', 'variant1')) {
+      tr = state.selection.empty && createWrapSelectionTransaction({
+        state: state,
+        type: panel,
+        nodeAttributes: panelAttrs
+      });
+    } else {
+      var _node = panel.createAndFill(panelAttrs);
+      if (!_node) {
+        return false;
+      }
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- This is only optional within the experiment, so safe to assume non-null here
+      tr = state.selection.empty && typeAheadInsert(_node);
     }
-    tr = state.selection.empty && insert(node);
   }
   if (tr) {
     var _api$analytics2;
@@ -244,12 +311,12 @@ function createPanelAction(_ref4) {
       actionSubject: ACTION_SUBJECT.DOCUMENT,
       actionSubjectId: ACTION_SUBJECT_ID.PANEL,
       attributes: {
-        inputMethod: INPUT_METHOD.QUICK_INSERT,
+        inputMethod: inputMethod,
         panelType: attributes.panelType
       },
       eventType: EVENT_TYPE.TRACK
     })(tr);
   }
-  return tr;
+  return tr !== null && tr !== void 0 ? tr : false;
 }
 export default panelPlugin;

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

@@ -1,7 +1,7 @@
 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 { PanelType } from '@atlaskit/adf-schema';
+import { PanelType, uuid } from '@atlaskit/adf-schema';
 import { PanelSharedCssClassName } from '@atlaskit/editor-common/panel';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
@@ -62,7 +62,9 @@ export var handleCut = function handleCut(newState, oldState) {
       return node.type.name === 'panel';
     })(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 newPanelNode = schema.nodes.panel.create(_objectSpread(_objectSpread({}, clonedPanelNode === null || clonedPanelNode === void 0 ? void 0 : clonedPanelNode.attrs), fg('platform_editor_adf_with_localid') && {
+      localId: uuid.generate()
+    }), emptyParagraph);
     var endPos = oldState.tr.selection.$from.pos;
     if (oldPanelNode) {
       newTr.insert(oldPanelNode.pos, newPanelNode).setSelection(new TextSelection(newTr.doc.resolve(endPos)));

package/dist/types/panelPluginType.d.ts

@@ -33,6 +33,6 @@ export type PanelPlugin = NextEditorPlugin<'panel', {
     pluginConfiguration: PanelPluginOptions | undefined;
     dependencies: PanelPluginDependencies;
     actions: {
-        insertPanel: (inputMethod: INPUT_METHOD) => Command;
+        insertPanel: (inputMethod: INPUT_METHOD.INSERT_MENU | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR) => Command;
     };
 }>;

package/dist/types-ts4.5/panelPluginType.d.ts

@@ -33,6 +33,6 @@ export type PanelPlugin = NextEditorPlugin<'panel', {
     pluginConfiguration: PanelPluginOptions | undefined;
     dependencies: PanelPluginDependencies;
     actions: {
-        insertPanel: (inputMethod: INPUT_METHOD) => Command;
+        insertPanel: (inputMethod: INPUT_METHOD.INSERT_MENU | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR) => Command;
     };
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-panel",
-	"version": "5.2.4",
+	"version": "5.3.0",
 	"description": "Panel plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,7 +30,7 @@
 		".": "./src/index.ts"
 	},
 	"dependencies": {
-		"@atlaskit/adf-schema": "^50.0.1",
+		"@atlaskit/adf-schema": "^50.2.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-analytics": "^3.0.0",
 		"@atlaskit/editor-plugin-decorations": "^3.0.0",
@@ -41,20 +41,17 @@
 		"@atlaskit/icon": "^27.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tmp-editor-statsig": "^9.22.0",
+		"@atlaskit/tmp-editor-statsig": "^9.25.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.16.0",
+		"@atlaskit/editor-common": "^107.18.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
-	"devDependencies": {
-		"typescript": "~5.4.2"
-	},
 	"techstack": {
 		"@atlassian/frontend": {
 			"import-structure": [
@@ -94,6 +91,9 @@
 	"platform-feature-flags": {
 		"platform_editor_nested_dnd_styles_changes": {
 			"type": "boolean"
+		},
+		"platform_editor_adf_with_localid": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {