@atlaskit/editor-core 181.0.0 → 182.0.0

package/dist/cjs/plugins/media/ui/ImageBorder/index.js

@@ -0,0 +1,219 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("@emotion/react");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _styles = require("@atlaskit/editor-common/styles");
+var _imageBorder = _interopRequireDefault(require("@atlaskit/icon/glyph/image-border"));
+var _react2 = require("react");
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _editorPalette = require("@atlaskit/editor-palette");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _ToolbarButton = _interopRequireDefault(require("../../../../ui/ToolbarButton"));
+var _styles2 = require("./styles");
+var _messages = require("./messages");
+/** @jsx jsx */
+
+var ImageBorder = function ImageBorder(_ref) {
+  var formatMessage = _ref.intl.formatMessage,
+    toggleBorder = _ref.toggleBorder,
+    showSomewhatSemanticTooltips = _ref.showSomewhatSemanticTooltips,
+    borderMark = _ref.borderMark,
+    setBorder = _ref.setBorder;
+  var popupTarget = (0, _react2.useRef)(null);
+  var enabled = !!borderMark;
+  var color = borderMark === null || borderMark === void 0 ? void 0 : borderMark.color;
+  var size = borderMark === null || borderMark === void 0 ? void 0 : borderMark.size;
+  var _useState = (0, _react2.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var _useState3 = (0, _react2.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isColorSubmenuOpen = _useState4[0],
+    setIsColorSubmenuOpen = _useState4[1];
+  var _useState5 = (0, _react2.useState)(false),
+    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+    isSizeSubmenuOpen = _useState6[0],
+    setIsSizeSubmenuOpen = _useState6[1];
+  var borderSizeOptions = [{
+    name: formatMessage(_messages.messages.borderSizeSubtle),
+    value: 1
+  }, {
+    name: formatMessage(_messages.messages.borderSizeMedium),
+    value: 2
+  }, {
+    name: formatMessage(_messages.messages.borderSizeBold),
+    value: 3
+  }];
+  var items = [{
+    content: formatMessage(_messages.messages.borderColor),
+    value: {
+      name: 'color'
+    },
+    elemAfter: (0, _react.jsx)("div", {
+      className: _styles.DropdownMenuSharedCssClassName.SUBMENU
+    }, (0, _react.jsx)("div", {
+      css: (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color))
+    }), isColorSubmenuOpen && (0, _react.jsx)("div", {
+      css: (0, _styles2.contextualSubMenu)(0)
+    }, (0, _react.jsx)(_uiColor.ColorPalette, {
+      onClick: function onClick(color) {
+        setBorder({
+          color: color
+        });
+        setIsOpen(!isOpen);
+      },
+      selectedColor: color !== null && color !== void 0 ? color : null,
+      paletteOptions: {
+        palette: _uiColor.borderColorPalette,
+        paletteColorTooltipMessages: _uiColor.borderPaletteTooltipMessages,
+        hexToPaletteColor: _editorPalette.hexToEditorBorderPaletteColor,
+        showSomewhatSemanticTooltips: showSomewhatSemanticTooltips
+      }
+    })))
+  }, {
+    content: formatMessage(_messages.messages.borderSize),
+    value: {
+      name: 'size'
+    },
+    elemAfter: (0, _react.jsx)("div", {
+      className: _styles.DropdownMenuSharedCssClassName.SUBMENU
+    }, (0, _react.jsx)("div", {
+      css: _styles2.contextualMenuArrow
+    }), isSizeSubmenuOpen && (0, _react.jsx)("div", {
+      css: (0, _styles2.contextualSubMenu)(1)
+    }, borderSizeOptions.map(function (_ref2, idx) {
+      var name = _ref2.name,
+        value = _ref2.value;
+      return (0, _react.jsx)(_tooltip.default, {
+        key: idx,
+        content: name
+      }, (0, _react.jsx)("span", {
+        css: _styles2.buttonWrapperStyle
+      }, (0, _react.jsx)("button", {
+        css: (0, _styles2.buttonStyle)(value === size),
+        "aria-label": name,
+        role: "radio",
+        "aria-checked": value === size,
+        onClick: function onClick() {
+          setBorder({
+            size: value
+          });
+          setIsOpen(false);
+        },
+        onMouseDown: function onMouseDown(e) {
+          e.preventDefault();
+        }
+      }, (0, _react.jsx)("div", {
+        css: (0, _styles2.line)(value, value === size),
+        role: "presentation"
+      }))));
+    })))
+  }];
+
+  /**
+   * We want to change direction of our dropdowns a bit early,
+   * not exactly when it hits the boundary.
+   */
+  var fitTolerance = 10;
+  var fitWidth = _styles2.menuItemDimensions.width;
+  var fitHeight = items.length * (_styles2.menuItemDimensions.height + _styles2.itemSpacing);
+  return (0, _react.jsx)("div", null, (0, _react.jsx)("div", {
+    css: (0, _styles2.toolbarButtonWrapper)({
+      enabled: enabled,
+      isOpen: isOpen
+    })
+  }, (0, _react.jsx)(_ToolbarButton.default, {
+    className: "image-border-toolbar-btn",
+    selected: enabled,
+    onClick: toggleBorder,
+    spacing: "compact",
+    "aria-label": enabled ? formatMessage(_messages.messages.removeBorder) : formatMessage(_messages.messages.addBorder),
+    iconBefore: (0, _react.jsx)(_imageBorder.default, {
+      label: ""
+    }),
+    title: enabled ? formatMessage(_messages.messages.removeBorder) : formatMessage(_messages.messages.addBorder)
+  }), (0, _react.jsx)("div", {
+    ref: popupTarget
+  }, (0, _react.jsx)(_ToolbarButton.default, {
+    className: "image-border-toolbar-dropdown",
+    selected: isOpen,
+    "aria-label": formatMessage(_messages.messages.borderOptions),
+    title: formatMessage(_messages.messages.borderOptions),
+    spacing: "compact",
+    iconBefore: (0, _react.jsx)(_chevronDown.default, {
+      label: ""
+    }),
+    onClick: function onClick() {
+      setIsOpen(!isOpen);
+    }
+  }))), (0, _react.jsx)(_ui.Popup, {
+    target: popupTarget.current ? popupTarget.current : undefined,
+    fitWidth: fitWidth + fitTolerance,
+    fitHeight: fitHeight + fitTolerance,
+    forcePlacement: true,
+    stick: true
+  }, (0, _react.jsx)("div", {
+    onMouseLeave: function onMouseLeave() {
+      setIsColorSubmenuOpen(false);
+      setIsSizeSubmenuOpen(false);
+    }
+  }, (0, _react.jsx)(_uiMenu.DropdownMenu
+  //This needs be removed when the a11y is completely handled
+  //Disabling key navigation now as it works only partially
+  //Same with packages/editor/editor-plugin-table/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx
+  , {
+    arrowKeyNavigationProviderOptions: {
+      type: _uiMenu.ArrowKeyNavigationType.MENU,
+      disableArrowKeyNavigation: true
+    },
+    items: [{
+      items: items
+    }],
+    isOpen: isOpen,
+    onOpenChange: function onOpenChange() {
+      setIsOpen(false);
+      setIsColorSubmenuOpen(false);
+      setIsSizeSubmenuOpen(false);
+    },
+    onItemActivated: function onItemActivated(_ref3) {
+      var item = _ref3.item;
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(!isColorSubmenuOpen);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(!isSizeSubmenuOpen);
+      }
+    },
+    onMouseEnter: function onMouseEnter(_ref4) {
+      var item = _ref4.item;
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(true);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(true);
+      }
+    },
+    onMouseLeave: function onMouseLeave(_ref5) {
+      var item = _ref5.item;
+      if (item.value.name === 'color') {
+        setIsColorSubmenuOpen(false);
+      }
+      if (item.value.name === 'size') {
+        setIsSizeSubmenuOpen(false);
+      }
+    },
+    fitWidth: fitWidth + fitTolerance,
+    fitHeight: fitHeight + fitTolerance
+  }))));
+};
+var _default = ImageBorder;
+exports.default = _default;

package/dist/cjs/plugins/media/ui/ImageBorder/messages.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.messages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var messages = (0, _reactIntlNext.defineMessages)({
+  borderColor: {
+    id: 'fabric.editor.imageBorderColor',
+    defaultMessage: 'Color',
+    description: 'Change the border color of an image.'
+  },
+  borderSize: {
+    id: 'fabric.editor.imageBorderSize',
+    defaultMessage: 'Size',
+    description: 'Change the border size of an image.'
+  },
+  addBorder: {
+    id: 'fabric.editor.addImageBorder',
+    defaultMessage: 'Add border',
+    description: 'Add a border to an image.'
+  },
+  removeBorder: {
+    id: 'fabric.editor.removeImageBorder',
+    defaultMessage: 'Remove border',
+    description: 'Remove the border of an image.'
+  },
+  borderOptions: {
+    id: 'fabric.editor.imageBorderOptions',
+    defaultMessage: 'Border options',
+    description: 'Display options available for customizing the border of an image.'
+  },
+  borderSizeSubtle: {
+    id: 'fabric.editor.imageBorderSubtle',
+    defaultMessage: 'Subtle',
+    description: 'Name of a border size.'
+  },
+  borderSizeMedium: {
+    id: 'fabric.editor.imageBorderMedium',
+    defaultMessage: 'Medium',
+    description: 'Name of a border size.'
+  },
+  borderSizeBold: {
+    id: 'fabric.editor.imageBorderBold',
+    defaultMessage: 'Bold',
+    description: 'Name of a border size.'
+  }
+});
+exports.messages = messages;

