@bigbinary/neeto-editor-frontend 2.2.2 → 2.2.3

package/dist/v2/Editor.js

@@ -4,22 +4,22 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default, { memo, useState, useRef, useCallback, useEffect, createElement, forwardRef, useImperativeHandle } from 'react';
 import { DropdownMenu, Input, Button, Spinner, Tooltip, Toastr, Avatar, Typography, Select, Dialog, Checkbox as Checkbox$1, Label } from '@bigbinary/neeto-atoms';
-import { a as useEditorState, E as Extension, N as NodeViewWrapper, b as NodeViewContent, c as Node, R as ReactNodeViewRenderer, m as mergeAttributes, D as DecorationSet, d as Decoration, f as ReactRenderer, e as emojiPickerApi, h as markInputRule, I as InputRule, r as resetFocussedNode, i as highlightFocussedNode, p as isInTable, s as selectedRect, q as findTable, T as TableMap, t as addRow, P as PasteRule, B as BubbleMenu, j as getMarkType, k as getMarkRange, l as useEditor, n as EditorContent, o as EditorView } from '../chunk-CRUXOawK.js';
+import { a as useEditorState, E as Extension, N as NodeViewWrapper, b as NodeViewContent, c as Node, R as ReactNodeViewRenderer, m as mergeAttributes, D as DecorationSet, d as Decoration, f as ReactRenderer, e as emojiPickerApi, h as markInputRule, I as InputRule, r as resetFocussedNode, i as highlightFocussedNode, ap as isInTable, aq as selectedRect, ar as findTable, as as TableMap, at as addRow, P as PasteRule, B as BubbleMenu, j as getMarkType, k as getMarkRange, l as useEditor, n as EditorContent, o as EditorView } from '../chunk-B5LsYrmv.js';
 import classnames from 'classnames';
 import { isNotPresent, findBy, isNotEmpty, isPresent, noop, slugify } from '@bigbinary/neeto-cist';
 import { useOnClickOutside, withT, useFuncDebounce } from '@bigbinary/neeto-commons-frontend/v2/react-utils';
 import { createPortal } from 'react-dom';
-import { B as BulletList$1, s as src_default, a as src_default$1, R as Resizable, b as src_default$2, L as Link$1, c as scrollHandler, d as src_default$3, O as OrderedList$1, e as src_default$4, f as fuzzySearch, T as Table$2, g as TaskList, h as TaskItem, i as getVariableDisplay, j as getVideoDimension, C as CharacterCount, k as src_default$5, l as src_default$6, m as safeSplitBlock, n as safeListKeymap, o as TextStyle, p as src_default$7, F as Focus, q as src_default$8, r as TableRow, t as TableHeader, u as TableCell, v as Color, w as ListItem, x as src_default$9, y as src_default$a, z as useFetchKbArticles, K as useEditorWarnings, N as useDeletedArticles } from '../chunk-lEnpEBRB.js';
+import { B as BulletList$1, s as src_default, a as src_default$1, R as Resizable, b as src_default$2, L as Link$1, c as scrollHandler, d as src_default$3, O as OrderedList$1, e as src_default$4, f as fuzzySearch, T as Table$2, g as TaskList, h as TaskItem, i as getVariableDisplay, j as getVideoDimension, C as CharacterCount, k as src_default$5, l as src_default$6, m as safeSplitBlock, n as safeListKeymap, o as TextStyle, p as src_default$7, F as Focus, q as src_default$8, r as TableRow, t as TableHeader, u as TableCell, v as Color, w as ListItem, x as src_default$9, y as src_default$a, z as useFetchKbArticles, K as useEditorWarnings, N as useDeletedArticles } from '../chunk-BozdxlzB.js';
 import { D as DIRECT_UPLOAD_ENDPOINT, E as EDITOR_OPTIONS, C as COMBINED_REGEX, a as EDITOR_SIZES } from '../chunk-UwzgbfZD.js';
-import { S as Slice, F as Fragment$1 } from '../chunk-BpMZjml2.js';
+import { S as Slice, F as Fragment$1 } from '../chunk-C9H9LYpP.js';
 import '../chunk-CNIDH-FD.js';
 import { is, intersection, difference, union, isEmpty, isNil, mergeRight, assoc, equals } from 'ramda';
 import ReactDOM from 'react-dom/server';
-import { l as lowlight, d as decodeHtmlEntities, r as removeEmptyTags } from '../chunk-DfH1lF5p.js';
+import { l as lowlight, d as decodeHtmlEntities, r as removeEmptyTags } from '../chunk-LtUevT4I.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { C as CALLOUT_TYPES, E as EmojiPickerMenu, g as getSuggestionAppendTo, v as validateUrl, b as buildLevelsFromOptions, c as getLinkPopoverPosition, L as LINK_VALIDATION_SCHEMA, d as validateAndFormatUrl, D as DEFAULT_EDITOR_OPTIONS, e as getEditorStyles, M as Menu$3, f as MenuDynamicVariables, h as MediaUploader, j as LinkAddPopOver, k as transformPastedHTML, l as handlePaste, m as clipboardTextParser, s as setInitialPosition } from '../chunk-YhV82e9I.js';
+import { C as CALLOUT_TYPES, E as EmojiPickerMenu, g as getSuggestionAppendTo, v as validateUrl, b as buildLevelsFromOptions, c as getLinkPopoverPosition, L as LINK_VALIDATION_SCHEMA, d as validateAndFormatUrl, D as DEFAULT_EDITOR_OPTIONS, e as getEditorStyles, M as Menu$3, f as MenuDynamicVariables, h as MediaUploader, j as LinkAddPopOver, k as transformPastedHTML, l as handlePaste, m as clipboardTextParser, s as setInitialPosition } from '../chunk-CcLntzzh.js';
 import Megaphone from '@bigbinary/neeto-icons/misc/Megaphone';
