@atlaskit/editor-plugin-toolbar-lists-indentation 4.1.1 → 4.2.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-toolbar-lists-indentation
 
+## 4.2.0
+
+### Minor Changes
+
+- [#198479](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/198479)
+  [`a427f04593fbd`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a427f04593fbd) -
+  [ux] ED-28685 register list and indentation menu to the new toolbar behind
+  platform_editor_toolbar_aifc
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.1.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.1.1
 
 ### Patch Changes

package/dist/cjs/toolbarListsIndentationPlugin.js

@@ -8,19 +8,24 @@ Object.defineProperty(exports, "__esModule", {
 exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
 exports.toolbarListsIndentationPlugin = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _types = require("@atlaskit/editor-common/types");
 var _usePluginStateEffect = require("@atlaskit/editor-common/use-plugin-state-effect");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _indentationButtons = require("./pm-plugins/indentation-buttons");
 var _types2 = require("./types");
 var _ui = _interopRequireDefault(require("./ui"));
 var _FloatingToolbarComponent = require("./ui/FloatingToolbarComponent");
+var _toolbarComponents = require("./ui/toolbar-components");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function ownKeys(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(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var toolbarListsIndentationPlugin = exports.toolbarListsIndentationPlugin = function toolbarListsIndentationPlugin(_ref) {
-  var _api$featureFlags, _api$primaryToolbar;
+  var _api$featureFlags;
   var config = _ref.config,
     api = _ref.api;
   var _ref2 = config !== null && config !== void 0 ? config : {},
@@ -51,13 +56,23 @@ var toolbarListsIndentationPlugin = exports.toolbarListsIndentationPlugin = func
       allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
     });
   };
-  api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-    name: 'toolbarListsIndentation',
-    component: primaryToolbarComponent
-  });
+  if ((0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true)) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)({
+      api: api,
+      showIndentationButtons: showIndentationButtons,
+      allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
+    }));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+      name: 'toolbarListsIndentation',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'toolbarListsIndentation',
-    pluginsOptions: {
+    pluginsOptions: _objectSpread({}, !(0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) && {
       selectionToolbar: function selectionToolbar() {
         var _api$userPreferences, _api$selectionToolbar;
         var toolbarDocking = (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.preferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
@@ -90,8 +105,8 @@ var toolbarListsIndentationPlugin = exports.toolbarListsIndentationPlugin = func
           return undefined;
         }
       }
-    },
-    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
+    }),
+    primaryToolbarComponent: !(0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true) && !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined
   };
 };
 var useSharedState = (0, _hooks.sharedPluginStateHookMigratorFactory)(function (api) {

package/dist/cjs/ui/toolbar-components/BulletedListMenuItem.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BulletedListMenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var BulletedListMenuItem = exports.BulletedListMenuItem = function BulletedListMenuItem(_ref) {
+  var api = _ref.api,
+    parents = _ref.parents;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['list'], function (states) {
+      var _states$listState, _states$listState2;
+      return {
+        bulletListActive: (_states$listState = states.listState) === null || _states$listState === void 0 ? void 0 : _states$listState.bulletListActive,
+        bulletListDisabled: (_states$listState2 = states.listState) === null || _states$listState2 === void 0 ? void 0 : _states$listState2.bulletListDisabled
+      };
+    }),
+    bulletListActive = _useSharedPluginState.bulletListActive,
+    bulletListDisabled = _useSharedPluginState.bulletListDisabled;
+  var onClick = function onClick() {
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleBulletList((0, _toolbar.getInputMethodFromParentKeys)(parents)));
+  };
+  var shortcut = (0, _keymaps.formatShortcut)(_keymaps.toggleBulletList);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ListBulletedIcon, {
+      label: ""
+    }),
+    elemAfter: shortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }) : undefined,
+    isSelected: bulletListActive,
+    isDisabled: bulletListDisabled,
+    onClick: onClick,
+    ariaKeyshortcuts: shortcut
+  }, formatMessage(_messages.listMessages.bulletedList));
+};

