@atlaskit/editor-plugin-panel 4.2.4 → 4.2.6

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/editor-plugin-panel
 
+## 4.2.6
+
+### Patch Changes
+
+- [#123966](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123966)
+  [`980562a51a41f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/980562a51a41f) -
+  [ux] ED-26796 Change panel type buttons into dropdown
+- Updated dependencies
+
+## 4.2.5
+
+### Patch Changes
+
+- [#123532](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/123532)
+  [`ed7bd14b40fef`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ed7bd14b40fef) -
+  [ux] ED-26941 Prevent backspace in a new paragraph from deleting extension in panel and blockquote
+
 ## 4.2.4
 
 ### Patch Changes

package/dist/cjs/panelPlugin.js

@@ -186,6 +186,8 @@ var panelPlugin = function panelPlugin(_ref) {
                     panelIcon: ':rainbow:',
                     panelIconId: '1f308',
                     panelIconText: '🌈',
+                    // Ignored via go/ees007
+                    // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
                     // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
                     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
                     panelColor: _colors.T50

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 _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 function findParentNode(selection, nodeType) {
   var parentPosition = (0, _utils2.findParentNodeOfType)(nodeType)(selection);
   if (parentPosition) {
@@ -27,7 +28,7 @@ function keymapPlugin() {
   };
   var keymaps = {
     Backspace: function Backspace(state, dispatch) {
-      var _nodeBeforePanel$type;
+      var _$previousPos$nodeAft, _nodeBeforePanel$type;
       var selection = state.selection,
         nodes = state.schema.nodes,
         tr = state.tr;
@@ -36,7 +37,8 @@ function keymapPlugin() {
         orderedList = nodes.orderedList,
         bulletList = nodes.bulletList,
         mediaSingle = nodes.mediaSingle,
-        mediaGroup = nodes.mediaGroup;
+        mediaGroup = nodes.mediaGroup,
+        extension = nodes.extension;
       var $from = selection.$from,
         $to = selection.$to;
       // Don't do anything if selection is a range
@@ -57,10 +59,12 @@ function keymapPlugin() {
       var isPreviousNodeMedia = previousNodeType === mediaSingle || previousNodeType === mediaGroup;
       var isPreviousNodeAList = previousNodeType === bulletList || previousNodeType === orderedList;
 
+      // identifies if new position after backspace is at the start of a non-bodied extension node
+      var isPreviousPosAtExtension = (0, _platformFeatureFlags.fg)('platform_editor_nbm_backspace_fixes') && ((_$previousPos$nodeAft = $previousPos.nodeAfter) === null || _$previousPos$nodeAft === void 0 ? void 0 : _$previousPos$nodeAft.type) === extension;
+
       // Stops merging panels when deleting empty paragraph in between
       // Stops merging blockquotes with panels when deleting from start of blockquote
-
-      if (isPreviousNodeAPanel && !isParentNodeAPanel || isInsideAnEmptyNode(selection, panel, state.schema) || (0, _utils2.hasParentNodeOfType)(blockquote)(selection) && !isPreviousNodeAList && !isPreviousNodeMedia ||
+      if (isPreviousNodeAPanel && !isParentNodeAPanel && !isPreviousPosAtExtension || isInsideAnEmptyNode(selection, panel, 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

package/dist/cjs/ui/panelTypeDropdown.js

@@ -0,0 +1,102 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.panelTypeDropdown = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _messages = require("@atlaskit/editor-common/messages");
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/cross-circle"));
+var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
+var _discovery = _interopRequireDefault(require("@atlaskit/icon/core/discovery"));
+var _information = _interopRequireDefault(require("@atlaskit/icon/core/information"));
+var _success = _interopRequireDefault(require("@atlaskit/icon/core/success"));
+var _warning = _interopRequireDefault(require("@atlaskit/icon/core/warning"));
+var _actions = require("../editor-actions/actions");
+var panelTitleAndIcon = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, _adfSchema.PanelType.INFO, {
+  title: _messages.panelMessages.info,
+  icon: (0, _information.default)({
+    label: 'info-icon',
+    color: "var(--ds-icon-information, #1D7AFC)"
+  })
+}), _adfSchema.PanelType.NOTE, {
+  title: _messages.panelMessages.note,
+  icon: (0, _discovery.default)({
+    label: 'note-icon',
+    color: "var(--ds-icon-discovery, #8270DB)"
+  })
+}), _adfSchema.PanelType.SUCCESS, {
+  title: _messages.panelMessages.success,
+  icon: (0, _success.default)({
+    label: 'success-icon',
+    color: "var(--ds-icon-success, #22A06B)"
+  })
+}), _adfSchema.PanelType.WARNING, {
+  title: _messages.panelMessages.warning,
+  icon: (0, _warning.default)({
+    label: 'warning-icon',
+    color: "var(--ds-icon-warning, #E56910)"
+  })
+}), _adfSchema.PanelType.ERROR, {
+  title: _messages.panelMessages.error,
+  icon: (0, _crossCircle.default)({
+    label: 'error-icon',
+    color: "var(--ds-icon-danger, #C9372C)"
+  })
+}), _adfSchema.PanelType.CUSTOM, {
+  title: _messages.panelMessages.custom,
+  icon: (0, _customize.default)({
+    label: 'custom-icon'
+  })
+});
+var panelTypeDropdown = exports.panelTypeDropdown = function panelTypeDropdown(_ref) {
+  var activePanelType = _ref.activePanelType,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    formatMessage = _ref.formatMessage;
+  var dropdownOptions = [{
+    id: 'editor.panel.info',
+    icon: panelTitleAndIcon[_adfSchema.PanelType.INFO].icon,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.INFO),
+    selected: activePanelType === _adfSchema.PanelType.INFO,
+    title: formatMessage(panelTitleAndIcon[_adfSchema.PanelType.INFO].title)
+  }, {
+    id: 'editor.panel.note',
+    icon: panelTitleAndIcon[_adfSchema.PanelType.NOTE].icon,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.NOTE),
+    selected: activePanelType === _adfSchema.PanelType.NOTE,
+    title: formatMessage(panelTitleAndIcon[_adfSchema.PanelType.NOTE].title)
+  }, {
+    id: 'editor.panel.success',
+    icon: panelTitleAndIcon[_adfSchema.PanelType.SUCCESS].icon,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.SUCCESS),
+    selected: activePanelType === _adfSchema.PanelType.SUCCESS,
+    title: formatMessage(panelTitleAndIcon[_adfSchema.PanelType.SUCCESS].title)
+  }, {
+    id: 'editor.panel.warning',
+    icon: panelTitleAndIcon[_adfSchema.PanelType.WARNING].icon,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.WARNING),
+    selected: activePanelType === _adfSchema.PanelType.WARNING,
+    title: formatMessage(panelTitleAndIcon[_adfSchema.PanelType.WARNING].title)
+  }, {
+    id: 'editor.panel.error',
+    icon: panelTitleAndIcon[_adfSchema.PanelType.ERROR].icon,
+    onClick: (0, _actions.changePanelType)(editorAnalyticsAPI)(_adfSchema.PanelType.ERROR),
+    selected: activePanelType === _adfSchema.PanelType.ERROR,
+    title: formatMessage(panelTitleAndIcon[_adfSchema.PanelType.ERROR].title)
+  }];
+  var selectedPanelType = activePanelType || _adfSchema.PanelType.INFO;
+  var selectedTitleAndIcon = panelTitleAndIcon[selectedPanelType];
+  return {
+    id: 'panel-type-dropdown',
+    testId: 'panel-type-dropdown-trigger',
+    type: 'dropdown',
+    options: dropdownOptions,
+    showSelected: true,
+    iconBefore: function iconBefore() {
+      return selectedTitleAndIcon.icon;
+    },
+    title: formatMessage(selectedTitleAndIcon.title)
+  };
+};

package/dist/cjs/ui/toolbar.js

@@ -33,6 +33,7 @@ var _warning2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/warn
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../editor-actions/actions");
 var _utils2 = require("../pm-plugins/utils/utils");
+var _panelTypeDropdown = require("./panelTypeDropdown");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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,8 +58,8 @@ var panelIconMap = exports.panelIconMap = (0, _defineProperty2.default)((0, _def
   id: 'atlassian-tip'
 });
 var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state, api) {
-  // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
-  var items = [{
+  // TODO: ED-14403 - investigate why these titles are not getting translated for the tooltips
+  var items = (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
     id: 'editor.panel.info',
     type: 'button',
     icon: _information.default,
@@ -103,6 +104,12 @@ var getToolbarItems = exports.getToolbarItems = function getToolbarItems(formatM
     selected: activePanelType === _adfSchema.PanelType.ERROR,
     title: formatMessage(_messages.panelMessages.error),
     tabIndex: null
+  }] : [(0, _panelTypeDropdown.panelTypeDropdown)({
+    activePanelType: activePanelType,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    formatMessage: formatMessage
+  }), {
+    type: 'separator'
   }];
   if (isCustomPanelEnabled) {
     var changeColor = function changeColor(color) {

package/dist/es2019/panelPlugin.js

@@ -162,6 +162,8 @@ const panelPlugin = ({
                   panelIcon: ':rainbow:',
                   panelIconId: '1f308',
                   panelIconText: '🌈',
+                  // Ignored via go/ees007
+                  // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
                   // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
                   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
                   panelColor: T50

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 { fg } from '@atlaskit/platform-feature-flags';
 function findParentNode(selection, nodeType) {
   const parentPosition = findParentNodeOfType(nodeType)(selection);
   if (parentPosition) {
@@ -20,7 +21,7 @@ export function keymapPlugin() {
   };
   const keymaps = {
     Backspace: (state, dispatch) => {
-      var _nodeBeforePanel$type, _nodeBeforePanel$type2;
+      var _$previousPos$nodeAft, _nodeBeforePanel$type, _nodeBeforePanel$type2;
       const {
         selection,
         schema: {
@@ -34,7 +35,8 @@ export function keymapPlugin() {
         orderedList,
         bulletList,
         mediaSingle,
-        mediaGroup
+        mediaGroup,
+        extension
       } = nodes;
       const {
         $from,
@@ -58,10 +60,12 @@ export function keymapPlugin() {
       const isPreviousNodeMedia = previousNodeType === mediaSingle || previousNodeType === mediaGroup;
       const isPreviousNodeAList = previousNodeType === bulletList || previousNodeType === orderedList;
 
+      // identifies if new position after backspace is at the start of a non-bodied extension node
+      const isPreviousPosAtExtension = fg('platform_editor_nbm_backspace_fixes') && ((_$previousPos$nodeAft = $previousPos.nodeAfter) === null || _$previousPos$nodeAft === void 0 ? void 0 : _$previousPos$nodeAft.type) === extension;
+
       // Stops merging panels when deleting empty paragraph in between
       // Stops merging blockquotes with panels when deleting from start of blockquote
-
-      if (isPreviousNodeAPanel && !isParentNodeAPanel || isInsideAnEmptyNode(selection, panel, state.schema) || hasParentNodeOfType(blockquote)(selection) && !isPreviousNodeAList && !isPreviousNodeMedia ||
+      if (isPreviousNodeAPanel && !isParentNodeAPanel && !isPreviousPosAtExtension || isInsideAnEmptyNode(selection, panel, 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

package/dist/es2019/ui/panelTypeDropdown.js

@@ -0,0 +1,100 @@
+import { PanelType } from '@atlaskit/adf-schema';
+import { panelMessages as messages } from '@atlaskit/editor-common/messages';
+import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
+import CustomizeIcon from '@atlaskit/icon/core/customize';
+import DiscoveryIcon from '@atlaskit/icon/core/discovery';
+import InformationIcon from '@atlaskit/icon/core/information';
+import SuccessIcon from '@atlaskit/icon/core/success';
+import WarningIcon from '@atlaskit/icon/core/warning';
+import { changePanelType } from '../editor-actions/actions';
+const panelTitleAndIcon = {
+  [PanelType.INFO]: {
+    title: messages.info,
+    icon: InformationIcon({
+      label: 'info-icon',
+      color: "var(--ds-icon-information, #1D7AFC)"
+    })
+  },
+  [PanelType.NOTE]: {
+    title: messages.note,
+    icon: DiscoveryIcon({
+      label: 'note-icon',
+      color: "var(--ds-icon-discovery, #8270DB)"
+    })
+  },
+  [PanelType.SUCCESS]: {
+    title: messages.success,
+    icon: SuccessIcon({
+      label: 'success-icon',
+      color: "var(--ds-icon-success, #22A06B)"
+    })
+  },
+  [PanelType.WARNING]: {
+    title: messages.warning,
+    icon: WarningIcon({
+      label: 'warning-icon',
+      color: "var(--ds-icon-warning, #E56910)"
+    })
+  },
+  [PanelType.ERROR]: {
+    title: messages.error,
+    icon: CrossCircleIcon({
+      label: 'error-icon',
+      color: "var(--ds-icon-danger, #C9372C)"
+    })
+  },
+  [PanelType.CUSTOM]: {
+    title: messages.custom,
+    icon: CustomizeIcon({
+      label: 'custom-icon'
+    })
+  }
+};
+export const panelTypeDropdown = ({
+  activePanelType,
+  editorAnalyticsAPI,
+  formatMessage
+}) => {
+  const dropdownOptions = [{
+    id: 'editor.panel.info',
+    icon: panelTitleAndIcon[PanelType.INFO].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.INFO),
+    selected: activePanelType === PanelType.INFO,
+    title: formatMessage(panelTitleAndIcon[PanelType.INFO].title)
+  }, {
+    id: 'editor.panel.note',
+    icon: panelTitleAndIcon[PanelType.NOTE].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.NOTE),
+    selected: activePanelType === PanelType.NOTE,
+    title: formatMessage(panelTitleAndIcon[PanelType.NOTE].title)
+  }, {
+    id: 'editor.panel.success',
+    icon: panelTitleAndIcon[PanelType.SUCCESS].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.SUCCESS),
+    selected: activePanelType === PanelType.SUCCESS,
+    title: formatMessage(panelTitleAndIcon[PanelType.SUCCESS].title)
+  }, {
+    id: 'editor.panel.warning',
+    icon: panelTitleAndIcon[PanelType.WARNING].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.WARNING),
+    selected: activePanelType === PanelType.WARNING,
+    title: formatMessage(panelTitleAndIcon[PanelType.WARNING].title)
+  }, {
+    id: 'editor.panel.error',
+    icon: panelTitleAndIcon[PanelType.ERROR].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.ERROR),
+    selected: activePanelType === PanelType.ERROR,
+    title: formatMessage(panelTitleAndIcon[PanelType.ERROR].title)
+  }];
+  const selectedPanelType = activePanelType || PanelType.INFO;
+  const selectedTitleAndIcon = panelTitleAndIcon[selectedPanelType];
+  return {
+    id: 'panel-type-dropdown',
+    testId: 'panel-type-dropdown-trigger',
+    type: 'dropdown',
+    options: dropdownOptions,
+    showSelected: true,
+    iconBefore: () => selectedTitleAndIcon.icon,
+    title: formatMessage(selectedTitleAndIcon.title)
+  };
+};

package/dist/es2019/ui/toolbar.js

@@ -24,6 +24,7 @@ import LegacyWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changePanelType, removePanel } from '../editor-actions/actions';
 import { findPanel } from '../pm-plugins/utils/utils';
+import { panelTypeDropdown } from './panelTypeDropdown';
 export const panelIconMap = {
   [PanelType.INFO]: {
     shortName: ':info:',
@@ -51,8 +52,8 @@ export const panelIconMap = {
   }
 };
 export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state, api) => {
-  // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
-  const items = [{
+  // TODO: ED-14403 - investigate why these titles are not getting translated for the tooltips
+  const items = editorExperiment('platform_editor_controls', 'control') ? [{
     id: 'editor.panel.info',
     type: 'button',
     icon: InformationIcon,
@@ -97,6 +98,12 @@ export const getToolbarItems = (formatMessage, panelNodeType, isCustomPanelEnabl
     selected: activePanelType === PanelType.ERROR,
     title: formatMessage(messages.error),
     tabIndex: null
+  }] : [panelTypeDropdown({
+    activePanelType,
+    editorAnalyticsAPI,
+    formatMessage
+  }), {
+    type: 'separator'
   }];
   if (isCustomPanelEnabled) {
     const changeColor = color => (state, dispatch) => {

package/dist/esm/panelPlugin.js

@@ -179,6 +179,8 @@ var panelPlugin = function panelPlugin(_ref) {
                     panelIcon: ':rainbow:',
                     panelIconId: '1f308',
                     panelIconText: '🌈',
+                    // Ignored via go/ees007
+                    // eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
                     // TODO: https://product-fabric.atlassian.net/browse/DSP-7268
                     // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
                     panelColor: T50

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 { fg } from '@atlaskit/platform-feature-flags';
 function findParentNode(selection, nodeType) {
   var parentPosition = findParentNodeOfType(nodeType)(selection);
   if (parentPosition) {
@@ -20,7 +21,7 @@ export function keymapPlugin() {
   };
   var keymaps = {
     Backspace: function Backspace(state, dispatch) {
-      var _nodeBeforePanel$type;
+      var _$previousPos$nodeAft, _nodeBeforePanel$type;
       var selection = state.selection,
         nodes = state.schema.nodes,
         tr = state.tr;
@@ -29,7 +30,8 @@ export function keymapPlugin() {
         orderedList = nodes.orderedList,
         bulletList = nodes.bulletList,
         mediaSingle = nodes.mediaSingle,
-        mediaGroup = nodes.mediaGroup;
+        mediaGroup = nodes.mediaGroup,
+        extension = nodes.extension;
       var $from = selection.$from,
         $to = selection.$to;
       // Don't do anything if selection is a range
@@ -50,10 +52,12 @@ export function keymapPlugin() {
       var isPreviousNodeMedia = previousNodeType === mediaSingle || previousNodeType === mediaGroup;
       var isPreviousNodeAList = previousNodeType === bulletList || previousNodeType === orderedList;
 
+      // identifies if new position after backspace is at the start of a non-bodied extension node
+      var isPreviousPosAtExtension = fg('platform_editor_nbm_backspace_fixes') && ((_$previousPos$nodeAft = $previousPos.nodeAfter) === null || _$previousPos$nodeAft === void 0 ? void 0 : _$previousPos$nodeAft.type) === extension;
+
       // Stops merging panels when deleting empty paragraph in between
       // Stops merging blockquotes with panels when deleting from start of blockquote
-
-      if (isPreviousNodeAPanel && !isParentNodeAPanel || isInsideAnEmptyNode(selection, panel, state.schema) || hasParentNodeOfType(blockquote)(selection) && !isPreviousNodeAList && !isPreviousNodeMedia ||
+      if (isPreviousNodeAPanel && !isParentNodeAPanel && !isPreviousPosAtExtension || isInsideAnEmptyNode(selection, panel, 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

package/dist/esm/ui/panelTypeDropdown.js

@@ -0,0 +1,95 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import { PanelType } from '@atlaskit/adf-schema';
+import { panelMessages as messages } from '@atlaskit/editor-common/messages';
+import CrossCircleIcon from '@atlaskit/icon/core/cross-circle';
+import CustomizeIcon from '@atlaskit/icon/core/customize';
+import DiscoveryIcon from '@atlaskit/icon/core/discovery';
+import InformationIcon from '@atlaskit/icon/core/information';
+import SuccessIcon from '@atlaskit/icon/core/success';
+import WarningIcon from '@atlaskit/icon/core/warning';
+import { changePanelType } from '../editor-actions/actions';
+var panelTitleAndIcon = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, PanelType.INFO, {
+  title: messages.info,
+  icon: InformationIcon({
+    label: 'info-icon',
+    color: "var(--ds-icon-information, #1D7AFC)"
+  })
+}), PanelType.NOTE, {
+  title: messages.note,
+  icon: DiscoveryIcon({
+    label: 'note-icon',
+    color: "var(--ds-icon-discovery, #8270DB)"
+  })
+}), PanelType.SUCCESS, {
+  title: messages.success,
+  icon: SuccessIcon({
+    label: 'success-icon',
+    color: "var(--ds-icon-success, #22A06B)"
+  })
+}), PanelType.WARNING, {
+  title: messages.warning,
+  icon: WarningIcon({
+    label: 'warning-icon',
+    color: "var(--ds-icon-warning, #E56910)"
+  })
+}), PanelType.ERROR, {
+  title: messages.error,
+  icon: CrossCircleIcon({
+    label: 'error-icon',
+    color: "var(--ds-icon-danger, #C9372C)"
+  })
+}), PanelType.CUSTOM, {
+  title: messages.custom,
+  icon: CustomizeIcon({
+    label: 'custom-icon'
+  })
+});
+export var panelTypeDropdown = function panelTypeDropdown(_ref) {
+  var activePanelType = _ref.activePanelType,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    formatMessage = _ref.formatMessage;
+  var dropdownOptions = [{
+    id: 'editor.panel.info',
+    icon: panelTitleAndIcon[PanelType.INFO].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.INFO),
+    selected: activePanelType === PanelType.INFO,
+    title: formatMessage(panelTitleAndIcon[PanelType.INFO].title)
+  }, {
+    id: 'editor.panel.note',
+    icon: panelTitleAndIcon[PanelType.NOTE].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.NOTE),
+    selected: activePanelType === PanelType.NOTE,
+    title: formatMessage(panelTitleAndIcon[PanelType.NOTE].title)
+  }, {
+    id: 'editor.panel.success',
+    icon: panelTitleAndIcon[PanelType.SUCCESS].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.SUCCESS),
+    selected: activePanelType === PanelType.SUCCESS,
+    title: formatMessage(panelTitleAndIcon[PanelType.SUCCESS].title)
+  }, {
+    id: 'editor.panel.warning',
+    icon: panelTitleAndIcon[PanelType.WARNING].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.WARNING),
+    selected: activePanelType === PanelType.WARNING,
+    title: formatMessage(panelTitleAndIcon[PanelType.WARNING].title)
+  }, {
+    id: 'editor.panel.error',
+    icon: panelTitleAndIcon[PanelType.ERROR].icon,
+    onClick: changePanelType(editorAnalyticsAPI)(PanelType.ERROR),
+    selected: activePanelType === PanelType.ERROR,
+    title: formatMessage(panelTitleAndIcon[PanelType.ERROR].title)
+  }];
+  var selectedPanelType = activePanelType || PanelType.INFO;
+  var selectedTitleAndIcon = panelTitleAndIcon[selectedPanelType];
+  return {
+    id: 'panel-type-dropdown',
+    testId: 'panel-type-dropdown-trigger',
+    type: 'dropdown',
+    options: dropdownOptions,
+    showSelected: true,
+    iconBefore: function iconBefore() {
+      return selectedTitleAndIcon.icon;
+    },
+    title: formatMessage(selectedTitleAndIcon.title)
+  };
+};

package/dist/esm/ui/toolbar.js

@@ -27,6 +27,7 @@ import LegacyWarningIcon from '@atlaskit/icon/glyph/editor/warning';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { changePanelType, removePanel } from '../editor-actions/actions';
 import { findPanel } from '../pm-plugins/utils/utils';
+import { panelTypeDropdown } from './panelTypeDropdown';
 export var panelIconMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, PanelType.INFO, {
   shortName: ':info:',
   id: 'atlassian-info'
@@ -47,8 +48,8 @@ export var panelIconMap = _defineProperty(_defineProperty(_defineProperty(_defin
   id: 'atlassian-tip'
 });
 export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeType, isCustomPanelEnabled, isCustomPanelEditable, providerFactory, hoverDecoration, editorAnalyticsAPI, activePanelType, activePanelColor, activePanelIcon, state, api) {
-  // TODO: ED-14403 investigate why these titles are not getting translated for the tooltips
-  var items = [{
+  // TODO: ED-14403 - investigate why these titles are not getting translated for the tooltips
+  var items = editorExperiment('platform_editor_controls', 'control') ? [{
     id: 'editor.panel.info',
     type: 'button',
     icon: InformationIcon,
@@ -93,6 +94,12 @@ export var getToolbarItems = function getToolbarItems(formatMessage, panelNodeTy
     selected: activePanelType === PanelType.ERROR,
     title: formatMessage(messages.error),
     tabIndex: null
+  }] : [panelTypeDropdown({
+    activePanelType: activePanelType,
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    formatMessage: formatMessage
+  }), {
+    type: 'separator'
   }];
   if (isCustomPanelEnabled) {
     var changeColor = function changeColor(color) {

package/dist/types/ui/panelTypeDropdown.d.ts

@@ -0,0 +1,10 @@
+import type { IntlShape } from 'react-intl-next';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { Command, FloatingToolbarDropdown } from '@atlaskit/editor-common/types';
+type Props = {
+    activePanelType?: string;
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    formatMessage: IntlShape['formatMessage'];
+};
+export declare const panelTypeDropdown: ({ activePanelType, editorAnalyticsAPI, formatMessage, }: Props) => FloatingToolbarDropdown<Command>;
+export {};

package/dist/types-ts4.5/ui/panelTypeDropdown.d.ts

@@ -0,0 +1,10 @@
+import type { IntlShape } from 'react-intl-next';
+import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { Command, FloatingToolbarDropdown } from '@atlaskit/editor-common/types';
+type Props = {
+    activePanelType?: string;
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    formatMessage: IntlShape['formatMessage'];
+};
+export declare const panelTypeDropdown: ({ activePanelType, editorAnalyticsAPI, formatMessage, }: Props) => FloatingToolbarDropdown<Command>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-panel",
-	"version": "4.2.4",
+	"version": "4.2.6",
 	"description": "Panel plugin for @atlaskit/editor-core.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -32,11 +32,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^102.0.0",
+		"@atlaskit/editor-common": "^102.2.0",
 		"@atlaskit/editor-palette": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.1.0",
 		"@atlaskit/editor-plugin-decorations": "^2.0.0",
-		"@atlaskit/editor-plugin-emoji": "^3.1.0",
+		"@atlaskit/editor-plugin-emoji": "^3.2.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/emoji": "^68.0.0",
@@ -44,6 +44,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tmp-editor-statsig": "^3.4.0",
+		"@atlaskit/tokens": "^4.3.0",
 		"@babel/runtime": "^7.0.0",
 		"uuid": "^3.1.0"
 	},
@@ -94,6 +95,9 @@
 	"platform-feature-flags": {
 		"platform_editor_update_panel_icon_aria_label": {
 			"type": "boolean"
+		},
+		"platform_editor_nbm_backspace_fixes": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {