@atlaskit/editor-plugin-text-formatting 0.1.0

package/dist/esm/pm-plugins/keymap.js

@@ -0,0 +1,43 @@
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import * as keymaps from '@atlaskit/editor-common/keymaps';
+import { keymap } from '@atlaskit/editor-prosemirror/keymap';
+import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../actions';
+export default function keymapPlugin(schema, editorAnalyticsAPI) {
+  var list = {};
+  if (schema.marks.strong) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleBold.common, toggleStrongWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.em) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleItalic.common, toggleEmWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.code) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleCode.common, toggleCodeWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.strike) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleStrikethrough.common, toggleStrikeWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.subsup) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleSubscript.common, toggleSubscriptWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.subsup) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleSuperscript.common, toggleSuperscriptWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  if (schema.marks.underline) {
+    keymaps.bindKeymapWithCommand(keymaps.toggleUnderline.common, toggleUnderlineWithAnalytics(editorAnalyticsAPI)({
+      inputMethod: INPUT_METHOD.SHORTCUT
+    }), list);
+  }
+  return keymap(list);
+}

package/dist/esm/pm-plugins/main.js

@@ -0,0 +1,99 @@
+// TODO: Ideally this should use the custom toggleMark function from @atlaskit/editor-common so we also disable the options when selecting inline nodes but it disables the marks when the selection is empty at this point in time which is undesirable
+// import { toggleMark } from '@atlaskit/editor-common/mark';
+
+import { moveLeft as keymapMoveLeft, moveRight as keymapMoveRight } from '@atlaskit/editor-common/keymaps';
+import { anyMarkActive } from '@atlaskit/editor-common/mark';
+import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { shallowEqual } from '@atlaskit/editor-common/utils';
+import { toggleMark } from '@atlaskit/editor-prosemirror/commands';
+import { createInlineCodeFromTextInputWithAnalytics } from '../commands/text-formatting';
+import * as commands from '../commands/text-formatting';
+import { pluginKey } from './plugin-key';
+export { pluginKey };
+var getTextFormattingState = function getTextFormattingState(editorState, editorAnalyticsAPI) {
+  var _editorState$schema$m = editorState.schema.marks,
+    em = _editorState$schema$m.em,
+    code = _editorState$schema$m.code,
+    strike = _editorState$schema$m.strike,
+    strong = _editorState$schema$m.strong,
+    subsup = _editorState$schema$m.subsup,
+    underline = _editorState$schema$m.underline;
+  var state = {};
+  if (code) {
+    state.codeActive = anyMarkActive(editorState, code.create());
+    state.codeDisabled = !toggleMark(code)(editorState);
+  }
+  if (em) {
+    state.emActive = anyMarkActive(editorState, em);
+    state.emDisabled = state.codeActive ? true : !toggleMark(em)(editorState);
+  }
+  if (strike) {
+    state.strikeActive = anyMarkActive(editorState, strike);
+    state.strikeDisabled = state.codeActive ? true : !toggleMark(strike)(editorState);
+  }
+  if (strong) {
+    state.strongActive = anyMarkActive(editorState, strong);
+    state.strongDisabled = state.codeActive ? true : !toggleMark(strong)(editorState);
+  }
+  if (subsup) {
+    var subMark = subsup.create({
+      type: 'sub'
+    });
+    var supMark = subsup.create({
+      type: 'sup'
+    });
+    state.subscriptActive = anyMarkActive(editorState, subMark);
+    state.subscriptDisabled = state.codeActive ? true : !toggleMark(subsup, {
+      type: 'sub'
+    })(editorState);
+    state.superscriptActive = anyMarkActive(editorState, supMark);
+    state.superscriptDisabled = state.codeActive ? true : !toggleMark(subsup, {
+      type: 'sup'
+    })(editorState);
+  }
+  if (underline) {
+    state.underlineActive = anyMarkActive(editorState, underline);
+    state.underlineDisabled = state.codeActive ? true : !toggleMark(underline)(editorState);
+  }
+  return state;
+};
+export var plugin = function plugin(dispatch, editorAnalyticsAPI) {
+  return new SafePlugin({
+    state: {
+      init: function init(_config, state) {
+        return getTextFormattingState(state, editorAnalyticsAPI);
+      },
+      apply: function apply(_tr, pluginState, _oldState, newState) {
+        var state = getTextFormattingState(newState, editorAnalyticsAPI);
+        if (!shallowEqual(pluginState, state)) {
+          dispatch(pluginKey, state);
+          return state;
+        }
+        return pluginState;
+      }
+    },
+    key: pluginKey,
+    props: {
+      handleKeyDown: function handleKeyDown(view, event) {
+        var state = view.state,
+          dispatch = view.dispatch;
+        if (event.key === keymapMoveRight.common && !event.metaKey) {
+          return commands.moveRight()(state, dispatch);
+        } else if (event.key === keymapMoveLeft.common && !event.metaKey) {
+          return commands.moveLeft()(state, dispatch);
+        }
+        return false;
+      },
+      handleTextInput: function handleTextInput(view, from, to, text) {
+        var state = view.state,
+          dispatch = view.dispatch;
+        var schema = state.schema,
+          parentNodeType = state.selection.$from.parent.type;
+        if (parentNodeType.allowsMarkType(schema.marks.code)) {
+          return createInlineCodeFromTextInputWithAnalytics(editorAnalyticsAPI)(from, to, text)(state, dispatch);
+        }
+        return false;
+      }
+    }
+  });
+};

