@atlaskit/editor-core 176.0.3 → 177.0.1

package/dist/cjs/plugins/floating-toolbar/ui/ScrollButtons.js

@@ -19,8 +19,6 @@ var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _constants = require("@atlaskit/theme/constants");
 
 var _chevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left-large"));
@@ -39,20 +37,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 var akGridSize = (0, _constants.gridSize)();
-var toolbarScrollButtons = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", "px;\n  padding: ", "px ", "px;\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), akGridSize / 2, akGridSize / 2, akGridSize, (0, _tokens.token)('color.border', _colors.N30));
+var toolbarScrollButtons = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  grid-gap: ", "px;\n  padding: ", "px ", "px;\n  border-left: solid ", " 1px;\n  flex-shrink: 0;\n  align-items: center;\n"])), akGridSize / 2, akGridSize / 2, akGridSize, "var(--ds-border, ".concat(_colors.N30, ")"));
 var LeftIcon = _chevronLeftLarge.default;
 var RightIcon = _chevronRightLarge.default;
 
 var _default = function _default(_ref) {
-  var _scrollContainerRef$c, _scrollContainerRef$c2;
-
   var intl = _ref.intl,
       scrollContainerRef = _ref.scrollContainerRef,
       node = _ref.node,
@@ -74,7 +64,6 @@ var _default = function _default(_ref) {
       canScrollRight = _useState6[0],
       setCanScrollRight = _useState6[1];
 
-  var items = Array.from(((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : (_scrollContainerRef$c2 = _scrollContainerRef$c.firstChild) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.childNodes) || {});
   var scheduledSetCanScroll = (0, _rafSchd.default)(function () {
     var _ref2 = scrollContainerRef.current,
         scrollLeft = _ref2.scrollLeft,
@@ -89,115 +78,44 @@ var _default = function _default(_ref) {
   };
 
   var scrollLeft = function scrollLeft() {
-    // find the first item partially visible
-    var _iterator = _createForOfIteratorHelper(items.reverse().entries()),
-        _step;
-
-    try {
-      for (_iterator.s(); !(_step = _iterator.n()).done;) {
-        var _scrollContainerRef$c3;
-
-        var _step$value = (0, _slicedToArray2.default)(_step.value, 2),
-            itemIndex = _step$value[0],
-            item = _step$value[1];
-
-        var _item$getBoundingClie = item.getBoundingClientRect(),
-            itemLeft = _item$getBoundingClie.left,
-            itemWidth = _item$getBoundingClie.width;
-
-        var _ref3 = ((_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.getBoundingClientRect()) || {},
-            _ref3$left = _ref3.left,
-            scrollContainerLeft = _ref3$left === void 0 ? 0 : _ref3$left,
-            _ref3$width = _ref3.width,
-            scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width; // if item is partially visible on the left, scroll to it so it became the last item visible
-
-
-        if (itemLeft <= scrollContainerLeft) {
-          var _scrollContainerRef$c4, _scrollContainerRef$c5;
-
-          var gap = scrollContainerWidth - itemWidth;
-          var scrollTo = item.offsetLeft - gap; // if scrollTo is same as current scrollLeft
-
-          if (Math.floor(scrollTo) === Math.floor((scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.scrollLeft) || 0)) {
-            // if this is the first item, scroll to the beginning, otherwise find next item to scroll to
-            if (itemIndex === items.length - 1) {
-              scrollTo = 0;
-            } else {
-              continue;
-            }
-          }
-
-          scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollTo({
-            top: 0,
-            left: scrollTo,
-            behavior: 'smooth'
-          });
-          break;
-        }
-      }
-    } catch (err) {
-      _iterator.e(err);
-    } finally {
-      _iterator.f();
-    }
-  };
-
-  var scrollRight = function scrollRight() {
-    // find the last item partially visible
-    var _iterator2 = _createForOfIteratorHelper(items),
-        _step2;
-
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var _scrollContainerRef$c6;
-
-        var item = _step2.value;
-
-        var _item$getBoundingClie2 = item.getBoundingClientRect(),
-            itemLeft = _item$getBoundingClie2.left,
-            itemWidth = _item$getBoundingClie2.width;
-
-        var _ref4 = ((_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.getBoundingClientRect()) || {},
-            _ref4$left = _ref4.left,
-            scrollContainerLeft = _ref4$left === void 0 ? 0 : _ref4$left,
-            _ref4$width = _ref4.width,
-            scrollContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width; // if item is partially visible on the right
+    var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
 
+    var _ref3 = ((_scrollContainerRef$c = scrollContainerRef.current) === null || _scrollContainerRef$c === void 0 ? void 0 : _scrollContainerRef$c.getBoundingClientRect()) || {},
+        _ref3$width = _ref3.width,
+        scrollContainerWidth = _ref3$width === void 0 ? 0 : _ref3$width;
 
-        if (itemLeft + itemWidth >= scrollContainerLeft + scrollContainerWidth) {
-          var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
+    var scrollLeft = ((_scrollContainerRef$c2 = scrollContainerRef.current) === null || _scrollContainerRef$c2 === void 0 ? void 0 : _scrollContainerRef$c2.scrollLeft) || 0; // scroll to current position - scroll container width
 
-          var scrollTo = item.offsetLeft; // if the item is longer than the entire container width, just scroll past it
+    var scrollTo = scrollLeft - scrollContainerWidth;
+    (_scrollContainerRef$c3 = scrollContainerRef.current) === null || _scrollContainerRef$c3 === void 0 ? void 0 : _scrollContainerRef$c3.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
+  };
 
-          if (itemWidth >= scrollContainerWidth && (((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollLeft) || 0) >= itemLeft - 1) {
-            scrollTo = item.offsetLeft + item.offsetWidth;
-          } // if scrollTo is same as current scrollLeft, find next item to scroll to
+  var scrollRight = function scrollRight() {
+    var _scrollContainerRef$c4, _scrollContainerRef$c5, _scrollContainerRef$c6;
 
+    var _ref4 = ((_scrollContainerRef$c4 = scrollContainerRef.current) === null || _scrollContainerRef$c4 === void 0 ? void 0 : _scrollContainerRef$c4.getBoundingClientRect()) || {},
+        _ref4$width = _ref4.width,
+        scrollContainerWidth = _ref4$width === void 0 ? 0 : _ref4$width;
 
-          if (Math.floor(scrollTo) === Math.floor((scrollContainerRef === null || scrollContainerRef === void 0 ? void 0 : (_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : _scrollContainerRef$c8.scrollLeft) || 0)) {
-            continue;
-          }
+    var scrollLeft = ((_scrollContainerRef$c5 = scrollContainerRef.current) === null || _scrollContainerRef$c5 === void 0 ? void 0 : _scrollContainerRef$c5.scrollLeft) || 0; // scroll to current position + scroll container width
 
-          (_scrollContainerRef$c9 = scrollContainerRef.current) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.scrollTo({
-            top: 0,
-            left: scrollTo,
-            behavior: 'smooth'
-          });
-          break;
-        }
-      }
-    } catch (err) {
-      _iterator2.e(err);
-    } finally {
-      _iterator2.f();
-    }
+    var scrollTo = scrollLeft + scrollContainerWidth;
+    (_scrollContainerRef$c6 = scrollContainerRef.current) === null || _scrollContainerRef$c6 === void 0 ? void 0 : _scrollContainerRef$c6.scrollTo({
+      top: 0,
+      left: scrollTo,
+      behavior: 'smooth'
+    });
   };
 
   var resizeObserver = new ResizeObserver(function (t) {
-    var _scrollContainerRef$c10, _scrollContainerRef$c11, _scrollContainerRef$c12;
+    var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
 
-    var widthNeededToShowAllItems = ((_scrollContainerRef$c10 = scrollContainerRef.current) === null || _scrollContainerRef$c10 === void 0 ? void 0 : _scrollContainerRef$c10.scrollWidth) || 0;
-    var availableSpace = (_scrollContainerRef$c11 = scrollContainerRef.current) === null || _scrollContainerRef$c11 === void 0 ? void 0 : (_scrollContainerRef$c12 = _scrollContainerRef$c11.parentNode) === null || _scrollContainerRef$c12 === void 0 ? void 0 : _scrollContainerRef$c12.offsetWidth;
+    var widthNeededToShowAllItems = ((_scrollContainerRef$c7 = scrollContainerRef.current) === null || _scrollContainerRef$c7 === void 0 ? void 0 : _scrollContainerRef$c7.scrollWidth) || 0;
+    var availableSpace = (_scrollContainerRef$c8 = scrollContainerRef.current) === null || _scrollContainerRef$c8 === void 0 ? void 0 : (_scrollContainerRef$c9 = _scrollContainerRef$c8.parentNode) === null || _scrollContainerRef$c9 === void 0 ? void 0 : _scrollContainerRef$c9.offsetWidth;
 
     if (availableSpace >= widthNeededToShowAllItems) {
       setNeedScroll(false);
@@ -230,7 +148,8 @@ var _default = function _default(_ref) {
   }, [node, scrollContainerRef]);
   return needScroll ? (0, _react2.jsx)("div", {
     ref: buttonsContainerRef,
-    css: toolbarScrollButtons
+    css: toolbarScrollButtons,
+    className: "scroll-buttons"
   }, (0, _react2.jsx)(_Button.default, {
     title: intl.formatMessage(_messages.default.floatingToolbarScrollLeft),
     icon: (0, _react2.jsx)(LeftIcon, {

package/dist/cjs/plugins/floating-toolbar/ui/Separator.js

@@ -13,11 +13,9 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
-var separator = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), (0, _tokens.token)('color.border', _colors.N30));
+var separator = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: ", ";\n  width: 1px;\n  height: 20px;\n  margin: 0 4px;\n  align-self: center;\n"])), "var(--ds-border, ".concat(_colors.N30, ")"));
 
 var _default = function _default() {
   return (0, _react.jsx)("div", {

package/dist/cjs/plugins/floating-toolbar/ui/SimpleModal.js

@@ -0,0 +1,51 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SimpleModal = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+
+var _modalDialog = _interopRequireWildcard(require("@atlaskit/modal-dialog"));
+
+var _messages = _interopRequireDefault(require("./messages"));
+
+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; }
+
+var SimpleModal = function SimpleModal(props) {
+  var onConfirm = props.onConfirm,
+      onClose = props.onClose,
+      options = props.options,
+      formatMessage = props.intl.formatMessage,
+      testId = props.testId;
+  var heading = (options === null || options === void 0 ? void 0 : options.title) || formatMessage(_messages.default.confirmModalDefaultHeading);
+  var okButtonLabel = (options === null || options === void 0 ? void 0 : options.okButtonLabel) || formatMessage(_messages.default.confirmModalOK);
+  var cancelButtonLabel = (options === null || options === void 0 ? void 0 : options.cancelButtonLabel) || formatMessage(_messages.default.confirmModalCancel);
+  return /*#__PURE__*/_react.default.createElement(_modalDialog.default, {
+    onClose: onClose,
+    testId: testId
+  }, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_modalDialog.ModalTitle, {
+    appearance: "warning"
+  }, heading)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalBody, null, /*#__PURE__*/_react.default.createElement("p", null, options === null || options === void 0 ? void 0 : options.message)), /*#__PURE__*/_react.default.createElement(_modalDialog.ModalFooter, null, /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    appearance: "default",
+    onClick: onClose,
+    testId: testId ? "".concat(testId, "-cancel-button") : undefined
+  }, cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+    appearance: "warning",
+    onClick: function onClick() {
+      return onConfirm();
+    },
+    testId: testId ? "".concat(testId, "-confirm-button") : undefined
+  }, okButtonLabel)));
+};
+
+exports.SimpleModal = SimpleModal;

package/dist/cjs/plugins/floating-toolbar/ui/Toolbar.js

@@ -67,12 +67,12 @@ var _reactIntlNext = require("react-intl-next");
 
 var _messages = _interopRequireDefault(require("./messages"));
 
-var _tokens = require("@atlaskit/tokens");
-
 var _decoration = require("../../base/pm-plugins/decoration");
 
 var _ScrollButtons = _interopRequireDefault(require("./ScrollButtons"));
 
+var _ToolbarArrowKeyNavigationProvider = require("../../../ui/ToolbarArrowKeyNavigationProvider");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 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); }
@@ -112,6 +112,10 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
             dispatchCommand((0, _commands.showConfirmDialog)(idx));
           } else {
             dispatchCommand(item.onClick);
+
+            if (item.focusEditoronEnter && !(editorView !== null && editorView !== void 0 && editorView.hasFocus())) {
+              editorView === null || editorView === void 0 ? void 0 : editorView.focus();
+            }
           }
         };
 
@@ -185,6 +189,8 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
           scrollableElement: popupsScrollableElement,
           dropdownWidth: item.dropdownWidth,
           showSelected: item.showSelected,
+          buttonTestId: item.testId,
+          editorView: editorView,
           setDisableParentScroll: scrollable ? setDisableScroll : undefined
         });
 
@@ -278,9 +284,9 @@ var ToolbarItems = /*#__PURE__*/_react.default.memo(function (_ref) {
 
 var toolbarContainer = function toolbarContainer(theme, scrollable, hasSelect, firstElementIsSelect) {
   return (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n  border-radius: ", "px;\n  box-shadow: ", ";\n  display: flex;\n  line-height: 1;\n  box-sizing: border-box;\n\n  & > div > div {\n    align-items: center;\n  }\n  ", "\n"])), (0, _components.themed)({
-    light: (0, _tokens.token)('elevation.surface.overlay', 'white'),
-    dark: (0, _tokens.token)('elevation.surface.overlay', _colors.DN70)
-  })(theme), (0, _constants.borderRadius)(), (0, _tokens.token)('elevation.shadow.overlay', "0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)"), scrollable ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n              height: 40px;\n            "]))) : (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n              height: 32px;\n            "])))) : (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        padding: ", "px ", "px;\n        ", "\n      "])), akGridSize / 2, akGridSize, firstElementIsSelect && (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n          padding-left: ", "px;\n        "])), akGridSize / 2)));
+    light: "var(--ds-surface-overlay, white)",
+    dark: "var(--ds-surface-overlay, ".concat(_colors.DN70, ")")
+  })(theme), (0, _constants.borderRadius)(), "var(--ds-shadow-overlay, ".concat("0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25)", ")"), scrollable ? (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        ", "\n        overflow: hidden;\n      "])), hasSelect ? (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n              height: 40px;\n            "]))) : (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n              height: 32px;\n            "])))) : (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n        padding: ", "px ", "px;\n        ", "\n      "])), akGridSize / 2, akGridSize, firstElementIsSelect && (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n          padding-left: ", "px;\n        "])), akGridSize / 2)));
 };
 
 var toolbarOverflow = function toolbarOverflow(scrollable, scrollDisabled, firstElementIsSelect) {
@@ -385,56 +391,24 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         (_getFirstFocusableEle = (0, _utils.getFirstFocusableElement)((_this$toolbarContaine = _this.toolbarContainerRef) === null || _this$toolbarContaine === void 0 ? void 0 : _this$toolbarContaine.current)) === null || _getFirstFocusableEle === void 0 ? void 0 : _getFirstFocusableEle.focus();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "shouldHandleArrowKeys", function () {
       var _this$props$items;
 
-      //To prevent the keydown handing of arrow keys for 'hyper link floating toolbar'
-      if ((_this$props$items = _this.props.items) !== null && _this$props$items !== void 0 && _this$props$items.find(function (item) {
+      //To prevent the keydown handling of arrow keys for custom toolbar items with 'disableArrowNavigation' prop enabled,
+      //Usually the button which has menus or popups
+      return !((_this$props$items = _this.props.items) !== null && _this$props$items !== void 0 && _this$props$items.find(function (item) {
         return item.type === 'custom' && item.disableArrowNavigation;
-      })) {
-        return;
-      }
-
-      if (event.key === 'Escape') {
+      }));
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleEscape", function (event) {
+      //If any dropdown is open inside the floating toolbar 'Esc' key should not
+      //focus the editorview. The event cannot be stopped as dropdown is not childnode of floating toolbar
+      if (!document.querySelector('[data-role="droplistContent"]')) {
         var _this$props$editorVie;
 
-        _this.currentSelectedItemIndex = 0;
         (_this$props$editorVie = _this.props.editorView) === null || _this$props$editorVie === void 0 ? void 0 : _this$props$editorVie.focus();
         event.preventDefault();
         event.stopPropagation();
-      } else {
-        var _this$toolbarContaine2, _this$toolbarContaine3, _this$toolbarContaine4;
-
-        //To trap the focus inside the toolbar using left and right arrow keys
-        var focusableElements = (0, _utils.getFocusableElements)((_this$toolbarContaine2 = _this.toolbarContainerRef) === null || _this$toolbarContaine2 === void 0 ? void 0 : _this$toolbarContaine2.current);
-        var firstFocsuableElement = (0, _utils.getFirstFocusableElement)((_this$toolbarContaine3 = _this.toolbarContainerRef) === null || _this$toolbarContaine3 === void 0 ? void 0 : _this$toolbarContaine3.current);
-        var lastFocsuableElement = (0, _utils.getLastFocusableElement)((_this$toolbarContaine4 = _this.toolbarContainerRef) === null || _this$toolbarContaine4 === void 0 ? void 0 : _this$toolbarContaine4.current);
-
-        if (!focusableElements || focusableElements.length === 0) {
-          return;
-        }
-
-        if (event.key === 'ArrowRight') {
-          if (_this.currentSelectedItemIndex === focusableElements.length - 1) {
-            firstFocsuableElement === null || firstFocsuableElement === void 0 ? void 0 : firstFocsuableElement.focus();
-            _this.currentSelectedItemIndex = 0;
-          } else {
-            var _focusableElements;
-
-            (_focusableElements = focusableElements[_this.currentSelectedItemIndex + 1]) === null || _focusableElements === void 0 ? void 0 : _focusableElements.focus();
-            _this.currentSelectedItemIndex++;
-          }
-        } else if (event.key === 'ArrowLeft') {
-          if (_this.currentSelectedItemIndex === 0) {
-            lastFocsuableElement === null || lastFocsuableElement === void 0 ? void 0 : lastFocsuableElement.focus();
-            _this.currentSelectedItemIndex = focusableElements.length - 1;
-          } else {
-            var _focusableElements2;
-
-            (_focusableElements2 = focusableElements[_this.currentSelectedItemIndex - 1]) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2.focus();
-            _this.currentSelectedItemIndex--;
-          }
-        }
       }
     });
     _this.scrollContainerRef = /*#__PURE__*/_react.default.createRef();
@@ -444,7 +418,6 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       scrollDisabled: false,
       mounted: false
     };
