@atlaskit/editor-plugin-text-formatting 0.1.0

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

@@ -0,0 +1,113 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.plugin = void 0;
+Object.defineProperty(exports, "pluginKey", {
+  enumerable: true,
+  get: function get() {
+    return _pluginKey.pluginKey;
+  }
+});
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _mark = require("@atlaskit/editor-common/mark");
+var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
+var _utils = require("@atlaskit/editor-common/utils");
+var _commands = require("@atlaskit/editor-prosemirror/commands");
+var commands = _interopRequireWildcard(require("../commands/text-formatting"));
+var _pluginKey = require("./plugin-key");
+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; }
+// 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';
+
+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 = (0, _mark.anyMarkActive)(editorState, code.create());
+    state.codeDisabled = !(0, _commands.toggleMark)(code)(editorState);
+  }
+  if (em) {
+    state.emActive = (0, _mark.anyMarkActive)(editorState, em);
+    state.emDisabled = state.codeActive ? true : !(0, _commands.toggleMark)(em)(editorState);
+  }
+  if (strike) {
+    state.strikeActive = (0, _mark.anyMarkActive)(editorState, strike);
+    state.strikeDisabled = state.codeActive ? true : !(0, _commands.toggleMark)(strike)(editorState);
+  }
+  if (strong) {
+    state.strongActive = (0, _mark.anyMarkActive)(editorState, strong);
+    state.strongDisabled = state.codeActive ? true : !(0, _commands.toggleMark)(strong)(editorState);
+  }
+  if (subsup) {
+    var subMark = subsup.create({
+      type: 'sub'
+    });
+    var supMark = subsup.create({
+      type: 'sup'
+    });
+    state.subscriptActive = (0, _mark.anyMarkActive)(editorState, subMark);
+    state.subscriptDisabled = state.codeActive ? true : !(0, _commands.toggleMark)(subsup, {
+      type: 'sub'
+    })(editorState);
+    state.superscriptActive = (0, _mark.anyMarkActive)(editorState, supMark);
+    state.superscriptDisabled = state.codeActive ? true : !(0, _commands.toggleMark)(subsup, {
+      type: 'sup'
+    })(editorState);
+  }
+  if (underline) {
+    state.underlineActive = (0, _mark.anyMarkActive)(editorState, underline);
+    state.underlineDisabled = state.codeActive ? true : !(0, _commands.toggleMark)(underline)(editorState);
+  }
+  return state;
+};
+var plugin = function plugin(dispatch, editorAnalyticsAPI) {
+  return new _safePlugin.SafePlugin({
+    state: {
+      init: function init(_config, state) {
+        return getTextFormattingState(state, editorAnalyticsAPI);
+      },
+      apply: function apply(_tr, pluginState, _oldState, newState) {
+        var state = getTextFormattingState(newState, editorAnalyticsAPI);
+        if (!(0, _utils.shallowEqual)(pluginState, state)) {
+          dispatch(_pluginKey.pluginKey, state);
+          return state;
+        }
+        return pluginState;
+      }
+    },
+    key: _pluginKey.pluginKey,
+    props: {
+      handleKeyDown: function handleKeyDown(view, event) {
+        var state = view.state,
+          dispatch = view.dispatch;
+        if (event.key === _keymaps.moveRight.common && !event.metaKey) {
+          return commands.moveRight()(state, dispatch);
+        } else if (event.key === _keymaps.moveLeft.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 (0, commands.createInlineCodeFromTextInputWithAnalytics)(editorAnalyticsAPI)(from, to, text)(state, dispatch);
+        }
+        return false;
+      }
+    }
+  });
+};
+exports.plugin = plugin;

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

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.pluginKey = void 0;
+var _state = require("@atlaskit/editor-prosemirror/state");
+var pluginKey = new _state.PluginKey('textFormatting');
+exports.pluginKey = pluginKey;

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