package/dist/esm/pm-plugins/plugin-key.js

@@ -0,0 +1,2 @@
+import { PluginKey } from '@atlaskit/editor-prosemirror/state';
+export var pluginKey = new PluginKey('textFormatting');

package/dist/esm/pm-plugins/smart-input-rule.js

@@ -0,0 +1,169 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, PUNC, SYMBOL } from '@atlaskit/editor-common/analytics';
+import { inputRuleWithAnalytics } from '@atlaskit/editor-common/utils';
+import { Selection } from '@atlaskit/editor-prosemirror/state';
+import { createPlugin, createRule } from '@atlaskit/prosemirror-input-rules';
+
+/**
+ * Creates an InputRuleHandler that will match on a regular expression of the
+ * form `(prefix, content, suffix?)`, and replace it with some given text,
+ * maintaining prefix and suffix around the replacement.
+ *
+ * @param text text to replace with
+ */
+function replaceTextUsingCaptureGroup(text) {
+  return function (state, match, start, end) {
+    var _match = _slicedToArray(match, 4),
+      prefix = _match[1],
+      suffix = _match[3];
+    var replacement = text + (suffix || '');
+    var tr = state.tr,
+      $to = state.selection.$to;
+    var startPos = start + (prefix || '').length;
+    var safePos = Math.min(
+    // I know it is almost impossible to have a negative value at this point.
+    // But, this is JS #trustnoone
+    Math.max(startPos, 0), end);
+    tr.replaceWith(safePos, end, state.schema.text(replacement, $to.marks()));
+    tr.setSelection(Selection.near(tr.doc.resolve(tr.selection.to)));
+    return tr;
+  };
+}
+function createReplacementRule(to, from) {
+  return createRule(from, replaceTextUsingCaptureGroup(to));
+}
+
+/**
+ * Create replacement rules fiven a replacement map
+ * @param replMap - Replacement map
+ * @param trackingEventName - Analytics V2 tracking event name
+ * @param replacementRuleWithAnalytics - Analytics GAS V3 middleware for replacement and rules.
+ */
+function createReplacementRules(replMap, replacementRuleWithAnalytics) {
+  return Object.keys(replMap).map(function (replacement) {
+    var regex = replMap[replacement];
+    var rule = createReplacementRule(replacement, regex);
+    if (replacementRuleWithAnalytics) {
+      return replacementRuleWithAnalytics(replacement)(rule);
+    }
+    return rule;
+  });
+}
+
+// We don't agressively upgrade single quotes to smart quotes because
+// they may clash with an emoji. Only do that when we have a matching
+// single quote, or a contraction.
+function createSingleQuotesRules() {
+  return [
+  // wrapped text
+  createRule(/(\s|^)'(\S+.*\S+)'$/, function (state, match, start, end) {
+    var OPEN_SMART_QUOTE_CHAR = '‘';
+    var CLOSED_SMART_QUOTE_CHAR = '’';
+    var _match2 = _slicedToArray(match, 3),
+      spacing = _match2[1],
+      innerContent = _match2[2];
+    // Edge case where match begins with some spacing. We need to add
+    // it back to the document
+    var openQuoteReplacement = spacing + OPEN_SMART_QUOTE_CHAR;
+    // End is not always where the closed quote is, edge case exists
+    // when there is spacing after the closed quote. We need to
+    // determine position of closed quote from the start position.
+    var positionOfClosedQuote = start + openQuoteReplacement.length + innerContent.length;
+    return state.tr.insertText(CLOSED_SMART_QUOTE_CHAR, positionOfClosedQuote, end).insertText(openQuoteReplacement, start, start + openQuoteReplacement.length);
+  }),
+  // apostrophe
+  createReplacementRule('’', /(\w+)(')(\w+)$/)];
+}
+
+/**
+ * Get replacement rules related to product
+ */
+function getProductRules(editorAnalyticsAPI) {
+  var productRuleWithAnalytics = function productRuleWithAnalytics(product) {
+    return inputRuleWithAnalytics(function (_, match) {
+      return {
+        action: ACTION.SUBSTITUTED,
+        actionSubject: ACTION_SUBJECT.TEXT,
+        actionSubjectId: ACTION_SUBJECT_ID.PRODUCT_NAME,
+        eventType: EVENT_TYPE.TRACK,
+        attributes: {
+          product: product,
+          originalSpelling: match[2]
+        }
+      };
+    }, editorAnalyticsAPI);
+  };
+  return createReplacementRules({
+    Atlassian: /(\s+|^)(atlassian)(\s)$/,
+    Jira: /(\s+|^)(jira|JIRA)(\s)$/,
+    Bitbucket: /(\s+|^)(bitbucket|BitBucket)(\s)$/,
+    Hipchat: /(\s+|^)(hipchat|HipChat)(\s)$/,
+    Trello: /(\s+|^)(trello)(\s)$/
+  }, productRuleWithAnalytics);
+}
+
+/**
+ * Get replacement rules related to symbol
+ */
+function getSymbolRules(editorAnalyticsAPI) {
+  var symbolToString = {
+    '→': SYMBOL.ARROW_RIGHT,
+    '←': SYMBOL.ARROW_LEFT,
+    '↔︎': SYMBOL.ARROW_DOUBLE
+  };
+  var symbolRuleWithAnalytics = function symbolRuleWithAnalytics(symbol) {
+    return inputRuleWithAnalytics({
+      action: ACTION.SUBSTITUTED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      actionSubjectId: ACTION_SUBJECT_ID.SYMBOL,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        symbol: symbolToString[symbol]
+      }
+    }, editorAnalyticsAPI);
+  };
+  return createReplacementRules({
+    '→': /(\s+|^)(--?>)(\s)$/,
+    '←': /(\s+|^)(<--?)(\s)$/,
+    '↔︎': /(\s+|^)(<->?)(\s)$/
+  }, symbolRuleWithAnalytics);
+}
+
+/**
+ * Get replacement rules related to punctuation
+ */
+function getPunctuationRules(editorAnalyticsAPI) {
+  var punctuationToString = _defineProperty({
+    '–': PUNC.DASH,
+    '…': PUNC.ELLIPSIS,
+    '”': PUNC.QUOTE_DOUBLE
+  }, PUNC.QUOTE_SINGLE, PUNC.QUOTE_SINGLE);
+  var punctuationRuleWithAnalytics = function punctuationRuleWithAnalytics(punctuation) {
+    return inputRuleWithAnalytics({
+      action: ACTION.SUBSTITUTED,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      actionSubjectId: ACTION_SUBJECT_ID.PUNC,
+      eventType: EVENT_TYPE.TRACK,
+      attributes: {
+        punctuation: punctuationToString[punctuation]
+      }
+    }, editorAnalyticsAPI);
+  };
+  var dashEllipsisRules = createReplacementRules({
+    '–': /(\s+|^)(--)(\s)$/,
+    '…': /()(\.\.\.)$/
+  }, punctuationRuleWithAnalytics);
+  var doubleQuoteRules = createReplacementRules({
+    '“': /((?:^|[\s\{\[\(\<'"\u2018\u201C]))(")$/,
+    '”': /"$/
+  }, punctuationRuleWithAnalytics);
+  var singleQuoteRules = createSingleQuotesRules();
+  return [].concat(_toConsumableArray(dashEllipsisRules), _toConsumableArray(doubleQuoteRules), _toConsumableArray(singleQuoteRules.map(function (rule) {
+    return punctuationRuleWithAnalytics(PUNC.QUOTE_SINGLE)(rule);
+  })));
+}
+export default (function (editorAnalyticsAPI) {
+  return createPlugin('text-formatting:smart-input', [].concat(_toConsumableArray(getProductRules(editorAnalyticsAPI)), _toConsumableArray(getSymbolRules(editorAnalyticsAPI)), _toConsumableArray(getPunctuationRules(editorAnalyticsAPI))));
+});

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

@@ -0,0 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _ResponsiveCustomButt, _ResponsiveCustomMenu;
+import { ToolbarSize } from '@atlaskit/editor-common/types';
+import { IconTypes } from './types';
+export var DefaultButtonsToolbar = [IconTypes.strong, IconTypes.em];
+export var DefaultButtonsMenu = [IconTypes.underline, IconTypes.strike, IconTypes.code, IconTypes.subscript, IconTypes.superscript];
+export var ResponsiveCustomButtonToolbar = (_ResponsiveCustomButt = {}, _defineProperty(_ResponsiveCustomButt, ToolbarSize.XXL, DefaultButtonsToolbar), _defineProperty(_ResponsiveCustomButt, ToolbarSize.XL, DefaultButtonsToolbar), _defineProperty(_ResponsiveCustomButt, ToolbarSize.L, DefaultButtonsToolbar), _defineProperty(_ResponsiveCustomButt, ToolbarSize.M, []), _defineProperty(_ResponsiveCustomButt, ToolbarSize.S, []), _defineProperty(_ResponsiveCustomButt, ToolbarSize.XXXS, []), _ResponsiveCustomButt);
+export var ResponsiveCustomMenu = (_ResponsiveCustomMenu = {}, _defineProperty(_ResponsiveCustomMenu, ToolbarSize.XXL, DefaultButtonsMenu), _defineProperty(_ResponsiveCustomMenu, ToolbarSize.XL, DefaultButtonsMenu), _defineProperty(_ResponsiveCustomMenu, ToolbarSize.L, DefaultButtonsMenu), _defineProperty(_ResponsiveCustomMenu, ToolbarSize.M, [IconTypes.strong, IconTypes.em].concat(DefaultButtonsMenu)), _defineProperty(_ResponsiveCustomMenu, ToolbarSize.S, [IconTypes.strong, IconTypes.em].concat(DefaultButtonsMenu)), _defineProperty(_ResponsiveCustomMenu, ToolbarSize.XXXS, [IconTypes.strong, IconTypes.em].concat(DefaultButtonsMenu)), _ResponsiveCustomMenu);

package/dist/esm/ui/Toolbar/dropdown-menu.js

@@ -0,0 +1,75 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useCallback, useMemo, useState } from 'react';
+import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
+import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { useMenuState } from './hooks/menu-state';
+import { MoreButton } from './more-button';
+export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref) {
+  var editorView = _ref.editorView,
+    moreButtonLabel = _ref.moreButtonLabel,
+    isReducedSpacing = _ref.isReducedSpacing,
+    items = _ref.items,
+    hasFormattingActive = _ref.hasFormattingActive,
+    popupsBoundariesElement = _ref.popupsBoundariesElement,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsScrollableElement = _ref.popupsScrollableElement;
+  var _useMenuState = useMenuState(),
+    _useMenuState2 = _slicedToArray(_useMenuState, 3),
+    isMenuOpen = _useMenuState2[0],
+    toggleMenu = _useMenuState2[1],
+    closeMenu = _useMenuState2[2];
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpenedByKeyboard = _useState2[0],
+    setIsOpenedByKeyboard = _useState2[1];
+  var group = useMemo(function () {
+    return [{
+      items: items
+    }];
+  }, [items]);
+  var onItemActivated = useCallback(function (_ref2) {
+    var item = _ref2.item,
+      _ref2$shouldCloseMenu = _ref2.shouldCloseMenu,
+      shouldCloseMenu = _ref2$shouldCloseMenu === void 0 ? true : _ref2$shouldCloseMenu;
+    item.command(editorView.state, editorView.dispatch);
+    if (shouldCloseMenu) {
+      closeMenu();
+    }
+  }, [editorView.state, editorView.dispatch, closeMenu]);
+  return /*#__PURE__*/React.createElement(DropdownMenu, {
+    mountTo: popupsMountPoint,
+    onOpenChange: closeMenu,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onItemActivated: onItemActivated,
+    isOpen: isMenuOpen,
+    items: group,
+    zIndex: akEditorMenuZIndex,
+    fitHeight: 188,
+    fitWidth: 136,
+    shouldUseDefaultRole: true,
+    shouldFocusFirstItem: function shouldFocusFirstItem() {
+      if (isOpenedByKeyboard) {
+        setIsOpenedByKeyboard(false);
+      }
+      return isOpenedByKeyboard;
+    }
+  }, /*#__PURE__*/React.createElement(MoreButton, {
+    isSelected: isMenuOpen || hasFormattingActive,
+    label: moreButtonLabel,
+    isReducedSpacing: isReducedSpacing,
+    isDisabled: false,
+    onClick: function onClick() {
+      toggleMenu();
+      setIsOpenedByKeyboard(false);
+    },
+    onKeyDown: function onKeyDown(event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        toggleMenu();
+        setIsOpenedByKeyboard(true);
+      }
+    },
+    "aria-expanded": isMenuOpen
+  }));
+});

package/dist/esm/ui/Toolbar/hooks/clear-formatting-icon.js

@@ -0,0 +1,47 @@
+/** @jsx jsx */
+import { useCallback, useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { clearFormatting as clearFormattingKeymap, tooltip } from '@atlaskit/editor-common/keymaps';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import { clearFormattingWithAnalytics } from '../../../commands/clear-formatting';
+import { pluginKey as clearFormattingPluginKey } from '../../../pm-plugins/clear-formatting';
+var useClearFormattingPluginState = function useClearFormattingPluginState(editorState) {
+  return useMemo(function () {
+    return clearFormattingPluginKey.getState(editorState);
+  }, [editorState]);
+};
+export var useClearIcon = function useClearIcon(_ref) {
+  var intl = _ref.intl,
+    editorState = _ref.editorState,
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
+  var pluginState = useClearFormattingPluginState(editorState);
+  var isPluginAvailable = Boolean(pluginState);
+  var formattingIsPresent = Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.formattingIsPresent);
+  var clearFormattingLabel = intl.formatMessage(toolbarMessages.clearFormatting);
+  var clearFormattingToolbar = useCallback(function (state, dispatch) {
+    return clearFormattingWithAnalytics(INPUT_METHOD.TOOLBAR, editorAnalyticsAPI)(state, dispatch);
+  }, [editorAnalyticsAPI]);
+  return useMemo(function () {
+    if (!isPluginAvailable) {
+      return null;
+    }
+    return {
+      key: 'clearFormatting',
+      command: clearFormattingToolbar,
+      content: clearFormattingLabel,
+      elemAfter:
+      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+      jsx("div", {
+        css: shortcutStyle
+      }, tooltip(clearFormattingKeymap)),
+      value: {
+        name: 'clearFormatting'
+      },
+      isActive: false,
+      isDisabled: !formattingIsPresent,
+      'aria-label': clearFormattingKeymap ? tooltip(clearFormattingKeymap, String(clearFormattingLabel)) : String(clearFormattingLabel)
+    };
+  }, [isPluginAvailable, clearFormattingToolbar, clearFormattingLabel, formattingIsPresent]);
+};

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

@@ -0,0 +1,215 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _IconsMarkSchema;
+/** @jsx jsx */
+import React, { useMemo } from 'react';
+import { jsx } from '@emotion/react';
+import { INPUT_METHOD, TOOLBAR_ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
+import { getAriaKeyshortcuts, toggleBold, toggleCode, toggleItalic, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleUnderline, tooltip, ToolTipContent } from '@atlaskit/editor-common/keymaps';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import BoldIcon from '@atlaskit/icon/glyph/editor/bold';
+import ItalicIcon from '@atlaskit/icon/glyph/editor/italic';
+import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../actions';
+import { pluginKey as textFormattingPluginKey } from '../../../pm-plugins/plugin-key';
+import { IconTypes } from '../types';
+var withToolbarInputMethod = function withToolbarInputMethod(func) {
+  return func({
+    inputMethod: INPUT_METHOD.TOOLBAR
+  });
+};
+var IconButtons = function IconButtons(editorAnalyticsAPI) {
+  return {
+    strong: {
+      buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_STRONG,
+      command: withToolbarInputMethod(toggleStrongWithAnalytics(editorAnalyticsAPI)),
+      message: toolbarMessages.bold,
+      tooltipKeymap: toggleBold,
+      component: function component() {
+        return jsx(BoldIcon, {
+          label: ""
+        });
+      }
+    },
+    em: {
+      buttonId: TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_ITALIC,
+      command: withToolbarInputMethod(toggleEmWithAnalytics(editorAnalyticsAPI)),
+      message: toolbarMessages.italic,
+      tooltipKeymap: toggleItalic,
+      component: function component() {
+        return jsx(ItalicIcon, {
+          label: ""
+        });
+      }
+    },
+    underline: {
+      command: withToolbarInputMethod(toggleUnderlineWithAnalytics(editorAnalyticsAPI)),
+      message: toolbarMessages.underline,
+      tooltipKeymap: toggleUnderline
+    },
+    strike: {
+      command: withToolbarInputMethod(toggleStrikeWithAnalytics(editorAnalyticsAPI)),
+      message: toolbarMessages.strike,
+      tooltipKeymap: toggleStrikethrough
+    },
+    code: {
+      command: withToolbarInputMethod(toggleCodeWithAnalytics(editorAnalyticsAPI)),
+      message: toolbarMessages.code,
+      tooltipKeymap: toggleCode
+    },
+    subscript: {
+      command: withToolbarInputMethod(toggleSubscriptWithAnalytics(editorAnalyticsAPI)),
+      message: toolbarMessages.subscript,
+      tooltipKeymap: toggleSubscript
+    },
+    superscript: {
+      command: withToolbarInputMethod(toggleSuperscriptWithAnalytics(editorAnalyticsAPI)),
+      message: toolbarMessages.superscript,
+      tooltipKeymap: 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 ? jsx(ToolTipContent, {
+      description: content,
+      keymap: tooltipKeymap
+    }) : undefined,
+    elemAfter: tooltipKeymap ?
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    jsx("div", {
+      css: shortcutStyle
+    }, tooltip(tooltipKeymap)) : undefined,
+    value: {
+      name: iconType
+    },
+    isActive: isActive,
+    isDisabled: isDisabled,
+    'aria-label': tooltipKeymap ? tooltip(tooltipKeymap, String(content)) : String(content),
+    'aria-keyshortcuts': getAriaKeyshortcuts(tooltipKeymap)
+  };
+};
+var IconsMarkSchema = (_IconsMarkSchema = {}, _defineProperty(_IconsMarkSchema, IconTypes.strong, 'strong'), _defineProperty(_IconsMarkSchema, IconTypes.em, 'em'), _defineProperty(_IconsMarkSchema, IconTypes.strike, 'strike'), _defineProperty(_IconsMarkSchema, IconTypes.code, 'code'), _defineProperty(_IconsMarkSchema, IconTypes.underline, 'underline'), _defineProperty(_IconsMarkSchema, IconTypes.superscript, 'subsup'), _defineProperty(_IconsMarkSchema, 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 = useMemo(function () {
+      return getIcon({
+        iconType: IconTypes[iconMark],
+        isDisabled: isToolbarDisabled || isDisabled,
+        isActive: isActive,
+        intl: intl,
+        editorAnalyticsAPI: editorAnalyticsAPI
+      });
+    }, [isToolbarDisabled, isDisabled, isActive, intl]);
+    var shouldRenderIcon = hasSchemaMark && !isHidden;
+    return useMemo(function () {
+      return shouldRenderIcon ? iconComponent : null;
+    }, [shouldRenderIcon, iconComponent]);
+  };
+};
+var useTextFormattingPluginState = function useTextFormattingPluginState(editorState) {
+  return useMemo(function () {
+    var pluginState = textFormattingPluginKey.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]);
+};
+export 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(IconTypes.strong, editorAnalyticsAPI);
+  var buildEmIcon = buildIcon(IconTypes.em, editorAnalyticsAPI);
+  var buildUnderlineIcon = buildIcon(IconTypes.underline, editorAnalyticsAPI);
+  var buildStrikeIcon = buildIcon(IconTypes.strike, editorAnalyticsAPI);
+  var buildCodeIcon = buildIcon(IconTypes.code, editorAnalyticsAPI);
+  var buildSubscriptIcon = buildIcon(IconTypes.subscript, editorAnalyticsAPI);
+  var buildSuperscriptIcon = buildIcon(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 = useMemo(function () {
+    return [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon];
+  }, [strongIcon, emIcon, underlineIcon, strikeIcon, codeIcon, subscriptIcon, superscriptIcon]);
+  return result;
+};
+export var useHasFormattingActived = function useHasFormattingActived(_ref5) {
+  var editorState = _ref5.editorState,
+    iconTypeList = _ref5.iconTypeList;
+  var textFormattingPluginState = useTextFormattingPluginState(editorState);
+  var hasActiveFormatting = useMemo(function () {
+    if (!textFormattingPluginState) {
+      return false;
+    }
+    return iconTypeList.some(function (iconType) {
+      return textFormattingPluginState["".concat(iconType, "Active")];
+    });
+  }, [textFormattingPluginState, iconTypeList]);
+  return hasActiveFormatting;
+};

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

@@ -0,0 +1,15 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useCallback, useState } from 'react';
+export var useMenuState = function useMenuState() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMenuOpen = _useState2[0],
+    setIsMenuOpened = _useState2[1];
+  var toggleMenu = useCallback(function () {
+    setIsMenuOpened(!isMenuOpen);
+  }, [isMenuOpen]);
+  var closeMenu = useCallback(function () {
+    setIsMenuOpened(false);
+  }, []);
+  return [isMenuOpen, toggleMenu, closeMenu];
+};