@atlaskit/editor-common 74.29.3 → 74.31.0

package/dist/esm/lists/node.js

@@ -0,0 +1,87 @@
+import { Fragment } from '@atlaskit/editor-prosemirror/model';
+import { isListItemNode, isListNode } from '../utils';
+export function isListNodeValidContent(node) {
+  var bulletList = node.type.schema.nodes.bulletList;
+  if (!bulletList) {
+    return false;
+  }
+  var listFragment = Fragment.from(bulletList.createAndFill());
+  return !isListItemNode(node) && node.type.validContent(listFragment);
+}
+export var JoinDirection = /*#__PURE__*/function (JoinDirection) {
+  JoinDirection[JoinDirection["LEFT"] = 1] = "LEFT";
+  JoinDirection[JoinDirection["RIGHT"] = -1] = "RIGHT";
+  return JoinDirection;
+}({});
+export var joinSiblingLists = function joinSiblingLists(_ref) {
+  var tr = _ref.tr,
+    direction = _ref.direction,
+    forceListType = _ref.forceListType;
+  var result = {
+    orderedList: 0,
+    bulletList: 0
+  };
+  var doc = tr.doc,
+    _tr$selection = tr.selection,
+    $from = _tr$selection.$from,
+    $to = _tr$selection.$to,
+    selection = tr.selection;
+  var range = $from.blockRange($to, isListNodeValidContent);
+  if (!range) {
+    return result;
+  }
+  var rootListNode = doc.nodeAt(range.start);
+  var from = isListNode(rootListNode) ? range.start : 0;
+  var to = isListNode(rootListNode) ? range.end : tr.doc.content.size;
+  var joins = [];
+  doc.nodesBetween(from, to, function (node, pos, parent) {
+    var resolvedPos = doc.resolve(pos);
+    var nodeBefore = resolvedPos.nodeBefore,
+      nodeAfter = resolvedPos.nodeAfter;
+    if (!nodeBefore || !nodeAfter || !isListNode(nodeBefore) || !isListNode(nodeAfter)) {
+      return;
+    }
+    var isNestedList = isListItemNode(parent);
+    if (!isNestedList && nodeBefore.type !== nodeAfter.type && !forceListType) {
+      return;
+    }
+    var index = resolvedPos.index();
+    var positionPreviousNode = resolvedPos.posAtIndex(index - 1);
+    var positionCurrentNode = resolvedPos.posAtIndex(index);
+
+    // If the previous node is part of the selection, OR
+    // If the previous node is not part of the selection and the previous node has the same list type that we’re converting to
+    var joinBefore = positionPreviousNode >= from || nodeBefore.type === forceListType;
+    if (forceListType) {
+      if (joinBefore) {
+        tr.setNodeMarkup(positionPreviousNode, forceListType);
+      }
+      tr.setNodeMarkup(positionCurrentNode, forceListType);
+    }
+    if (isNestedList && nodeBefore.type !== nodeAfter.type) {
+      var nodeType = direction === JoinDirection.RIGHT ? nodeAfter.type : nodeBefore.type;
+      tr.setNodeMarkup(positionPreviousNode, nodeType);
+    }
+    if (joinBefore) {
+      joins.push(pos);
+    }
+  });
+  if (selection.empty && rootListNode && isListNode(rootListNode)) {
+    var resolvedPos = doc.resolve(range.start + rootListNode.nodeSize);
+    var nodeBefore = resolvedPos.nodeBefore,
+      nodeAfter = resolvedPos.nodeAfter;
+    if (nodeBefore && nodeAfter && isListNode(nodeBefore) && isListNode(nodeAfter) && nodeAfter.type === nodeBefore.type) {
+      joins.push(resolvedPos.pos);
+    }
+  }
+  for (var i = joins.length - 1; i >= 0; i--) {
+    var listNode = tr.doc.nodeAt(joins[i]);
+    var listName = listNode === null || listNode === void 0 ? void 0 : listNode.type.name;
+    if (listName && (listName === 'orderedList' || listName === 'bulletList')) {
+      var amount = result[listName] || 0;
+      result[listName] = amount + 1;
+    }
+    tr.join(joins[i]);
+  }
+  return result;
+};

package/dist/esm/lists/replace-content.js