package/dist/cjs/ui/toolbar-components/IndentMenuItem.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IndentMenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _hooks = require("../utils/hooks");
+var IndentMenuItem = exports.IndentMenuItem = function IndentMenuItem(_ref) {
+  var api = _ref.api,
+    showIndentationButtons = _ref.showIndentationButtons,
+    allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation,
+    parents = _ref.parents;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var indentationState = (0, _hooks.useIndentationState)({
+    api: api,
+    allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation,
+    state: editorView === null || editorView === void 0 ? void 0 : editorView.state
+  });
+  if (!showIndentationButtons) {
+    return null;
+  }
+  var onClick = function onClick() {
+    var inputMethod = (0, _toolbar.getInputMethodFromParentKeys)(parents);
+    var node = indentationState === null || indentationState === void 0 ? void 0 : indentationState.node;
+    if (node === 'paragraph_heading') {
+      if (editorView !== null && editorView !== void 0 && editorView.state) {
+        var _api$indentation;
+        api === null || api === void 0 || (_api$indentation = api.indentation) === null || _api$indentation === void 0 || _api$indentation.actions.indentParagraphOrHeading(inputMethod)(editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch);
+      }
+    }
+    if (node === 'list') {
+      var _api$core, _api$list;
+      api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(api === null || api === void 0 || (_api$list = api.list) === null || _api$list === void 0 ? void 0 : _api$list.commands.indentList(inputMethod));
+    }
+    if (node === 'taskList') {
+      if (editorView !== null && editorView !== void 0 && editorView.state) {
+        var _api$taskDecision;
+        api === null || api === void 0 || (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 || _api$taskDecision.actions.indentTaskList(inputMethod)(editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch);
+      }
+    }
+  };
+  var shortcut = (0, _keymaps.formatShortcut)(_keymaps.indent);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.IndentIcon, {
+      label: ""
+    }),
+    elemAfter: shortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }) : undefined,
+    isDisabled: indentationState === null || indentationState === void 0 ? void 0 : indentationState.indentDisabled,
+    ariaKeyshortcuts: shortcut,
+    onClick: onClick
+  }, formatMessage(_messages.indentationMessages.indent));
+};

package/dist/cjs/ui/toolbar-components/ListsIndentationHeroButton.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListsIndentationHeroButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var ListsIndentationHeroButton = exports.ListsIndentationHeroButton = function ListsIndentationHeroButton(_ref) {
+  var api = _ref.api,
+    groupLocation = _ref.groupLocation,
+    parents = _ref.parents;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['list'], function (states) {
+      var _states$listState, _states$listState2, _states$listState3;
+      return {
+        bulletListActive: (_states$listState = states.listState) === null || _states$listState === void 0 ? void 0 : _states$listState.bulletListActive,
+        bulletListDisabled: (_states$listState2 = states.listState) === null || _states$listState2 === void 0 ? void 0 : _states$listState2.bulletListDisabled,
+        orderedListActive: (_states$listState3 = states.listState) === null || _states$listState3 === void 0 ? void 0 : _states$listState3.orderedListActive
+      };
+    }),
+    bulletListActive = _useSharedPluginState.bulletListActive,
+    bulletListDisabled = _useSharedPluginState.bulletListDisabled,
+    orderedListActive = _useSharedPluginState.orderedListActive;
+  var shortcut = orderedListActive ? (0, _keymaps.formatShortcut)(_keymaps.toggleOrderedList) : (0, _keymaps.formatShortcut)(_keymaps.toggleBulletList);
+  var onClick = function onClick() {
+    var inputMethod = (0, _toolbar.getInputMethodFromParentKeys)(parents);
+    if (orderedListActive) {
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleOrderedList(inputMethod));
+    } else {
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleBulletList(inputMethod));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: orderedListActive ? formatMessage(_messages.listMessages.orderedList) : formatMessage(_messages.listMessages.bulletedList)
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: orderedListActive ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ListNumberedIcon, {
+      label: formatMessage(_messages.listMessages.orderedList)
+    }) : /*#__PURE__*/_react.default.createElement(_editorToolbar.ListBulletedIcon, {
+      label: formatMessage(_messages.listMessages.bulletedList)
+    }),
+    groupLocation: groupLocation,
+    isSelected: bulletListActive || orderedListActive,
+    isDisabled: !orderedListActive && bulletListDisabled,
+    ariaKeyshortcuts: shortcut,
+    onClick: onClick
+  }));
+};

