@atlaskit/editor-core 176.0.2 → 177.0.0

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

@@ -39,20 +39,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 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 +66,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 +80,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;
+    var _scrollContainerRef$c, _scrollContainerRef$c2, _scrollContainerRef$c3;
 
-    try {
-      for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
-        var _scrollContainerRef$c6;
+    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;
 
-        var item = _step2.value;
+    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 _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
-
-
-        if (itemLeft + itemWidth >= scrollContainerLeft + scrollContainerWidth) {
-          var _scrollContainerRef$c7, _scrollContainerRef$c8, _scrollContainerRef$c9;
-
-          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 +150,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/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

@@ -73,6 +73,8 @@ 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 +114,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 +191,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
         });
 
@@ -385,56 +393,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 +420,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 +512,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 +526,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 +545,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/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/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',

package/dist/cjs/plugins/hyperlink/Toolbar.js

@@ -110,6 +110,17 @@ var getToolbarConfig = function getToolbarConfig(options) {
     var formatMessage = intl.formatMessage;
 
     var linkState = _main.stateKey.getState(state);
+    /**
+     * Enable focus trap only if feature flag is enabled AND for the new version of the picker
+     */
+
+
+    var _getFeatureFlags2 = (0, _featureFlagsContext.getFeatureFlags)(state),
+        lpLinkPicker = _getFeatureFlags2.lpLinkPicker,
+        lpLinkPickerFocusTrap = _getFeatureFlags2.lpLinkPickerFocusTrap,
+        preventPopupOverflow = _getFeatureFlags2.preventPopupOverflow;
+
+    var shouldEnableFocusTrap = lpLinkPicker && lpLinkPickerFocusTrap;
 
     if (linkState && linkState.activeLinkMark) {
       var activeLinkMark = linkState.activeLinkMark;
@@ -214,6 +225,8 @@ var getToolbarConfig = function getToolbarConfig(options) {
         case 'EDIT_INSERTED':
         case 'INSERT':
           {
+            var _options$linkPicker, _options$linkPicker$p;
+
             var _link;
 
             if (isEditLink(activeLinkMark) && activeLinkMark.node) {
@@ -225,9 +238,12 @@ var getToolbarConfig = function getToolbarConfig(options) {
             }
 
             var displayText = isEditLink(activeLinkMark) ? getLinkText(activeLinkMark, state) : linkState.activeText;
+            var popupHeight = lpLinkPicker && Boolean(options === null || options === void 0 ? void 0 : (_options$linkPicker = options.linkPicker) === null || _options$linkPicker === void 0 ? void 0 : (_options$linkPicker$p = _options$linkPicker.plugins) === null || _options$linkPicker$p === void 0 ? void 0 : _options$linkPicker$p.length) ? _ToolbarComponents.LINKPICKER_HEIGHT_IN_PX : _ToolbarComponents.RECENT_SEARCH_HEIGHT_IN_PX;
             return _objectSpread(_objectSpread({}, hyperLinkToolbar), {}, {
-              height: _ToolbarComponents.RECENT_SEARCH_HEIGHT_IN_PX,
+              preventPopupOverflow: preventPopupOverflow,
+              height: popupHeight,
               width: _ToolbarComponents.RECENT_SEARCH_WIDTH_IN_PX,
+              focusTrap: shouldEnableFocusTrap,
               items: [{
                 type: 'custom',
                 fallback: [],
@@ -244,6 +260,9 @@ var getToolbarConfig = function getToolbarConfig(options) {
                     displayUrl: _link,
                     displayText: displayText || '',
                     providerFactory: providerFactory,
+                    onCancel: function onCancel() {
+                      return view.focus();
+                    },
                     onSubmit: function onSubmit(href) {
                       var _options$cardOptions;
 

package/dist/cjs/plugins/hyperlink/ui/EditorLinkPicker/index.js

@@ -23,7 +23,7 @@ var _commands = require("../../commands");
 
 var _useEscapeClickaway = require("./useEscapeClickaway");
 
-var _excluded = ["view"];
+var _excluded = ["view", "onCancel"];
 
 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); }
 
@@ -31,14 +31,17 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 var EditorLinkPicker = function EditorLinkPicker(_ref) {
   var view = _ref.view,
+      onCancel = _ref.onCancel,
       restProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onEscape = (0, _react.useCallback)(function () {
     (0, _commands.hideLinkToolbar)()(view.state, view.dispatch);
     view.dispatch((0, _actions.hideLinkToolbar)(view.state.tr));
-  }, [view]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel]);
   var onClickAway = (0, _react.useCallback)(function () {
     (0, _commands.hideLinkToolbar)()(view.state, view.dispatch);
-  }, [view]);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  }, [view, onCancel]);
   var ref = (0, _useEscapeClickaway.useEscapeClickaway)(onEscape, onClickAway);
   return /*#__PURE__*/_react.default.createElement("div", {
     ref: ref

package/dist/cjs/plugins/hyperlink/ui/HyperlinkAddToolbar/index.js

@@ -73,7 +73,8 @@ var HyperlinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
           displayText = _this$props.displayText,
           displayUrl = _this$props.displayUrl,
           providerFactory = _this$props.providerFactory,
-          view = _this$props.view;
+          view = _this$props.view,
+          onCancel = _this$props.onCancel;
       return /*#__PURE__*/_react.default.createElement(_providerFactory.WithProviders, {
         providers: ['activityProvider', 'searchProvider'],
         providerFactory: providerFactory,
@@ -86,25 +87,19 @@ var HyperlinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
               hyperlinkPluginState: _main.stateKey
             },
             render: function render(_ref3) {
-              var _linkPickerOptions$pl;
-
               var hyperlinkPluginState = _ref3.hyperlinkPluginState;
 
               var _getFeatureFlags = (0, _featureFlagsContext.getFeatureFlags)(view.state),
                   lpLinkPicker = _getFeatureFlags.lpLinkPicker;
-              /**
-               * If activityProvider or searchProvider are present then only enable if there are plugins supplied to
-               * faciliate providing link search capabilities
-               */
-
 
-              if (lpLinkPicker && (!activityProvider && !searchProvider || Boolean(linkPickerOptions === null || linkPickerOptions === void 0 ? void 0 : (_linkPickerOptions$pl = linkPickerOptions.plugins) === null || _linkPickerOptions$pl === void 0 ? void 0 : _linkPickerOptions$pl.length))) {
+              if (lpLinkPicker) {
                 return /*#__PURE__*/_react.default.createElement(_EditorLinkPicker.EditorLinkPicker, (0, _extends2.default)({
                   view: view
                 }, linkPickerOptions, {
                   url: displayUrl,
                   displayText: displayText,
-                  onSubmit: onSubmitInterface(onSubmit)
+                  onSubmit: onSubmitInterface(onSubmit),
+                  onCancel: onCancel
                 }));
               }
 

package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-element-browser.js

@@ -37,7 +37,8 @@ var BlockInsertElementBrowser = function BlockInsertElementBrowser(props) {
     disabled: props.disabled,
     onClick: props.onClick,
     spacing: props.spacing,
-    label: props.label
+    label: props.label,
+    "aria-keyshortcuts": "/"
   }));
 };
 

package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-menu-legacy.js

@@ -43,7 +43,8 @@ var BlockInsertMenuLegacy = function BlockInsertMenuLegacy(props) {
     disabled: props.disabled,
     onClick: props.onClick,
     spacing: props.spacing,
-    label: props.label
+    label: props.label,
+    "aria-keyshortcuts": "/"
   }));
 };
 

package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/block-insert-menu.js

@@ -29,7 +29,8 @@ var BlockInsertMenu = function BlockInsertMenu(props) {
       disabled: props.disabled,
       onClick: props.onClick,
       spacing: props.spacing,
-      label: props.label
+      label: props.label,
+      "aria-keyshortcuts": "/"
     }));
   }
 

package/dist/cjs/plugins/insert-block/ui/ToolbarInsertBlock/dropdown-button.js

@@ -45,7 +45,8 @@ var DropDownButton = /*#__PURE__*/_react.default.memo(function (props) {
     spacing: props.spacing,
     "aria-expanded": props['aria-expanded'],
     "aria-haspopup": props['aria-haspopup'],
-    "aria-label": props.label,
+    "aria-keyshortcuts": props['aria-keyshortcuts'],
+    "aria-label": "".concat(props.label, " /"),
     iconBefore: (0, _react2.jsx)(DropDownButtonIcon, {
       label: ""
     }),