@@ -0,0 +1,17 @@
+import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/transform';
+export var moveTargetIntoList = function moveTargetIntoList(_ref) {
+  var _$target$nodeAfter;
+  var insertPosition = _ref.insertPosition,
+    $target = _ref.$target;
+  // take the text content of the paragraph and insert after the paragraph up until before the the cut
+  var from = insertPosition;
+  var to = $target.pos + (((_$target$nodeAfter = $target.nodeAfter) === null || _$target$nodeAfter === void 0 ? void 0 : _$target$nodeAfter.nodeSize) || 0); //$cut.pos + $cut.nodeAfter.nodeSize;
+  var gapFrom = $target.posAtIndex(0, $target.depth + 1); // start pos of the child
+  var gapTo = $target.doc.resolve(gapFrom).end(); // end pos of the paragraph
+
+  if (gapTo - gapFrom === 0) {
+    return new ReplaceStep(from, to, $target.doc.slice(insertPosition, $target.pos));
+  }
+  var step = new ReplaceAroundStep(from, to, gapFrom, gapTo, $target.doc.slice(insertPosition, $target.pos), 0, true);
+  return step;
+};

package/dist/esm/lists/selection.js

@@ -0,0 +1,50 @@
+import { NodeSelection, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
+import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
+import { isListItemNode, isListNode } from '../utils';
+export var numberNestedLists = function numberNestedLists(resolvedPos) {
+  var count = 0;
+  for (var i = resolvedPos.depth - 1; i > 0; i--) {
+    var node = resolvedPos.node(i);
+    if (isListNode(node)) {
+      count += 1;
+    }
+  }
+  return count;
+};
+export var getListItemAttributes = function getListItemAttributes($pos) {
+  var indentLevel = numberNestedLists($pos) - 1;
+  var itemAtPos = findParentNodeClosestToPos($pos, isListItemNode);
+
+  // Get the index of the current item relative to parent (parent is at item depth - 1)
+  var itemIndex = $pos.index(itemAtPos ? itemAtPos.depth - 1 : undefined);
+  return {
+    indentLevel: indentLevel,
+    itemIndex: itemIndex
+  };
+};
+export var normalizeListItemsSelection = function normalizeListItemsSelection(_ref) {
+  var selection = _ref.selection,
+    doc = _ref.doc;
+  if (selection.empty) {
+    return selection;
+  }
+  var $from = selection.$from,
+    $to = selection.$to;
+  if (selection instanceof NodeSelection) {
+    var _head = resolvePositionToStartOfListItem($from);
+    return new TextSelection(_head, _head);
+  }
+  var head = resolvePositionToStartOfListItem($from);
+  var anchor = resolvePositionToEndOfListItem($to);
+  return new TextSelection(anchor, head);
+};
+var resolvePositionToStartOfListItem = function resolvePositionToStartOfListItem($pos) {
+  var fromRange = $pos.blockRange($pos, isListItemNode);
+  var fromPosition = fromRange && $pos.textOffset === 0 && fromRange.end - 1 === $pos.pos ? Selection.near($pos.doc.resolve(fromRange.end + 1), 1).$from : $pos;
+  return fromPosition;
+};
+var resolvePositionToEndOfListItem = function resolvePositionToEndOfListItem($pos) {
+  var toRange = $pos.blockRange($pos, isListItemNode);
+  var toPosition = toRange && $pos.textOffset === 0 && toRange.start + 1 === $pos.pos ? Selection.near($pos.doc.resolve(toRange.start - 1), -1).$to : $pos;
+  return toPosition;
+};

package/dist/esm/mark/commands.js

@@ -0,0 +1,190 @@
+import { TextSelection } from '@atlaskit/editor-prosemirror/state';
+// eslint-disable-next-line no-duplicate-imports
+
+import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
+var SMART_TO_ASCII = {
+  '…': '...',
+  '→': '->',
+  '←': '<-',
+  '–': '--',
+  '“': '"',
+  '”': '"',
+  '‘': "'",
+  '’': "'"
+};
+var FIND_SMART_CHAR = new RegExp("[".concat(Object.keys(SMART_TO_ASCII).join(''), "]"), 'g');
+var isNodeTextBlock = function isNodeTextBlock(schema) {
+  var _schema$nodes = schema.nodes,
+    mention = _schema$nodes.mention,
+    text = _schema$nodes.text,
+    emoji = _schema$nodes.emoji;
+  return function (node, _, parent) {
+    if (node.type === mention || node.type === emoji || node.type === text) {
+      return parent === null || parent === void 0 ? void 0 : parent.isTextblock;
+    }
+    return;
+  };
+};
+var replaceSmartCharsToAscii = function replaceSmartCharsToAscii(position, textContent, tr) {
+  var schema = tr.doc.type.schema;
+  var match;
+  while (match = FIND_SMART_CHAR.exec(textContent)) {
+    var _match = match,
+      smartChar = _match[0],
+      offset = _match.index;
+    var replacePos = tr.mapping.map(position + offset);
+    var replacementText = schema.text(SMART_TO_ASCII[smartChar]);
+    tr.replaceWith(replacePos, replacePos + smartChar.length, replacementText);
+  }
+};
+var replaceMentionOrEmojiForTextContent = function replaceMentionOrEmojiForTextContent(position, nodeSize, textContent, tr) {
+  var currentPos = tr.mapping.map(position);
+  var schema = tr.doc.type.schema;
+  tr.replaceWith(currentPos, currentPos + nodeSize, schema.text(textContent));
+};
+export function filterChildrenBetween(doc, from, to, predicate) {
+  var results = [];
+  doc.nodesBetween(from, to, function (node, pos, parent) {
+    if (predicate(node, pos, parent)) {
+      results.push({
+        node: node,
+        pos: pos
+      });
+    }
+  });
+  return results;
+}
+export var transformSmartCharsMentionsAndEmojis = function transformSmartCharsMentionsAndEmojis(from, to, tr) {
+  var schema = tr.doc.type.schema;
+  var _schema$nodes2 = schema.nodes,
+    mention = _schema$nodes2.mention,
+    text = _schema$nodes2.text,
+    emoji = _schema$nodes2.emoji;
+  // Traverse through all the nodes within the range and replace them with their plaintext counterpart
+  var children = filterChildrenBetween(tr.doc, from, to, isNodeTextBlock(schema));
+  children.forEach(function (_ref) {
+    var node = _ref.node,
+      pos = _ref.pos;
+    if (node.type === mention || node.type === emoji) {
+      // Convert gracefully when no text found, ProseMirror will blow up if you try to create a node with an empty string or undefined
+      var replacementText = node.attrs.text;
+      if (typeof replacementText === 'undefined' || replacementText === '') {
+        replacementText = "".concat(node.type.name, " text missing");
+      }
+      replaceMentionOrEmojiForTextContent(pos, node.nodeSize, replacementText, tr);
+    } else if (node.type === text && node.text) {
+      var replacePosition = pos > from ? pos : from;
+      var textToReplace = pos > from ? node.text : node.text.substr(from - pos);
+      replaceSmartCharsToAscii(replacePosition, textToReplace, tr);
+    }
+  });
+};
+export var applyMarkOnRange = function applyMarkOnRange(from, to, removeMark, mark, tr) {
+  var schema = tr.doc.type.schema;
+  var code = schema.marks.code;
+  if (mark.type === code) {
+    transformSmartCharsMentionsAndEmojis(from, to, tr);
+  }
+  tr.doc.nodesBetween(tr.mapping.map(from), tr.mapping.map(to), function (node, pos) {
+    if (!node.isText) {
+      return true;
+    }
+
+    // This is an issue when the user selects some text.
+    // We need to check if the current node position is less than the range selection from.
+    // If it’s true, that means we should apply the mark using the range selection,
+    // not the current node position.
+    var nodeBetweenFrom = Math.max(pos, tr.mapping.map(from));
+    var nodeBetweenTo = Math.min(pos + node.nodeSize, tr.mapping.map(to));
+    if (removeMark) {
+      tr.removeMark(nodeBetweenFrom, nodeBetweenTo, mark);
+    } else {
+      tr.addMark(nodeBetweenFrom, nodeBetweenTo, mark);
+    }
+    return true;
+  });
+  return tr;
+};
+var entireSelectionContainsMark = function entireSelectionContainsMark(mark, doc, fromPos, toPos) {
+  var onlyContainsMark = true;
+  doc.nodesBetween(fromPos, toPos, function (node) {
+    // Skip recursion once we've found text which doesn't include the mark
+    if (!onlyContainsMark) {
+      return false;
+    }
+    if (node.isText) {
+      onlyContainsMark && (onlyContainsMark = mark.isInSet(node.marks));
+    }
+  });
+  return onlyContainsMark;
+};
+var toggleMarkInRange = function toggleMarkInRange(mark) {
+  return function (state, dispatch) {
+    var tr = state.tr;
+    if (state.selection instanceof CellSelection) {
+      var removeMark = true;
+      var cells = [];
+      state.selection.forEachCell(function (cell, cellPos) {
+        cells.push({
+          node: cell,
+          pos: cellPos
+        });
+        var from = cellPos;
+        var to = cellPos + cell.nodeSize;
+        removeMark && (removeMark = entireSelectionContainsMark(mark, state.doc, from, to));
+      });
+      for (var i = cells.length - 1; i >= 0; i--) {
+        var cell = cells[i];
+        var from = cell.pos;
+        var to = from + cell.node.nodeSize;
+        applyMarkOnRange(from, to, removeMark, mark, tr);
+      }
+    } else {
+      var _state$selection = state.selection,
+        $from = _state$selection.$from,
+        $to = _state$selection.$to;
+      // We decide to remove the mark only if the entire selection contains the mark
+      // Examples with *bold* text
+      // Scenario 1: Selection contains both bold and non-bold text -> bold entire selection
+      // Scenario 2: Selection contains only bold text -> un-bold entire selection
+      // Scenario 3: Selection contains no bold text -> bold entire selection
+      var _removeMark = entireSelectionContainsMark(mark, state.doc, $from.pos, $to.pos);
+      applyMarkOnRange($from.pos, $to.pos, _removeMark, mark, tr);
+    }
+    if (tr.docChanged) {
+      if (dispatch) {
+        dispatch(tr);
+      }
+      return true;
+    }
+    return false;
+  };
+};
+
+/**
+ * A wrapper over the default toggleMark, except when we have a selection
+ * we only toggle marks on text nodes rather than inline nodes.
+ * @param markType
+ * @param attrs
+ */
+export var toggleMark = function toggleMark(markType, attrs) {
+  return function (state, dispatch) {
+    var mark = markType.create(attrs);
+
+    // For cursor selections we can use the default behaviour.
+    if (state.selection instanceof TextSelection && state.selection.$cursor) {
+      var tr = state.tr;
+      if (mark.isInSet(state.storedMarks || state.selection.$cursor.marks())) {
+        tr.removeStoredMark(mark);
+      } else {
+        tr.addStoredMark(mark);
+      }
+      if (dispatch) {
+        dispatch(tr);
+        return true;
+      }
+      return false;
+    }
+    return toggleMarkInRange(mark)(state, dispatch);
+  };
+};

package/dist/esm/mark/index.js

@@ -0,0 +1 @@
+export { transformSmartCharsMentionsAndEmojis, applyMarkOnRange, toggleMark, filterChildrenBetween } from './commands';

package/dist/esm/messages/full-page.js

@@ -0,0 +1,18 @@
+import { defineMessages } from 'react-intl-next';
+export var messages = defineMessages({
+  toolbarLabel: {
+    id: 'fabric.editor.toolbarLabel',
+    defaultMessage: 'Editor toolbar',
+    description: 'Label for the ARIA region landmark'
+  },
+  pageActionsLabel: {
+    id: 'fabric.editor.pageActionsLabel',
+    defaultMessage: 'Page actions',
+    description: 'Label for the ARIA region landmark'
+  },
+  editableContentLabel: {
+    id: 'fabric.editor.editableContentLabel',
+    defaultMessage: 'Editable content',
+    description: 'Label for the ARIA region landmark'
+  }
+});

package/dist/esm/messages/index.js

@@ -7,6 +7,7 @@ export { codeBlockButtonMessages } from './codeBlockButton';
 export { toolbarInsertBlockMessages } from './insert-block';
 export { toolbarMessages as mediaAndEmbedToolbarMessages } from './media-and-embed-toolbar';
 export { messages as cardMessages } from './card';
+export { messages as fullPageMessages } from './full-page';
 export default defineMessages({
   layoutFixedWidth: {
     id: 'fabric.editor.layoutFixedWidth',

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "74.29.3";
+var packageVersion = "74.31.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/esm/node-width/index.js

@@ -100,4 +100,11 @@ export var getTableContainerWidth = function getTableContainerWidth(node) {
     return node.attrs.width;
   }
   return layoutToWidth[node.attrs.layout];
+};
+export var getTableWidthWithNumberColumn = function getTableWidthWithNumberColumn(node, offset) {
+  var isNumberColumnEnabled = node.attrs.isNumberColumnEnabled;
+  if (isNumberColumnEnabled && offset > 0) {
+    return getTableContainerWidth(node) - offset;
+  }
+  return getTableContainerWidth(node);
 };

package/dist/esm/ui/DropList/index.js

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.29.3";
+var packageVersion = "74.31.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/Toolbar/index.js

@@ -0,0 +1 @@
+export var EDIT_AREA_ID = 'ak-editor-textarea';

package/dist/esm/ui/index.js

@@ -25,4 +25,5 @@ export { snapTo, handleSides, imageAlignmentMap } from './ResizerLegacy/utils';
 export { wrapperStyle } from './ResizerLegacy/styled';
 export { panelTextInput } from './PanelTextInput/styles';
 export { default as PanelTextInput } from './PanelTextInput';
-export { default as Announcer } from './Announcer/announcer';
+export { default as Announcer } from './Announcer/announcer';
+export { EDIT_AREA_ID } from './Toolbar';

package/dist/esm/ui-menu/DropdownMenu/index.js

@@ -1,3 +1,4 @@
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/extends";
@@ -16,7 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /** @jsx jsx */
-import React, { PureComponent } from 'react';
+import React, { PureComponent, useContext } from 'react';
 import { css, jsx } from '@emotion/react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { CustomItem, MenuGroup } from '@atlaskit/menu';
@@ -25,6 +26,7 @@ import { B100, DN600, DN80, N70, N900 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
 import Tooltip from '@atlaskit/tooltip';
 import { DropdownMenuSharedCssClassName } from '../../styles';
+import { KeyDownHandlerContext } from '../../ui-menu/ToolbarArrowKeyNavigationProvider';
 import { withReactEditorViewOuterListeners } from '../../ui-react';
 import DropList from '../../ui/DropList';
 import Popup from '../../ui/Popup';
@@ -317,4 +319,15 @@ function DropdownMenuItem(_ref) {
     }, dropListItem);
   }
   return dropListItem;
-}
+}
+export var DropdownMenuWithKeyboardNavigation = /*#__PURE__*/React.memo(function (_ref2) {
+  var props = _extends({}, (_objectDestructuringEmpty(_ref2), _ref2));
+  var keyDownHandlerContext = useContext(KeyDownHandlerContext);
+  //This context is to handle the tab, Arrow Right/Left key events for dropdown.
+  //Default context has the void callbacks for above key events
+  return jsx(DropdownMenuWrapper, _extends({
+    arrowKeyNavigationProviderOptions: _objectSpread(_objectSpread({}, props.arrowKeyNavigationProviderOptions), {}, {
+      keyDownHandlerContext: keyDownHandlerContext
+    })
+  }, props));
+});