-import { g as PluginKey, P as Plugin, S as Selection, T as TextSelection } from '../chunk-DN9pYQV5.js';
+import { g as PluginKey, P as Plugin, S as Selection, T as TextSelection } from '../chunk-DqSrbxqC.js';
 import { ChevronDown, Highlighter, X, Ratio, Ellipsis, AlignLeft, AlignCenter, AlignRight, RectangleHorizontal, RectangleVertical, Square, SquareDashed, Trash2, Minus as Minus$1, Plus, BookOpen, Pencil } from 'lucide-react';
 import CopyToClipboardButton from '@bigbinary/neeto-molecules/v2/CopyToClipboardButton';
 import { useTranslation } from 'react-i18next';
@@ -2371,237 +2371,565 @@ var SelectionDecoration = src_default$4.extend({
   }
 });
 
-function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper$1(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$1() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function _isNativeReflectConstruct() { return !!t; })(); }
-var Menu = /*#__PURE__*/function (_React$Component) {
-  function Menu(props) {
-    var _this;
-    _classCallCheck(this, Menu);
-    _this = _callSuper$1(this, Menu, [props]);
-    _defineProperty(_this, "keydownHandler", function (event) {
-      var listeners = {
-        Enter: _this.enterHandler,
-        ArrowUp: _this.upHandler,
-        ArrowDown: _this.downHandler,
-        ArrowLeft: _this.leftArrowHandler,
-        ArrowRight: _this.rightArrowHandler
-      };
-      if (event.key in listeners) listeners[event.key](event);
-    });
-    _defineProperty(_this, "selectItem", function (index) {
-      var _this$props = _this.props,
-        items = _this$props.items,
-        editor = _this$props.editor,
-        range = _this$props.range;
-      var selectedItem = items[index];
-      var hasCommand = selectedItem && selectedItem.command;
-      if (hasCommand) selectedItem.command({
-        editor: editor,
-        range: range
-      });
-    });
-    _defineProperty(_this, "upHandler", function () {
-      var items = _this.props.items;
-      var selectedIndex = _this.state.selectedIndex;
-      _this.setState({
-        selectedIndex: (selectedIndex + items.length - 1) % items.length
-      });
-    });
-    _defineProperty(_this, "downHandler", function () {
-      var items = _this.props.items;
-      var selectedIndex = _this.state.selectedIndex;
-      _this.setState({
-        selectedIndex: (selectedIndex + 1) % items.length
-      });
-    });
-    _defineProperty(_this, "enterHandler", function () {
-      var selectedIndex = _this.state.selectedIndex;
-      _this.selectItem(selectedIndex);
-    });
-    _defineProperty(_this, "leftArrowHandler", function () {
-      var _this$props2 = _this.props,
-        menuIndex = _this$props2.menuIndex,
-        setActiveMenuIndex = _this$props2.setActiveMenuIndex;
-      if (menuIndex > 0) setActiveMenuIndex(menuIndex - 1);
-    });
-    _defineProperty(_this, "rightArrowHandler", function () {
-      var _this$props3 = _this.props,
-        menuIndex = _this$props3.menuIndex,
-        setActiveMenuIndex = _this$props3.setActiveMenuIndex,
-        items = _this$props3.items;
-      var selectedIndex = _this.state.selectedIndex;
-      var selectedItem = items[selectedIndex];
-      var hasSubItems = selectedItem && !isNotPresent(selectedItem.items);
-      if (hasSubItems) setActiveMenuIndex(menuIndex + 1);
-    });
-    _this.state = {
-      selectedIndex: 0
-    };
-    _this.menuRef = /*#__PURE__*/React__default.createRef();
-    return _this;
+var top = 'top';
+var bottom = 'bottom';
+var right = 'right';
+var left = 'left';
+var basePlacements = [top, bottom, right, left];
+var start = 'start';
+var end = 'end';
+var clippingParents = 'clippingParents';
+var viewport = 'viewport';
+var popper = 'popper';
+var reference = 'reference';
+
+function getNodeName(element) {
+  return element ? (element.nodeName || '').toLowerCase() : null;
+}
+
+function getWindow(node) {
+  if (node == null) {
+    return window;
   }
-  _inherits(Menu, _React$Component);
-  return _createClass(Menu, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$props4 = this.props,
-        menuIndex = _this$props4.menuIndex,
-        activeMenuIndex = _this$props4.activeMenuIndex;
-      var isCurrentMenuActive = menuIndex === activeMenuIndex;
-      if (isCurrentMenuActive) {
-        document.addEventListener("keydown", this.keydownHandler);
-      }
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener("keydown", this.keydownHandler);
+
+  if (node.toString() !== '[object Window]') {
+    var ownerDocument = node.ownerDocument;
+    return ownerDocument ? ownerDocument.defaultView || window : window;
+  }
+
+  return node;
+}
+
+function isElement(node) {
+  var OwnElement = getWindow(node).Element;
+  return node instanceof OwnElement || node instanceof Element;
+}
+
+function isHTMLElement(node) {
+  var OwnElement = getWindow(node).HTMLElement;
+  return node instanceof OwnElement || node instanceof HTMLElement;
+}
+
+function isShadowRoot(node) {
+  // IE 11 has no ShadowRoot
+  if (typeof ShadowRoot === 'undefined') {
+    return false;
+  }
+
+  var OwnElement = getWindow(node).ShadowRoot;
+  return node instanceof OwnElement || node instanceof ShadowRoot;
+}
+
+function getBasePlacement(placement) {
+  return placement.split('-')[0];
+}
+
+var max = Math.max;
+var min = Math.min;
+var round = Math.round;
+
+function getUAString() {
+  var uaData = navigator.userAgentData;
+
+  if (uaData != null && uaData.brands && Array.isArray(uaData.brands)) {
+    return uaData.brands.map(function (item) {
+      return item.brand + "/" + item.version;
+    }).join(' ');
+  }
+
+  return navigator.userAgent;
+}
+
+function isLayoutViewport() {
+  return !/^((?!chrome|android).)*safari/i.test(getUAString());
+}
+
+function getBoundingClientRect(element, includeScale, isFixedStrategy) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+
+  var clientRect = element.getBoundingClientRect();
+  var scaleX = 1;
+  var scaleY = 1;
+
+  if (includeScale && isHTMLElement(element)) {
+    scaleX = element.offsetWidth > 0 ? round(clientRect.width) / element.offsetWidth || 1 : 1;
+    scaleY = element.offsetHeight > 0 ? round(clientRect.height) / element.offsetHeight || 1 : 1;
+  }
+
+  var _ref = isElement(element) ? getWindow(element) : window,
+      visualViewport = _ref.visualViewport;
+
+  var addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
+  var x = (clientRect.left + (addVisualOffsets && visualViewport ? visualViewport.offsetLeft : 0)) / scaleX;
+  var y = (clientRect.top + (addVisualOffsets && visualViewport ? visualViewport.offsetTop : 0)) / scaleY;
+  var width = clientRect.width / scaleX;
+  var height = clientRect.height / scaleY;
+  return {
+    width: width,
+    height: height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x,
+    x: x,
+    y: y
+  };
+}
+
+function contains(parent, child) {
+  var rootNode = child.getRootNode && child.getRootNode(); // First, attempt with faster native method
+
+  if (parent.contains(child)) {
+    return true;
+  } // then fallback to custom implementation with Shadow DOM support
+  else if (rootNode && isShadowRoot(rootNode)) {
+      var next = child;
+
+      do {
+        if (next && parent.isSameNode(next)) {
+          return true;
+        } // $FlowFixMe[prop-missing]: need a better way to handle this...
+
+
+        next = next.parentNode || next.host;
+      } while (next);
+    } // Give up, the result is false
+
+
+  return false;
+}
+
+function getComputedStyle(element) {
+  return getWindow(element).getComputedStyle(element);
+}
+
+function isTableElement(element) {
+  return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
+}
+
+function getDocumentElement(element) {
+  // $FlowFixMe[incompatible-return]: assume body is always available
+  return ((isElement(element) ? element.ownerDocument : // $FlowFixMe[prop-missing]
+  element.document) || window.document).documentElement;
+}
+
+function getParentNode(element) {
+  if (getNodeName(element) === 'html') {
+    return element;
+  }
+
+  return (// this is a quicker (but less type safe) way to save quite some bytes from the bundle
+    // $FlowFixMe[incompatible-return]
+    // $FlowFixMe[prop-missing]
+    element.assignedSlot || // step into the shadow DOM of the parent of a slotted node
+    element.parentNode || ( // DOM Element detected
+    isShadowRoot(element) ? element.host : null) || // ShadowRoot detected
+    // $FlowFixMe[incompatible-call]: HTMLElement is a Node
+    getDocumentElement(element) // fallback
+
+  );
+}
+
+function getTrueOffsetParent(element) {
+  if (!isHTMLElement(element) || // https://github.com/popperjs/popper-core/issues/837
+  getComputedStyle(element).position === 'fixed') {
+    return null;
+  }
+
+  return element.offsetParent;
+} // `.offsetParent` reports `null` for fixed elements, while absolute elements
+// return the containing block
+
+
+function getContainingBlock(element) {
+  var isFirefox = /firefox/i.test(getUAString());
+  var isIE = /Trident/i.test(getUAString());
+
+  if (isIE && isHTMLElement(element)) {
+    // In IE 9, 10 and 11 fixed elements containing block is always established by the viewport
+    var elementCss = getComputedStyle(element);
+
+    if (elementCss.position === 'fixed') {
+      return null;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(oldProps) {
-      var _this$props5 = this.props,
-        items = _this$props5.items,
-        menuIndex = _this$props5.menuIndex,
-        activeMenuIndex = _this$props5.activeMenuIndex;
-      var isCurrentMenuActive = menuIndex === activeMenuIndex;
-      if (items !== oldProps.items) this.setState({
-        selectedIndex: 0
-      });
-      scrollHandler({
-        wrapperRef: this.menuRef,
-        index: this.state.selectedIndex
-      });
-      if (isCurrentMenuActive) {
-        document.addEventListener("keydown", this.keydownHandler);
-      } else document.removeEventListener("keydown", this.keydownHandler);
+  }
+
+  var currentNode = getParentNode(element);
+
+  if (isShadowRoot(currentNode)) {
+    currentNode = currentNode.host;
+  }
+
+  while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
+    var css = getComputedStyle(currentNode); // This is non-exhaustive but covers the most common CSS properties that
+    // create a containing block.
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
+
+    if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') {
+      return currentNode;
+    } else {
+      currentNode = currentNode.parentNode;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-      var _this$props6 = this.props,
-        items = _this$props6.items,
-        menuIndex = _this$props6.menuIndex,
-        activeMenuIndex = _this$props6.activeMenuIndex;
-      var selectedIndex = this.state.selectedIndex;
-      var isCurrentMenuActive = menuIndex === activeMenuIndex;
-      return /*#__PURE__*/jsx("div", {
-        className: "neeto-editor-slash-commands__wrapper",
-        "data-testid": "neeto-editor-slash-commands-wrapper",
-        ref: this.menuRef,
-        children: items.map(function (item, index) {
-          var isLeafNode = isNotPresent(item.items);
-          var nodeElement = /*#__PURE__*/createElement(MenuItem, {
-            index: index,
-            item: item,
-            key: item.optionName,
-            selectItem: function selectItem() {
-              return _this2.selectItem(index);
-            },
-            selectedIndex: isCurrentMenuActive ? selectedIndex : -1,
-            onHover: function onHover() {
-              return _this2.setState({
-                selectedIndex: index
-              });
-            }
-          });
-          if (isLeafNode) return nodeElement;
-          return /*#__PURE__*/jsx(Tippy, {
-            interactive: true,
-            placement: "right",
-            theme: "light neeto-editor-slash-commands-tippy",
-            visible: selectedIndex === index,
-            content: /*#__PURE__*/jsx(Menu, _objectSpread$b(_objectSpread$b({}, _this2.props), {}, {
-              items: item.items,
-              menuIndex: menuIndex + 1
-            })),
-            onCreate: function onCreate(_ref) {
-              var popper = _ref.popper;
-              return popper.style.width = "max-content";
-            },
-            onHide: function onHide() {
-              _this2.isSubmenuOpened = false;
-            },
-            onShow: function onShow() {
-              _this2.isSubmenuOpened = true;
-            },
-            children: nodeElement
-          }, item.optionName);
-        })
-      });
+  }
+
+  return null;
+} // Gets the closest ancestor positioned element. Handles some edge cases,
+// such as table ancestors and cross browser bugs.
+
+
+function getOffsetParent(element) {
+  var window = getWindow(element);
+  var offsetParent = getTrueOffsetParent(element);
+
+  while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
+    offsetParent = getTrueOffsetParent(offsetParent);
+  }
+
+  if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
+    return window;
+  }
+
+  return offsetParent || getContainingBlock(element) || window;
+}
+
+function getMainAxisFromPlacement(placement) {
+  return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
+}
+
+function getFreshSideObject() {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  };
+}
+
+function mergePaddingObject(paddingObject) {
+  return Object.assign({}, getFreshSideObject(), paddingObject);
+}
+
+function expandToHashMap(value, keys) {
+  return keys.reduce(function (hashMap, key) {
+    hashMap[key] = value;
+    return hashMap;
+  }, {});
+}
+
+function getVariation(placement) {
+  return placement.split('-')[1];
+}
+
+function getWindowScroll(node) {
+  var win = getWindow(node);
+  var scrollLeft = win.pageXOffset;
+  var scrollTop = win.pageYOffset;
+  return {
+    scrollLeft: scrollLeft,
+    scrollTop: scrollTop
+  };
+}
+
+function getWindowScrollBarX(element) {
+  // If <html> has a CSS width greater than the viewport, then this will be
+  // incorrect for RTL.
+  // Popper 1 is broken in this case and never had a bug report so let's assume
+  // it's not an issue. I don't think anyone ever specifies width on <html>
+  // anyway.
+  // Browsers where the left scrollbar doesn't cause an issue report `0` for
+  // this (e.g. Edge 2019, IE11, Safari)
+  return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
+}
+
+function getViewportRect(element, strategy) {
+  var win = getWindow(element);
+  var html = getDocumentElement(element);
+  var visualViewport = win.visualViewport;
+  var width = html.clientWidth;
+  var height = html.clientHeight;
+  var x = 0;
+  var y = 0;
+
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    var layoutViewport = isLayoutViewport();
+
+    if (layoutViewport || !layoutViewport && strategy === 'fixed') {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
     }
-  }]);
-}(React__default.Component); // eslint-disable-next-line react/display-name
-var MenuItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var item = _ref2.item,
-    selectedIndex = _ref2.selectedIndex,
-    index = _ref2.index,
-    selectItem = _ref2.selectItem,
-    onHover = _ref2.onHover;
-  var Icon = item.Icon;
-  return /*#__PURE__*/jsxs("button", {
-    ref: ref,
-    "data-testid": "neeto-editor-command-list-item-".concat(index),
-    className: classnames("neeto-editor-slash-commands__item", {
-      active: index === selectedIndex
-    }),
-    onClick: selectItem,
-    onMouseEnter: onHover,
-    children: [Icon && /*#__PURE__*/jsx(Icon, {
-      size: 20
-    }), /*#__PURE__*/jsx("span", {
-      className: "neeto-editor-slash-commands__item-content",
-      children: /*#__PURE__*/jsx("span", {
-        className: "neeto-editor-slash-commands__item-title",
-        "data-testid": "neeto-editor-command-list-item-block-heading",
-        children: item.title
-      })
-    })]
+  }
+
+  return {
+    width: width,
+    height: height,
+    x: x + getWindowScrollBarX(element),
+    y: y
+  };
+}
+
+// of the `<html>` and `<body>` rect bounds if horizontally scrollable
+
+function getDocumentRect(element) {
+  var _element$ownerDocumen;
+
+  var html = getDocumentElement(element);
+  var winScroll = getWindowScroll(element);
+  var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
+  var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
+  var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
+  var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
+  var y = -winScroll.scrollTop;
+
+  if (getComputedStyle(body || html).direction === 'rtl') {
+    x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
+  }
+
+  return {
+    width: width,
+    height: height,
+    x: x,
+    y: y
+  };
+}
+
+function isScrollParent(element) {
+  // Firefox wants us to check `-x` and `-y` variations as well
+  var _getComputedStyle = getComputedStyle(element),
+      overflow = _getComputedStyle.overflow,
+      overflowX = _getComputedStyle.overflowX,
+      overflowY = _getComputedStyle.overflowY;
+
+  return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
+}
+
+function getScrollParent(node) {
+  if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
+    // $FlowFixMe[incompatible-return]: assume body is always available
+    return node.ownerDocument.body;
+  }
+
+  if (isHTMLElement(node) && isScrollParent(node)) {
+    return node;
+  }
+
+  return getScrollParent(getParentNode(node));
+}
+
+/*
+given a DOM element, return the list of all scroll parents, up the list of ancesors
+until we get to the top window object. This list is what we attach scroll listeners
+to, because if any of these parent elements scroll, we'll need to re-calculate the
+reference element's position.
+*/
+
+function listScrollParents(element, list) {
+  var _element$ownerDocumen;
+
+  if (list === void 0) {
+    list = [];
+  }
+
+  var scrollParent = getScrollParent(element);
+  var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
+  var win = getWindow(scrollParent);
+  var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
+  var updatedList = list.concat(target);
+  return isBody ? updatedList : // $FlowFixMe[incompatible-call]: isBody tells us target will be an HTMLElement here
+  updatedList.concat(listScrollParents(getParentNode(target)));
+}
+
+function rectToClientRect(rect) {
+  return Object.assign({}, rect, {
+    left: rect.x,
+    top: rect.y,
+    right: rect.x + rect.width,
+    bottom: rect.y + rect.height
   });
-});
+}
 