package/dist/cjs/ui/toolbar-components/ListsIndentationMenu.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ListsIndentationMenu = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _lists = require("@atlaskit/editor-common/lists");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _hooks2 = require("../utils/hooks");
+var ListsIndentationMenu = exports.ListsIndentationMenu = function ListsIndentationMenu(_ref) {
+  var children = _ref.children,
+    api = _ref.api,
+    groupLocation = _ref.groupLocation,
+    allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var indentationState = (0, _hooks2.useIndentationState)({
+    api: api,
+    allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation,
+    state: editorView === null || editorView === void 0 ? void 0 : editorView.state
+  });
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['list'], function (states) {
+      var _states$listState, _states$listState2;
+      return {
+        bulletListDisabled: (_states$listState = states.listState) === null || _states$listState === void 0 ? void 0 : _states$listState.bulletListDisabled,
+        orderedListDisabled: (_states$listState2 = states.listState) === null || _states$listState2 === void 0 ? void 0 : _states$listState2.orderedListDisabled
+      };
+    }),
+    bulletListDisabled = _useSharedPluginState.bulletListDisabled,
+    orderedListDisabled = _useSharedPluginState.orderedListDisabled;
+  var allItemsDisabled = bulletListDisabled && orderedListDisabled && (indentationState === null || indentationState === void 0 ? void 0 : indentationState.indentDisabled) && (indentationState === null || indentationState === void 0 ? void 0 : indentationState.outdentDisabled);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.MoreItemsIcon, {
+      label: formatMessage(_lists.messages.lists)
+    }),
+    groupLocation: groupLocation,
+    isDisabled: allItemsDisabled,
+    testId: "editor-toolbar__lists-and-indentation-menu"
+  }, children);
+};

package/dist/cjs/ui/toolbar-components/NumberedListMenuItem.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NumberedListMenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var NumberedListMenuItem = exports.NumberedListMenuItem = function NumberedListMenuItem(_ref) {
+  var api = _ref.api,
+    parents = _ref.parents;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['list'], function (states) {
+      var _states$listState, _states$listState2;
+      return {
+        orderedListActive: (_states$listState = states.listState) === null || _states$listState === void 0 ? void 0 : _states$listState.orderedListActive,
+        orderedListDisabled: (_states$listState2 = states.listState) === null || _states$listState2 === void 0 ? void 0 : _states$listState2.orderedListDisabled
+      };
+    }),
+    orderedListActive = _useSharedPluginState.orderedListActive,
+    orderedListDisabled = _useSharedPluginState.orderedListDisabled;
+  var onClick = function onClick() {
+    api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.toggleOrderedList((0, _toolbar.getInputMethodFromParentKeys)(parents)));
+  };
+  var shortcut = (0, _keymaps.formatShortcut)(_keymaps.toggleOrderedList);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ListNumberedIcon, {
+      label: ""
+    }),
+    elemAfter: shortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }) : undefined,
+    isSelected: orderedListActive,
+    isDisabled: orderedListDisabled,
+    onClick: onClick,
+    ariaKeyshortcuts: shortcut
+  }, formatMessage(_messages.listMessages.orderedList));
+};

