@atlaskit/editor-plugin-panel 5.2.5 → 5.3.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

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

@@ -109,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,

package/dist/cjs/panelPlugin.js

@@ -9,11 +9,13 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 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"));
@@ -57,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: {
@@ -74,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
               });
             }
           }];
@@ -95,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
               });
             }
           }, {
@@ -113,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
               });
             }
           }, {
@@ -132,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
               });
             }
           }, {
@@ -150,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
               });
             }
           }, {
@@ -168,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
               });
             }
           }];
@@ -188,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: {
@@ -203,7 +225,7 @@ var panelPlugin = function panelPlugin(_ref) {
                     panelColor: _colors.T50
                   },
                   api: api,
-                  insert: insert
+                  typeAheadInsert: typeAheadInsert
                 });
               }
             });
@@ -234,27 +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: panelAttrs
-    });
+  /*
+  	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(panelAttrs);
-    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;
@@ -263,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/es2019/editor-actions/actions.js

@@ -98,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,

package/dist/es2019/panelPlugin.js

@@ -1,11 +1,13 @@
 import React from 'react';
 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';
@@ -43,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: {
@@ -59,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
             });
           }
         }];
@@ -78,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
             });
           }
         }, {
@@ -94,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
             });
           }
         }, {
@@ -111,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
             });
           }
         }, {
@@ -127,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
             });
           }
         }, {
@@ -143,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
             });
           }
         }];
@@ -161,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: {
@@ -176,7 +198,7 @@ const panelPlugin = ({
                   panelColor: T50
                 },
                 api,
-                insert
+                typeAheadInsert
               });
             }
           });
@@ -204,8 +226,10 @@ function createPanelAction({
   state,
   attributes,
   api,
-  insert
+  typeAheadInsert,
+  inputMethod = INPUT_METHOD.QUICK_INSERT
 }) {
+  var _tr;
   const {
     panel
   } = state.schema.nodes;
@@ -217,20 +241,51 @@ function createPanelAction({
     ...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: panelAttrs
-    });
+  /*
+  	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(panelAttrs);
-    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;
@@ -239,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/esm/editor-actions/actions.js

@@ -100,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,

package/dist/esm/panelPlugin.js

@@ -4,11 +4,13 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React from 'react';
 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';
@@ -50,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: {
@@ -67,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
               });
             }
           }];
@@ -88,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
               });
             }
           }, {
@@ -106,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
               });
             }
           }, {
@@ -125,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
               });
             }
           }, {
@@ -143,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
               });
             }
           }, {
@@ -161,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
               });
             }
           }];
@@ -181,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: {
@@ -196,7 +218,7 @@ var panelPlugin = function panelPlugin(_ref) {
                     panelColor: T50
                   },
                   api: api,
-                  insert: insert
+                  typeAheadInsert: typeAheadInsert
                 });
               }
             });
@@ -227,27 +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: panelAttrs
-    });
+  /*
+  	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(panelAttrs);
-    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;
@@ -256,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/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.5",
+	"version": "5.3.0",
 	"description": "Panel plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.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": [