package/dist/cjs/plugins/media/ui/ImageBorder/styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toolbarButtonWrapper = exports.menuItemDimensions = exports.line = exports.itemSpacing = exports.contextualSubMenu = exports.contextualMenuColorIcon = exports.contextualMenuArrow = exports.buttonWrapperStyle = exports.buttonStyle = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("@emotion/react");
+var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _uiColor = require("@atlaskit/editor-common/ui-color");
+var _constants = require("@atlaskit/theme/constants");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
+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; }
+// menuItemDimensions and itemSpacing are copied from
+// packages/editor/editor-core/src/plugins/floating-toolbar/ui/DropdownMenu.tsx
+
+var menuItemDimensions = {
+  width: 175,
+  height: 32
+};
+exports.menuItemDimensions = menuItemDimensions;
+var itemSpacing = (0, _constants.gridSize)() / 2;
+exports.itemSpacing = itemSpacing;
+var contextualMenuArrow = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  &::after {\n    content: '\u203A';\n    margin-left: 4px;\n    line-height: 20px;\n    color: ", ";\n  }\n"])), "var(--ds-icon, ".concat(colors.N90, ")"));
+exports.contextualMenuArrow = contextualMenuArrow;
+var contextualMenuColorIcon = function contextualMenuColorIcon(color) {
+  return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  &::before {\n    content: '';\n    display: block;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    width: 20px;\n    height: 20px;\n    ", "\n  }\n"])), contextualMenuArrow, _uiColor.DEFAULT_BORDER_COLOR, "var(--ds-radius-100, 3px)", color && "background: ".concat(color));
+};
+exports.contextualMenuColorIcon = contextualMenuColorIcon;
+var contextualSubMenu = function contextualSubMenu(index) {
+  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  border-radius: ", ";\n  background: ", ";\n  box-shadow: ", ";\n  display: flex;\n  position: absolute;\n  top: ", "px;\n  left: ", "px;\n  padding: 8px;\n\n  > div {\n    padding: 0;\n  }\n"])), "var(--ds-radius-100, 3px)", "var(--ds-surface-overlay, white)", "var(--ds-shadow-overlay, ".concat("0 4px 8px -2px ".concat(colors.N60A, ", 0 0 1px ").concat(colors.N60A), ")"), index * (menuItemDimensions.height + itemSpacing * 2), menuItemDimensions.width);
+};
+exports.contextualSubMenu = contextualSubMenu;
+var buttonStyle = function buttonStyle(selected) {
+  return (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  height: 26px;\n  width: 26px;\n  padding: 0;\n  border-radius: 4px;\n  background-color: ", ";\n  border: 1px solid ", ";\n  cursor: pointer;\n  display: block;\n"])), selected ? "var(--ds-text, ".concat(colors.N800, ")") : "var(--ds-background-neutral, ".concat(colors.N20A, ")"), _uiColor.DEFAULT_BORDER_COLOR);
+};
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+exports.buttonStyle = buttonStyle;
+var buttonWrapperStyle = (0, _react.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  border: 1px solid transparent;\n  margin: 1px;\n  font-size: 0;\n  display: flex;\n  align-items: center;\n  padding: 1px;\n  border-radius: 6px;\n  &:focus-within,\n  &:focus,\n  &:hover {\n    border-color: ", " !important;\n  }\n"])), colors.N50);
+exports.buttonWrapperStyle = buttonWrapperStyle;
+var line = function line(size, selected) {
+  return (0, _react.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  &:before {\n    content: '';\n    display: block;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 12px;\n    height: ", "px;\n    background-color: ", ";\n    border-radius: 90px;\n    transform: translate(-50%, -50%) rotate(135deg);\n  }\n"])), size, selected ? "var(--ds-icon-inverse, ".concat(colors.N0, ")") : "var(--ds-icon, #44546F)");
+};
+exports.line = line;
+var toolbarButtonWrapper = function toolbarButtonWrapper(_ref) {
+  var enabled = _ref.enabled,
+    isOpen = _ref.isOpen;
+  return (0, _react.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  .image-border-toolbar-btn {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n  }\n  .image-border-toolbar-dropdown {\n    padding: 0;\n    & > span {\n      margin: 0;\n    }\n    width: 16px !important;\n    border-top-left-radius: 0 !important;\n    border-bottom-left-radius: 0 !important;\n    margin-left: 1px;\n  }\n\n  &:hover {\n    .image-border-toolbar-btn {\n      ", "\n    }\n\n    .image-border-toolbar-dropdown {\n      ", "\n    }\n  }\n"])), !enabled && " background: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), ";"), !isOpen && "background: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(colors.N30A, ")"), ";"));
+};
+exports.toolbarButtonWrapper = toolbarButtonWrapper;

package/dist/cjs/plugins/media/utils/current-media-node.js

@@ -3,19 +3,42 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.currentMediaNode = void 0;
+exports.currentMediaNodeWithPos = exports.currentMediaNodeBorderMark = exports.currentMediaNode = void 0;
 var _prosemirrorState = require("prosemirror-state");
-var currentMediaNode = function currentMediaNode(editorState) {
+var currentMediaNodeWithPos = function currentMediaNodeWithPos(editorState) {
   var doc = editorState.doc,
     selection = editorState.selection,
     schema = editorState.schema;
   if (!doc || !selection || !(selection instanceof _prosemirrorState.NodeSelection) || selection.node.type !== schema.nodes.mediaSingle) {
     return;
   }
-  var node = doc.nodeAt(selection.$anchor.pos + 1);
+  var pos = selection.$anchor.pos + 1;
+  var node = doc.nodeAt(pos);
   if (!node || node.type !== schema.nodes.media) {
     return;
   }
-  return node;
+  return {
+    node: node,
+    pos: pos
+  };
+};
+exports.currentMediaNodeWithPos = currentMediaNodeWithPos;
+var currentMediaNode = function currentMediaNode(editorState) {
+  var _currentMediaNodeWith;
+  return (_currentMediaNodeWith = currentMediaNodeWithPos(editorState)) === null || _currentMediaNodeWith === void 0 ? void 0 : _currentMediaNodeWith.node;
+};
+exports.currentMediaNode = currentMediaNode;
+var currentMediaNodeBorderMark = function currentMediaNodeBorderMark(editorState) {
+  var node = currentMediaNode(editorState);
+  if (!node) {
+    return;
+  }
+  var borderMark = node.marks.find(function (m) {
+    return m.type.name === 'border';
+  });
+  if (!borderMark) {
+    return;
+  }
+  return borderMark.attrs;
 };
-exports.currentMediaNode = currentMediaNode;
+exports.currentMediaNodeBorderMark = currentMediaNodeBorderMark;

package/dist/cjs/plugins/paste/util/index.js

@@ -25,6 +25,7 @@ var _analytics = require("../../analytics");
 var _prosemirrorState = require("prosemirror-state");
 var _prosemirrorUtils = require("prosemirror-utils");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _sortByOrder = require("../../../create-editor/sort-by-order");
 function isPastedFromWord(html) {
   return !!html && html.indexOf('urn:schemas-microsoft-com:office:word') >= 0;
 }
@@ -113,6 +114,7 @@ function applyTextMarksToSlice(schema, marks) {
         }) || []), (0, _toConsumableArray2.default)(parent.type.allowedMarks(marks).filter(function (mark) {
           return mark.type !== linkMark;
         })));
