@atlaskit/editor-plugin-text-formatting 3.0.7 → 3.0.9

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-text-formatting
 
+## 3.0.9
+
+### Patch Changes
+
+- [#197019](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/197019)
+  [`96717455eea97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/96717455eea97) -
+  Import keys for toolbar components
+- Updated dependencies
+
+## 3.0.8
+
+### Patch Changes
+
+- [#195899](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/195899)
+  [`345c0b6478f73`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/345c0b6478f73) -
+  [ux] [ED-28682] Register text formatting toolbar component following new toolbar AIFC design
+- Updated dependencies
+
 ## 3.0.7
 
 ### Patch Changes

package/dist/cjs/editor-commands/clear-formatting.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.FORMATTING_NODE_TYPES = exports.FORMATTING_MARK_TYPES = void 0;
 exports.clearFormatting = clearFormatting;
 exports.clearFormattingWithAnalytics = clearFormattingWithAnalytics;
+exports.clearFormattingWithAnalyticsNext = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
@@ -22,9 +23,41 @@ var formatTypes = {
   subsup: 'subsup',
   backgroundColor: _analytics.ACTION_SUBJECT_ID.FORMAT_BACKGROUND_COLOR
 };
+
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required
+/**
+ * Consider removing this function when cleaning up platform_editor–toolbar_aifc
+ * @deprecated use `clearFormattingWithAnalyticsNext` instead, which returns EditorCommand
+ */
 function clearFormattingWithAnalytics(inputMethod, editorAnalyticsAPI) {
   return clearFormatting(inputMethod, editorAnalyticsAPI);
 }
+var clearNodeFormattingOnSelectionNext = function clearNodeFormattingOnSelectionNext(schema, tr, formattedNodeType, nodeName, formattingCleared) {
+  return function (node, pos) {
+    if (node.type === formattedNodeType) {
+      if (formattedNodeType.isTextblock) {
+        tr.setNodeMarkup(pos, schema.nodes.paragraph);
+        formattingCleared.push(nodeName);
+        return false;
+      } else {
+        // In case of panel or blockquote
+        var fromPos = tr.doc.resolve(pos + 1);
+        var toPos = tr.doc.resolve(pos + node.nodeSize - 1);
+        var nodeRange = fromPos.blockRange(toPos);
+        if (nodeRange) {
+          var targetLiftDepth = (0, _transform.liftTarget)(nodeRange);
+          if (targetLiftDepth || targetLiftDepth === 0) {
+            formattingCleared.push(nodeName);
+            // Ignored via go/ees005
+            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+            tr.lift(nodeRange, targetLiftDepth);
+          }
+        }
+      }
+    }
+    return true;
+  };
+};
 function clearNodeFormattingOnSelection(state, tr, formattedNodeType, nodeName, formattingCleared) {
   return function (node, pos) {
     if (node.type === formattedNodeType) {
@@ -110,4 +143,64 @@ function clearFormatting(inputMethod, editorAnalyticsAPI) {
     }
     return true;
   };
-}
+}
+var clearFormattingWithAnalyticsNext = exports.clearFormattingWithAnalyticsNext = function clearFormattingWithAnalyticsNext(editorAnalyticsApi) {
+  return function (inputMethod) {
+    return function (_ref) {
+      var tr = _ref.tr;
+      var formattingCleared = [];
+      var schema = tr.doc.type.schema;
+      FORMATTING_MARK_TYPES.forEach(function (mark) {
+        var _tr$selection3 = tr.selection,
+          from = _tr$selection3.from,
+          to = _tr$selection3.to;
+        var markType = schema.marks[mark];
+        if (!markType) {
+          return;
+        }
+        if (tr.selection instanceof _cellSelection.CellSelection) {
+          (0, _cellSelection2.cellSelectionNodesBetween)(tr.selection, tr.doc, function (node, pos) {
+            var isTableCell = node.type === tr.doc.type.schema.nodes.tableCell || node.type === schema.nodes.tableHeader;
+            if (!isTableCell) {
+              return true;
+            }
+            if (tr.doc.rangeHasMark(pos, pos + node.nodeSize, markType)) {
+              formattingCleared.push(formatTypes[mark]);
+              tr.removeMark(pos, pos + node.nodeSize, markType);
+            }
+            return false;
+          });
+        } else if (tr.doc.rangeHasMark(from, to, markType)) {
+          formattingCleared.push(formatTypes[mark]);
+          tr.removeMark(from, to, markType);
+        }
+      });
+      FORMATTING_NODE_TYPES.forEach(function (nodeName) {
+        var formattedNodeType = schema.nodes[nodeName];
+        var _tr$selection4 = tr.selection,
+          $from = _tr$selection4.$from,
+          $to = _tr$selection4.$to;
+        if (tr.selection instanceof _cellSelection.CellSelection) {
+          (0, _cellSelection2.cellSelectionNodesBetween)(tr.selection, tr.doc, clearNodeFormattingOnSelectionNext(schema, tr, formattedNodeType, nodeName, formattingCleared));
+        } else {
+          tr.doc.nodesBetween($from.pos, $to.pos, clearNodeFormattingOnSelectionNext(schema, tr, formattedNodeType, nodeName, formattingCleared));
+        }
+      });
+      tr.setStoredMarks([]);
+      if (formattingCleared.length && inputMethod) {
+        editorAnalyticsApi === null || editorAnalyticsApi === void 0 || editorAnalyticsApi.attachAnalyticsEvent({
+          action: _analytics.ACTION.FORMATTED,
+          eventType: _analytics.EVENT_TYPE.TRACK,
+          actionSubject: _analytics.ACTION_SUBJECT.TEXT,
+          actionSubjectId: _analytics.ACTION_SUBJECT_ID.FORMAT_CLEAR,
+          attributes: {
+            inputMethod: inputMethod,
+            formattingCleared: formattingCleared,
+            dropdownMenu: inputMethod === _analytics.INPUT_METHOD.TOOLBAR || inputMethod === _analytics.INPUT_METHOD.FLOATING_TB ? 'textFormatting' : undefined
+          }
+        })(tr);
+      }
+      return tr;
+    };
+  };
+};

package/dist/cjs/{pm-plugins/commands.js → editor-commands/toggle-mark.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.toggleUnderlineWithAnalytics = exports.toggleUnderline = exports.toggleSuperscriptWithAnalytics = exports.toggleSuperscript = exports.toggleSubscriptWithAnalytics = exports.toggleSubscript = exports.toggleStrongWithAnalytics = exports.toggleStrong = exports.toggleStrikeWithAnalytics = exports.toggleStrike = exports.toggleEmWithAnalytics = exports.toggleEm = exports.toggleCodeWithAnalytics = exports.toggleCode = void 0;
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _mark = require("@atlaskit/editor-common/mark");
-var _marks = require("../editor-commands/utils/marks");
+var _marks = require("./utils/marks");
 var toggleEm = exports.toggleEm = function toggleEm(_ref) {
   var tr = _ref.tr;
   var em = tr.doc.type.schema.marks.em;

package/dist/cjs/editor-commands/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/pm-plugins/clear-formatting-keymap.js

@@ -11,10 +11,10 @@ var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _clearFormatting = require("../editor-commands/clear-formatting");
 function keymapPlugin(editorAnalyticsAPI) {
   var list = {};
-  (0, _keymaps.bindKeymapWithCommand)(
+  (0, _keymaps.bindKeymapWithEditorCommand)(
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  _keymaps.clearFormatting.common, (0, _clearFormatting.clearFormattingWithAnalytics)(_analytics.INPUT_METHOD.SHORTCUT, editorAnalyticsAPI), list);
+  _keymaps.clearFormatting.common, (0, _clearFormatting.clearFormattingWithAnalyticsNext)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
   return (0, _keymap.keymap)(list);
 }
 var _default = exports.default = keymapPlugin;

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

@@ -9,7 +9,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _keymap = require("@atlaskit/editor-prosemirror/keymap");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _commands = require("./commands");
+var _toggleMark = require("../editor-commands/toggle-mark");
 var _pluginKey = require("./plugin-key");
 function keymapPlugin(schema, editorAnalyticsAPI) {
   var list = {};
@@ -17,43 +17,43 @@ function keymapPlugin(schema, editorAnalyticsAPI) {
     (0, _keymaps.bindKeymapWithEditorCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.toggleBold.common, (0, _commands.toggleStrongWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+    _keymaps.toggleBold.common, (0, _toggleMark.toggleStrongWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
   }
   if (schema.marks.em) {
     (0, _keymaps.bindKeymapWithEditorCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.toggleItalic.common, (0, _commands.toggleEmWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+    _keymaps.toggleItalic.common, (0, _toggleMark.toggleEmWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
   }
   if (schema.marks.code) {
     (0, _keymaps.bindKeymapWithEditorCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.toggleCode.common, (0, _commands.toggleCodeWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+    _keymaps.toggleCode.common, (0, _toggleMark.toggleCodeWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
   }
   if (schema.marks.strike) {
     (0, _keymaps.bindKeymapWithEditorCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.toggleStrikethrough.common, (0, _commands.toggleStrikeWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+    _keymaps.toggleStrikethrough.common, (0, _toggleMark.toggleStrikeWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
   }
   if (schema.marks.subsup) {
     (0, _keymaps.bindKeymapWithEditorCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.toggleSubscript.common, (0, _commands.toggleSubscriptWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+    _keymaps.toggleSubscript.common, (0, _toggleMark.toggleSubscriptWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
   }
   if (schema.marks.subsup) {
     (0, _keymaps.bindKeymapWithEditorCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.toggleSuperscript.common, (0, _commands.toggleSuperscriptWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+    _keymaps.toggleSuperscript.common, (0, _toggleMark.toggleSuperscriptWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
   }
   if (schema.marks.underline) {
     (0, _keymaps.bindKeymapWithEditorCommand)(
     // Ignored via go/ees005
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    _keymaps.toggleUnderline.common, (0, _commands.toggleUnderlineWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+    _keymaps.toggleUnderline.common, (0, _toggleMark.toggleUnderlineWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
   }
   var getEnabledKeylist = function getEnabledKeylist(view) {
     var textFormattingState = _pluginKey.pluginKey.getState(view.state);
@@ -62,43 +62,43 @@ function keymapPlugin(schema, editorAnalyticsAPI) {
       (0, _keymaps.bindKeymapWithEditorCommand)(
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      _keymaps.toggleBold.common, (0, _commands.toggleStrongWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+      _keymaps.toggleBold.common, (0, _toggleMark.toggleStrongWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
     }
     if (schema.marks.em && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.emDisabled)) {
       (0, _keymaps.bindKeymapWithEditorCommand)(
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      _keymaps.toggleItalic.common, (0, _commands.toggleEmWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+      _keymaps.toggleItalic.common, (0, _toggleMark.toggleEmWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
     }
     if (schema.marks.code && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.codeDisabled)) {
       (0, _keymaps.bindKeymapWithEditorCommand)(
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      _keymaps.toggleCode.common, (0, _commands.toggleCodeWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+      _keymaps.toggleCode.common, (0, _toggleMark.toggleCodeWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
     }
     if (schema.marks.strike && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.strikeDisabled)) {
       (0, _keymaps.bindKeymapWithEditorCommand)(
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      _keymaps.toggleStrikethrough.common, (0, _commands.toggleStrikeWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+      _keymaps.toggleStrikethrough.common, (0, _toggleMark.toggleStrikeWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
     }
     if (schema.marks.subsup && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.subscriptDisabled)) {
       (0, _keymaps.bindKeymapWithEditorCommand)(
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      _keymaps.toggleSubscript.common, (0, _commands.toggleSubscriptWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+      _keymaps.toggleSubscript.common, (0, _toggleMark.toggleSubscriptWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
     }
     if (schema.marks.subsup && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.superscriptDisabled)) {
       (0, _keymaps.bindKeymapWithEditorCommand)(
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      _keymaps.toggleSuperscript.common, (0, _commands.toggleSuperscriptWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+      _keymaps.toggleSuperscript.common, (0, _toggleMark.toggleSuperscriptWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
     }
     if (schema.marks.underline && !(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.underlineDisabled)) {
       (0, _keymaps.bindKeymapWithEditorCommand)(
       // Ignored via go/ees005
       // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      _keymaps.toggleUnderline.common, (0, _commands.toggleUnderlineWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
+      _keymaps.toggleUnderline.common, (0, _toggleMark.toggleUnderlineWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.SHORTCUT), list);
     }
     return list;
   };

package/dist/cjs/textFormattingPlugin.js

@@ -9,10 +9,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _toggleMark = require("./editor-commands/toggle-mark");
 var _clearFormatting = require("./pm-plugins/clear-formatting");
 var _clearFormattingKeymap = _interopRequireDefault(require("./pm-plugins/clear-formatting-keymap"));
-var _commands = require("./pm-plugins/commands");
 var _cursor = _interopRequireDefault(require("./pm-plugins/cursor"));
 var _inputRule = _interopRequireDefault(require("./pm-plugins/input-rule"));
 var _keymap = _interopRequireDefault(require("./pm-plugins/keymap"));
@@ -21,6 +22,7 @@ var _pluginKey = require("./pm-plugins/plugin-key");
 var _smartInputRule = _interopRequireDefault(require("./pm-plugins/smart-input-rule"));
 var _FloatingToolbarComponent = require("./ui/FloatingToolbarComponent");
 var _PrimaryToolbarComponent = require("./ui/PrimaryToolbarComponent");
+var _toolbarComponents = require("./ui/toolbar-components");
 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; }
 /**
@@ -28,9 +30,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * from `@atlaskit/editor-core`.
  */
 var textFormattingPlugin = exports.textFormattingPlugin = function textFormattingPlugin(_ref) {
-  var _api$primaryToolbar, _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics0, _api$analytics1, _api$analytics10, _api$analytics11;
+  var _api$analytics7, _api$analytics8, _api$analytics9, _api$analytics0, _api$analytics1, _api$analytics10, _api$analytics11;
   var options = _ref.config,
     api = _ref.api;
+  var isToolbarAIFCEnabled = (0, _expValEquals.expValEquals)('platform_editor_toolbar_aifc', 'isEnabled', true);
   var primaryToolbarComponent = function primaryToolbarComponent(_ref2) {
     var editorView = _ref2.editorView,
       popupsMountPoint = _ref2.popupsMountPoint,
@@ -63,10 +66,16 @@ var textFormattingPlugin = exports.textFormattingPlugin = function textFormattin
       shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu)
     });
   };
-  api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
-    name: 'textFormatting',
-    component: primaryToolbarComponent
-  });
+  if (isToolbarAIFCEnabled) {
+    var _api$toolbar;
+    api === null || api === void 0 || (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 || _api$toolbar.actions.registerComponents((0, _toolbarComponents.getToolbarComponents)(api));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 || (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 || _api$primaryToolbar.actions.registerComponent({
+      name: 'textFormatting',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'textFormatting',
     marks: function marks() {
@@ -148,7 +157,7 @@ var textFormattingPlugin = exports.textFormattingPlugin = function textFormattin
         isInitialised: !!(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.isInitialised)
       });
     },
-    pluginsOptions: {
+    pluginsOptions: isToolbarAIFCEnabled ? {} : {
       selectionToolbar: function selectionToolbar() {
         var _api$userPreferences, _api$selectionToolbar;
         var toolbarDocking = (0, _platformFeatureFlags.fg)('platform_editor_use_preferences_plugin') ? api === null || api === void 0 || (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences === void 0 || (_api$userPreferences = _api$userPreferences.preferences) === null || _api$userPreferences === void 0 ? void 0 : _api$userPreferences.toolbarDockingPosition : api === null || api === void 0 || (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar === void 0 || (_api$selectionToolbar = _api$selectionToolbar.currentState()) === null || _api$selectionToolbar === void 0 ? void 0 : _api$selectionToolbar.toolbarDocking;
@@ -181,15 +190,15 @@ var textFormattingPlugin = exports.textFormattingPlugin = function textFormattin
         }
       }
     },
-    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && !isToolbarAIFCEnabled ? primaryToolbarComponent : undefined,
     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$analytics0 = api.analytics) === null || _api$analytics0 === void 0 ? void 0 : _api$analytics0.actions),
-      toggleUnderline: (0, _commands.toggleUnderlineWithAnalytics)(api === null || api === void 0 || (_api$analytics1 = api.analytics) === null || _api$analytics1 === void 0 ? void 0 : _api$analytics1.actions),
-      toggleEm: (0, _commands.toggleEmWithAnalytics)(api === null || api === void 0 || (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
-      toggleStrong: (0, _commands.toggleStrongWithAnalytics)(api === null || api === void 0 || (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions)
+      toggleSuperscript: (0, _toggleMark.toggleSuperscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics7 = api.analytics) === null || _api$analytics7 === void 0 ? void 0 : _api$analytics7.actions),
+      toggleSubscript: (0, _toggleMark.toggleSubscriptWithAnalytics)(api === null || api === void 0 || (_api$analytics8 = api.analytics) === null || _api$analytics8 === void 0 ? void 0 : _api$analytics8.actions),
+      toggleStrike: (0, _toggleMark.toggleStrikeWithAnalytics)(api === null || api === void 0 || (_api$analytics9 = api.analytics) === null || _api$analytics9 === void 0 ? void 0 : _api$analytics9.actions),
+      toggleCode: (0, _toggleMark.toggleCodeWithAnalytics)(api === null || api === void 0 || (_api$analytics0 = api.analytics) === null || _api$analytics0 === void 0 ? void 0 : _api$analytics0.actions),
+      toggleUnderline: (0, _toggleMark.toggleUnderlineWithAnalytics)(api === null || api === void 0 || (_api$analytics1 = api.analytics) === null || _api$analytics1 === void 0 ? void 0 : _api$analytics1.actions),
+      toggleEm: (0, _toggleMark.toggleEmWithAnalytics)(api === null || api === void 0 || (_api$analytics10 = api.analytics) === null || _api$analytics10 === void 0 ? void 0 : _api$analytics10.actions),
+      toggleStrong: (0, _toggleMark.toggleStrongWithAnalytics)(api === null || api === void 0 || (_api$analytics11 = api.analytics) === null || _api$analytics11 === void 0 ? void 0 : _api$analytics11.actions)
     }
   };
 };

package/dist/cjs/ui/Toolbar/components/Component.js

@@ -0,0 +1,144 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MoreFormattingMenu = exports.FormatMenuItem = exports.FormatButton = exports.ClearFormatMenuItem = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _clearFormatting = require("../../../editor-commands/clear-formatting");
+var _utils = require("./utils");
+var FormatMenuItem = exports.FormatMenuItem = function FormatMenuItem(_ref) {
+  var parents = _ref.parents,
+    api = _ref.api,
+    optionType = _ref.optionType,
+    toggleMarkWithAnalyticsCallback = _ref.toggleMarkWithAnalyticsCallback,
+    icon = _ref.icon,
+    shortcut = _ref.shortcut,
+    title = _ref.title;
+  var _useComponentInfo = (0, _utils.useComponentInfo)({
+      api: api,
+      optionType: optionType,
+      title: title,
+      shortcut: shortcut,
+      toggleMarkWithAnalyticsCallback: toggleMarkWithAnalyticsCallback,
+      parents: parents
+    }),
+    isActive = _useComponentInfo.isActive,
+    isDisabled = _useComponentInfo.isDisabled,
+    isHidden = _useComponentInfo.isHidden,
+    shortcutContent = _useComponentInfo.shortcutContent,
+    onClick = _useComponentInfo.onClick,
+    ariaLabel = _useComponentInfo.ariaLabel,
+    formatTitle = _useComponentInfo.formatTitle;
+  var Icon = icon;
+  if (isHidden) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      label: ""
+    }),
+    elemAfter: shortcutContent && /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: shortcutContent
+    }),
+    isDisabled: isDisabled,
+    isSelected: isActive,
+    onClick: onClick,
+    "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(shortcut),
+    "aria-label": ariaLabel
+  }, formatTitle);
+};
+var FormatButton = exports.FormatButton = function FormatButton(_ref2) {
+  var parents = _ref2.parents,
+    api = _ref2.api,
+    optionType = _ref2.optionType,
+    toggleMarkWithAnalyticsCallback = _ref2.toggleMarkWithAnalyticsCallback,
+    icon = _ref2.icon,
+    shortcut = _ref2.shortcut,
+    title = _ref2.title,
+    _ref2$groupLocation = _ref2.groupLocation,
+    groupLocation = _ref2$groupLocation === void 0 ? 'start' : _ref2$groupLocation;
+  var _useComponentInfo2 = (0, _utils.useComponentInfo)({
+      api: api,
+      optionType: optionType,
+      title: title,
+      shortcut: shortcut,
+      toggleMarkWithAnalyticsCallback: toggleMarkWithAnalyticsCallback,
+      parents: parents
+    }),
+    isActive = _useComponentInfo2.isActive,
+    isDisabled = _useComponentInfo2.isDisabled,
+    onClick = _useComponentInfo2.onClick,
+    ariaLabel = _useComponentInfo2.ariaLabel,
+    formatTitle = _useComponentInfo2.formatTitle;
+  var Icon = icon;
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarTooltip, {
+    content: formatTitle
+  }, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarButton, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(Icon, {
+      label: ariaLabel
+    }),
+    onClick: onClick,
+    isSelected: isActive,
+    isDisabled: isDisabled,
+    groupLocation: groupLocation,
+    ariaKeyshortcuts: (0, _keymaps.getAriaKeyshortcuts)(shortcut)
+  }));
+};
+var ClearFormatMenuItem = exports.ClearFormatMenuItem = function ClearFormatMenuItem(_ref3) {
+  var api = _ref3.api,
+    parents = _ref3.parents;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['textFormatting'], function (states) {
+      var _states$textFormattin, _states$textFormattin2;
+      return {
+        isInitialised: (_states$textFormattin = states.textFormattingState) === null || _states$textFormattin === void 0 ? void 0 : _states$textFormattin.isInitialised,
+        isFormattingPresent: (_states$textFormattin2 = states.textFormattingState) === null || _states$textFormattin2 === void 0 ? void 0 : _states$textFormattin2.formattingIsPresent
+      };
+    }),
+    isInitialised = _useSharedPluginState.isInitialised,
+    isFormattingPresent = _useSharedPluginState.isFormattingPresent;
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  if (!isInitialised) {
+    return null;
+  }
+  var formatTitle = formatMessage(_messages.toolbarMessages.clearFormatting);
+  var shortcutContent = (0, _keymaps.tooltip)(_keymaps.clearFormatting);
+  var ariaLabel = (0, _keymaps.tooltip)(_keymaps.clearFormatting, formatTitle);
+  var onClick = function onClick() {
+    var _api$analytics;
+    api === null || api === void 0 || api.core.actions.execute((0, _clearFormatting.clearFormattingWithAnalyticsNext)(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)((0, _utils.getInputMethodFromParentKeys)(parents)));
+  };
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.ClearFormattingIcon, {
+      label: ""
+    }),
+    elemAfter: shortcutContent && /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarKeyboardShortcutHint, {
+      shortcut: shortcutContent
+    }),
+    isDisabled: !isFormattingPresent,
+    onClick: onClick,
+    "aria-keyshortcuts": (0, _keymaps.getAriaKeyshortcuts)(_keymaps.clearFormatting),
+    "aria-label": ariaLabel
+  }, formatTitle);
+};
+var MoreFormattingMenu = exports.MoreFormattingMenu = function MoreFormattingMenu(_ref4) {
+  var children = _ref4.children,
+    groupLocation = _ref4.groupLocation;
+  var _useIntl2 = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl2.formatMessage;
+  var content = formatMessage(_messages.toolbarMessages.moreFormatting);
+  return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.MoreItemsIcon, {
+      label: content,
+      testId: "more-formatting"
+    }),
+    groupLocation: groupLocation
+  }, children);
+};

package/dist/cjs/ui/Toolbar/components/utils.js

@@ -0,0 +1,136 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useComponentInfo = exports.getInputMethodFromParentKeys = exports.formatOptions = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _reactIntlNext = require("react-intl-next");
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _messages = require("@atlaskit/editor-common/messages");
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _toggleMark = require("../../../editor-commands/toggle-mark");
+var _inputMethodUtils = require("../input-method-utils");
+var _types = require("../types");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getInputMethodFromParentKeys = exports.getInputMethodFromParentKeys = function getInputMethodFromParentKeys(parentKeys) {
+  var _parentKeys$at;
+  return (0, _inputMethodUtils.getInputMethod)(
+  // TODO: ED-28682 - replace with const
+  ((_parentKeys$at = parentKeys.at(-1)) === null || _parentKeys$at === void 0 ? void 0 : _parentKeys$at.key) === 'inline-text-toolbar' ? _types.ToolbarType.FLOATING : _types.ToolbarType.PRIMARY);
+};
+var useComponentInfo = exports.useComponentInfo = function useComponentInfo(_ref) {
+  var api = _ref.api,
+    optionType = _ref.optionType,
+    title = _ref.title,
+    shortcut = _ref.shortcut,
+    toggleMarkWithAnalyticsCallback = _ref.toggleMarkWithAnalyticsCallback,
+    parents = _ref.parents;
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['textFormatting'], function (states) {
+      var _states$textFormattin, _states$textFormattin2, _states$textFormattin3, _states$textFormattin4;
+      return {
+        isActive: (_states$textFormattin = states.textFormattingState) === null || _states$textFormattin === void 0 ? void 0 : _states$textFormattin["".concat(optionType, "Active")],
+        isDisabled: (_states$textFormattin2 = states.textFormattingState) === null || _states$textFormattin2 === void 0 ? void 0 : _states$textFormattin2["".concat(optionType, "Disabled")],
+        isHidden: (_states$textFormattin3 = states.textFormattingState) === null || _states$textFormattin3 === void 0 ? void 0 : _states$textFormattin3["".concat(optionType, "Hidden")],
+        isPluginInitialised: (_states$textFormattin4 = states.textFormattingState) === null || _states$textFormattin4 === void 0 ? void 0 : _states$textFormattin4.isInitialised
+      };
+    }),
+    isActive = _useSharedPluginState.isActive,
+    isDisabled = _useSharedPluginState.isDisabled,
+    isHidden = _useSharedPluginState.isHidden,
+    isPluginInitialised = _useSharedPluginState.isPluginInitialised;
+  var formatOptionState;
+  if (!isPluginInitialised) {
+    formatOptionState = {
+      isActive: false,
+      isDisabled: true,
+      isHidden: false
+    };
+  } else {
+    formatOptionState = {
+      isActive: Boolean(isActive),
+      isDisabled: Boolean(isDisabled),
+      // TODO: ED-28682 - also need to check if mark is present in the schema
+      isHidden: Boolean(isHidden)
+    };
+  }
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  var formatTitle = formatMessage(title);
+  var shortcutContent = (0, _keymaps.tooltip)(shortcut);
+  var ariaLabel = (0, _keymaps.tooltip)(shortcut, formatTitle);
+  var onClick = function onClick() {
+    var _api$analytics;
+    api === null || api === void 0 || api.core.actions.execute(toggleMarkWithAnalyticsCallback(api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(getInputMethodFromParentKeys(parents)));
+  };
+  return _objectSpread(_objectSpread({}, formatOptionState), {}, {
+    formatTitle: formatTitle,
+    shortcutContent: shortcutContent,
+    ariaLabel: ariaLabel || formatTitle,
+    onClick: onClick
+  });
+};
+var formatOptions = exports.formatOptions = function formatOptions() {
+  return {
+    strong: {
+      rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.BOLD_MENU_ITEM.key],
+      key: _toolbar.BOLD_MENU_ITEM.key,
+      icon: _editorToolbar.BoldIcon,
+      title: _messages.toolbarMessages.bold,
+      command: _toggleMark.toggleStrongWithAnalytics,
+      shortcut: _keymaps.toggleBold
+    },
+    em: {
+      rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.ITALIC_MENU_ITEM.key],
+      key: _toolbar.ITALIC_MENU_ITEM.key,
+      icon: _editorToolbar.ItalicIcon,
+      title: _messages.toolbarMessages.italic,
+      command: _toggleMark.toggleEmWithAnalytics,
+      shortcut: _keymaps.toggleItalic
+    },
+    underline: {
+      rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.UNDERLINE_MENU_ITEM.key],
+      key: _toolbar.UNDERLINE_MENU_ITEM.key,
+      icon: _editorToolbar.UnderlineIcon,
+      title: _messages.toolbarMessages.underline,
+      command: _toggleMark.toggleUnderlineWithAnalytics,
+      shortcut: _keymaps.toggleUnderline
+    },
+    strike: {
+      rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.STRIKE_MENU_ITEM.key],
+      key: _toolbar.STRIKE_MENU_ITEM.key,
+      icon: _editorToolbar.StrikeThroughIcon,
+      title: _messages.toolbarMessages.strike,
+      command: _toggleMark.toggleStrikeWithAnalytics,
+      shortcut: _keymaps.toggleStrikethrough
+    },
+    code: {
+      rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.CODE_MENU_ITEM.key],
+      key: _toolbar.CODE_MENU_ITEM.key,
+      icon: _editorToolbar.CodeIcon,
+      title: _messages.toolbarMessages.code,
+      command: _toggleMark.toggleCodeWithAnalytics,
+      shortcut: _keymaps.toggleCode
+    },
+    subscript: {
+      rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.SUBSCRIPT_MENU_ITEM.key],
+      key: _toolbar.SUBSCRIPT_MENU_ITEM.key,
+      icon: _editorToolbar.SubscriptIcon,
+      title: _messages.toolbarMessages.subscript,
+      command: _toggleMark.toggleSubscriptWithAnalytics,
+      shortcut: _keymaps.toggleSubscript
+    },
+    superscript: {
+      rank: _toolbar.TEXT_FORMATTING_MENU_SECTION_RANK[_toolbar.SUPERSCRIPT_MENU_ITEM.key],
+      key: _toolbar.SUPERSCRIPT_MENU_ITEM.key,
+      icon: _editorToolbar.SuperscriptIcon,
+      title: _messages.toolbarMessages.superscript,
+      command: _toggleMark.toggleSuperscriptWithAnalytics,
+      shortcut: _keymaps.toggleSuperscript
+    }
+  };
+};