@atlaskit/editor-plugin-text-formatting 0.1.0

package/dist/cjs/ui/Toolbar/hooks/formatting-icons.js

@@ -0,0 +1,227 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useHasFormattingActived = exports.useFormattingIcons = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _bold = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/bold"));
+var _italic = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/italic"));
+var _actions = require("../../../actions");
+var _pluginKey = require("../../../pm-plugins/plugin-key");
+var _types = require("../types");
+var _IconsMarkSchema;
+/** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var withToolbarInputMethod = function withToolbarInputMethod(func) {
+  return func({
+    inputMethod: _analytics.INPUT_METHOD.TOOLBAR
+  });
+};
+var IconButtons = function IconButtons(editorAnalyticsAPI) {
+  return {
+    strong: {
+      buttonId: _analytics.TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_STRONG,
+      command: withToolbarInputMethod((0, _actions.toggleStrongWithAnalytics)(editorAnalyticsAPI)),
+      message: _messages.toolbarMessages.bold,
+      tooltipKeymap: _keymaps.toggleBold,
+      component: function component() {
+        return (0, _react2.jsx)(_bold.default, {
+          label: ""
+        });
+      }
+    },
+    em: {
+      buttonId: _analytics.TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_ITALIC,
+      command: withToolbarInputMethod((0, _actions.toggleEmWithAnalytics)(editorAnalyticsAPI)),
+      message: _messages.toolbarMessages.italic,
+      tooltipKeymap: _keymaps.toggleItalic,
+      component: function component() {
+        return (0, _react2.jsx)(_italic.default, {
+          label: ""
+        });
+      }
+    },
+    underline: {
+      command: withToolbarInputMethod((0, _actions.toggleUnderlineWithAnalytics)(editorAnalyticsAPI)),
+      message: _messages.toolbarMessages.underline,
+      tooltipKeymap: _keymaps.toggleUnderline
+    },
+    strike: {
+      command: withToolbarInputMethod((0, _actions.toggleStrikeWithAnalytics)(editorAnalyticsAPI)),
+      message: _messages.toolbarMessages.strike,
+      tooltipKeymap: _keymaps.toggleStrikethrough
+    },
+    code: {
+      command: withToolbarInputMethod((0, _actions.toggleCodeWithAnalytics)(editorAnalyticsAPI)),
+      message: _messages.toolbarMessages.code,
+      tooltipKeymap: _keymaps.toggleCode
+    },
+    subscript: {
+      command: withToolbarInputMethod((0, _actions.toggleSubscriptWithAnalytics)(editorAnalyticsAPI)),
+      message: _messages.toolbarMessages.subscript,
+      tooltipKeymap: _keymaps.toggleSubscript
+    },
+    superscript: {
+      command: withToolbarInputMethod((0, _actions.toggleSuperscriptWithAnalytics)(editorAnalyticsAPI)),
+      message: _messages.toolbarMessages.superscript,
+      tooltipKeymap: _keymaps.toggleSuperscript
+    }
+  };
+};
+var getIcon = function getIcon(_ref) {
+  var iconType = _ref.iconType,
+    isDisabled = _ref.isDisabled,
+    isActive = _ref.isActive,
+    intl = _ref.intl,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
+  var icon = IconButtons(editorAnalyticsAPI)[iconType];
+  var content = intl.formatMessage(icon.message);
+  var tooltipKeymap = icon.tooltipKeymap;
+  return {
+    content: content,
+    buttonId: icon.buttonId,
+    iconMark: iconType,
+    key: iconType,
+    command: icon.command,
+    iconElement: icon.component ? icon.component() : undefined,
+    tooltipElement: tooltipKeymap ? (0, _react2.jsx)(_keymaps.ToolTipContent, {
+      description: content,
+      keymap: tooltipKeymap
+    }) : undefined,
+    elemAfter: tooltipKeymap ?
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("div", {
+      css: _shortcut.shortcutStyle
+    }, (0, _keymaps.tooltip)(tooltipKeymap)) : undefined,
+    value: {
+      name: iconType
+    },
+    isActive: isActive,
+    isDisabled: isDisabled,
+    'aria-label': tooltipKeymap ? (0, _keymaps.tooltip)(tooltipKeymap, String(content)) : String(content),
+    'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(tooltipKeymap)
+  };
+};
+var IconsMarkSchema = (_IconsMarkSchema = {}, (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.strong, 'strong'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.em, 'em'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.strike, 'strike'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.code, 'code'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.underline, 'underline'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.superscript, 'subsup'), (0, _defineProperty2.default)(_IconsMarkSchema, _types.IconTypes.subscript, 'subsup'), _IconsMarkSchema);
+var buildMenuIconState = function buildMenuIconState(iconMark) {
+  return function (_ref2) {
+    var schema = _ref2.schema,
+      textFormattingPluginState = _ref2.textFormattingPluginState;
+    var hasPluginState = Boolean(Object.keys(textFormattingPluginState || {}).length);
+    var markSchema = IconsMarkSchema[iconMark];
+    var hasSchemaMark = Boolean(schema.marks[markSchema]);
+    if (!hasPluginState) {
+      return {
+        isActive: false,
+        isDisabled: true,
+        isHidden: false,
+        hasSchemaMark: hasSchemaMark
+      };
+    }
+    var isActive = textFormattingPluginState["".concat(iconMark, "Active")];
+    var isDisabled = textFormattingPluginState["".concat(iconMark, "Disabled")];
+    var isHidden = textFormattingPluginState["".concat(iconMark, "Hidden")];
+    return {
+      isActive: Boolean(isActive),
+      isDisabled: Boolean(isDisabled),
+      isHidden: Boolean(isHidden),
+      hasSchemaMark: hasSchemaMark
+    };
+  };
+};
+var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI) {
+  var getState = buildMenuIconState(iconMark);
+  return function (_ref3) {
+    var schema = _ref3.schema,
+      textFormattingPluginState = _ref3.textFormattingPluginState,
+      intl = _ref3.intl,
+      isToolbarDisabled = _ref3.isToolbarDisabled;
+    var iconState = getState({
+      schema: schema,
+      textFormattingPluginState: textFormattingPluginState
+    });
+    var isActive = iconState.isActive,
+      isDisabled = iconState.isDisabled,
+      isHidden = iconState.isHidden,
+      hasSchemaMark = iconState.hasSchemaMark;
+    var iconComponent = (0, _react.useMemo)(function () {
+      return getIcon({
+        iconType: _types.IconTypes[iconMark],
+        isDisabled: isToolbarDisabled || isDisabled,
+        isActive: isActive,
+        intl: intl,
+        editorAnalyticsAPI: editorAnalyticsAPI
+      });
+    }, [isToolbarDisabled, isDisabled, isActive, intl]);
+    var shouldRenderIcon = hasSchemaMark && !isHidden;
+    return (0, _react.useMemo)(function () {
+      return shouldRenderIcon ? iconComponent : null;
+    }, [shouldRenderIcon, iconComponent]);
+  };
+};
+var useTextFormattingPluginState = function useTextFormattingPluginState(editorState) {
+  return (0, _react.useMemo)(function () {
+    var pluginState = _pluginKey.pluginKey.getState(editorState);
+
+    // TODO: ED-13910 for reasons that goes beyond my knowledge. This is the only way to make the current unit tests happy. Even thought this was wrong before
+    return pluginState;
+  }, [editorState]);
+};
+var useFormattingIcons = function useFormattingIcons(_ref4) {
+  var isToolbarDisabled = _ref4.isToolbarDisabled,
+    editorState = _ref4.editorState,
+    intl = _ref4.intl,
+    editorAnalyticsAPI = _ref4.editorAnalyticsAPI;
+  var textFormattingPluginState = useTextFormattingPluginState(editorState);
+  var schema = editorState.schema;
+  var props = {
+    schema: schema,
+    textFormattingPluginState: textFormattingPluginState,
+    intl: intl,
+    isToolbarDisabled: Boolean(isToolbarDisabled)
+  };
+  var buildStrongIcon = buildIcon(_types.IconTypes.strong, editorAnalyticsAPI);
+  var buildEmIcon = buildIcon(_types.IconTypes.em, editorAnalyticsAPI);
+  var buildUnderlineIcon = buildIcon(_types.IconTypes.underline, editorAnalyticsAPI);
+  var buildStrikeIcon = buildIcon(_types.IconTypes.strike, editorAnalyticsAPI);
+  var buildCodeIcon = buildIcon(_types.IconTypes.code, editorAnalyticsAPI);
+  var buildSubscriptIcon = buildIcon(_types.IconTypes.subscript, editorAnalyticsAPI);
+  var buildSuperscriptIcon = buildIcon(_types.IconTypes.superscript, editorAnalyticsAPI);
+  var strongIcon = buildStrongIcon(props);
+  var emIcon = buildEmIcon(props);
+  var underlineIcon = buildUnderlineIcon(props);
+  var strikeIcon = buildStrikeIcon(props);
+  var codeIcon = buildCodeIcon(props);
+  var subscriptIcon = buildSubscriptIcon(props);
+  var superscriptIcon = buildSuperscriptIcon(props);
+  var result = (0, _react.useMemo)(function () {
+    return [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon];
+  }, [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon]);
+  return result;
+};
+exports.useFormattingIcons = useFormattingIcons;
+var useHasFormattingActived = function useHasFormattingActived(_ref5) {
+  var editorState = _ref5.editorState,
+    iconTypeList = _ref5.iconTypeList;
+  var textFormattingPluginState = useTextFormattingPluginState(editorState);
+  var hasActiveFormatting = (0, _react.useMemo)(function () {
+    if (!textFormattingPluginState) {
+      return false;
+    }
+    return iconTypeList.some(function (iconType) {
+      return textFormattingPluginState["".concat(iconType, "Active")];
+    });
+  }, [textFormattingPluginState, iconTypeList]);
+  return hasActiveFormatting;
+};
+exports.useHasFormattingActived = useHasFormattingActived;

package/dist/cjs/ui/Toolbar/hooks/menu-state.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuState = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var useMenuState = function useMenuState() {
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isMenuOpen = _useState2[0],
+    setIsMenuOpened = _useState2[1];
+  var toggleMenu = (0, _react.useCallback)(function () {
+    setIsMenuOpened(!isMenuOpen);
+  }, [isMenuOpen]);
+  var closeMenu = (0, _react.useCallback)(function () {
+    setIsMenuOpened(false);
+  }, []);
+  return [isMenuOpen, toggleMenu, closeMenu];
+};
+exports.useMenuState = useMenuState;

package/dist/cjs/ui/Toolbar/hooks/responsive-toolbar-buttons.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useResponsiveToolbarButtons = exports.useResponsiveIconTypeMenu = exports.useResponsiveIconTypeButtons = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var _constants = require("../constants");
+var useResponsiveIconTypeButtons = function useResponsiveIconTypeButtons(_ref) {
+  var toolbarSize = _ref.toolbarSize,
+    responsivenessEnabled = _ref.responsivenessEnabled;
+  var iconTypeList = (0, _react.useMemo)(function () {
+    return _constants.ResponsiveCustomButtonToolbar[toolbarSize];
+  }, [toolbarSize]);
+  return responsivenessEnabled ? iconTypeList : _constants.DefaultButtonsToolbar;
+};
+exports.useResponsiveIconTypeButtons = useResponsiveIconTypeButtons;
+var useResponsiveIconTypeMenu = function useResponsiveIconTypeMenu(_ref2) {
+  var toolbarSize = _ref2.toolbarSize,
+    responsivenessEnabled = _ref2.responsivenessEnabled;
+  var iconTypeList = (0, _react.useMemo)(function () {
+    return _constants.ResponsiveCustomMenu[toolbarSize];
+  }, [toolbarSize]);
+  return responsivenessEnabled ? iconTypeList : _constants.DefaultButtonsMenu;
+};
+exports.useResponsiveIconTypeMenu = useResponsiveIconTypeMenu;
+var useResponsiveToolbarButtons = function useResponsiveToolbarButtons(_ref3) {
+  var icons = _ref3.icons,
+    toolbarSize = _ref3.toolbarSize,
+    responsivenessEnabled = _ref3.responsivenessEnabled;
+  var iconTypeList = useResponsiveIconTypeButtons({
+    toolbarSize: toolbarSize,
+    responsivenessEnabled: responsivenessEnabled
+  });
+  var iconsPosition = (0, _react.useMemo)(function () {
+    return icons.reduce(function (acc, icon) {
+      if (!icon || !icon.iconMark) {
+        return acc;
+      }
+      var isIconSingleButton = iconTypeList.includes(icon.iconMark);
+      if (isIconSingleButton) {
+        return {
+          dropdownItems: acc.dropdownItems,
+          singleItems: [].concat((0, _toConsumableArray2.default)(acc.singleItems), [icon])
+        };
+      }
+      return {
+        dropdownItems: [].concat((0, _toConsumableArray2.default)(acc.dropdownItems), [icon]),
+        singleItems: acc.singleItems
+      };
+    }, {
+      dropdownItems: [],
+      singleItems: []
+    });
+  }, [icons, iconTypeList]);
+  return iconsPosition;
+};
+exports.useResponsiveToolbarButtons = useResponsiveToolbarButtons;

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

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _messages = require("@atlaskit/editor-common/messages");
+var _styles = require("@atlaskit/editor-common/styles");
+var _ui = require("@atlaskit/editor-common/ui");
+var _utils = require("../../utils");
+var _dropdownMenu = require("./dropdown-menu");
+var _clearFormattingIcon = require("./hooks/clear-formatting-icon");
+var _formattingIcons = require("./hooks/formatting-icons");
+var _responsiveToolbarButtons = require("./hooks/responsive-toolbar-buttons");
+var _moreButton = require("./more-button");
+var _singleToolbarButtons = require("./single-toolbar-buttons");
+/** @jsx jsx */
+
+var ToolbarFormatting = function ToolbarFormatting(_ref) {
+  var _usePreviousState;
+  var shouldUseResponsiveToolbar = _ref.shouldUseResponsiveToolbar,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    editorView = _ref.editorView,
+    toolbarSize = _ref.toolbarSize,
+    isReducedSpacing = _ref.isReducedSpacing,
+    isToolbarDisabled = _ref.isToolbarDisabled,
+    intl = _ref.intl,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
+  var editorState = (0, _react.useMemo)(function () {
+    return editorView.state;
+  }, [editorView.state]);
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    message = _useState2[0],
+    setMessage = _useState2[1];
+  var defaultIcons = (0, _formattingIcons.useFormattingIcons)({
+    editorState: editorState,
+    intl: intl,
+    isToolbarDisabled: isToolbarDisabled,
+    editorAnalyticsAPI: editorAnalyticsAPI
+  });
+  var clearIcon = (0, _clearFormattingIcon.useClearIcon)({
+    editorState: editorState,
+    intl: intl,
+    editorAnalyticsAPI: editorAnalyticsAPI
+  });
+  var menuIconTypeList = (0, _responsiveToolbarButtons.useResponsiveIconTypeMenu)({
+    toolbarSize: toolbarSize,
+    responsivenessEnabled: shouldUseResponsiveToolbar
+  });
+  var hasFormattingActive = (0, _formattingIcons.useHasFormattingActived)({
+    editorState: editorView.state,
+    iconTypeList: menuIconTypeList
+  });
+  var _useResponsiveToolbar = (0, _responsiveToolbarButtons.useResponsiveToolbarButtons)({
+      icons: defaultIcons,
+      toolbarSize: toolbarSize,
+      responsivenessEnabled: shouldUseResponsiveToolbar
+    }),
+    dropdownItems = _useResponsiveToolbar.dropdownItems,
+    singleItems = _useResponsiveToolbar.singleItems;
+  var clearFormattingStatus = intl.formatMessage(_messages.toolbarMessages.textFormattingOff);
+  var superscriptOffSubscriptOnStatus = intl.formatMessage(_messages.toolbarMessages.superscriptOffSubscriptOn);
+  var subscriptOffSuperscriptOnStatus = intl.formatMessage(_messages.toolbarMessages.subscriptOffSuperscriptOn);
+  var activeItems = [].concat((0, _toConsumableArray2.default)(dropdownItems), (0, _toConsumableArray2.default)(singleItems)).filter(function (item) {
+    return item.isActive;
+  });
+  var prevActiveItems = (_usePreviousState = (0, _hooks.usePreviousState)(activeItems)) !== null && _usePreviousState !== void 0 ? _usePreviousState : [];
+  var fromSuperscriptToSubscript = (0, _utils.isArrayContainsContent)(activeItems, 'Subscript') && (0, _utils.isArrayContainsContent)(prevActiveItems, 'Superscript');
+  var fromSubscriptToSuperscript = (0, _utils.isArrayContainsContent)(activeItems, 'Superscript') && (0, _utils.isArrayContainsContent)(prevActiveItems, 'Subscript');
+  var comparedItems;
+  var screenReaderMessage = '';
+  if (prevActiveItems && activeItems.length > prevActiveItems.length) {
+    comparedItems = (0, _utils.compareItemsArrays)(activeItems, prevActiveItems);
+    screenReaderMessage = intl.formatMessage(_messages.toolbarMessages.on, {
+      formattingType: comparedItems[0].content
+    });
+  } else {
+    comparedItems = (0, _utils.compareItemsArrays)(prevActiveItems, activeItems);
+    if (comparedItems && comparedItems.length) {
+      var _activeItems$;
+      screenReaderMessage = intl.formatMessage(_messages.toolbarMessages.off, {
+        formattingType: comparedItems[0].content
+      });
+      if (((_activeItems$ = activeItems[0]) === null || _activeItems$ === void 0 ? void 0 : _activeItems$.content) === 'Code') {
+        screenReaderMessage = intl.formatMessage(_messages.toolbarMessages.codeOn, {
+          textFormattingOff: (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1 ? clearFormattingStatus : screenReaderMessage
+        });
+      }
+      if (fromSuperscriptToSubscript) {
+        screenReaderMessage = superscriptOffSubscriptOnStatus;
+      }
+      if (fromSubscriptToSuperscript) {
+        screenReaderMessage = subscriptOffSuperscriptOnStatus;
+      }
+    }
+  }
+
+  // handle 'Clear formatting' status for screen readers
+  if (!(activeItems !== null && activeItems !== void 0 && activeItems.length) && (prevActiveItems === null || prevActiveItems === void 0 ? void 0 : prevActiveItems.length) > 1) {
+    screenReaderMessage = clearFormattingStatus;
+  }
+  var items = (0, _react.useMemo)(function () {
+    if (!clearIcon) {
+      return dropdownItems;
+    }
+    return [].concat((0, _toConsumableArray2.default)(dropdownItems), [clearIcon]);
+  }, [clearIcon, dropdownItems]);
+  var moreFormattingButtonLabel = intl.formatMessage(_messages.toolbarMessages.moreFormatting);
+  (0, _react.useEffect)(function () {
+    if (screenReaderMessage) {
+      setMessage(screenReaderMessage);
+    }
+  }, [screenReaderMessage]);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("span", {
+      css: _styles.buttonGroupStyle
+    }, message && (0, _react2.jsx)(_ui.Announcer, {
+      ariaLive: "assertive",
+      text: message,
+      ariaRelevant: "additions",
+      delay: 250
+    }), (0, _react2.jsx)(_singleToolbarButtons.SingleToolbarButtons, {
+      items: singleItems,
+      editorView: editorView,
+      isReducedSpacing: isReducedSpacing
+    }), (0, _react2.jsx)("span", {
+      css: _styles.wrapperStyle
+    }, isToolbarDisabled ? (0, _react2.jsx)("div", null, (0, _react2.jsx)(_moreButton.MoreButton, {
+      label: moreFormattingButtonLabel,
+      isReducedSpacing: isReducedSpacing,
+      isDisabled: true,
+      isSelected: false,
+      "aria-expanded": undefined,
+      "aria-pressed": undefined
+    })) : (0, _react2.jsx)(_dropdownMenu.FormattingTextDropdownMenu, {
+      popupsMountPoint: popupsMountPoint,
+      popupsBoundariesElement: popupsBoundariesElement,
+      popupsScrollableElement: popupsScrollableElement,
+      editorView: editorView,
+      isReducedSpacing: isReducedSpacing,
+      moreButtonLabel: moreFormattingButtonLabel,
+      hasFormattingActive: hasFormattingActive,
+      items: items
+    }), (0, _react2.jsx)("span", {
+      css: _styles.separatorStyles
+    })))
+  );
+};
+var Toolbar = function Toolbar(_ref2) {
+  var popupsMountPoint = _ref2.popupsMountPoint,
+    popupsScrollableElement = _ref2.popupsScrollableElement,
+    toolbarSize = _ref2.toolbarSize,
+    isReducedSpacing = _ref2.isReducedSpacing,
+    editorView = _ref2.editorView,
+    isToolbarDisabled = _ref2.isToolbarDisabled,
+    shouldUseResponsiveToolbar = _ref2.shouldUseResponsiveToolbar,
+    intl = _ref2.intl,
+    editorAnalyticsAPI = _ref2.editorAnalyticsAPI;
+  return (0, _react2.jsx)(ToolbarFormatting, {
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    toolbarSize: toolbarSize,
+    isReducedSpacing: isReducedSpacing,
+    editorView: editorView,
+    isToolbarDisabled: isToolbarDisabled,
+    shouldUseResponsiveToolbar: shouldUseResponsiveToolbar,
+    intl: intl,
+    editorAnalyticsAPI: editorAnalyticsAPI
+  });
+};
+var _default = (0, _reactIntlNext.injectIntl)(Toolbar);
+exports.default = _default;