@@ -0,0 +1,176 @@
+"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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _utils = require("@atlaskit/editor-common/utils");
+var _state = require("@atlaskit/editor-prosemirror/state");
+var _prosemirrorInputRules = require("@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 = (0, _slicedToArray2.default)(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(_state.Selection.near(tr.doc.resolve(tr.selection.to)));
+    return tr;
+  };
+}
+function createReplacementRule(to, from) {
+  return (0, _prosemirrorInputRules.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
+  (0, _prosemirrorInputRules.createRule)(/(\s|^)'(\S+.*\S+)'$/, function (state, match, start, end) {
+    var OPEN_SMART_QUOTE_CHAR = '‘';
+    var CLOSED_SMART_QUOTE_CHAR = '’';
+    var _match2 = (0, _slicedToArray2.default)(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 (0, _utils.inputRuleWithAnalytics)(function (_, match) {
+      return {
+        action: _analytics.ACTION.SUBSTITUTED,
+        actionSubject: _analytics.ACTION_SUBJECT.TEXT,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.PRODUCT_NAME,
+        eventType: _analytics.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 = {
+    '→': _analytics.SYMBOL.ARROW_RIGHT,
+    '←': _analytics.SYMBOL.ARROW_LEFT,
+    '↔︎': _analytics.SYMBOL.ARROW_DOUBLE
+  };
+  var symbolRuleWithAnalytics = function symbolRuleWithAnalytics(symbol) {
+    return (0, _utils.inputRuleWithAnalytics)({
+      action: _analytics.ACTION.SUBSTITUTED,
+      actionSubject: _analytics.ACTION_SUBJECT.TEXT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.SYMBOL,
+      eventType: _analytics.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 = (0, _defineProperty2.default)({
+    '–': _analytics.PUNC.DASH,
+    '…': _analytics.PUNC.ELLIPSIS,
+    '”': _analytics.PUNC.QUOTE_DOUBLE
+  }, _analytics.PUNC.QUOTE_SINGLE, _analytics.PUNC.QUOTE_SINGLE);
+  var punctuationRuleWithAnalytics = function punctuationRuleWithAnalytics(punctuation) {
+    return (0, _utils.inputRuleWithAnalytics)({
+      action: _analytics.ACTION.SUBSTITUTED,
+      actionSubject: _analytics.ACTION_SUBJECT.TEXT,
+      actionSubjectId: _analytics.ACTION_SUBJECT_ID.PUNC,
+      eventType: _analytics.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((0, _toConsumableArray2.default)(dashEllipsisRules), (0, _toConsumableArray2.default)(doubleQuoteRules), (0, _toConsumableArray2.default)(singleQuoteRules.map(function (rule) {
+    return punctuationRuleWithAnalytics(_analytics.PUNC.QUOTE_SINGLE)(rule);
+  })));
+}
+var _default = function _default(editorAnalyticsAPI) {
+  return (0, _prosemirrorInputRules.createPlugin)('text-formatting:smart-input', [].concat((0, _toConsumableArray2.default)(getProductRules(editorAnalyticsAPI)), (0, _toConsumableArray2.default)(getSymbolRules(editorAnalyticsAPI)), (0, _toConsumableArray2.default)(getPunctuationRules(editorAnalyticsAPI))));
+};
+exports.default = _default;

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

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ResponsiveCustomMenu = exports.ResponsiveCustomButtonToolbar = exports.DefaultButtonsToolbar = exports.DefaultButtonsMenu = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _types = require("@atlaskit/editor-common/types");
+var _types2 = require("./types");
+var _ResponsiveCustomButt, _ResponsiveCustomMenu;
+var DefaultButtonsToolbar = [_types2.IconTypes.strong, _types2.IconTypes.em];
+exports.DefaultButtonsToolbar = DefaultButtonsToolbar;
+var DefaultButtonsMenu = [_types2.IconTypes.underline, _types2.IconTypes.strike, _types2.IconTypes.code, _types2.IconTypes.subscript, _types2.IconTypes.superscript];
+exports.DefaultButtonsMenu = DefaultButtonsMenu;
+var ResponsiveCustomButtonToolbar = (_ResponsiveCustomButt = {}, (0, _defineProperty2.default)(_ResponsiveCustomButt, _types.ToolbarSize.XXL, DefaultButtonsToolbar), (0, _defineProperty2.default)(_ResponsiveCustomButt, _types.ToolbarSize.XL, DefaultButtonsToolbar), (0, _defineProperty2.default)(_ResponsiveCustomButt, _types.ToolbarSize.L, DefaultButtonsToolbar), (0, _defineProperty2.default)(_ResponsiveCustomButt, _types.ToolbarSize.M, []), (0, _defineProperty2.default)(_ResponsiveCustomButt, _types.ToolbarSize.S, []), (0, _defineProperty2.default)(_ResponsiveCustomButt, _types.ToolbarSize.XXXS, []), _ResponsiveCustomButt);
+exports.ResponsiveCustomButtonToolbar = ResponsiveCustomButtonToolbar;
+var ResponsiveCustomMenu = (_ResponsiveCustomMenu = {}, (0, _defineProperty2.default)(_ResponsiveCustomMenu, _types.ToolbarSize.XXL, DefaultButtonsMenu), (0, _defineProperty2.default)(_ResponsiveCustomMenu, _types.ToolbarSize.XL, DefaultButtonsMenu), (0, _defineProperty2.default)(_ResponsiveCustomMenu, _types.ToolbarSize.L, DefaultButtonsMenu), (0, _defineProperty2.default)(_ResponsiveCustomMenu, _types.ToolbarSize.M, [_types2.IconTypes.strong, _types2.IconTypes.em].concat(DefaultButtonsMenu)), (0, _defineProperty2.default)(_ResponsiveCustomMenu, _types.ToolbarSize.S, [_types2.IconTypes.strong, _types2.IconTypes.em].concat(DefaultButtonsMenu)), (0, _defineProperty2.default)(_ResponsiveCustomMenu, _types.ToolbarSize.XXXS, [_types2.IconTypes.strong, _types2.IconTypes.em].concat(DefaultButtonsMenu)), _ResponsiveCustomMenu);
+exports.ResponsiveCustomMenu = ResponsiveCustomMenu;

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

@@ -0,0 +1,86 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormattingTextDropdownMenu = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _menuState = require("./hooks/menu-state");
+var _moreButton = require("./more-button");
+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 FormattingTextDropdownMenu = /*#__PURE__*/_react.default.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 = (0, _menuState.useMenuState)(),
+    _useMenuState2 = (0, _slicedToArray2.default)(_useMenuState, 3),
+    isMenuOpen = _useMenuState2[0],
+    toggleMenu = _useMenuState2[1],
+    closeMenu = _useMenuState2[2];
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpenedByKeyboard = _useState2[0],
+    setIsOpenedByKeyboard = _useState2[1];
+  var group = (0, _react.useMemo)(function () {
+    return [{
+      items: items
+    }];
+  }, [items]);
+  var onItemActivated = (0, _react.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.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation, {
+    mountTo: popupsMountPoint,
+    onOpenChange: closeMenu,
+    boundariesElement: popupsBoundariesElement,
+    scrollableElement: popupsScrollableElement,
+    onItemActivated: onItemActivated,
+    isOpen: isMenuOpen,
+    items: group,
+    zIndex: _editorSharedStyles.akEditorMenuZIndex,
+    fitHeight: 188,
+    fitWidth: 136,
+    shouldUseDefaultRole: true,
+    shouldFocusFirstItem: function shouldFocusFirstItem() {
+      if (isOpenedByKeyboard) {
+        setIsOpenedByKeyboard(false);
+      }
+      return isOpenedByKeyboard;
+    }
+  }, /*#__PURE__*/_react.default.createElement(_moreButton.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
+  }));
+});
+exports.FormattingTextDropdownMenu = FormattingTextDropdownMenu;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClearIcon = void 0;
+var _react = 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 _clearFormatting = require("../../../commands/clear-formatting");
+var _clearFormatting2 = require("../../../pm-plugins/clear-formatting");
+/** @jsx jsx */
+
+var useClearFormattingPluginState = function useClearFormattingPluginState(editorState) {
+  return (0, _react.useMemo)(function () {
+    return _clearFormatting2.pluginKey.getState(editorState);
+  }, [editorState]);
+};
+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(_messages.toolbarMessages.clearFormatting);
+  var clearFormattingToolbar = (0, _react.useCallback)(function (state, dispatch) {
+    return (0, _clearFormatting.clearFormattingWithAnalytics)(_analytics.INPUT_METHOD.TOOLBAR, editorAnalyticsAPI)(state, dispatch);
+  }, [editorAnalyticsAPI]);
+  return (0, _react.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
+      (0, _react2.jsx)("div", {
+        css: _shortcut.shortcutStyle
+      }, (0, _keymaps.tooltip)(_keymaps.clearFormatting)),
+      value: {
+        name: 'clearFormatting'
+      },
+      isActive: false,
+      isDisabled: !formattingIsPresent,
+      'aria-label': _keymaps.clearFormatting ? (0, _keymaps.tooltip)(_keymaps.clearFormatting, String(clearFormattingLabel)) : String(clearFormattingLabel)
+    };
+  }, [isPluginAvailable, clearFormattingToolbar, clearFormattingLabel, formattingIsPresent]);
+};
+exports.useClearIcon = useClearIcon;