-    _this.currentSelectedItemIndex = 0;
     return _this;
   } // remove any decorations added by toolbar buttons i.e danger and selected styling
   // this prevents https://product-fabric.atlassian.net/browse/ED-10207
@@ -537,7 +510,12 @@ var Toolbar = /*#__PURE__*/function (_Component) {
       var hasSelect = items.find(function (item) {
         return item.type === 'select' && item.selectType === 'list';
       });
-      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_ToolbarArrowKeyNavigationProvider.ToolbarArrowKeyNavigationProvider, {
+        editorView: this.props.editorView,
+        handleEscape: this.handleEscape,
+        disableArrowKeyNavigation: !this.shouldHandleArrowKeys(),
+        childComponentSelector: "[data-testid='editor-floating-toolbar']"
+      }, (0, _react2.jsx)("div", {
         ref: this.toolbarContainerRef,
         css: function css(theme) {
           return [toolbarContainer({
@@ -546,8 +524,8 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         },
         "aria-label": intl.formatMessage(_messages.default.floatingToolbarAriaLabel),
         role: "toolbar",
-        className: className,
-        onKeyDown: this.handleKeyDown
+        "data-testid": "editor-floating-toolbar",
+        className: className
       }, (0, _react2.jsx)(_announcer.default, {
         text: intl.formatMessage(_messages.default.floatingToolbarAnnouncer),
         delay: 250
@@ -565,7 +543,7 @@ var Toolbar = /*#__PURE__*/function (_Component) {
         disabled: this.state.scrollDisabled
       })), (0, _react2.jsx)("div", {
         ref: this.mountRef
-      }));
+      })));
     }
   }]);
   return Toolbar;