package/dist/cjs/ui/toolbar-components/OutdentMenuItem.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OutdentMenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _hooks = require("../utils/hooks");
+var OutdentMenuItem = exports.OutdentMenuItem = function OutdentMenuItem(_ref) {
+  var api = _ref.api,
+    allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation,
+    showIndentationButtons = _ref.showIndentationButtons,
+    parents = _ref.parents;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var _useEditorToolbar = (0, _toolbar.useEditorToolbar)(),
+    editorView = _useEditorToolbar.editorView;
+  var indentationState = (0, _hooks.useIndentationState)({
+    api: api,
+    allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation,
+    state: editorView === null || editorView === void 0 ? void 0 : editorView.state
+  });
+  if (!showIndentationButtons) {
+    return null;
+  }
+  var onClick = function onClick() {
+    var inputMethod = (0, _toolbar.getInputMethodFromParentKeys)(parents);
+    var node = indentationState === null || indentationState === void 0 ? void 0 : indentationState.node;
+    if (node === 'paragraph_heading') {
+      if (editorView !== null && editorView !== void 0 && editorView.state) {
+        var _api$indentation;
+        api === null || api === void 0 || (_api$indentation = api.indentation) === null || _api$indentation === void 0 || _api$indentation.actions.outdentParagraphOrHeading(inputMethod)(editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch);
+      }
+    }
+    if (node === 'list') {
+      api === null || api === void 0 || api.core.actions.execute(api === null || api === void 0 ? void 0 : api.list.commands.outdentList(inputMethod));
+    }
+    if (node === 'taskList') {
+      if (editorView !== null && editorView !== void 0 && editorView.state) {
+        var _api$taskDecision;
+        api === null || api === void 0 || (_api$taskDecision = api.taskDecision) === null || _api$taskDecision === void 0 || _api$taskDecision.actions.outdentTaskList(inputMethod)(editorView === null || editorView === void 0 ? void 0 : editorView.state, editorView === null || editorView === void 0 ? void 0 : editorView.dispatch);
+      }
+    }
+  };
+  var shortcut = (0, _keymaps.formatShortcut)(_keymaps.outdent);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.OutdentIcon, {
+      label: ""
+    }),
+    elemAfter: shortcut ? /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: shortcut
+    }) : undefined,
+    isDisabled: indentationState === null || indentationState === void 0 ? void 0 : indentationState.outdentDisabled,
+    ariaKeyshortcuts: shortcut,
+    onClick: onClick
+  }, formatMessage(_messages.indentationMessages.outdent));
+};

package/dist/cjs/ui/toolbar-components.js