package/dist/esm/ui-menu/ToolbarArrowKeyNavigationProvider/index.js

@@ -0,0 +1,207 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+/** @jsx jsx */
+/* eslint-disable no-console */
+import React, { useCallback, useLayoutEffect, useRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import { fullPageMessages as messages } from '../../messages';
+import { EDIT_AREA_ID } from '../../ui';
+/*
+ **  The context is used to handle the keydown events of submenus.
+ **  Because the keyboard navigation is explicitly managed for main toolbar items
+ **  Few key presses such as Tab,Arrow Right/Left need ot be handled here via context
+ */
+export var KeyDownHandlerContext = /*#__PURE__*/React.createContext({
+  handleArrowLeft: function handleArrowLeft() {},
+  handleArrowRight: function handleArrowRight() {},
+  handleTab: function handleTab() {}
+});
+var centeredToolbarContainer = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  width: 100%;\n  align-items: center;\n"])));
+
+/**
+ * This component is a wrapper of main toolbar which listens to keydown events of children
+ * and handles left/right arrow key navigation for all focusable elements
+ * @param
+ * @returns
+ */
+export var ToolbarArrowKeyNavigationProvider = function ToolbarArrowKeyNavigationProvider(_ref) {
+  var children = _ref.children,
+    editorView = _ref.editorView,
+    childComponentSelector = _ref.childComponentSelector,
+    handleEscape = _ref.handleEscape,
+    disableArrowKeyNavigation = _ref.disableArrowKeyNavigation,
+    isShortcutToFocusToolbar = _ref.isShortcutToFocusToolbar,
+    editorAppearance = _ref.editorAppearance,
+    useStickyToolbar = _ref.useStickyToolbar,
+    intl = _ref.intl;
+  var wrapperRef = useRef(null);
+  var selectedItemIndex = useRef(0);
+  var incrementIndex = useCallback(function (list) {
+    var index = 0;
+    if (document.activeElement) {
+      index = list.indexOf(document.activeElement);
+      index = (index + 1) % list.length;
+    }
+    selectedItemIndex.current = index;
+  }, []);
+  var decrementIndex = useCallback(function (list) {
+    var index = 0;
+    if (document.activeElement) {
+      index = list.indexOf(document.activeElement);
+      index = (list.length + index - 1) % list.length;
+    }
+    selectedItemIndex.current = index;
+  }, []);
+  var handleArrowRight = function handleArrowRight() {
+    var _filteredFocusableEle;
+    var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    incrementIndex(filteredFocusableElements);
+    (_filteredFocusableEle = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle === void 0 ? void 0 : _filteredFocusableEle.focus();
+  };
+  var handleArrowLeft = function handleArrowLeft() {
+    var _filteredFocusableEle2;
+    var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    decrementIndex(filteredFocusableElements);
+    (_filteredFocusableEle2 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle2 === void 0 ? void 0 : _filteredFocusableEle2.focus();
+  };
+  var handleTab = function handleTab() {
+    var _filteredFocusableEle3;
+    var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    (_filteredFocusableEle3 = filteredFocusableElements[selectedItemIndex.current]) === null || _filteredFocusableEle3 === void 0 ? void 0 : _filteredFocusableEle3.focus();
+  };
+  var handleTabLocal = function handleTabLocal() {
+    var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+    filteredFocusableElements.forEach(function (element) {
+      element.setAttribute('tabindex', '-1');
+    });
+    filteredFocusableElements[selectedItemIndex.current].setAttribute('tabindex', '0');
+  };
+  var focusAndScrollToElement = function focusAndScrollToElement(element) {
+    var scrollToElement = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
+    if (scrollToElement) {
+      element === null || element === void 0 ? void 0 : element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'center',
+        inline: 'nearest'
+      });
+    }
+    element.focus();
+  };
+  var submenuKeydownHandleContext = {
+    handleArrowLeft: handleArrowLeft,
+    handleArrowRight: handleArrowRight,
+    handleTab: handleTab
+  };
+  useLayoutEffect(function () {
+    if (!wrapperRef.current || disableArrowKeyNavigation) {
+      return;
+    }
+    var element = wrapperRef.current;
+
+    /**
+     * To handle the key events on the list
+     * @param event
+     */
+    var handleKeyDown = function handleKeyDown(event) {
+      var _document$querySelect, _document$querySelect2, _wrapperRef$current;
+      //To trap the focus inside the horizontal toolbar for left and right arrow keys
+      var targetElement = event.target;
+
+      //To filter out the events outside the child component
+      if (!targetElement.closest("".concat(childComponentSelector))) {
+        return;
+      }
+
+      //The key events are from child components such as dropdown menus / popups are ignored
+      if ((_document$querySelect = document.querySelector('[data-role="droplistContent"], [data-test-id="color-picker-menu"], [data-emoji-picker-container="true"]')) !== null && _document$querySelect !== void 0 && _document$querySelect.contains(targetElement) || (_document$querySelect2 = document.querySelector('[data-test-id="color-picker-menu"]')) !== null && _document$querySelect2 !== void 0 && _document$querySelect2.contains(targetElement) || event.key === 'ArrowUp' || event.key === 'ArrowDown' || disableArrowKeyNavigation) {
+        return;
+      }
+      var menuWrapper = document.querySelector('.menu-key-handler-wrapper');
+      if (menuWrapper) {
+        // if menu wrapper exists, then a menu is open and arrow keys will be handled by MenuArrowKeyNavigationProvider
+        return;
+      }
+      var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+      if (!filteredFocusableElements || (filteredFocusableElements === null || filteredFocusableElements === void 0 ? void 0 : filteredFocusableElements.length) === 0) {
+        return;
+      }
+
+      //This is kind of hack to reset the current focused toolbar item
+      //to handle some use cases such as Tab in/out of main toolbar
+      if (!((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(targetElement))) {
+        selectedItemIndex.current = -1;
+      } else {
+        selectedItemIndex.current = filteredFocusableElements.indexOf(targetElement) > -1 ? filteredFocusableElements.indexOf(targetElement) : selectedItemIndex.current;
+      }
+
+      //do not scroll to focused element for sticky toolbar when navigating with arrows to avoid unnesessary scroll jump
+      var allowScrollToElement = !(editorAppearance === 'comment' && !!useStickyToolbar);
+      switch (event.key) {
+        case 'ArrowRight':
+          incrementIndex(filteredFocusableElements);
+          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current], allowScrollToElement);
+          event.preventDefault();
+          break;
+        case 'ArrowLeft':
+          decrementIndex(filteredFocusableElements);
+          focusAndScrollToElement(filteredFocusableElements[selectedItemIndex.current], allowScrollToElement);
+          event.preventDefault();
+          break;
+        case 'Tab':
+          handleTabLocal();
+          break;
+        case 'Escape':
+          handleEscape(event);
+          break;
+        default:
+      }
+    };
+    var globalKeyDownHandler = function globalKeyDownHandler(event) {
+      //To focus the first element in the toolbar
+      if (isShortcutToFocusToolbar(event)) {
+        var _filteredFocusableEle4, _filteredFocusableEle5;
+        var filteredFocusableElements = getFilteredFocusableElements(wrapperRef === null || wrapperRef === void 0 ? void 0 : wrapperRef.current);
+        (_filteredFocusableEle4 = filteredFocusableElements[0]) === null || _filteredFocusableEle4 === void 0 ? void 0 : _filteredFocusableEle4.focus();
+        (_filteredFocusableEle5 = filteredFocusableElements[0]) === null || _filteredFocusableEle5 === void 0 ? void 0 : _filteredFocusableEle5.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center',
+          inline: 'nearest'
+        });
+      }
+    };
+    element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
+    var editorViewDom = editorView === null || editorView === void 0 ? void 0 : editorView.dom;
+    if (isShortcutToFocusToolbar) {
+      editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.addEventListener('keydown', globalKeyDownHandler);
+    }
+    return function () {
+      element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
+      if (isShortcutToFocusToolbar) {
+        editorViewDom === null || editorViewDom === void 0 ? void 0 : editorViewDom.removeEventListener('keydown', globalKeyDownHandler);
+      }
+    };
+  }, [selectedItemIndex, wrapperRef, editorView, disableArrowKeyNavigation, handleEscape, childComponentSelector, incrementIndex, decrementIndex, isShortcutToFocusToolbar, editorAppearance, useStickyToolbar]);
+  return jsx("div", {
+    css: editorAppearance === 'comment' && centeredToolbarContainer,
+    className: "custom-key-handler-wrapper",
+    ref: wrapperRef,
+    role: "toolbar",
+    "aria-label": intl.formatMessage(messages.toolbarLabel),
+    "aria-controls": EDIT_AREA_ID
+  }, jsx(KeyDownHandlerContext.Provider, {
+    value: submenuKeydownHandleContext
+  }, children));
+};
+function getFocusableElements(rootNode) {
+  if (!rootNode) {
+    return [];
+  }
+  var focusableModalElements = rootNode.querySelectorAll('a[href], button:not([disabled]), textarea, input, select, div[tabindex="-1"], div[tabindex="0"]') || [];
+  return Array.from(focusableModalElements);
+}
+function getFilteredFocusableElements(rootNode) {
+  //The focusable elements from child components such as dropdown menus / popups are ignored
+  return getFocusableElements(rootNode).filter(function (elm) {
+    return !elm.closest('[data-role="droplistContent"]') && !elm.closest('[data-emoji-picker-container="true"]') && !elm.closest('[data-test-id="color-picker-menu"]') && !elm.closest('.scroll-buttons');
+  });
+}