package/dist/cjs/plugins/floating-toolbar/ui/messages.js

@@ -23,6 +23,16 @@ var _default = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Cancel',
     description: 'Cancel button for floating toolbar confirmation modal.'
   },
+  confirmModalListUnit: {
+    id: 'fabric.editor.floatingToolbar.confirmModalConnectedUnit',
+    defaultMessage: '{name}{amount, plural, =0 {} one { (+1 connected element)} other { (+# connected elements)}}',
+    description: 'Text displayed in confirmation modal which highlights the nodes and the amount of connected nodes that will be deleted'
+  },
+  confirmDeleteLinkedModalMessage: {
+    id: 'fabric.editor.extension.confirmDeleteLinkedModalMessage',
+    defaultMessage: 'Deleting {nodeName} will break anything connected to it.',
+    description: 'Message for confirm modal when deleting a extension linked to an data consumer.'
+  },
   floatingToolbarAriaLabel: {
     id: 'fabric.editor.floatingToolbar.floatingToolbarAriaLabel',
     defaultMessage: 'Floating Toolbar',
@@ -31,17 +41,17 @@ var _default = (0, _reactIntlNext.defineMessages)({
   floatingToolbarAnnouncer: {
     id: 'fabric.editor.floatingToolbar.floatingToolbarAnnouncer',
     defaultMessage: 'Floating toolbar controls have been opened',
-    description: "message that will be announced to screenreaders that the floating toolbar is opened"
+    description: 'message that will be announced to screenreaders that the floating toolbar is opened'
   },
   floatingToolbarScrollLeft: {
     id: 'fabric.editor.floatingToolbar.scrollLeft',
     defaultMessage: 'Scroll left',
-    description: "Button to scroll left when the toolbar is in the overflow state"
+    description: 'Button to scroll left when the toolbar is in the overflow state'
   },
   floatingToolbarScrollRight: {
     id: 'fabric.editor.floatingToolbar.scrollRight',
     defaultMessage: 'Scroll right',
-    description: "Button to scroll right when the toolbar is in the overflow state"
+    description: 'Button to scroll right when the toolbar is in the overflow state'
   }
 });
 

package/dist/cjs/plugins/floating-toolbar/ui/styles.js

@@ -11,8 +11,6 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _adfSchema = require("@atlaskit/adf-schema");
 
-var _tokens = require("@atlaskit/tokens");
-
 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; }