+        node.marks.sort((0, _sortByOrder.sortByOrderWithTypeName)('marks'));
         return false;
       }
       return true;

package/dist/cjs/plugins/rank.js

@@ -27,7 +27,7 @@ var _default = {
   // Inline marks
   'link', 'em', 'strong', 'textColor', 'strike', 'subsup', 'underline', 'code', 'typeAheadQuery',
   // Block marks
-  'alignment', 'breakout', 'indentation', 'annotation', 'dataConsumer',
+  'alignment', 'breakout', 'indentation', 'annotation', 'dataConsumer', 'border',
   // Unsupported mark
   'unsupportedMark', 'unsupportedNodeAttribute']
 };

package/dist/cjs/plugins/rule/pm-plugins/input-rule.js

@@ -9,6 +9,7 @@ var _prosemirrorModel = require("prosemirror-model");
 var _inputRules = require("../../../utils/input-rules");
 var _prosemirrorInputRules = require("@atlaskit/prosemirror-input-rules");
 var _insert = require("../../../utils/insert");
+var _prosemirrorUtils = require("prosemirror-utils");
 var _analytics = require("../../analytics");
 var _featureFlagsContext = require("../../feature-flags-context");
 var createHorizontalRule = function createHorizontalRule(state, start, end, inputMethod) {
@@ -43,6 +44,10 @@ var createHorizontalRule = function createHorizontalRule(state, start, end, inpu
 };
 exports.createHorizontalRule = createHorizontalRule;
 var createHorizontalRuleAutoformat = function createHorizontalRuleAutoformat(state, start, end) {
+  var listItem = state.schema.nodes.listItem;
+  if ((0, _prosemirrorUtils.hasParentNodeOfType)(listItem)(state.selection)) {
+    return null;
+  }
   return createHorizontalRule(state, start, end, _analytics.INPUT_METHOD.FORMATTING);
 };
 function inputRulePlugin(schema, featureFlags) {

package/dist/cjs/plugins/text-formatting/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -42,7 +42,8 @@ var useClearIcon = function useClearIcon(_ref) {
         name: 'clearFormatting'
       },
       isActive: false,
-      isDisabled: !formattingIsPresent
+      isDisabled: !formattingIsPresent,
+      'aria-label': _keymaps.clearFormatting ? (0, _keymaps.tooltip)(_keymaps.clearFormatting, String(clearFormattingLabel)) : String(clearFormattingLabel)
     };
   }, [clearFormattingLabel, isPluginAvailable, formattingIsPresent]);
 };