package/dist/cjs/ui/Toolbar/more-button.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoreButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _more = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/more"));
+/** @jsx jsx */
+
+var MoreButton = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var label = _ref.label,
+    ariaExpanded = _ref['aria-expanded'],
+    isReducedSpacing = _ref.isReducedSpacing,
+    isSelected = _ref.isSelected,
+    isDisabled = _ref.isDisabled,
+    onClick = _ref.onClick,
+    onKeyDown = _ref.onKeyDown;
+  return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+    disabled: isDisabled,
+    selected: isSelected,
+    onClick: onClick,
+    onKeyDown: onKeyDown,
+    spacing: isReducedSpacing ? 'none' : 'default',
+    title: label,
+    iconBefore:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("div", {
+      css: _styles.triggerWrapperStyles
+    }, (0, _react2.jsx)(_more.default, {
+      label: ""
+    })),
+    "aria-expanded": ariaExpanded,
+    "aria-label": label,
+    "aria-haspopup": true
+  });
+});
+exports.MoreButton = MoreButton;

package/dist/cjs/ui/Toolbar/single-toolbar-buttons.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SingleToolbarButtons = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _styles = require("@atlaskit/editor-common/styles");
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+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; }
+/** @jsx jsx */
+
+var SingleToolbarButtons = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var items = _ref.items,
+    isReducedSpacing = _ref.isReducedSpacing,
+    editorView = _ref.editorView;
+  var onClick = (0, _react.useCallback)(function (command) {
+    return function () {
+      command(editorView.state, editorView.dispatch);
+      return false;
+    };
+  }, [editorView.state, editorView.dispatch]);
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    (0, _react2.jsx)("span", {
+      css: _styles.buttonGroupStyle
+    }, items.map(function (item) {
+      var _item$ariaLabel;
+      return (0, _react2.jsx)(_uiMenu.ToolbarButton, {
+        key: item.key,
+        testId: "editor-toolbar__".concat(String(item.content)),
+        buttonId: item.buttonId,
+        spacing: isReducedSpacing ? 'none' : 'default',
+        onClick: onClick(item.command),
+        selected: item.isActive,
+        disabled: item.isDisabled,
+        title: item.tooltipElement,
+        iconBefore: item.iconElement,
+        "aria-pressed": item.isActive,
+        "aria-label": (_item$ariaLabel = item['aria-label']) !== null && _item$ariaLabel !== void 0 ? _item$ariaLabel : String(item.content),
+        "aria-keyshortcuts": item['aria-keyshortcuts']
+      });
+    }))
+  );
+});
+exports.SingleToolbarButtons = SingleToolbarButtons;

package/dist/cjs/ui/Toolbar/types.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconTypes = void 0;
+var IconTypes = /*#__PURE__*/function (IconTypes) {
+  IconTypes["strong"] = "strong";
+  IconTypes["em"] = "em";
+  IconTypes["underline"] = "underline";
+  IconTypes["strike"] = "strike";
+  IconTypes["code"] = "code";
+  IconTypes["subscript"] = "subscript";
+  IconTypes["superscript"] = "superscript";
+  return IconTypes;
+}({});
+exports.IconTypes = IconTypes;

package/dist/cjs/utils/cell-selection.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.cellSelectionNodesBetween = void 0;
+var cellSelectionNodesBetween = function cellSelectionNodesBetween(selection, doc, f, startPos) {
+  selection.forEachCell(function (cell, cellPos) {
+    doc.nodesBetween(cellPos, cellPos + cell.nodeSize, f, startPos);
+  });
+};
+exports.cellSelectionNodesBetween = cellSelectionNodesBetween;