@@ -24,28 +22,28 @@ var background = {
       dark: 'inherit'
     },
     hover: {
-      light: (0, _tokens.token)('color.background.neutral.subtle.hovered', colors.N30A),
-      dark: (0, _tokens.token)('color.background.neutral.subtle.hovered', colors.N30A)
+      light: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"),
+      dark: "var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")")
     },
     active: {
-      light: (0, _tokens.token)('color.background.neutral.pressed', "".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6))),
-      dark: (0, _tokens.token)('color.background.neutral.pressed', "".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)))
+      light: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")"),
+      dark: "var(--ds-background-neutral-pressed, ".concat("".concat((0, _adfSchema.hexToRgba)(colors.B75, 0.6)), ")")
     }
   }
 };
 var color = {
   danger: {
     default: {
-      light: (0, _tokens.token)('color.icon', colors.N400),
-      dark: (0, _tokens.token)('color.icon', colors.DN400)
+      light: "var(--ds-icon, ".concat(colors.N400, ")"),
+      dark: "var(--ds-icon, ".concat(colors.DN400, ")")
     },
     hover: {
-      light: (0, _tokens.token)('color.icon.danger', colors.R400),
-      dark: (0, _tokens.token)('color.icon.danger', colors.R400)
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
     },
     active: {
-      light: (0, _tokens.token)('color.icon.danger', colors.R400),
-      dark: (0, _tokens.token)('color.icon.danger', colors.R400)
+      light: "var(--ds-icon-danger, ".concat(colors.R400, ")"),
+      dark: "var(--ds-icon-danger, ".concat(colors.R400, ")")
     }
   }
 };