package/dist/cjs/plugins/toolbar-lists-indentation/index.js

@@ -11,9 +11,10 @@ var _WithPluginState = _interopRequireDefault(require("../../ui/WithPluginState"
 var _types = require("../../ui/Toolbar/types");
 var _main = require("../list/pm-plugins/main");
 var _indentationButtons = require("./pm-plugins/indentation-buttons");
-var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref) {
+var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref, api) {
   var showIndentationButtons = _ref.showIndentationButtons,
     allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation;
+  var featureFlags = (api === null || api === void 0 ? void 0 : api.dependencies.featureFlags.sharedState.currentState()) || {};
   return {
     name: 'toolbarListsIndentation',
     pmPlugins: function pmPlugins() {
@@ -50,6 +51,7 @@ var toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref)
             return null;
           }
           return /*#__PURE__*/_react.default.createElement(_ui.default, {
+            featureFlags: featureFlags,
             isSmall: isSmall,
             isReducedSpacing: isToolbarReducedSpacing,
             disabled: disabled,

package/dist/cjs/plugins/toolbar-lists-indentation/ui/Toolbar.js

@@ -48,7 +48,8 @@ function Toolbar(props) {
     return function (event) {
       return onItemActivated({
         editorView: props.editorView,
-        buttonName: buttonName
+        buttonName: buttonName,
+        featureFlags: props.featureFlags
       });
     };
   };

package/dist/cjs/plugins/toolbar-lists-indentation/ui/ToolbarDropdown.js

@@ -62,7 +62,8 @@ function ToolbarDropdown(props) {
     setIsDropdownOpen(!shouldCloseMenu);
     return onItemActivated({
       editorView: props.editorView,
-      buttonName: item.value.name
+      buttonName: item.value.name,
+      featureFlags: props.featureFlags
     });
   };
   return (0, _react.jsx)("span", {

package/dist/cjs/plugins/toolbar-lists-indentation/ui/index.js

@@ -23,7 +23,8 @@ function ToolbarListsIndentation(props) {
     popupsBoundariesElement = props.popupsBoundariesElement,
     popupsScrollableElement = props.popupsScrollableElement,
     indentDisabled = props.indentDisabled,
-    outdentDisabled = props.outdentDisabled;
+    outdentDisabled = props.outdentDisabled,
+    featureFlags = props.featureFlags;
   if (isSmall) {
     return (0, _react.jsx)(_ToolbarDropdown.ToolbarDropdown, {
       editorView: props.editorView,
@@ -39,7 +40,8 @@ function ToolbarListsIndentation(props) {
       indentDisabled: indentDisabled,
       outdentDisabled: outdentDisabled,
       disabled: disabled,
-      onItemActivated: _onItemActivated.onItemActivated
+      onItemActivated: _onItemActivated.onItemActivated,
+      featureFlags: featureFlags
     });
   }
   return (0, _react.jsx)(_Toolbar.Toolbar, {
@@ -53,6 +55,7 @@ function ToolbarListsIndentation(props) {
     indentDisabled: indentDisabled,
     outdentDisabled: outdentDisabled,
     disabled: disabled,
-    onItemActivated: _onItemActivated.onItemActivated
+    onItemActivated: _onItemActivated.onItemActivated,
+    featureFlags: featureFlags
   });
 }

package/dist/cjs/plugins/toolbar-lists-indentation/ui/onItemActivated.js

@@ -11,7 +11,8 @@ var _analytics = require("../../analytics");
 var _indentationButtons = require("../pm-plugins/indentation-buttons");
 function onItemActivated(_ref) {
   var buttonName = _ref.buttonName,
-    editorView = _ref.editorView;
+    editorView = _ref.editorView,
+    featureFlags = _ref.featureFlags;
   switch (buttonName) {
     case 'bullet_list':
       (0, _commands.toggleBulletList)(editorView, _analytics.INPUT_METHOD.TOOLBAR);
@@ -40,7 +41,7 @@ function onItemActivated(_ref) {
           (0, _commands2.getOutdentCommand)(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
         }
         if (_node === 'list') {
-          (0, _commands.outdentList)(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);
+          (0, _commands.outdentList)(_analytics.INPUT_METHOD.TOOLBAR, featureFlags)(editorView.state, editorView.dispatch);
         }
         if (_node === 'taskList') {
           (0, _keymaps.getUnindentCommand)(_analytics.INPUT_METHOD.TOOLBAR)(editorView.state, editorView.dispatch);

package/dist/cjs/plugins/type-ahead/index.js

@@ -127,6 +127,8 @@ var TypeAheadMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
  *
  */
 var typeAheadPlugin = function typeAheadPlugin(options) {
+  var _options$useBetterTyp;
+  var useBetterTypeaheadNavigation = (_options$useBetterTyp = options === null || options === void 0 ? void 0 : options.useBetterTypeaheadNavigation) !== null && _options$useBetterTyp !== void 0 ? _options$useBetterTyp : true;
   var fireAnalyticsCallback = (0, _analytics.fireAnalyticsEvent)(options === null || options === void 0 ? void 0 : options.createAnalyticsEvent);
   var popupMountRef = {
     current: null
@@ -153,7 +155,8 @@ var typeAheadPlugin = function typeAheadPlugin(options) {
             popupMountRef: popupMountRef,
             reactDispatch: dispatch,
             typeAheadHandlers: typeAhead,
-            createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent
+            createAnalyticsEvent: options === null || options === void 0 ? void 0 : options.createAnalyticsEvent,
+            useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
           });
         }
       }, {

package/dist/cjs/plugins/type-ahead/pm-plugins/decorations.js

@@ -22,7 +22,8 @@ var _closeTypeAhead = require("../transforms/close-type-ahead");
 var factoryDecorations = function factoryDecorations(_ref) {
   var intl = _ref.intl,
     popupMountRef = _ref.popupMountRef,
-    createAnalyticsEvent = _ref.createAnalyticsEvent;
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    useBetterTypeaheadNavigation = _ref.useBetterTypeaheadNavigation;
   var createDecorations = function createDecorations(tr, _ref2) {
     var triggerHandler = _ref2.triggerHandler,
       inputMethod = _ref2.inputMethod,
@@ -94,7 +95,8 @@ var factoryDecorations = function factoryDecorations(_ref) {
         popupsBoundariesElement: (_popupMountRef$curren2 = popupMountRef.current) === null || _popupMountRef$curren2 === void 0 ? void 0 : _popupMountRef$curren2.popupsBoundariesElement,
         popupsScrollableElement: (_popupMountRef$curren3 = popupMountRef.current) === null || _popupMountRef$curren3 === void 0 ? void 0 : _popupMountRef$curren3.popupsScrollableElement,
         onUndoRedo: onUndoRedo,
-        reopenQuery: reopenQuery
+        reopenQuery: reopenQuery,
+        useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
       })), typeaheadComponent);
       shouldFocusCursorInsideQuery = false;
       return typeaheadComponent;

package/dist/cjs/plugins/type-ahead/pm-plugins/main.js

@@ -31,12 +31,14 @@ function createPlugin(_ref) {
     popupMountRef = _ref.popupMountRef,
     createAnalyticsEvent = _ref.createAnalyticsEvent,
     typeAheadHandlers = _ref.typeAheadHandlers,
-    getIntl = _ref.getIntl;
+    getIntl = _ref.getIntl,
+    useBetterTypeaheadNavigation = _ref.useBetterTypeaheadNavigation;
   var intl = getIntl();
   var _factoryDecorations = (0, _decorations.factoryDecorations)({
       intl: intl,
       popupMountRef: popupMountRef,
-      createAnalyticsEvent: createAnalyticsEvent
+      createAnalyticsEvent: createAnalyticsEvent,
+      useBetterTypeaheadNavigation: useBetterTypeaheadNavigation
     }),
     createDecorations = _factoryDecorations.createDecorations,
     removeDecorations = _factoryDecorations.removeDecorations;