@atlaskit/editor-plugin-text-formatting 0.4.22 → 0.4.24

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-text-formatting
 
+## 0.4.24
+
+### Patch Changes
+
+- Updated dependencies
+
+## 0.4.23
+
+### Patch Changes
+
+- [#67557](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67557) [`124d0c6d5286`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/124d0c6d5286) - Migrating block-type, text-color, and text-formatting to use useSharedPluginState rather than WithPluginState. Removing unused option on default preset. Adding formattingIsPresent prop to TextFormattingState.
+- Updated dependencies
+
 ## 0.4.22
 
 ### Patch Changes

package/dist/cjs/plugin.js

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.textFormattingPlugin = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
-var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _commands = require("./commands");
 var _clearFormatting = require("./pm-plugins/clear-formatting");
 var _clearFormattingKeymap = _interopRequireDefault(require("./pm-plugins/clear-formatting-keymap"));
@@ -16,13 +16,15 @@ var _inputRule = _interopRequireDefault(require("./pm-plugins/input-rule"));
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
 var _main = require("./pm-plugins/main");
 var _smartInputRule = _interopRequireDefault(require("./pm-plugins/smart-input-rule"));
-var _Toolbar = _interopRequireDefault(require("./ui/Toolbar"));
+var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
+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; }
 /**
  * Text formatting plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
  */
 var textFormattingPlugin = exports.textFormattingPlugin = function textFormattingPlugin(_ref) {
-  var _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics10, _api$analytics11, _api$analytics12, _api$analytics13;
+  var _api$analytics6, _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics10, _api$analytics11, _api$analytics12;
   var options = _ref.config,
     api = _ref.api;
   return {
@@ -96,10 +98,13 @@ var textFormattingPlugin = exports.textFormattingPlugin = function textFormattin
       }];
     },
     getSharedState: function getSharedState(editorState) {
+      var _clearFormattingPlugi;
       if (!editorState) {
         return undefined;
       }
-      return _main.pluginKey.getState(editorState);
+      return _objectSpread(_objectSpread({}, _main.pluginKey.getState(editorState)), {}, {
+        formattingIsPresent: (_clearFormattingPlugi = _clearFormatting.pluginKey.getState(editorState)) === null || _clearFormattingPlugi === void 0 ? void 0 : _clearFormattingPlugi.formattingIsPresent
+      });
     },
     primaryToolbarComponent: function primaryToolbarComponent(_ref6) {
       var editorView = _ref6.editorView,
@@ -108,35 +113,25 @@ var textFormattingPlugin = exports.textFormattingPlugin = function textFormattin
         isToolbarReducedSpacing = _ref6.isToolbarReducedSpacing,
         toolbarSize = _ref6.toolbarSize,
         disabled = _ref6.disabled;
-      return /*#__PURE__*/_react.default.createElement(_withPluginState.WithPluginState, {
-        plugins: {
-          textFormattingState: _main.pluginKey,
-          clearFormattingPluginState: _clearFormatting.pluginKey
-        },
-        render: function render() {
-          var _api$analytics6;
-          return /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
-            editorState: editorView.state,
-            popupsMountPoint: popupsMountPoint,
-            popupsScrollableElement: popupsScrollableElement,
-            toolbarSize: toolbarSize,
-            isReducedSpacing: isToolbarReducedSpacing,
-            editorView: editorView,
-            isToolbarDisabled: disabled,
-            shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu),
-            editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions
-          });
-        }
+      return /*#__PURE__*/_react.default.createElement(_PrimaryToolbarComponent.PrimaryToolbarComponent, {
+        api: api,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement,
+        toolbarSize: toolbarSize,
+        isReducedSpacing: isToolbarReducedSpacing,
+        editorView: editorView,
+        disabled: disabled,
+        shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu)
       });
     },
     commands: {
-      toggleSuperscript: (0, _commands.toggleSuperscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
-      toggleSubscript: (0, _commands.toggleSubscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
-      toggleStrike: (0, _commands.toggleStrikeWithAnalytics)(api === null || api === void 0 || (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
-      toggleCode: (0, _commands.toggleCodeWithAnalytics)(api === null || api === void 0 || (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
-      toggleUnderline: (0, _commands.toggleUnderlineWithAnalytics)(api === null || api === void 0 || (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
-      toggleEm: (0, _commands.toggleEmWithAnalytics)(api === null || api === void 0 || (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions),
-      toggleStrong: (0, _commands.toggleStrongWithAnalytics)(api === null || api === void 0 || (_api$analytics13 = api.analytics) === null || _api$analytics13 === void 0 ? void 0 : _api$analytics13.actions)
+      toggleSuperscript: (0, _commands.toggleSuperscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions),
+      toggleSubscript: (0, _commands.toggleSubscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
+      toggleStrike: (0, _commands.toggleStrikeWithAnalytics)(api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
+      toggleCode: (0, _commands.toggleCodeWithAnalytics)(api === null || api === void 0 || (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
+      toggleUnderline: (0, _commands.toggleUnderlineWithAnalytics)(api === null || api === void 0 || (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
+      toggleEm: (0, _commands.toggleEmWithAnalytics)(api === null || api === void 0 || (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
+      toggleStrong: (0, _commands.toggleStrongWithAnalytics)(api === null || api === void 0 || (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions)
     }
   };
 };

package/dist/cjs/ui/PrimaryToolbarComponent.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PrimaryToolbarComponent = PrimaryToolbarComponent;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _Toolbar = _interopRequireDefault(require("./Toolbar"));
+function PrimaryToolbarComponent(_ref) {
+  var _api$analytics;
+  var api = _ref.api,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    toolbarSize = _ref.toolbarSize,
+    editorView = _ref.editorView,
+    disabled = _ref.disabled,
+    isReducedSpacing = _ref.isReducedSpacing,
+    shouldUseResponsiveToolbar = _ref.shouldUseResponsiveToolbar;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['textFormatting']),
+    textFormattingState = _useSharedPluginState.textFormattingState;
+  return /*#__PURE__*/_react.default.createElement(_Toolbar.default, {
+    textFormattingState: textFormattingState,
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    toolbarSize: toolbarSize,
+    isReducedSpacing: isReducedSpacing,
+    editorView: editorView,
+    isToolbarDisabled: disabled,
+    shouldUseResponsiveToolbar: shouldUseResponsiveToolbar,
+    editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+  });
+}

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

@@ -11,21 +11,14 @@ 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 = exports.useClearIcon = function useClearIcon(_ref) {
   var intl = _ref.intl,
-    editorState = _ref.editorState,
+    textFormattingState = _ref.textFormattingState,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI;
-  var pluginState = useClearFormattingPluginState(editorState);
-  var isPluginAvailable = Boolean(pluginState);
-  var formattingIsPresent = Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.formattingIsPresent);
+  var isPluginAvailable = Boolean(textFormattingState);
+  var formattingIsPresent = Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.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);

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

@@ -17,7 +17,6 @@ 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 _commands = require("../../../commands");
-var _pluginKey = require("../../../pm-plugins/plugin-key");
 var _types = require("../types");
 var _IconsMarkSchema;
 /** @jsx jsx */
@@ -115,8 +114,8 @@ var IconsMarkSchema = (_IconsMarkSchema = {}, (0, _defineProperty2.default)(_Ico
 var buildMenuIconState = function buildMenuIconState(iconMark) {
   return function (_ref2) {
     var schema = _ref2.schema,
-      textFormattingPluginState = _ref2.textFormattingPluginState;
-    var hasPluginState = Boolean(Object.keys(textFormattingPluginState || {}).length);
+      textFormattingState = _ref2.textFormattingState;
+    var hasPluginState = Boolean(Object.keys(textFormattingState || {}).length);
     var markSchema = IconsMarkSchema[iconMark];
     var hasSchemaMark = Boolean(schema.marks[markSchema]);
     if (!hasPluginState) {
@@ -127,9 +126,9 @@ var buildMenuIconState = function buildMenuIconState(iconMark) {
         hasSchemaMark: hasSchemaMark
       };
     }
-    var isActive = textFormattingPluginState["".concat(iconMark, "Active")];
-    var isDisabled = textFormattingPluginState["".concat(iconMark, "Disabled")];
-    var isHidden = textFormattingPluginState["".concat(iconMark, "Hidden")];
+    var isActive = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Active")];
+    var isDisabled = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Disabled")];
+    var isHidden = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Hidden")];
     return {
       isActive: Boolean(isActive),
       isDisabled: Boolean(isDisabled),
@@ -142,12 +141,12 @@ var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI) {
   var getState = buildMenuIconState(iconMark);
   return function (_ref3) {
     var schema = _ref3.schema,
-      textFormattingPluginState = _ref3.textFormattingPluginState,
+      textFormattingState = _ref3.textFormattingState,
       intl = _ref3.intl,
       isToolbarDisabled = _ref3.isToolbarDisabled;
     var iconState = getState({
       schema: schema,
-      textFormattingPluginState: textFormattingPluginState
+      textFormattingState: textFormattingState
     });
     var isActive = iconState.isActive,
       isDisabled = iconState.isDisabled,
@@ -168,24 +167,15 @@ var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI) {
     }, [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 = exports.useFormattingIcons = function useFormattingIcons(_ref4) {
   var isToolbarDisabled = _ref4.isToolbarDisabled,
-    editorState = _ref4.editorState,
+    textFormattingState = _ref4.textFormattingState,
+    schema = _ref4.schema,
     intl = _ref4.intl,
     editorAnalyticsAPI = _ref4.editorAnalyticsAPI;
-  var textFormattingPluginState = useTextFormattingPluginState(editorState);
-  var schema = editorState.schema;
   var props = {
     schema: schema,
-    textFormattingPluginState: textFormattingPluginState,
+    textFormattingState: textFormattingState,
     intl: intl,
     isToolbarDisabled: Boolean(isToolbarDisabled)
   };
@@ -209,16 +199,15 @@ var useFormattingIcons = exports.useFormattingIcons = function useFormattingIcon
   return result;
 };
 var useHasFormattingActived = exports.useHasFormattingActived = function useHasFormattingActived(_ref5) {
-  var editorState = _ref5.editorState,
-    iconTypeList = _ref5.iconTypeList;
-  var textFormattingPluginState = useTextFormattingPluginState(editorState);
+  var iconTypeList = _ref5.iconTypeList,
+    textFormattingState = _ref5.textFormattingState;
   var hasActiveFormatting = (0, _react.useMemo)(function () {
-    if (!textFormattingPluginState) {
+    if (!textFormattingState) {
       return false;
     }
     return iconTypeList.some(function (iconType) {
-      return textFormattingPluginState["".concat(iconType, "Active")];
+      return textFormattingState["".concat(iconType, "Active")];
     });
-  }, [textFormattingPluginState, iconTypeList]);
+  }, [textFormattingState, iconTypeList]);
   return hasActiveFormatting;
 };

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

@@ -34,22 +34,21 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     isReducedSpacing = _ref.isReducedSpacing,
     isToolbarDisabled = _ref.isToolbarDisabled,
     intl = _ref.intl,
-    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
-  var editorState = (0, _react.useMemo)(function () {
-    return editorView.state;
-  }, [editorView.state]);
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    textFormattingState = _ref.textFormattingState;
   var _useState = (0, _react.useState)(''),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     message = _useState2[0],
     setMessage = _useState2[1];
   var defaultIcons = (0, _formattingIcons.useFormattingIcons)({
-    editorState: editorState,
+    schema: editorView.state.schema,
     intl: intl,
     isToolbarDisabled: isToolbarDisabled,
-    editorAnalyticsAPI: editorAnalyticsAPI
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    textFormattingState: textFormattingState
   });
   var clearIcon = (0, _clearFormattingIcon.useClearIcon)({
-    editorState: editorState,
+    textFormattingState: textFormattingState,
     intl: intl,
     editorAnalyticsAPI: editorAnalyticsAPI
   });
@@ -58,8 +57,8 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     responsivenessEnabled: shouldUseResponsiveToolbar
   });
   var hasFormattingActive = (0, _formattingIcons.useHasFormattingActived)({
-    editorState: editorView.state,
-    iconTypeList: menuIconTypeList
+    iconTypeList: menuIconTypeList,
+    textFormattingState: textFormattingState
   });
   var _useResponsiveToolbar = (0, _responsiveToolbarButtons.useResponsiveToolbarButtons)({
       icons: defaultIcons,
@@ -166,8 +165,10 @@ var Toolbar = function Toolbar(_ref2) {
     isToolbarDisabled = _ref2.isToolbarDisabled,
     shouldUseResponsiveToolbar = _ref2.shouldUseResponsiveToolbar,
     intl = _ref2.intl,
-    editorAnalyticsAPI = _ref2.editorAnalyticsAPI;
+    editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
+    textFormattingState = _ref2.textFormattingState;
   return (0, _react2.jsx)(ToolbarFormatting, {
+    textFormattingState: textFormattingState,
     popupsMountPoint: popupsMountPoint,
     popupsScrollableElement: popupsScrollableElement,
     toolbarSize: toolbarSize,

package/dist/es2019/plugin.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from './commands';
 import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
 import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
@@ -9,7 +8,7 @@ import textFormattingInputRulePlugin from './pm-plugins/input-rule';
 import keymapPlugin from './pm-plugins/keymap';
 import { plugin as pmPlugin, pluginKey as textFormattingPluginKey } from './pm-plugins/main';
 import textFormattingSmartInputRulePlugin from './pm-plugins/smart-input-rule';
-import Toolbar from './ui/Toolbar';
+import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
 /**
  * Text formatting plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
@@ -18,7 +17,7 @@ export const textFormattingPlugin = ({
   config: options,
   api
 }) => {
-  var _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics10, _api$analytics11, _api$analytics12, _api$analytics13;
+  var _api$analytics6, _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics10, _api$analytics11, _api$analytics12;
   return {
     name: 'textFormatting',
     marks() {
@@ -90,10 +89,14 @@ export const textFormattingPlugin = ({
       }];
     },
     getSharedState(editorState) {
+      var _clearFormattingPlugi;
       if (!editorState) {
         return undefined;
       }
-      return textFormattingPluginKey.getState(editorState);
+      return {
+        ...textFormattingPluginKey.getState(editorState),
+        formattingIsPresent: (_clearFormattingPlugi = clearFormattingPluginKey.getState(editorState)) === null || _clearFormattingPlugi === void 0 ? void 0 : _clearFormattingPlugi.formattingIsPresent
+      };
     },
     primaryToolbarComponent({
       editorView,
@@ -103,35 +106,25 @@ export const textFormattingPlugin = ({
       toolbarSize,
       disabled
     }) {
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          textFormattingState: textFormattingPluginKey,
-          clearFormattingPluginState: clearFormattingPluginKey
-        },
-        render: () => {
-          var _api$analytics6;
-          return /*#__PURE__*/React.createElement(Toolbar, {
-            editorState: editorView.state,
-            popupsMountPoint: popupsMountPoint,
-            popupsScrollableElement: popupsScrollableElement,
-            toolbarSize: toolbarSize,
-            isReducedSpacing: isToolbarReducedSpacing,
-            editorView: editorView,
-            isToolbarDisabled: disabled,
-            shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu),
-            editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions
-          });
-        }
+      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+        api: api,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement,
+        toolbarSize: toolbarSize,
+        isReducedSpacing: isToolbarReducedSpacing,
+        editorView: editorView,
+        disabled: disabled,
+        shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu)
       });
     },
     commands: {
-      toggleSuperscript: toggleSuperscriptWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
-      toggleSubscript: toggleSubscriptWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
-      toggleStrike: toggleStrikeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
-      toggleCode: toggleCodeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
-      toggleUnderline: toggleUnderlineWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
-      toggleEm: toggleEmWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions),
-      toggleStrong: toggleStrongWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics13 = api.analytics) === null || _api$analytics13 === void 0 ? void 0 : _api$analytics13.actions)
+      toggleSuperscript: toggleSuperscriptWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions),
+      toggleSubscript: toggleSubscriptWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
+      toggleStrike: toggleStrikeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
+      toggleCode: toggleCodeWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
+      toggleUnderline: toggleUnderlineWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
+      toggleEm: toggleEmWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
+      toggleStrong: toggleStrongWithAnalytics(api === null || api === void 0 ? void 0 : (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions)
     }
   };
 };

package/dist/es2019/ui/PrimaryToolbarComponent.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import Toolbar from './Toolbar';
+export function PrimaryToolbarComponent({
+  api,
+  popupsMountPoint,
+  popupsScrollableElement,
+  toolbarSize,
+  editorView,
+  disabled,
+  isReducedSpacing,
+  shouldUseResponsiveToolbar
+}) {
+  var _api$analytics;
+  const {
+    textFormattingState
+  } = useSharedPluginState(api, ['textFormatting']);
+  return /*#__PURE__*/React.createElement(Toolbar, {
+    textFormattingState: textFormattingState,
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    toolbarSize: toolbarSize,
+    isReducedSpacing: isReducedSpacing,
+    editorView: editorView,
+    isToolbarDisabled: disabled,
+    shouldUseResponsiveToolbar: shouldUseResponsiveToolbar,
+    editorAnalyticsAPI: api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+  });
+}

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

@@ -6,18 +6,13 @@ import { clearFormatting as clearFormattingKeymap, tooltip } from '@atlaskit/edi
 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';
-const useClearFormattingPluginState = editorState => {
-  return useMemo(() => clearFormattingPluginKey.getState(editorState), [editorState]);
-};
 export const useClearIcon = ({
   intl,
-  editorState,
+  textFormattingState,
   editorAnalyticsAPI
 }) => {
-  const pluginState = useClearFormattingPluginState(editorState);
-  const isPluginAvailable = Boolean(pluginState);
-  const formattingIsPresent = Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.formattingIsPresent);
+  const isPluginAvailable = Boolean(textFormattingState);
+  const formattingIsPresent = Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.formattingIsPresent);
   const clearFormattingLabel = intl.formatMessage(toolbarMessages.clearFormatting);
   const clearFormattingToolbar = useCallback((state, dispatch) => clearFormattingWithAnalytics(INPUT_METHOD.TOOLBAR, editorAnalyticsAPI)(state, dispatch), [editorAnalyticsAPI]);
   return useMemo(() => {

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

@@ -9,7 +9,6 @@ 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 '../../../commands';
-import { pluginKey as textFormattingPluginKey } from '../../../pm-plugins/plugin-key';
 import { IconTypes } from '../types';
 const withToolbarInputMethod = func => editorCommandToPMCommand(func(INPUT_METHOD.TOOLBAR));
 const IconButtons = editorAnalyticsAPI => ({
@@ -105,9 +104,9 @@ const IconsMarkSchema = {
 };
 const buildMenuIconState = iconMark => ({
   schema,
-  textFormattingPluginState
+  textFormattingState
 }) => {
-  const hasPluginState = Boolean(Object.keys(textFormattingPluginState || {}).length);
+  const hasPluginState = Boolean(Object.keys(textFormattingState || {}).length);
   const markSchema = IconsMarkSchema[iconMark];
   const hasSchemaMark = Boolean(schema.marks[markSchema]);
   if (!hasPluginState) {
@@ -118,9 +117,9 @@ const buildMenuIconState = iconMark => ({
       hasSchemaMark
     };
   }
-  const isActive = textFormattingPluginState[`${iconMark}Active`];
-  const isDisabled = textFormattingPluginState[`${iconMark}Disabled`];
-  const isHidden = textFormattingPluginState[`${iconMark}Hidden`];
+  const isActive = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState[`${iconMark}Active`];
+  const isDisabled = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState[`${iconMark}Disabled`];
+  const isHidden = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState[`${iconMark}Hidden`];
   return {
     isActive: Boolean(isActive),
     isDisabled: Boolean(isDisabled),
@@ -132,13 +131,13 @@ const buildIcon = (iconMark, editorAnalyticsAPI) => {
   const getState = buildMenuIconState(iconMark);
   return ({
     schema,
-    textFormattingPluginState,
+    textFormattingState,
     intl,
     isToolbarDisabled
   }) => {
     const iconState = getState({
       schema,
-      textFormattingPluginState
+      textFormattingState
     });
     const {
       isActive,
@@ -157,25 +156,16 @@ const buildIcon = (iconMark, editorAnalyticsAPI) => {
     return useMemo(() => shouldRenderIcon ? iconComponent : null, [shouldRenderIcon, iconComponent]);
   };
 };
-const useTextFormattingPluginState = editorState => useMemo(() => {
-  const 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 const useFormattingIcons = ({
   isToolbarDisabled,
-  editorState,
+  textFormattingState,
+  schema,
   intl,
   editorAnalyticsAPI
 }) => {
-  const textFormattingPluginState = useTextFormattingPluginState(editorState);
-  const {
-    schema
-  } = editorState;
   const props = {
     schema,
-    textFormattingPluginState,
+    textFormattingState,
     intl,
     isToolbarDisabled: Boolean(isToolbarDisabled)
   };
@@ -197,15 +187,14 @@ export const useFormattingIcons = ({
   return result;
 };
 export const useHasFormattingActived = ({
-  editorState,
-  iconTypeList
+  iconTypeList,
+  textFormattingState
 }) => {
-  const textFormattingPluginState = useTextFormattingPluginState(editorState);
   const hasActiveFormatting = useMemo(() => {
-    if (!textFormattingPluginState) {
+    if (!textFormattingState) {
       return false;
     }
-    return iconTypeList.some(iconType => textFormattingPluginState[`${iconType}Active`]);
-  }, [textFormattingPluginState, iconTypeList]);
+    return iconTypeList.some(iconType => textFormattingState[`${iconType}Active`]);
+  }, [textFormattingState, iconTypeList]);
   return hasActiveFormatting;
 };

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

@@ -23,19 +23,20 @@ const ToolbarFormatting = ({
   isReducedSpacing,
   isToolbarDisabled,
   intl,
-  editorAnalyticsAPI
+  editorAnalyticsAPI,
+  textFormattingState
 }) => {
   var _usePreviousState;
-  const editorState = useMemo(() => editorView.state, [editorView.state]);
   const [message, setMessage] = useState('');
   const defaultIcons = useFormattingIcons({
-    editorState,
+    schema: editorView.state.schema,
     intl,
     isToolbarDisabled,
-    editorAnalyticsAPI
+    editorAnalyticsAPI,
+    textFormattingState
   });
   const clearIcon = useClearIcon({
-    editorState,
+    textFormattingState,
     intl,
     editorAnalyticsAPI
   });
@@ -44,8 +45,8 @@ const ToolbarFormatting = ({
     responsivenessEnabled: shouldUseResponsiveToolbar
   });
   const hasFormattingActive = useHasFormattingActived({
-    editorState: editorView.state,
-    iconTypeList: menuIconTypeList
+    iconTypeList: menuIconTypeList,
+    textFormattingState
   });
   const {
     dropdownItems,
@@ -151,9 +152,11 @@ const Toolbar = ({
   isToolbarDisabled,
   shouldUseResponsiveToolbar,
   intl,
-  editorAnalyticsAPI
+  editorAnalyticsAPI,
+  textFormattingState
 }) => {
   return jsx(ToolbarFormatting, {
+    textFormattingState: textFormattingState,
     popupsMountPoint: popupsMountPoint,
     popupsScrollableElement: popupsScrollableElement,
     toolbarSize: toolbarSize,

package/dist/esm/plugin.js

@@ -1,6 +1,8 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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; }
 import React from 'react';
 import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
-import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from './commands';
 import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
 import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
@@ -9,13 +11,13 @@ import textFormattingInputRulePlugin from './pm-plugins/input-rule';
 import keymapPlugin from './pm-plugins/keymap';
 import { plugin as pmPlugin, pluginKey as textFormattingPluginKey } from './pm-plugins/main';
 import textFormattingSmartInputRulePlugin from './pm-plugins/smart-input-rule';
-import Toolbar from './ui/Toolbar';
+import { PrimaryToolbarComponent } from './ui/PrimaryToolbarComponent';
 /**
  * Text formatting plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
  * from `@atlaskit/editor-core`.
  */
 export var textFormattingPlugin = function textFormattingPlugin(_ref) {
-  var _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics10, _api$analytics11, _api$analytics12, _api$analytics13;
+  var _api$analytics6, _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics10, _api$analytics11, _api$analytics12;
   var options = _ref.config,
     api = _ref.api;
   return {
@@ -89,10 +91,13 @@ export var textFormattingPlugin = function textFormattingPlugin(_ref) {
       }];
     },
     getSharedState: function getSharedState(editorState) {
+      var _clearFormattingPlugi;
       if (!editorState) {
         return undefined;
       }
-      return textFormattingPluginKey.getState(editorState);
+      return _objectSpread(_objectSpread({}, textFormattingPluginKey.getState(editorState)), {}, {
+        formattingIsPresent: (_clearFormattingPlugi = clearFormattingPluginKey.getState(editorState)) === null || _clearFormattingPlugi === void 0 ? void 0 : _clearFormattingPlugi.formattingIsPresent
+      });
     },
     primaryToolbarComponent: function primaryToolbarComponent(_ref6) {
       var editorView = _ref6.editorView,
@@ -101,35 +106,25 @@ export var textFormattingPlugin = function textFormattingPlugin(_ref) {
         isToolbarReducedSpacing = _ref6.isToolbarReducedSpacing,
         toolbarSize = _ref6.toolbarSize,
         disabled = _ref6.disabled;
-      return /*#__PURE__*/React.createElement(WithPluginState, {
-        plugins: {
-          textFormattingState: textFormattingPluginKey,
-          clearFormattingPluginState: clearFormattingPluginKey
-        },
-        render: function render() {
-          var _api$analytics6;
-          return /*#__PURE__*/React.createElement(Toolbar, {
-            editorState: editorView.state,
-            popupsMountPoint: popupsMountPoint,
-            popupsScrollableElement: popupsScrollableElement,
-            toolbarSize: toolbarSize,
-            isReducedSpacing: isToolbarReducedSpacing,
-            editorView: editorView,
-            isToolbarDisabled: disabled,
-            shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu),
-            editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions
-          });
-        }
+      return /*#__PURE__*/React.createElement(PrimaryToolbarComponent, {
+        api: api,
+        popupsMountPoint: popupsMountPoint,
+        popupsScrollableElement: popupsScrollableElement,
+        toolbarSize: toolbarSize,
+        isReducedSpacing: isToolbarReducedSpacing,
+        editorView: editorView,
+        disabled: disabled,
+        shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu)
       });
     },
     commands: {
-      toggleSuperscript: toggleSuperscriptWithAnalytics(api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
-      toggleSubscript: toggleSubscriptWithAnalytics(api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
-      toggleStrike: toggleStrikeWithAnalytics(api === null || api === void 0 || (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
-      toggleCode: toggleCodeWithAnalytics(api === null || api === void 0 || (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
-      toggleUnderline: toggleUnderlineWithAnalytics(api === null || api === void 0 || (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
-      toggleEm: toggleEmWithAnalytics(api === null || api === void 0 || (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions),
-      toggleStrong: toggleStrongWithAnalytics(api === null || api === void 0 || (_api$analytics13 = api.analytics) === null || _api$analytics13 === void 0 ? void 0 : _api$analytics13.actions)
+      toggleSuperscript: toggleSuperscriptWithAnalytics(api === null || api === void 0 || (_api$analytics6 = api.analytics) === null || _api$analytics6 === void 0 ? void 0 : _api$analytics6.actions),
+      toggleSubscript: toggleSubscriptWithAnalytics(api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
+      toggleStrike: toggleStrikeWithAnalytics(api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
+      toggleCode: toggleCodeWithAnalytics(api === null || api === void 0 || (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
+      toggleUnderline: toggleUnderlineWithAnalytics(api === null || api === void 0 || (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
+      toggleEm: toggleEmWithAnalytics(api === null || api === void 0 || (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions),
+      toggleStrong: toggleStrongWithAnalytics(api === null || api === void 0 || (_api$analytics12 = api.analytics) === null || _api$analytics12 === void 0 ? void 0 : _api$analytics12.actions)
     }
   };
 };

package/dist/esm/ui/PrimaryToolbarComponent.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import Toolbar from './Toolbar';
+export function PrimaryToolbarComponent(_ref) {
+  var _api$analytics;
+  var api = _ref.api,
+    popupsMountPoint = _ref.popupsMountPoint,
+    popupsScrollableElement = _ref.popupsScrollableElement,
+    toolbarSize = _ref.toolbarSize,
+    editorView = _ref.editorView,
+    disabled = _ref.disabled,
+    isReducedSpacing = _ref.isReducedSpacing,
+    shouldUseResponsiveToolbar = _ref.shouldUseResponsiveToolbar;
+  var _useSharedPluginState = useSharedPluginState(api, ['textFormatting']),
+    textFormattingState = _useSharedPluginState.textFormattingState;
+  return /*#__PURE__*/React.createElement(Toolbar, {
+    textFormattingState: textFormattingState,
+    popupsMountPoint: popupsMountPoint,
+    popupsScrollableElement: popupsScrollableElement,
+    toolbarSize: toolbarSize,
+    isReducedSpacing: isReducedSpacing,
+    editorView: editorView,
+    isToolbarDisabled: disabled,
+    shouldUseResponsiveToolbar: shouldUseResponsiveToolbar,
+    editorAnalyticsAPI: api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions
+  });
+}

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

@@ -6,19 +6,12 @@ import { clearFormatting as clearFormattingKeymap, tooltip } from '@atlaskit/edi
 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,
+    textFormattingState = _ref.textFormattingState,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI;
-  var pluginState = useClearFormattingPluginState(editorState);
-  var isPluginAvailable = Boolean(pluginState);
-  var formattingIsPresent = Boolean(pluginState === null || pluginState === void 0 ? void 0 : pluginState.formattingIsPresent);
+  var isPluginAvailable = Boolean(textFormattingState);
+  var formattingIsPresent = Boolean(textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState.formattingIsPresent);
   var clearFormattingLabel = intl.formatMessage(toolbarMessages.clearFormatting);
   var clearFormattingToolbar = useCallback(function (state, dispatch) {
     return clearFormattingWithAnalytics(INPUT_METHOD.TOOLBAR, editorAnalyticsAPI)(state, dispatch);

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

@@ -11,7 +11,6 @@ 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 '../../../commands';
-import { pluginKey as textFormattingPluginKey } from '../../../pm-plugins/plugin-key';
 import { IconTypes } from '../types';
 var withToolbarInputMethod = function withToolbarInputMethod(func) {
   return editorCommandToPMCommand(func(INPUT_METHOD.TOOLBAR));
@@ -105,8 +104,8 @@ var IconsMarkSchema = (_IconsMarkSchema = {}, _defineProperty(_IconsMarkSchema,
 var buildMenuIconState = function buildMenuIconState(iconMark) {
   return function (_ref2) {
     var schema = _ref2.schema,
-      textFormattingPluginState = _ref2.textFormattingPluginState;
-    var hasPluginState = Boolean(Object.keys(textFormattingPluginState || {}).length);
+      textFormattingState = _ref2.textFormattingState;
+    var hasPluginState = Boolean(Object.keys(textFormattingState || {}).length);
     var markSchema = IconsMarkSchema[iconMark];
     var hasSchemaMark = Boolean(schema.marks[markSchema]);
     if (!hasPluginState) {
@@ -117,9 +116,9 @@ var buildMenuIconState = function buildMenuIconState(iconMark) {
         hasSchemaMark: hasSchemaMark
       };
     }
-    var isActive = textFormattingPluginState["".concat(iconMark, "Active")];
-    var isDisabled = textFormattingPluginState["".concat(iconMark, "Disabled")];
-    var isHidden = textFormattingPluginState["".concat(iconMark, "Hidden")];
+    var isActive = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Active")];
+    var isDisabled = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Disabled")];
+    var isHidden = textFormattingState === null || textFormattingState === void 0 ? void 0 : textFormattingState["".concat(iconMark, "Hidden")];
     return {
       isActive: Boolean(isActive),
       isDisabled: Boolean(isDisabled),
@@ -132,12 +131,12 @@ var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI) {
   var getState = buildMenuIconState(iconMark);
   return function (_ref3) {
     var schema = _ref3.schema,
-      textFormattingPluginState = _ref3.textFormattingPluginState,
+      textFormattingState = _ref3.textFormattingState,
       intl = _ref3.intl,
       isToolbarDisabled = _ref3.isToolbarDisabled;
     var iconState = getState({
       schema: schema,
-      textFormattingPluginState: textFormattingPluginState
+      textFormattingState: textFormattingState
     });
     var isActive = iconState.isActive,
       isDisabled = iconState.isDisabled,
@@ -158,24 +157,15 @@ var buildIcon = function buildIcon(iconMark, editorAnalyticsAPI) {
     }, [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,
+    textFormattingState = _ref4.textFormattingState,
+    schema = _ref4.schema,
     intl = _ref4.intl,
     editorAnalyticsAPI = _ref4.editorAnalyticsAPI;
-  var textFormattingPluginState = useTextFormattingPluginState(editorState);
-  var schema = editorState.schema;
   var props = {
     schema: schema,
-    textFormattingPluginState: textFormattingPluginState,
+    textFormattingState: textFormattingState,
     intl: intl,
     isToolbarDisabled: Boolean(isToolbarDisabled)
   };
@@ -199,16 +189,15 @@ export var useFormattingIcons = function useFormattingIcons(_ref4) {
   return result;
 };
 export var useHasFormattingActived = function useHasFormattingActived(_ref5) {
-  var editorState = _ref5.editorState,
-    iconTypeList = _ref5.iconTypeList;
-  var textFormattingPluginState = useTextFormattingPluginState(editorState);
+  var iconTypeList = _ref5.iconTypeList,
+    textFormattingState = _ref5.textFormattingState;
   var hasActiveFormatting = useMemo(function () {
-    if (!textFormattingPluginState) {
+    if (!textFormattingState) {
       return false;
     }
     return iconTypeList.some(function (iconType) {
-      return textFormattingPluginState["".concat(iconType, "Active")];
+      return textFormattingState["".concat(iconType, "Active")];
     });
-  }, [textFormattingPluginState, iconTypeList]);
+  }, [textFormattingState, iconTypeList]);
   return hasActiveFormatting;
 };

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

@@ -26,22 +26,21 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     isReducedSpacing = _ref.isReducedSpacing,
     isToolbarDisabled = _ref.isToolbarDisabled,
     intl = _ref.intl,
-    editorAnalyticsAPI = _ref.editorAnalyticsAPI;
-  var editorState = useMemo(function () {
-    return editorView.state;
-  }, [editorView.state]);
+    editorAnalyticsAPI = _ref.editorAnalyticsAPI,
+    textFormattingState = _ref.textFormattingState;
   var _useState = useState(''),
     _useState2 = _slicedToArray(_useState, 2),
     message = _useState2[0],
     setMessage = _useState2[1];
   var defaultIcons = useFormattingIcons({
-    editorState: editorState,
+    schema: editorView.state.schema,
     intl: intl,
     isToolbarDisabled: isToolbarDisabled,
-    editorAnalyticsAPI: editorAnalyticsAPI
+    editorAnalyticsAPI: editorAnalyticsAPI,
+    textFormattingState: textFormattingState
   });
   var clearIcon = useClearIcon({
-    editorState: editorState,
+    textFormattingState: textFormattingState,
     intl: intl,
     editorAnalyticsAPI: editorAnalyticsAPI
   });
@@ -50,8 +49,8 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
     responsivenessEnabled: shouldUseResponsiveToolbar
   });
   var hasFormattingActive = useHasFormattingActived({
-    editorState: editorView.state,
-    iconTypeList: menuIconTypeList
+    iconTypeList: menuIconTypeList,
+    textFormattingState: textFormattingState
   });
   var _useResponsiveToolbar = useResponsiveToolbarButtons({
       icons: defaultIcons,
@@ -158,8 +157,10 @@ var Toolbar = function Toolbar(_ref2) {
     isToolbarDisabled = _ref2.isToolbarDisabled,
     shouldUseResponsiveToolbar = _ref2.shouldUseResponsiveToolbar,
     intl = _ref2.intl,
-    editorAnalyticsAPI = _ref2.editorAnalyticsAPI;
+    editorAnalyticsAPI = _ref2.editorAnalyticsAPI,
+    textFormattingState = _ref2.textFormattingState;
   return jsx(ToolbarFormatting, {
+    textFormattingState: textFormattingState,
     popupsMountPoint: popupsMountPoint,
     popupsScrollableElement: popupsScrollableElement,
     toolbarSize: toolbarSize,

package/dist/types/ui/PrimaryToolbarComponent.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI, ToolbarSize } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TextFormattingPlugin } from '../plugin';
+interface PrimaryToolbarComponentProps {
+    api: ExtractInjectionAPI<TextFormattingPlugin> | undefined;
+    editorView: EditorView;
+    popupsMountPoint?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    toolbarSize: ToolbarSize;
+    disabled: boolean;
+    isReducedSpacing: boolean;
+    shouldUseResponsiveToolbar: boolean;
+}
+export declare function PrimaryToolbarComponent({ api, popupsMountPoint, popupsScrollableElement, toolbarSize, editorView, disabled, isReducedSpacing, shouldUseResponsiveToolbar, }: PrimaryToolbarComponentProps): JSX.Element;
+export {};

package/dist/types/ui/Toolbar/hooks/clear-formatting-icon.d.ts

@@ -1,7 +1,9 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { TextFormattingState } from '@atlaskit/editor-common/types';
 import type { IconHookProps, MenuIconItem } from '../types';
 interface ClearIconHookProps extends IconHookProps {
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    textFormattingState: TextFormattingState | undefined;
 }
-export declare const useClearIcon: ({ intl, editorState, editorAnalyticsAPI, }: ClearIconHookProps) => MenuIconItem | null;
+export declare const useClearIcon: ({ intl, textFormattingState, editorAnalyticsAPI, }: ClearIconHookProps) => MenuIconItem | null;
 export {};

package/dist/types/ui/Toolbar/hooks/formatting-icons.d.ts

@@ -1,14 +1,17 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { TextFormattingState } from '@atlaskit/editor-common/types';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { IconHookProps, MenuIconItem } from '../types';
 import { IconTypes } from '../types';
 interface FormattingIconHookProps extends IconHookProps {
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    textFormattingState: TextFormattingState | undefined;
+    schema: Schema;
 }
-export declare const useFormattingIcons: ({ isToolbarDisabled, editorState, intl, editorAnalyticsAPI, }: FormattingIconHookProps) => Array<MenuIconItem | null>;
+export declare const useFormattingIcons: ({ isToolbarDisabled, textFormattingState, schema, intl, editorAnalyticsAPI, }: FormattingIconHookProps) => Array<MenuIconItem | null>;
 type Props = {
-    editorState: EditorState;
+    textFormattingState: TextFormattingState | undefined;
     iconTypeList: IconTypes[];
 };
-export declare const useHasFormattingActived: ({ editorState, iconTypeList, }: Props) => boolean;
+export declare const useHasFormattingActived: ({ iconTypeList, textFormattingState, }: Props) => boolean;
 export {};

package/dist/types/ui/Toolbar/index.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { ToolbarSize } from '@atlaskit/editor-common/types';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { TextFormattingState, ToolbarSize } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export type ToolbarFormattingProps = {
     editorView: EditorView;
@@ -14,12 +13,9 @@ export type ToolbarFormattingProps = {
     popupsBoundariesElement?: HTMLElement;
     popupsScrollableElement?: HTMLElement;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    textFormattingState: TextFormattingState | undefined;
 };
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<ToolbarFormattingProps & WrappedComponentProps<"intl"> & {
-    editorState: EditorState;
-}>> & {
-    WrappedComponent: import("react").ComponentType<ToolbarFormattingProps & WrappedComponentProps<"intl"> & {
-        editorState: EditorState;
-    }>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<ToolbarFormattingProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<ToolbarFormattingProps & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types/ui/Toolbar/types.d.ts

@@ -3,7 +3,6 @@ import type { WrappedComponentProps } from 'react-intl-next';
 import type { TOOLBAR_ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 export declare enum IconTypes {
     strong = "strong",
     em = "em",
@@ -28,5 +27,4 @@ export type MenuIconState = {
 };
 export type IconHookProps = {
     isToolbarDisabled?: boolean;
-    editorState: EditorState;
 } & WrappedComponentProps;

package/dist/types-ts4.5/ui/PrimaryToolbarComponent.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { ExtractInjectionAPI, ToolbarSize } from '@atlaskit/editor-common/types';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { TextFormattingPlugin } from '../plugin';
+interface PrimaryToolbarComponentProps {
+    api: ExtractInjectionAPI<TextFormattingPlugin> | undefined;
+    editorView: EditorView;
+    popupsMountPoint?: HTMLElement;
+    popupsScrollableElement?: HTMLElement;
+    toolbarSize: ToolbarSize;
+    disabled: boolean;
+    isReducedSpacing: boolean;
+    shouldUseResponsiveToolbar: boolean;
+}
+export declare function PrimaryToolbarComponent({ api, popupsMountPoint, popupsScrollableElement, toolbarSize, editorView, disabled, isReducedSpacing, shouldUseResponsiveToolbar, }: PrimaryToolbarComponentProps): JSX.Element;
+export {};

package/dist/types-ts4.5/ui/Toolbar/hooks/clear-formatting-icon.d.ts

@@ -1,7 +1,9 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
+import type { TextFormattingState } from '@atlaskit/editor-common/types';
 import type { IconHookProps, MenuIconItem } from '../types';
 interface ClearIconHookProps extends IconHookProps {
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    textFormattingState: TextFormattingState | undefined;
 }
-export declare const useClearIcon: ({ intl, editorState, editorAnalyticsAPI, }: ClearIconHookProps) => MenuIconItem | null;
+export declare const useClearIcon: ({ intl, textFormattingState, editorAnalyticsAPI, }: ClearIconHookProps) => MenuIconItem | null;
 export {};

package/dist/types-ts4.5/ui/Toolbar/hooks/formatting-icons.d.ts

@@ -1,14 +1,17 @@
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { TextFormattingState } from '@atlaskit/editor-common/types';
+import type { Schema } from '@atlaskit/editor-prosemirror/model';
 import type { IconHookProps, MenuIconItem } from '../types';
 import { IconTypes } from '../types';
 interface FormattingIconHookProps extends IconHookProps {
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined;
+    textFormattingState: TextFormattingState | undefined;
+    schema: Schema;
 }
-export declare const useFormattingIcons: ({ isToolbarDisabled, editorState, intl, editorAnalyticsAPI, }: FormattingIconHookProps) => Array<MenuIconItem | null>;
+export declare const useFormattingIcons: ({ isToolbarDisabled, textFormattingState, schema, intl, editorAnalyticsAPI, }: FormattingIconHookProps) => Array<MenuIconItem | null>;
 type Props = {
-    editorState: EditorState;
+    textFormattingState: TextFormattingState | undefined;
     iconTypeList: IconTypes[];
 };
-export declare const useHasFormattingActived: ({ editorState, iconTypeList, }: Props) => boolean;
+export declare const useHasFormattingActived: ({ iconTypeList, textFormattingState, }: Props) => boolean;
 export {};

package/dist/types-ts4.5/ui/Toolbar/index.d.ts

@@ -1,8 +1,7 @@
 /// <reference types="react" />
 import type { WrappedComponentProps } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { ToolbarSize } from '@atlaskit/editor-common/types';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { TextFormattingState, ToolbarSize } from '@atlaskit/editor-common/types';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 export type ToolbarFormattingProps = {
     editorView: EditorView;
@@ -14,12 +13,9 @@ export type ToolbarFormattingProps = {
     popupsBoundariesElement?: HTMLElement;
     popupsScrollableElement?: HTMLElement;
     editorAnalyticsAPI?: EditorAnalyticsAPI;
+    textFormattingState: TextFormattingState | undefined;
 };
-declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<ToolbarFormattingProps & WrappedComponentProps<"intl"> & {
-    editorState: EditorState;
-}>> & {
-    WrappedComponent: import("react").ComponentType<ToolbarFormattingProps & WrappedComponentProps<"intl"> & {
-        editorState: EditorState;
-    }>;
+declare const _default: import("react").FC<import("react-intl-next").WithIntlProps<ToolbarFormattingProps & WrappedComponentProps<"intl">>> & {
+    WrappedComponent: import("react").ComponentType<ToolbarFormattingProps & WrappedComponentProps<"intl">>;
 };
 export default _default;

package/dist/types-ts4.5/ui/Toolbar/types.d.ts

@@ -3,7 +3,6 @@ import type { WrappedComponentProps } from 'react-intl-next';
 import type { TOOLBAR_ACTION_SUBJECT_ID } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
 import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
-import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 export declare enum IconTypes {
     strong = "strong",
     em = "em",
@@ -28,5 +27,4 @@ export type MenuIconState = {
 };
 export type IconHookProps = {
     isToolbarDisabled?: boolean;
-    editorState: EditorState;
 } & WrappedComponentProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-text-formatting",
-  "version": "0.4.22",
+  "version": "0.4.24",
   "description": "Text-formatting plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -13,7 +13,7 @@
     "releaseModel": "continuous",
     "runReact18": false
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
@@ -33,11 +33,11 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^35.3.0",
-    "@atlaskit/editor-common": "^76.35.0",
+    "@atlaskit/editor-common": "^77.0.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-prosemirror": "1.1.0",
     "@atlaskit/editor-shared-styles": "^2.9.0",
-    "@atlaskit/editor-tables": "^2.3.0",
+    "@atlaskit/editor-tables": "^2.4.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/prosemirror-input-rules": "^2.4.0",
     "@babel/runtime": "^7.0.0",