package/dist/cjs/plugins/floating-toolbar/utils.js

@@ -7,7 +7,6 @@ exports.compareArrays = void 0;
 exports.findNode = findNode;
 exports.getFirstFocusableElement = getFirstFocusableElement;
 exports.getFocusableElements = getFocusableElements;
-exports.getLastFocusableElement = getLastFocusableElement;
 exports.shallowEqual = void 0;
 
 var shallowEqual = function shallowEqual(objA, objB) {
@@ -82,29 +81,15 @@ function findNode(parent, predicate) {
   return matchedNode;
 }
 
-function getFirstFocusableElement(rootNode) {
-  if (!rootNode) {
-    return;
-  }
-
-  var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return focusableModalElements[0];
-}
-
 function getFocusableElements(rootNode) {
   if (!rootNode) {
-    return;
+    return [];
   }
 
   var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return focusableModalElements;
+  return Array.from(focusableModalElements) || [];
 }
 
-function getLastFocusableElement(rootNode) {
-  if (!rootNode) {
-    return;
-  }
-
-  var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select') || [];
-  return focusableModalElements[focusableModalElements.length - 1];
+function getFirstFocusableElement(rootNode) {
+  return getFocusableElements(rootNode)[0];
 }

package/dist/cjs/plugins/grid/styles.js

@@ -15,11 +15,9 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var _tokens = require("@atlaskit/tokens");
-
 var _templateObject;
 
 var GRID_GUTTER = 12;
 exports.GRID_GUTTER = GRID_GUTTER;
-var gridStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, _editorSharedStyles.akEditorGridLineZIndex, (0, _tokens.token)('color.border', _colors.N30A), (0, _tokens.token)('color.border.focused', _colors.B200));
+var gridStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .gridParent {\n    width: calc(100% + ", "px);\n    margin-left: -", "px;\n    margin-right: -", "px;\n    transform: scale(1);\n    z-index: ", ";\n  }\n\n  .gridContainer {\n    position: fixed;\n    height: 100vh;\n    width: 100%;\n    pointer-events: none;\n  }\n\n  // TODO: https://product-fabric.atlassian.net/browse/DSP-4352\n  .gridLine {\n    border-left: 1px solid ", ";\n    display: inline-block;\n    box-sizing: border-box;\n    height: 100%;\n    margin-left: -1px;\n\n    transition: border-color 0.15s linear;\n    z-index: 0;\n  }\n\n  .highlight {\n    border-left: 1px solid ", ";\n  }\n"])), GRID_GUTTER * 2, GRID_GUTTER, GRID_GUTTER, _editorSharedStyles.akEditorGridLineZIndex, "var(--ds-border, ".concat(_colors.N30A, ")"), "var(--ds-border-focused, ".concat(_colors.B200, ")"));
 exports.gridStyles = gridStyles;

package/dist/cjs/plugins/help-dialog/index.js

@@ -74,7 +74,8 @@ function createPlugin(dispatch, imageEnabled) {
   });
 }
 
-var helpDialog = function helpDialog(legacyImageUploadProvider) {
+var helpDialog = function helpDialog() {
+  var imageUploadProviderExists = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
   return {
     name: 'helpDialog',
     pmPlugins: function pmPlugins() {
@@ -82,7 +83,7 @@ var helpDialog = function helpDialog(legacyImageUploadProvider) {
         name: 'helpDialog',
         plugin: function plugin(_ref) {
           var dispatch = _ref.dispatch;
-          return createPlugin(dispatch, !!legacyImageUploadProvider);
+          return createPlugin(dispatch, imageUploadProviderExists);
         }
       }, {
         name: 'helpDialogKeymap',