@@ -0,0 +1,135 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _BulletedListMenuItem = require("./toolbar-components/BulletedListMenuItem");
+var _IndentMenuItem = require("./toolbar-components/IndentMenuItem");
+var _ListsIndentationHeroButton = require("./toolbar-components/ListsIndentationHeroButton");
+var _ListsIndentationMenu = require("./toolbar-components/ListsIndentationMenu");
+var _NumberedListMenuItem = require("./toolbar-components/NumberedListMenuItem");
+var _OutdentMenuItem = require("./toolbar-components/OutdentMenuItem");
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(_ref) {
+  var api = _ref.api,
+    showIndentationButtons = _ref.showIndentationButtons,
+    allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation;
+  return [{
+    type: _toolbar.LISTS_INDENTATION_GROUP.type,
+    key: _toolbar.LISTS_INDENTATION_GROUP.key,
+    parents: [{
+      type: _toolbar.TEXT_SECTION.type,
+      key: _toolbar.TEXT_SECTION.key,
+      rank: _toolbar.TEXT_SECTION_RANK[_toolbar.LISTS_INDENTATION_GROUP.key]
+    }]
+  }, {
+    type: _toolbar.LISTS_INDENTATION_HERO_BUTTON.type,
+    key: _toolbar.LISTS_INDENTATION_HERO_BUTTON.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_GROUP.type,
+      key: _toolbar.LISTS_INDENTATION_GROUP.key,
+      rank: _toolbar.LISTS_INDENTATION_GROUP_RANK[_toolbar.LISTS_INDENTATION_HERO_BUTTON.key]
+    }],
+    component: function component(_ref2) {
+      var groupLocation = _ref2.groupLocation,
+        parents = _ref2.parents;
+      return /*#__PURE__*/_react.default.createElement(_ListsIndentationHeroButton.ListsIndentationHeroButton, {
+        api: api,
+        groupLocation: groupLocation,
+        parents: parents
+      });
+    }
+  }, {
+    type: _toolbar.LISTS_INDENTATION_MENU.type,
+    key: _toolbar.LISTS_INDENTATION_MENU.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_GROUP.type,
+      key: _toolbar.LISTS_INDENTATION_GROUP.key,
+      rank: _toolbar.LISTS_INDENTATION_GROUP_RANK[_toolbar.LISTS_INDENTATION_MENU.key]
+    }],
+    component: function component(_ref3) {
+      var children = _ref3.children,
+        groupLocation = _ref3.groupLocation;
+      return /*#__PURE__*/_react.default.createElement(_ListsIndentationMenu.ListsIndentationMenu, {
+        api: api,
+        groupLocation: groupLocation,
+        allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation
+      }, children);
+    }
+  }, {
+    type: _toolbar.LISTS_INDENTATION_MENU_SECTION.type,
+    key: _toolbar.LISTS_INDENTATION_MENU_SECTION.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_MENU.type,
+      key: _toolbar.LISTS_INDENTATION_MENU.key,
+      rank: _toolbar.LISTS_INDENTATION_MENU_RANK[_toolbar.LISTS_INDENTATION_MENU_SECTION.key]
+    }]
+  }, {
+    type: _toolbar.BULLETED_LIST_MENU_ITEM.type,
+    key: _toolbar.BULLETED_LIST_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_MENU_SECTION.type,
+      key: _toolbar.LISTS_INDENTATION_MENU_SECTION.key,
+      rank: _toolbar.LISTS_INDENTATION_MENU_SECTION_RANK[_toolbar.BULLETED_LIST_MENU_ITEM.key]
+    }],
+    component: function component(_ref4) {
+      var parents = _ref4.parents;
+      return /*#__PURE__*/_react.default.createElement(_BulletedListMenuItem.BulletedListMenuItem, {
+        api: api,
+        parents: parents
+      });
+    }
+  }, {
+    type: _toolbar.NUMBERED_LIST_MENU_ITEM.type,
+    key: _toolbar.NUMBERED_LIST_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_MENU_SECTION.type,
+      key: _toolbar.LISTS_INDENTATION_MENU_SECTION.key,
+      rank: _toolbar.LISTS_INDENTATION_MENU_SECTION_RANK[_toolbar.NUMBERED_LIST_MENU_ITEM.key]
+    }],
+    component: function component(_ref5) {
+      var parents = _ref5.parents;
+      return /*#__PURE__*/_react.default.createElement(_NumberedListMenuItem.NumberedListMenuItem, {
+        api: api,
+        parents: parents
+      });
+    }
+  }, {
+    type: _toolbar.OUTDENT_MENU_ITEM.type,
+    key: _toolbar.OUTDENT_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_MENU_SECTION.type,
+      key: _toolbar.LISTS_INDENTATION_MENU_SECTION.key,
+      rank: _toolbar.LISTS_INDENTATION_MENU_SECTION_RANK[_toolbar.OUTDENT_MENU_ITEM.key]
+    }],
+    component: function component(_ref6) {
+      var parents = _ref6.parents;
+      return /*#__PURE__*/_react.default.createElement(_OutdentMenuItem.OutdentMenuItem, {
+        api: api,
+        allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation,
+        showIndentationButtons: showIndentationButtons,
+        parents: parents
+      });
+    }
+  }, {
+    type: _toolbar.INDENT_MENU_ITEM.type,
+    key: _toolbar.INDENT_MENU_ITEM.key,
+    parents: [{
+      type: _toolbar.LISTS_INDENTATION_MENU_SECTION.type,
+      key: _toolbar.LISTS_INDENTATION_MENU_SECTION.key,
+      rank: _toolbar.LISTS_INDENTATION_MENU_SECTION_RANK[_toolbar.INDENT_MENU_ITEM.key]
+    }],
+    component: function component(_ref7) {
+      var parents = _ref7.parents;
+      return /*#__PURE__*/_react.default.createElement(_IndentMenuItem.IndentMenuItem, {
+        api: api,
+        allowHeadingAndParagraphIndentation: allowHeadingAndParagraphIndentation,
+        showIndentationButtons: showIndentationButtons,
+        parents: parents
+      });
+    }
+  }];
+};

