@atlaskit/editor-core 187.15.1 → 187.16.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-core
 
+## 187.16.0
+
+### Minor Changes
+
+- [`3413f770f2b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3413f770f2b) - Moving references to floating-toolbar types to `editor-common`
+
+### Patch Changes
+
+- [`3a43f854e59`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3a43f854e59) - [ux] ED-18841: When cursor inside panel, at start of content, is backspaced, it should lift panel line of content out of panel, instead of only selecting the node above it (such as an expand or table node).
+- Updated dependencies
+
 ## 187.15.1
 
 ### Patch Changes

package/dist/cjs/index.js

@@ -263,12 +263,6 @@ Object.defineProperty(exports, "deleteDate", {
     return _actions.deleteDate;
   }
 });
-Object.defineProperty(exports, "floatingToolbarPluginKey", {
-  enumerable: true,
-  get: function get() {
-    return _floatingToolbar.pluginKey;
-  }
-});
 Object.defineProperty(exports, "getDefaultPresetOptionsFromEditorProps", {
   enumerable: true,
   get: function get() {
@@ -556,7 +550,6 @@ var _gapCursorSelection = require("./plugins/selection/gap-cursor-selection");
 var _mobileSelection = require("./plugins/mobile-selection");
 var _commands7 = require("./plugins/expand/commands");
 var _WithPluginState = _interopRequireDefault(require("./ui/WithPluginState"));
-var _floatingToolbar = require("./plugins/floating-toolbar");
 var _statusColorPalette = require("./ui/ColorPalette/Palettes/statusColorPalette");
 var _common = require("./ui/ColorPalette/Palettes/common");
 var _messages = _interopRequireWildcard(require("./messages"));

package/dist/cjs/plugins/media/toolbar/alt-text.js

@@ -14,7 +14,6 @@ var _messages = require("../pm-plugins/alt-text/messages");
 var _AltTextEdit = _interopRequireWildcard(require("../pm-plugins/alt-text/ui/AltTextEdit"));
 var _mediaCommon = require("../utils/media-common");
 var _style = require("../pm-plugins/alt-text/style");
-var _forceFocus = require("../../floating-toolbar/pm-plugins/force-focus");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -55,9 +54,13 @@ var altTextEditComponent = function altTextEditComponent(options) {
        * and not close the floating toolbar.
        */
       var handleEsc = function handleEsc() {
+        var _options$forceFocusSe;
         var tr = view.state.tr,
           dispatch = view.dispatch;
-        dispatch((0, _forceFocus.forceFocusSelector)("[data-testid=\"".concat(testId, "\"]"))(tr));
+        var newTr = options === null || options === void 0 ? void 0 : (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, "[data-testid=\"".concat(testId, "\"]"))(tr);
+        if (newTr) {
+          dispatch(newTr);
+        }
       };
       return /*#__PURE__*/_react.default.createElement(_AltTextEdit.default, {
         view: view,

package/dist/cjs/plugins/media/toolbar/index.js

@@ -425,8 +425,10 @@ var floatingToolbar = function floatingToolbar(state, intl) {
   if (allowAltTextOnImages) {
     var mediaAltTextPluginState = (0, _altText.getPluginState)(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
+      var _pluginInjectionApi$d9;
       return (0, _altText2.getAltTextToolbar)(baseToolbar, {
-        altTextValidator: altTextValidator
+        altTextValidator: altTextValidator,
+        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d9 = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d9 === void 0 ? void 0 : _pluginInjectionApi$d9.forceFocusSelector
       });
     }
   }
@@ -437,22 +439,22 @@ var floatingToolbar = function floatingToolbar(state, intl) {
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$d9, _pluginInjectionApi$d10;
+    var _pluginInjectionApi$d10, _pluginInjectionApi$d11;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = (0, _mediaFilmstrip.mediaFilmstripItemDOMSelector)(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d9 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d9 === void 0 ? void 0 : (_pluginInjectionApi$d10 = _pluginInjectionApi$d9.analytics) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : _pluginInjectionApi$d10.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d10 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : (_pluginInjectionApi$d11 = _pluginInjectionApi$d10.analytics) === null || _pluginInjectionApi$d11 === void 0 ? void 0 : _pluginInjectionApi$d11.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$d11, _pluginInjectionApi$d12;
+    var _pluginInjectionApi$d12, _pluginInjectionApi$d13;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(_styles.MediaInlineNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d11 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d11 === void 0 ? void 0 : (_pluginInjectionApi$d12 = _pluginInjectionApi$d11.analytics) === null || _pluginInjectionApi$d12 === void 0 ? void 0 : _pluginInjectionApi$d12.actions);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d12 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d12 === void 0 ? void 0 : (_pluginInjectionApi$d13 = _pluginInjectionApi$d12.analytics) === null || _pluginInjectionApi$d13 === void 0 ? void 0 : _pluginInjectionApi$d13.actions);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;

package/dist/cjs/plugins/media/toolbar/linking-toolbar-appearance.js

@@ -15,7 +15,6 @@ var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"))
 var _adfSchema = require("@atlaskit/adf-schema");
 var _checkMediaType = require("../utils/check-media-type");
 var _ui = require("@atlaskit/editor-common/ui");
-var _Separator = _interopRequireDefault(require("../../floating-toolbar/ui/Separator"));
 var _messages = require("../../../messages");
 var _messages2 = require("@atlaskit/editor-common/messages");
 var _keymaps = require("../../../keymaps");
@@ -73,7 +72,7 @@ var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
       testId: "edit-link-button"
     }, title)), (0, _react2.jsx)("div", {
       css: wrapper
-    }, (0, _react2.jsx)(_Separator.default, null)), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+    }, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       target: "_blank",
       href: isValidUrl ? mediaLinkingState.link : undefined,
       disabled: !isValidUrl,
@@ -83,7 +82,7 @@ var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
         label: linkTitle
       }),
       className: "hyperlink-open-link"
-    }), (0, _react2.jsx)(_Separator.default, null));
+    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
   } else {
     var _title = intl.formatMessage(_messages2.linkToolbarMessages.addLink);
     return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
@@ -97,7 +96,7 @@ var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
       icon: (0, _react2.jsx)(_link.default, {
         label: _title
       })
-    }), (0, _react2.jsx)(_Separator.default, null));
+    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
   }
 };
 exports.LinkToolbarAppearance = LinkToolbarAppearance;

package/dist/cjs/plugins/media/ui/MediaLinkingToolbar.js

@@ -19,7 +19,6 @@ var _react2 = require("@emotion/react");
 var _ui = require("@atlaskit/editor-common/ui");
 var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
 var _unlink = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/unlink"));
-var _Separator = _interopRequireDefault(require("../../floating-toolbar/ui/Separator"));
 var _link = require("@atlaskit/editor-common/link");
 var _messages = require("@atlaskit/editor-common/messages");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -143,7 +142,7 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           _onChange(value);
         },
         onKeyDown: onKeyDown
-      }), (0, _utils.normalizeUrl)(displayUrl) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_Separator.default, null), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+      }), (0, _utils.normalizeUrl)(displayUrl) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
         title: formatUnlinkText,
         icon: (0, _react2.jsx)(_unlink.default, {
           label: formatUnlinkText

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

@@ -27,6 +27,7 @@ function keymapPlugin() {
   };
   var keymaps = {
     Backspace: function Backspace(state, dispatch) {
+      var _nodeBeforePanel$type, _nodeBeforePanel$type2;
       var selection = state.selection,
         nodes = state.schema.nodes,
         tr = state.tr;
@@ -43,17 +44,25 @@ function keymapPlugin() {
       if ($from.parentOffset !== 0) {
         return false;
       }
-      var previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
-      var previousNodeType = previousPos.pos > 0 && previousPos.parent && previousPos.parent.type;
+      var $previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
+      var previousNodeType = $previousPos.pos > 0 && $previousPos.parent && $previousPos.parent.type;
       var parentNodeType = $from.parent.type;
       var isPreviousNodeAPanel = previousNodeType === panel;
       var isParentNodeAPanel = parentNodeType === panel;
+      var nodeBeforePanel = $previousPos === null || $previousPos === void 0 ? void 0 : $previousPos.nodeBefore;
 
       // 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, _utils.hasParentNodeOfType)(blockquote)(selection)) {
+
+      if (isPreviousNodeAPanel && !isParentNodeAPanel || isInsideAnEmptyNode(selection, panel, state.schema) || (0, _utils.hasParentNodeOfType)(blockquote)(selection) ||
+      // Lift line of panel content up and out of the panel, when backspacing
+      // at the start of a panel, if the node before the panel is an 'isolating' node
+      // (for e.g. a table, or an expand), otherwise the default prosemirror backspace
+      // behaviour will fallback to 'select node backward' logic because the node
+      // before is an isolating node.
+      nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type2 = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type2 !== void 0 && _nodeBeforePanel$type2.isolating && (0, _utils.hasParentNodeOfType)(panel)(selection)) {
         var content = $from.node($from.depth).content;
-        var insertPos = previousPos.pos;
+        var insertPos = $previousPos.pos;
         deleteCurrentItem($from, tr).insert(insertPos, content);
         if (dispatch) {
           dispatch((0, _utils.setTextSelection)(insertPos)(tr).scrollIntoView());

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "187.15.1";
+var version = "187.16.0";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.15.1",
+	"version": "187.16.0",
 	"sideEffects": false
 }

package/dist/es2019/index.js

@@ -52,7 +52,6 @@ export { GapCursorSelection, Side as GapCursorSide } from './plugins/selection/g
 export { selectionPluginKey } from './plugins/mobile-selection';
 export { insertExpand } from './plugins/expand/commands';
 export { default as WithPluginState } from './ui/WithPluginState';
-export { pluginKey as floatingToolbarPluginKey } from './plugins/floating-toolbar';
 export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ui/ColorPalette/Palettes/statusColorPalette';
 export { DEFAULT_BORDER_COLOR } from './ui/ColorPalette/Palettes/common';
 export { default as messages, statusMessages, dateMessages } from './messages';

package/dist/es2019/plugins/media/toolbar/alt-text.js

@@ -2,11 +2,9 @@ import React from 'react';
 import { openMediaAltTextMenu } from '../pm-plugins/alt-text/commands';
 import { ToolTipContent, addAltText } from '../../../keymaps';
 import { messages } from '../pm-plugins/alt-text/messages';
-import AltTextEdit from '../pm-plugins/alt-text/ui/AltTextEdit';
-import { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
+import AltTextEdit, { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
 import { getMediaNodeFromSelection } from '../utils/media-common';
 import { ClassNames } from '../pm-plugins/alt-text/style';
-import { forceFocusSelector } from '../../floating-toolbar/pm-plugins/force-focus';
 const testId = 'alt-text-edit-button';
 export const altTextButton = (intl, state) => {
   const mediaNode = getMediaNodeFromSelection(state);
@@ -42,13 +40,17 @@ export const altTextEditComponent = options => {
        * and not close the floating toolbar.
        */
       const handleEsc = () => {
+        var _options$forceFocusSe;
         const {
           state: {
             tr
           },
           dispatch
         } = view;
-        dispatch(forceFocusSelector(`[data-testid="${testId}"]`)(tr));
+        const newTr = options === null || options === void 0 ? void 0 : (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, `[data-testid="${testId}"]`)(tr);
+        if (newTr) {
+          dispatch(newTr);
+        }
       };
       return /*#__PURE__*/React.createElement(AltTextEdit, {
         view: view,

package/dist/es2019/plugins/media/toolbar/index.js

@@ -440,8 +440,10 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
   if (allowAltTextOnImages) {
     const mediaAltTextPluginState = getMediaAltTextPluginState(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
+      var _pluginInjectionApi$d9;
       return getAltTextToolbar(baseToolbar, {
-        altTextValidator
+        altTextValidator,
+        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d9 = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d9 === void 0 ? void 0 : _pluginInjectionApi$d9.forceFocusSelector
       });
     }
   }
@@ -452,22 +454,22 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$d9, _pluginInjectionApi$d10;
+    var _pluginInjectionApi$d10, _pluginInjectionApi$d11;
     const mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele;
       const selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d9 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d9 === void 0 ? void 0 : (_pluginInjectionApi$d10 = _pluginInjectionApi$d9.analytics) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : _pluginInjectionApi$d10.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d10 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : (_pluginInjectionApi$d11 = _pluginInjectionApi$d10.analytics) === null || _pluginInjectionApi$d11 === void 0 ? void 0 : _pluginInjectionApi$d11.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$d11, _pluginInjectionApi$d12;
+    var _pluginInjectionApi$d12, _pluginInjectionApi$d13;
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele2;
       const element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(`.${MediaInlineNodeSelector}`);
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d11 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d11 === void 0 ? void 0 : (_pluginInjectionApi$d12 = _pluginInjectionApi$d11.analytics) === null || _pluginInjectionApi$d12 === void 0 ? void 0 : _pluginInjectionApi$d12.actions);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d12 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d12 === void 0 ? void 0 : (_pluginInjectionApi$d13 = _pluginInjectionApi$d12.analytics) === null || _pluginInjectionApi$d13 === void 0 ? void 0 : _pluginInjectionApi$d13.actions);
   } else {
     baseToolbar.getDomRef = () => {
       var _mediaPluginState$ele3;

package/dist/es2019/plugins/media/toolbar/linking-toolbar-appearance.js

@@ -7,7 +7,7 @@ import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { checkMediaType } from '../utils/check-media-type';
 import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
-import Separator from '../../floating-toolbar/ui/Separator';
+import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { linkMessages } from '../../../messages';
 import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { ToolTipContent, addLink } from '../../../keymaps';

package/dist/es2019/plugins/media/ui/MediaLinkingToolbar.js

@@ -8,8 +8,7 @@ import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 // Common Translations will live here
 
 import { PanelTextInput } from '@atlaskit/editor-common/ui';
-import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
-import Separator from '../../floating-toolbar/ui/Separator';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { container, containerWithProvider, inputWrapper, RecentSearch } from '@atlaskit/editor-common/link';
 import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { normalizeUrl } from '@atlaskit/editor-common/utils';

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

@@ -20,6 +20,7 @@ export function keymapPlugin() {
   };
   const keymaps = {
     Backspace: (state, dispatch) => {
+      var _nodeBeforePanel$type, _nodeBeforePanel$type2;
       const {
         selection,
         schema: {
@@ -44,17 +45,25 @@ export function keymapPlugin() {
       if ($from.parentOffset !== 0) {
         return false;
       }
-      const previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
-      const previousNodeType = previousPos.pos > 0 && previousPos.parent && previousPos.parent.type;
+      const $previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
+      const previousNodeType = $previousPos.pos > 0 && $previousPos.parent && $previousPos.parent.type;
       const parentNodeType = $from.parent.type;
       const isPreviousNodeAPanel = previousNodeType === panel;
       const isParentNodeAPanel = parentNodeType === panel;
+      const nodeBeforePanel = $previousPos === null || $previousPos === void 0 ? void 0 : $previousPos.nodeBefore;
 
       // 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)) {
+
+      if (isPreviousNodeAPanel && !isParentNodeAPanel || isInsideAnEmptyNode(selection, panel, state.schema) || hasParentNodeOfType(blockquote)(selection) ||
+      // Lift line of panel content up and out of the panel, when backspacing
+      // at the start of a panel, if the node before the panel is an 'isolating' node
+      // (for e.g. a table, or an expand), otherwise the default prosemirror backspace
+      // behaviour will fallback to 'select node backward' logic because the node
+      // before is an isolating node.
+      nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type2 = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type2 !== void 0 && _nodeBeforePanel$type2.isolating && hasParentNodeOfType(panel)(selection)) {
         const content = $from.node($from.depth).content;
-        const insertPos = previousPos.pos;
+        const insertPos = $previousPos.pos;
         deleteCurrentItem($from, tr).insert(insertPos, content);
         if (dispatch) {
           dispatch(setTextSelection(insertPos)(tr).scrollIntoView());

package/dist/es2019/version-wrapper.js

@@ -1,5 +1,5 @@
 export const name = "@atlaskit/editor-core";
-export const version = "187.15.1";
+export const version = "187.16.0";
 export const nextMajorVersion = () => {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.15.1",
+	"version": "187.16.0",
 	"sideEffects": false
 }

package/dist/esm/index.js

@@ -52,7 +52,6 @@ export { GapCursorSelection, Side as GapCursorSide } from './plugins/selection/g
 export { selectionPluginKey } from './plugins/mobile-selection';
 export { insertExpand } from './plugins/expand/commands';
 export { default as WithPluginState } from './ui/WithPluginState';
-export { pluginKey as floatingToolbarPluginKey } from './plugins/floating-toolbar';
 export { lightModeStatusColorPalette, darkModeStatusColorPalette } from './ui/ColorPalette/Palettes/statusColorPalette';
 export { DEFAULT_BORDER_COLOR } from './ui/ColorPalette/Palettes/common';
 export { default as messages, statusMessages, dateMessages } from './messages';

package/dist/esm/plugins/media/toolbar/alt-text.js

@@ -5,11 +5,9 @@ import React from 'react';
 import { openMediaAltTextMenu } from '../pm-plugins/alt-text/commands';
 import { ToolTipContent, addAltText } from '../../../keymaps';
 import { messages } from '../pm-plugins/alt-text/messages';
-import AltTextEdit from '../pm-plugins/alt-text/ui/AltTextEdit';
-import { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
+import AltTextEdit, { CONTAINER_WIDTH_IN_PX } from '../pm-plugins/alt-text/ui/AltTextEdit';
 import { getMediaNodeFromSelection } from '../utils/media-common';
 import { ClassNames } from '../pm-plugins/alt-text/style';
-import { forceFocusSelector } from '../../floating-toolbar/pm-plugins/force-focus';
 var testId = 'alt-text-edit-button';
 export var altTextButton = function altTextButton(intl, state) {
   var mediaNode = getMediaNodeFromSelection(state);
@@ -45,9 +43,13 @@ export var altTextEditComponent = function altTextEditComponent(options) {
        * and not close the floating toolbar.
        */
       var handleEsc = function handleEsc() {
+        var _options$forceFocusSe;
         var tr = view.state.tr,
           dispatch = view.dispatch;
-        dispatch(forceFocusSelector("[data-testid=\"".concat(testId, "\"]"))(tr));
+        var newTr = options === null || options === void 0 ? void 0 : (_options$forceFocusSe = options.forceFocusSelector) === null || _options$forceFocusSe === void 0 ? void 0 : _options$forceFocusSe.call(options, "[data-testid=\"".concat(testId, "\"]"))(tr);
+        if (newTr) {
+          dispatch(newTr);
+        }
       };
       return /*#__PURE__*/React.createElement(AltTextEdit, {
         view: view,

package/dist/esm/plugins/media/toolbar/index.js

@@ -418,8 +418,10 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
   if (allowAltTextOnImages) {
     var mediaAltTextPluginState = getMediaAltTextPluginState(state);
     if (mediaAltTextPluginState.isAltTextEditorOpen) {
+      var _pluginInjectionApi$d9;
       return getAltTextToolbar(baseToolbar, {
-        altTextValidator: altTextValidator
+        altTextValidator: altTextValidator,
+        forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d9 = pluginInjectionApi.dependencies.floatingToolbar.actions) === null || _pluginInjectionApi$d9 === void 0 ? void 0 : _pluginInjectionApi$d9.forceFocusSelector
       });
     }
   }
@@ -430,22 +432,22 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     selectedNodeType = state.selection.node.type;
   }
   if (allowMediaInline && (parentMediaGroupNode === null || parentMediaGroupNode === void 0 ? void 0 : parentMediaGroupNode.node.type) === mediaGroup) {
-    var _pluginInjectionApi$d9, _pluginInjectionApi$d10;
+    var _pluginInjectionApi$d10, _pluginInjectionApi$d11;
     var mediaOffset = state.selection.$from.parentOffset + 1;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele;
       var selector = mediaFilmstripItemDOMSelector(mediaOffset);
       return (_mediaPluginState$ele = mediaPluginState.element) === null || _mediaPluginState$ele === void 0 ? void 0 : _mediaPluginState$ele.querySelector(selector);
     };
-    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d9 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d9 === void 0 ? void 0 : (_pluginInjectionApi$d10 = _pluginInjectionApi$d9.analytics) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : _pluginInjectionApi$d10.actions);
+    items = generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d10 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d10 === void 0 ? void 0 : (_pluginInjectionApi$d11 = _pluginInjectionApi$d10.analytics) === null || _pluginInjectionApi$d11 === void 0 ? void 0 : _pluginInjectionApi$d11.actions);
   } else if (allowMediaInline && selectedNodeType && selectedNodeType === mediaInline) {
-    var _pluginInjectionApi$d11, _pluginInjectionApi$d12;
+    var _pluginInjectionApi$d12, _pluginInjectionApi$d13;
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele2;
       var element = (_mediaPluginState$ele2 = mediaPluginState.element) === null || _mediaPluginState$ele2 === void 0 ? void 0 : _mediaPluginState$ele2.querySelector(".".concat(MediaInlineNodeSelector));
       return element || mediaPluginState.element;
     };
-    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d11 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d11 === void 0 ? void 0 : (_pluginInjectionApi$d12 = _pluginInjectionApi$d11.analytics) === null || _pluginInjectionApi$d12 === void 0 ? void 0 : _pluginInjectionApi$d12.actions);
+    items = generateMediaInlineFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d12 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d12 === void 0 ? void 0 : (_pluginInjectionApi$d13 = _pluginInjectionApi$d12.analytics) === null || _pluginInjectionApi$d13 === void 0 ? void 0 : _pluginInjectionApi$d13.actions);
   } else {
     baseToolbar.getDomRef = function () {
       var _mediaPluginState$ele3;

package/dist/esm/plugins/media/toolbar/linking-toolbar-appearance.js

@@ -10,7 +10,7 @@ import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { checkMediaType } from '../utils/check-media-type';
 import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
-import Separator from '../../floating-toolbar/ui/Separator';
+import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { linkMessages } from '../../../messages';
 import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { ToolTipContent, addLink } from '../../../keymaps';

package/dist/esm/plugins/media/ui/MediaLinkingToolbar.js

@@ -18,8 +18,7 @@ import EditorUnlinkIcon from '@atlaskit/icon/glyph/editor/unlink';
 // Common Translations will live here
 
 import { PanelTextInput } from '@atlaskit/editor-common/ui';
-import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
-import Separator from '../../floating-toolbar/ui/Separator';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { container, containerWithProvider, inputWrapper, RecentSearch } from '@atlaskit/editor-common/link';
 import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { normalizeUrl } from '@atlaskit/editor-common/utils';

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

@@ -20,6 +20,7 @@ export function keymapPlugin() {
   };
   var keymaps = {
     Backspace: function Backspace(state, dispatch) {
+      var _nodeBeforePanel$type, _nodeBeforePanel$type2;
       var selection = state.selection,
         nodes = state.schema.nodes,
         tr = state.tr;
@@ -36,17 +37,25 @@ export function keymapPlugin() {
       if ($from.parentOffset !== 0) {
         return false;
       }
-      var previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
-      var previousNodeType = previousPos.pos > 0 && previousPos.parent && previousPos.parent.type;
+      var $previousPos = tr.doc.resolve(Math.max(0, $from.before($from.depth) - 1));
+      var previousNodeType = $previousPos.pos > 0 && $previousPos.parent && $previousPos.parent.type;
       var parentNodeType = $from.parent.type;
       var isPreviousNodeAPanel = previousNodeType === panel;
       var isParentNodeAPanel = parentNodeType === panel;
+      var nodeBeforePanel = $previousPos === null || $previousPos === void 0 ? void 0 : $previousPos.nodeBefore;
 
       // 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)) {
+
+      if (isPreviousNodeAPanel && !isParentNodeAPanel || isInsideAnEmptyNode(selection, panel, state.schema) || hasParentNodeOfType(blockquote)(selection) ||
+      // Lift line of panel content up and out of the panel, when backspacing
+      // at the start of a panel, if the node before the panel is an 'isolating' node
+      // (for e.g. a table, or an expand), otherwise the default prosemirror backspace
+      // behaviour will fallback to 'select node backward' logic because the node
+      // before is an isolating node.
+      nodeBeforePanel !== null && nodeBeforePanel !== void 0 && (_nodeBeforePanel$type = nodeBeforePanel.type) !== null && _nodeBeforePanel$type !== void 0 && (_nodeBeforePanel$type2 = _nodeBeforePanel$type.spec) !== null && _nodeBeforePanel$type2 !== void 0 && _nodeBeforePanel$type2.isolating && hasParentNodeOfType(panel)(selection)) {
         var content = $from.node($from.depth).content;
-        var insertPos = previousPos.pos;
+        var insertPos = $previousPos.pos;
         deleteCurrentItem($from, tr).insert(insertPos, content);
         if (dispatch) {
           dispatch(setTextSelection(insertPos)(tr).scrollIntoView());

package/dist/esm/version-wrapper.js

@@ -1,5 +1,5 @@
 export var name = "@atlaskit/editor-core";
-export var version = "187.15.1";
+export var version = "187.16.0";
 export var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');
 };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "187.15.1",
+	"version": "187.16.0",
 	"sideEffects": false
 }

package/dist/types/index.d.ts

@@ -71,11 +71,6 @@ export { selectionPluginKey } from './plugins/mobile-selection';
 export type { SelectionData, SelectionDataState, } from './plugins/mobile-selection';
 export { insertExpand } from './plugins/expand/commands';
 export { default as WithPluginState } from './ui/WithPluginState';
-export { pluginKey as floatingToolbarPluginKey } from './plugins/floating-toolbar';
-export type { FloatingToolbarPluginState } from './plugins/floating-toolbar';
-export type { FloatingToolbarConfig, FloatingToolbarItem, FloatingToolbarButton, FloatingToolbarDropdown, FloatingToolbarListPicker, FloatingToolbarSelect, FloatingToolbarColorPicker, FloatingToolbarDatePicker, FloatingToolbarInput, FloatingToolbarEmojiPicker, } from './plugins/floating-toolbar/types';
-export type { DropdownOptionT } from './plugins/floating-toolbar/ui/types';
-export type { SelectOption } from './plugins/floating-toolbar/ui/Select';
 export { lightModeStatusColorPalette, darkModeStatusColorPalette, } from './ui/ColorPalette/Palettes/statusColorPalette';
 export type { PaletteColor } from './ui/ColorPalette/Palettes/type';
 export { DEFAULT_BORDER_COLOR } from './ui/ColorPalette/Palettes/common';

package/dist/types/plugins/annotation/toolbar.d.ts

@@ -1,6 +1,6 @@
 import type { IntlShape } from 'react-intl-next';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
-import type { FloatingToolbarConfig } from '../../plugins/floating-toolbar/types';
+import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
 export declare const annotationMessages: {
     createComment: {
         id: string;

package/dist/types/plugins/code-block/toolbar.d.ts

@@ -1,6 +1,5 @@
-import type { FloatingToolbarHandler } from '../floating-toolbar/types';
+import type { FloatingToolbarHandler, SelectOption } from '@atlaskit/editor-common/types';
 import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
-import type { SelectOption } from '../floating-toolbar/ui/Select';
 export declare const messages: {
     selectLanguage: {
         id: string;

package/dist/types/plugins/copy-button/toolbar.d.ts

@@ -2,7 +2,7 @@
 /// <reference path="../../../../../../../typings/prosemirror-state.d.ts" />
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { Command } from '../../../src/types';
-import type { FloatingToolbarButton, FloatingToolbarItem, MarkOptions, NodeOptions } from '../floating-toolbar/types';
+import type { FloatingToolbarButton, FloatingToolbarItem, MarkOptions, NodeOptions } from '@atlaskit/editor-common/types';
 import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
 export declare function getCopyButtonConfig(options: MarkOptions | NodeOptions, hoverDecoration: HoverDecorationHandler | undefined): FloatingToolbarButton<Command>;
 export declare const showCopyButton: (state?: EditorState) => import("prosemirror-state").Plugin<any> | undefined;

package/dist/types/plugins/expand/toolbar.d.ts

@@ -1,3 +1,3 @@
-import { FloatingToolbarHandler } from '../floating-toolbar/types';
+import type { FloatingToolbarHandler } from '@atlaskit/editor-common/types';
 import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
 export declare const getToolbarConfig: (hoverDecoration: HoverDecorationHandler | undefined) => FloatingToolbarHandler;

package/dist/types/plugins/extension/toolbar.d.ts

@@ -1,4 +1,4 @@
-import type { FloatingToolbarHandler } from '../floating-toolbar/types';
+import type { FloatingToolbarHandler } from '@atlaskit/editor-common/types';
 import type { HoverDecorationHandler } from '@atlaskit/editor-plugin-decorations';
 import type { ApplyChangeHandler } from '@atlaskit/editor-plugin-context-panel';
 export declare const messages: {

package/dist/types/plugins/floating-toolbar/index.d.ts

@@ -1,10 +1,7 @@
-import type { Selection, EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
-import type { FloatingToolbarConfig } from './types';
-import type { FloatingToolbarPlugin, ConfigWithNodeInfo } from '@atlaskit/editor-plugin-floating-toolbar';
-export type FloatingToolbarPluginState = {
-    getConfigWithNodeInfo: (state: EditorState) => ConfigWithNodeInfo | null | undefined;
-};
+import type { FloatingToolbarConfig } from '@atlaskit/editor-common/types';
+import type { FloatingToolbarPlugin, ConfigWithNodeInfo, FloatingToolbarPluginState } from '@atlaskit/editor-plugin-floating-toolbar';
 export declare const getRelevantConfig: (selection: Selection, configs: Array<FloatingToolbarConfig>) => ConfigWithNodeInfo | undefined;
 declare const floatingToolbarPlugin: FloatingToolbarPlugin;
 export default floatingToolbarPlugin;