-function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-var CommandsList = /*#__PURE__*/function (_React$Component) {
-  function CommandsList() {
-    var _this;
-    _classCallCheck(this, CommandsList);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, CommandsList, [].concat(args));
-    _defineProperty(_this, "state", {
-      activeMenuIndex: 0
-    });
-    _defineProperty(_this, "onKeyDown", function (_ref) {
-      var event = _ref.event;
-      return ["Enter", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key);
-    });
-    _defineProperty(_this, "setActiveMenuIndex", function (index) {
-      return _this.setState({
-        activeMenuIndex: index
-      });
-    });
-    return _this;
+function getInnerBoundingClientRect(element, strategy) {
+  var rect = getBoundingClientRect(element, false, strategy === 'fixed');
+  rect.top = rect.top + element.clientTop;
+  rect.left = rect.left + element.clientLeft;
+  rect.bottom = rect.top + element.clientHeight;
+  rect.right = rect.left + element.clientWidth;
+  rect.width = element.clientWidth;
+  rect.height = element.clientHeight;
+  rect.x = rect.left;
+  rect.y = rect.top;
+  return rect;
+}
+
+function getClientRectFromMixedType(element, clippingParent, strategy) {
+  return clippingParent === viewport ? rectToClientRect(getViewportRect(element, strategy)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent, strategy) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
+} // A "clipping parent" is an overflowable container with the characteristic of
+// clipping (or hiding) overflowing elements with a position different from
+// `initial`
+
+
+function getClippingParents(element) {
+  var clippingParents = listScrollParents(getParentNode(element));
+  var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;
+  var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
+
+  if (!isElement(clipperElement)) {
+    return [];
+  } // $FlowFixMe[incompatible-return]: https://github.com/facebook/flow/issues/1414
+
+
+  return clippingParents.filter(function (clippingParent) {
+    return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
+  });
+} // Gets the maximum area that the element is visible in due to any number of
+// clipping parents
+
+
+function getClippingRect(element, boundary, rootBoundary, strategy) {
+  var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
+  var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
+  var firstClippingParent = clippingParents[0];
+  var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
+    var rect = getClientRectFromMixedType(element, clippingParent, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromMixedType(element, firstClippingParent, strategy));
+  clippingRect.width = clippingRect.right - clippingRect.left;
+  clippingRect.height = clippingRect.bottom - clippingRect.top;
+  clippingRect.x = clippingRect.left;
+  clippingRect.y = clippingRect.top;
+  return clippingRect;
+}
+
+function computeOffsets(_ref) {
+  var reference = _ref.reference,
+      element = _ref.element,
+      placement = _ref.placement;
+  var basePlacement = placement ? getBasePlacement(placement) : null;
+  var variation = placement ? getVariation(placement) : null;
+  var commonX = reference.x + reference.width / 2 - element.width / 2;
+  var commonY = reference.y + reference.height / 2 - element.height / 2;
+  var offsets;
+
+  switch (basePlacement) {
+    case top:
+      offsets = {
+        x: commonX,
+        y: reference.y - element.height
+      };
+      break;
+
+    case bottom:
+      offsets = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+
+    case right:
+      offsets = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+
+    case left:
+      offsets = {
+        x: reference.x - element.width,
+        y: commonY
+      };
+      break;
+
+    default:
+      offsets = {
+        x: reference.x,
+        y: reference.y
+      };
   }
-  _inherits(CommandsList, _React$Component);
-  return _createClass(CommandsList, [{
-    key: "render",
-    value: function render() {
-      return /*#__PURE__*/jsx(Menu, _objectSpread$a(_objectSpread$a({}, this.props), {}, {
-        activeMenuIndex: this.state.activeMenuIndex,
-        items: this.props.items,
-        menuIndex: 0,
-        setActiveMenuIndex: this.setActiveMenuIndex
-      }));
+
+  var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;
+
+  if (mainAxis != null) {
+    var len = mainAxis === 'y' ? 'height' : 'width';
+
+    switch (variation) {
+      case start:
+        offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
+        break;
+
+      case end:
+        offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
+        break;
     }
-  }]);
-}(React__default.Component);
+  }
+
+  return offsets;
+}
+
+function detectOverflow(state, options) {
+  if (options === void 0) {
+    options = {};
+  }
+
+  var _options = options,
+      _options$placement = _options.placement,
+      placement = _options$placement === void 0 ? state.placement : _options$placement,
+      _options$strategy = _options.strategy,
+      strategy = _options$strategy === void 0 ? state.strategy : _options$strategy,
+      _options$boundary = _options.boundary,
+      boundary = _options$boundary === void 0 ? clippingParents : _options$boundary,
+      _options$rootBoundary = _options.rootBoundary,
+      rootBoundary = _options$rootBoundary === void 0 ? viewport : _options$rootBoundary,
+      _options$elementConte = _options.elementContext,
+      elementContext = _options$elementConte === void 0 ? popper : _options$elementConte,
+      _options$altBoundary = _options.altBoundary,
+      altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary,
+      _options$padding = _options.padding,
+      padding = _options$padding === void 0 ? 0 : _options$padding;
+  var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
+  var altContext = elementContext === popper ? reference : popper;
+  var popperRect = state.rects.popper;
+  var element = state.elements[altBoundary ? altContext : elementContext];
+  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary, strategy);
+  var referenceClientRect = getBoundingClientRect(state.elements.reference);
+  var popperOffsets = computeOffsets({
+    reference: referenceClientRect,
+    element: popperRect,
+    placement: placement
+  });
+  var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
+  var elementClientRect = elementContext === popper ? popperClientRect : referenceClientRect; // positive = overflowing the clipping rect
+  // 0 or negative = within the clipping rect
+
+  var overflowOffsets = {
+    top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
+    bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
+    left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
+    right: elementClientRect.right - clippingClientRect.right + paddingObject.right
+  };
+  var offsetData = state.modifiersData.offset; // Offsets can be applied only to the popper element
+
+  if (elementContext === popper && offsetData) {
+    var offset = offsetData[placement];
+    Object.keys(overflowOffsets).forEach(function (key) {
+      var multiply = [right, bottom].indexOf(key) >= 0 ? 1 : -1;
+      var axis = [top, bottom].indexOf(key) >= 0 ? 'y' : 'x';
+      overflowOffsets[key] += offset[axis] * multiply;
+    });
+  }
+
+  return overflowOffsets;
+}
 
 var MENU_ITEMS = [{
   optionName: EDITOR_OPTIONS.PARAGRAPH,
@@ -2904,9 +3232,12 @@ var NO_RESULT_MENU_ITEM = {
     editor.chain().focus().deleteRange(range).run();
   }
 };
+var MENU_MAX_HEIGHT = 384;
+var MENU_BOUNDARY_PADDING = 8;
+var MENU_MAX_HEIGHT_CSS_VARIABLE = "--neeto-editor-slash-commands-max-height";
 
-function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ownKeys$b(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$b(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$b(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$b(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var imageCommand = function imageCommand(setMediaUploader) {
   return function (_ref) {
     var editor = _ref.editor,
@@ -2954,6 +3285,15 @@ var neetoKbArticleCommand = function neetoKbArticleCommand(setIsNeetoKbArticleAc
     editor.chain().focus().deleteRange(range).run();
   };
 };
+var getOppositePlacement = function getOppositePlacement(placement) {
+  return placement.replace(/^(top|bottom)/, function (side) {
+    return side === "top" ? "bottom" : "top";
+  });
+};
+var getOffsetDistance = function getOffsetDistance(state, placement) {
+  var _state$modifiersData$, _state$modifiersData$2;
+  return Math.abs((_state$modifiersData$ = (_state$modifiersData$2 = state.modifiersData.offset) === null || _state$modifiersData$2 === void 0 || (_state$modifiersData$2 = _state$modifiersData$2[placement]) === null || _state$modifiersData$2 === void 0 ? void 0 : _state$modifiersData$2.y) !== null && _state$modifiersData$ !== void 0 ? _state$modifiersData$ : 0);
+};
 var buildCommandItems = function buildCommandItems(_ref6) {
   var options = _ref6.options,
     addonCommands = _ref6.addonCommands,
@@ -2980,7 +3320,7 @@ var buildCommandItems = function buildCommandItems(_ref6) {
     return options.includes(optionName);
   });
   var adddonCommandItems = addonCommands.map(function (command) {
-    return _objectSpread$9(_objectSpread$9({}, command), {}, {
+    return _objectSpread$b(_objectSpread$b({}, command), {}, {
       title: command.label,
       Icon: command.icon
     });
@@ -2988,6 +3328,296 @@ var buildCommandItems = function buildCommandItems(_ref6) {
   return [].concat(_toConsumableArray(permittedCommandItems), _toConsumableArray(adddonCommandItems));
 };
 
+// Replaces Popper's flip for the slash commands menu. When the menu fits on
+// neither side, flip keeps the preferred side and lets the menu overflow, so on
+// short screens it gets cut off. Here we pick the side with more room instead
+// and cap the menu's height to the space available on that side.
+var fitToAvailableHeight = {
+  name: "fitToAvailableHeight",
+  enabled: true,
+  phase: "main",
+  requiresIfExists: ["offset"],
+  fn: function fn(_ref8) {
+    var state = _ref8.state,
+      name = _ref8.name;
+    if (state.modifiersData[name]._skip) return;
+    var menu = state.elements.popper.querySelector(".neeto-editor-slash-commands__wrapper");
+    if (!menu) return;
+    var _detectOverflow = detectOverflow(state, {
+        elementContext: "reference",
+        altBoundary: true,
+        padding: MENU_BOUNDARY_PADDING
+      }),
+      top = _detectOverflow.top,
+      bottom = _detectOverflow.bottom;
+    var isVertical = /^(top|bottom)/.test(state.placement);
+    var menuChromeHeight = state.rects.popper.height - menu.offsetHeight;
+    var menuContentHeight = Math.min(menu.scrollHeight, MENU_MAX_HEIGHT);
+    var placement = state.placement;
+    var availableHeight = state.rects.reference.height - top - bottom;
+    if (isVertical) {
+      var preferredPlacement = state.options.placement;
+      var oppositePlacement = getOppositePlacement(preferredPlacement);
+      var getSpace = function getSpace(candidatePlacement) {
+        return (candidatePlacement.startsWith("top") ? -top : -bottom) - getOffsetDistance(state, candidatePlacement);
+      };
+      var preferredSpace = getSpace(preferredPlacement);
+      var oppositeSpace = getSpace(oppositePlacement);
+      var menuHeight = menuChromeHeight + menuContentHeight;
+      var shouldUseOpposite = menuHeight > preferredSpace && (menuHeight <= oppositeSpace || oppositeSpace > preferredSpace);
+      placement = shouldUseOpposite ? oppositePlacement : preferredPlacement;
+      availableHeight = shouldUseOpposite ? oppositeSpace : preferredSpace;
+    }
+    var menuMaxHeight = Math.max(Math.floor(availableHeight - menuChromeHeight), 0);
+    state.elements.popper.style.setProperty(MENU_MAX_HEIGHT_CSS_VARIABLE, "".concat(menuMaxHeight, "px"));
+    var popperHeight = menuChromeHeight + Math.min(menuContentHeight, menuMaxHeight);
+    if (placement === state.placement && popperHeight === state.rects.popper.height) {
+      return;
+    }
+    state.modifiersData[name]._skip = true;
+    state.placement = placement;
+    state.rects.popper = _objectSpread$b(_objectSpread$b({}, state.rects.popper), {}, {
+      height: popperHeight
+    });
+    state.reset = true;
+  }
+};
+
+function ownKeys$a(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$a(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$a(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$a(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper$1(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct$1() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct$1() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct$1 = function _isNativeReflectConstruct() { return !!t; })(); }
+var Menu = /*#__PURE__*/function (_React$Component) {
+  function Menu(props) {
+    var _this;
+    _classCallCheck(this, Menu);
+    _this = _callSuper$1(this, Menu, [props]);
+    _defineProperty(_this, "keydownHandler", function (event) {
+      var listeners = {
+        Enter: _this.enterHandler,
+        ArrowUp: _this.upHandler,
+        ArrowDown: _this.downHandler,
+        ArrowLeft: _this.leftArrowHandler,
+        ArrowRight: _this.rightArrowHandler
+      };
+      if (event.key in listeners) listeners[event.key](event);
+    });
+    _defineProperty(_this, "selectItem", function (index) {
+      var _this$props = _this.props,
+        items = _this$props.items,
+        editor = _this$props.editor,
+        range = _this$props.range;
+      var selectedItem = items[index];
+      var hasCommand = selectedItem && selectedItem.command;
+      if (hasCommand) selectedItem.command({
+        editor: editor,
+        range: range
+      });
+    });
+    _defineProperty(_this, "upHandler", function () {
+      var items = _this.props.items;
+      var selectedIndex = _this.state.selectedIndex;
+      _this.setState({
+        selectedIndex: (selectedIndex + items.length - 1) % items.length
+      });
+    });
+    _defineProperty(_this, "downHandler", function () {
+      var items = _this.props.items;
+      var selectedIndex = _this.state.selectedIndex;
+      _this.setState({
+        selectedIndex: (selectedIndex + 1) % items.length
+      });
+    });
+    _defineProperty(_this, "enterHandler", function () {
+      var selectedIndex = _this.state.selectedIndex;
+      _this.selectItem(selectedIndex);
+    });
+    _defineProperty(_this, "leftArrowHandler", function () {
+      var _this$props2 = _this.props,
+        menuIndex = _this$props2.menuIndex,
+        setActiveMenuIndex = _this$props2.setActiveMenuIndex;
+      if (menuIndex > 0) setActiveMenuIndex(menuIndex - 1);
+    });
+    _defineProperty(_this, "rightArrowHandler", function () {
+      var _this$props3 = _this.props,
+        menuIndex = _this$props3.menuIndex,
+        setActiveMenuIndex = _this$props3.setActiveMenuIndex,
+        items = _this$props3.items;
+      var selectedIndex = _this.state.selectedIndex;
+      var selectedItem = items[selectedIndex];
+      var hasSubItems = selectedItem && !isNotPresent(selectedItem.items);
+      if (hasSubItems) setActiveMenuIndex(menuIndex + 1);
+    });
+    _this.state = {
+      selectedIndex: 0
+    };
+    _this.menuRef = /*#__PURE__*/React__default.createRef();
+    return _this;
+  }
+  _inherits(Menu, _React$Component);
+  return _createClass(Menu, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props4 = this.props,
+        menuIndex = _this$props4.menuIndex,
+        activeMenuIndex = _this$props4.activeMenuIndex;
+      var isCurrentMenuActive = menuIndex === activeMenuIndex;
+      if (isCurrentMenuActive) {
+        document.addEventListener("keydown", this.keydownHandler);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener("keydown", this.keydownHandler);
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(oldProps) {
+      var _this$props5 = this.props,
+        items = _this$props5.items,
+        menuIndex = _this$props5.menuIndex,
+        activeMenuIndex = _this$props5.activeMenuIndex;
+      var isCurrentMenuActive = menuIndex === activeMenuIndex;
+      if (items !== oldProps.items) this.setState({
+        selectedIndex: 0
+      });
+      scrollHandler({
+        wrapperRef: this.menuRef,
+        index: this.state.selectedIndex
+      });
+      if (isCurrentMenuActive) {
+        document.addEventListener("keydown", this.keydownHandler);
+      } else document.removeEventListener("keydown", this.keydownHandler);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props6 = this.props,
+        items = _this$props6.items,
+        menuIndex = _this$props6.menuIndex,
+        activeMenuIndex = _this$props6.activeMenuIndex;
+      var selectedIndex = this.state.selectedIndex;
+      var isCurrentMenuActive = menuIndex === activeMenuIndex;
+      return /*#__PURE__*/jsx("div", {
+        className: "neeto-editor-slash-commands__wrapper",
+        "data-testid": "neeto-editor-slash-commands-wrapper",
+        ref: this.menuRef,
+        children: items.map(function (item, index) {
+          var isLeafNode = isNotPresent(item.items);
+          var nodeElement = /*#__PURE__*/createElement(MenuItem, {
+            index: index,
+            item: item,
+            key: item.optionName,
+            selectItem: function selectItem() {
+              return _this2.selectItem(index);
+            },
+            selectedIndex: isCurrentMenuActive ? selectedIndex : -1,
+            onHover: function onHover() {
+              return _this2.setState({
+                selectedIndex: index
+              });
+            }
+          });
+          if (isLeafNode) return nodeElement;
+          return /*#__PURE__*/jsx(Tippy, {
+            interactive: true,
+            placement: "right",
+            popperOptions: {
+              modifiers: [fitToAvailableHeight]
+            },
+            theme: "light neeto-editor-slash-commands-tippy",
+            visible: selectedIndex === index,
+            content: /*#__PURE__*/jsx(Menu, _objectSpread$a(_objectSpread$a({}, _this2.props), {}, {
+              items: item.items,
+              menuIndex: menuIndex + 1
+            })),
+            onCreate: function onCreate(_ref) {
+              var popper = _ref.popper;
+              return popper.style.width = "max-content";
+            },
+            onHide: function onHide() {
+              _this2.isSubmenuOpened = false;
+            },
+            onShow: function onShow() {
+              _this2.isSubmenuOpened = true;
+            },
+            children: nodeElement
+          }, item.optionName);
+        })
+      });
+    }
+  }]);
+}(React__default.Component); // eslint-disable-next-line react/display-name
+var MenuItem = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var item = _ref2.item,
+    selectedIndex = _ref2.selectedIndex,
+    index = _ref2.index,
+    selectItem = _ref2.selectItem,
+    onHover = _ref2.onHover;
+  var Icon = item.Icon;
+  return /*#__PURE__*/jsxs("button", {
+    ref: ref,
+    "data-testid": "neeto-editor-command-list-item-".concat(index),
+    className: classnames("neeto-editor-slash-commands__item", {
+      active: index === selectedIndex
+    }),
+    onClick: selectItem,
+    onMouseEnter: onHover,
+    children: [Icon && /*#__PURE__*/jsx(Icon, {
+      size: 20
+    }), /*#__PURE__*/jsx("span", {
+      className: "neeto-editor-slash-commands__item-content",
+      children: /*#__PURE__*/jsx("span", {
+        className: "neeto-editor-slash-commands__item-title",
+        "data-testid": "neeto-editor-command-list-item-block-heading",
+        children: item.title
+      })
+    })]
+  });
+});
+
+function ownKeys$9(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread$9(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$9(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$9(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var CommandsList = /*#__PURE__*/function (_React$Component) {
+  function CommandsList() {
+    var _this;
+    _classCallCheck(this, CommandsList);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, CommandsList, [].concat(args));
+    _defineProperty(_this, "state", {
+      activeMenuIndex: 0
+    });
+    _defineProperty(_this, "onKeyDown", function (_ref) {
+      var event = _ref.event;
+      return ["Enter", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key);
+    });
+    _defineProperty(_this, "setActiveMenuIndex", function (index) {
+      return _this.setState({
+        activeMenuIndex: index
+      });
+    });
+    return _this;
+  }
+  _inherits(CommandsList, _React$Component);
+  return _createClass(CommandsList, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/jsx(Menu, _objectSpread$9(_objectSpread$9({}, this.props), {}, {
+        activeMenuIndex: this.state.activeMenuIndex,
+        items: this.props.items,
+        menuIndex: 0,
+        setActiveMenuIndex: this.setActiveMenuIndex
+      }));
+    }
+  }]);
+}(React__default.Component);
+
 function ownKeys$8(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread$8(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$8(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$8(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var CommandsPluginKey = new PluginKey("commands");
@@ -3056,7 +3686,13 @@ var SlashCommands = {
                     arrow: false,
                     zIndex: 99999,
                     role: "dropdown",
-                    theme: "light neeto-editor-slash-commands-tippy"
+                    theme: "light neeto-editor-slash-commands-tippy",
+                    popperOptions: {
+                      modifiers: [{
+                        name: "flip",
+                        enabled: false
+                      }, fitToAvailableHeight]
+                    }
                   });
                   highlightFocussedNode();
                 },