package/dist/cjs/ui/utils/hooks.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIndentationState = void 0;
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _indentationButtons = require("../../pm-plugins/indentation-buttons");
+var useIndentationState = exports.useIndentationState = function useIndentationState(_ref) {
+  var api = _ref.api,
+    allowHeadingAndParagraphIndentation = _ref.allowHeadingAndParagraphIndentation,
+    state = _ref.state;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['indentation'], function (states) {
+      var _states$indentationSt, _states$indentationSt2, _states$indentationSt3;
+      return {
+        isIndentationAllowed: (_states$indentationSt = states.indentationState) === null || _states$indentationSt === void 0 ? void 0 : _states$indentationSt.isIndentationAllowed,
+        outdentDisabled: (_states$indentationSt2 = states.indentationState) === null || _states$indentationSt2 === void 0 ? void 0 : _states$indentationSt2.outdentDisabled,
+        indentDisabled: (_states$indentationSt3 = states.indentationState) === null || _states$indentationSt3 === void 0 ? void 0 : _states$indentationSt3.indentDisabled
+      };
+    }),
+    isIndentationAllowed = _useSharedPluginState.isIndentationAllowed,
+    indentDisabled = _useSharedPluginState.indentDisabled,
+    outdentDisabled = _useSharedPluginState.outdentDisabled;
+  var _useSharedPluginState2 = (0, _hooks.useSharedPluginStateWithSelector)(api, ['taskDecision'], function (states) {
+      var _states$taskDecisionS, _states$taskDecisionS2, _states$taskDecisionS3;
+      return {
+        isInsideTask: (_states$taskDecisionS = states.taskDecisionState) === null || _states$taskDecisionS === void 0 ? void 0 : _states$taskDecisionS.isInsideTask,
+        outdentDisabled: (_states$taskDecisionS2 = states.taskDecisionState) === null || _states$taskDecisionS2 === void 0 ? void 0 : _states$taskDecisionS2.outdentDisabled,
+        indentDisabled: (_states$taskDecisionS3 = states.taskDecisionState) === null || _states$taskDecisionS3 === void 0 ? void 0 : _states$taskDecisionS3.indentDisabled
+      };
+    }),
+    isInsideTask = _useSharedPluginState2.isInsideTask,
+    taskIndentDisabled = _useSharedPluginState2.indentDisabled,
+    taskOutdentDisabled = _useSharedPluginState2.outdentDisabled;
+  if (!state) {
+    return undefined;
+  }
+  return (0, _indentationButtons.getIndentationButtonsState)(state, allowHeadingAndParagraphIndentation, {
+    isInsideTask: isInsideTask !== null && isInsideTask !== void 0 ? isInsideTask : false,
+    indentDisabled: taskIndentDisabled !== null && taskIndentDisabled !== void 0 ? taskIndentDisabled : false,
+    outdentDisabled: taskOutdentDisabled !== null && taskOutdentDisabled !== void 0 ? taskOutdentDisabled : false
+  }, {
+    isIndentationAllowed: isIndentationAllowed,
+    indentDisabled: indentDisabled,
+    outdentDisabled: outdentDisabled
+  }, api === null || api === void 0 ? void 0 : api.list.actions.isInsideListItem);
+};