@atlaskit/editor-plugin-text-formatting 3.0.6 → 3.0.8

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

@@ -19,7 +19,7 @@ var _textItalicEditorItalic = _interopRequireDefault(require("@atlaskit/icon/cor
 var _textStrikethrough = _interopRequireDefault(require("@atlaskit/icon/core/text-strikethrough"));
 var _textUnderline = _interopRequireDefault(require("@atlaskit/icon/core/text-underline"));
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
-var _commands = require("../../../pm-plugins/commands");
+var _toggleMark = require("../../../editor-commands/toggle-mark");
 var _icons = require("../icons");
 var _inputMethodUtils = require("../input-method-utils");
 var _types = require("../types");
@@ -37,7 +37,7 @@ var IconButtons = function IconButtons(editorAnalyticsAPI, toolbarType) {
   return {
     strong: {
       buttonId: _analytics.TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_STRONG,
-      command: withInputMethod(toolbarType, (0, _commands.toggleStrongWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _toggleMark.toggleStrongWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.bold,
       tooltipKeymap: _keymaps.toggleBold,
       component: function component() {
@@ -50,7 +50,7 @@ var IconButtons = function IconButtons(editorAnalyticsAPI, toolbarType) {
     },
     em: {
       buttonId: _analytics.TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_ITALIC,
-      command: withInputMethod(toolbarType, (0, _commands.toggleEmWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _toggleMark.toggleEmWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.italic,
       tooltipKeymap: _keymaps.toggleItalic,
       component: function component() {
@@ -63,7 +63,7 @@ var IconButtons = function IconButtons(editorAnalyticsAPI, toolbarType) {
     },
     underline: {
       buttonId: _analytics.TOOLBAR_ACTION_SUBJECT_ID.TEXT_FORMATTING_UNDERLINE,
-      command: withInputMethod(toolbarType, (0, _commands.toggleUnderlineWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _toggleMark.toggleUnderlineWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.underline,
       tooltipKeymap: _keymaps.toggleUnderline,
       component: function component() {
@@ -75,22 +75,22 @@ var IconButtons = function IconButtons(editorAnalyticsAPI, toolbarType) {
       }
     },
     strike: {
-      command: withInputMethod(toolbarType, (0, _commands.toggleStrikeWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _toggleMark.toggleStrikeWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.strike,
       tooltipKeymap: _keymaps.toggleStrikethrough
     },
     code: {
-      command: withInputMethod(toolbarType, (0, _commands.toggleCodeWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _toggleMark.toggleCodeWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.code,
       tooltipKeymap: _keymaps.toggleCode
     },
     subscript: {
-      command: withInputMethod(toolbarType, (0, _commands.toggleSubscriptWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _toggleMark.toggleSubscriptWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.subscript,
       tooltipKeymap: _keymaps.toggleSubscript
     },
     superscript: {
-      command: withInputMethod(toolbarType, (0, _commands.toggleSuperscriptWithAnalytics)(editorAnalyticsAPI)),
+      command: withInputMethod(toolbarType, (0, _toggleMark.toggleSuperscriptWithAnalytics)(editorAnalyticsAPI)),
       message: _messages.toolbarMessages.superscript,
       tooltipKeymap: _keymaps.toggleSuperscript
     }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ToolbarType = exports.IconTypes = void 0;
+exports.ToolbarType = exports.IconTypes = exports.FormatOptions = void 0;
 var IconTypes = exports.IconTypes = /*#__PURE__*/function (IconTypes) {
   IconTypes["strong"] = "strong";
   IconTypes["em"] = "em";
@@ -14,6 +14,16 @@ var IconTypes = exports.IconTypes = /*#__PURE__*/function (IconTypes) {
   IconTypes["superscript"] = "superscript";
   return IconTypes;
 }({});
+var FormatOptions = exports.FormatOptions = /*#__PURE__*/function (FormatOptions) {
+  FormatOptions["strong"] = "strong";
+  FormatOptions["em"] = "em";
+  FormatOptions["underline"] = "underline";
+  FormatOptions["strike"] = "strike";
+  FormatOptions["code"] = "code";
+  FormatOptions["subscript"] = "subscript";
+  FormatOptions["superscript"] = "superscript";
+  return FormatOptions;
+}({});
 var ToolbarType = exports.ToolbarType = /*#__PURE__*/function (ToolbarType) {
   ToolbarType["PRIMARY"] = "primaryToolbar";
   ToolbarType["FLOATING"] = "floatingToolbar";

package/dist/cjs/ui/toolbar-components.js

@@ -0,0 +1,130 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getToolbarComponents = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+var _toolbar = require("@atlaskit/editor-common/toolbar");
+var _editorToolbar = require("@atlaskit/editor-toolbar");
+var _Component = require("./Toolbar/components/Component");
+var _utils = require("./Toolbar/components/utils");
+var _types = require("./Toolbar/types");
+var getFormatMenuItems = function getFormatMenuItems(api) {
+  return Object.entries(_utils.formatOptions).map(function (_ref) {
+    var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+      optionType = _ref2[0],
+      _ref2$ = _ref2[1],
+      icon = _ref2$.icon,
+      shortcut = _ref2$.shortcut,
+      title = _ref2$.title,
+      command = _ref2$.command,
+      rank = _ref2$.rank;
+    return {
+      type: 'menu-item',
+      key: optionType,
+      parents: [{
+        type: 'menu-section',
+        key: 'text-formatting-section',
+        rank: rank
+      }],
+      component: function component(_ref3) {
+        var parents = _ref3.parents;
+        return /*#__PURE__*/_react.default.createElement(_Component.FormatMenuItem, {
+          api: api,
+          parents: parents,
+          icon: icon,
+          shortcut: shortcut,
+          title: title,
+          optionType: optionType,
+          toggleMarkWithAnalyticsCallback: command
+        });
+      }
+    };
+  });
+};
+var getToolbarComponents = exports.getToolbarComponents = function getToolbarComponents(api) {
+  return [{
+    type: 'group',
+    key: 'text-formatting',
+    parents: [{
+      type: 'section',
+      key: 'text-section',
+      rank: _toolbar.TEXT_SECTION_RANK.FORMAT
+    }]
+  }, {
+    type: 'button',
+    key: 'bold',
+    parents: [{
+      type: 'group',
+      key: 'text-formatting',
+      rank: _toolbar.TEXT_FORMAT_GROUP_RANK.FORMAT_BUTTON
+    }],
+    component: function component(_ref4) {
+      var parents = _ref4.parents;
+      var _formatOptions$strong = _utils.formatOptions.strong,
+        icon = _formatOptions$strong.icon,
+        command = _formatOptions$strong.command,
+        shortcut = _formatOptions$strong.shortcut,
+        title = _formatOptions$strong.title;
+      return /*#__PURE__*/_react.default.createElement(_Component.FormatButton, {
+        api: api,
+        parents: parents,
+        icon: icon,
+        title: title,
+        shortcut: shortcut,
+        optionType: _types.FormatOptions.strong,
+        toggleMarkWithAnalyticsCallback: command
+      });
+    }
+  }, {
+    type: 'menu',
+    key: 'more-formatting',
+    parents: [{
+      type: 'group',
+      key: 'text-formatting',
+      rank: _toolbar.TEXT_FORMAT_GROUP_RANK.MORE_FORMATTING
+    }],
+    component: function component(_ref5) {
+      var children = _ref5.children,
+        groupLocation = _ref5.groupLocation;
+      return /*#__PURE__*/_react.default.createElement(_Component.MoreFormattingMenu, {
+        groupLocation: groupLocation
+      }, children);
+    }
+  }, {
+    type: 'menu-section',
+    key: 'text-formatting-section',
+    parents: [{
+      type: 'menu',
+      key: 'more-formatting',
+      rank: _toolbar.TEXT_FORMAT_MENU_SECTION_RANK.FORMAT_OPTIONS
+    }]
+  }].concat((0, _toConsumableArray2.default)(getFormatMenuItems(api)), [{
+    type: 'menu-section',
+    key: 'clear-formatting-section',
+    parents: [{
+      type: 'menu',
+      key: 'more-formatting',
+      rank: _toolbar.TEXT_FORMAT_MENU_SECTION_RANK.CLEAR_FORMAT
+    }]
+  }, {
+    type: 'menu-item',
+    key: 'clear-formatting',
+    parents: [{
+      type: 'menu-section',
+      key: 'clear-formatting-section',
+      rank: _toolbar.TEXT_FORMAT_CLEAR_MENU_RANK.CLEAR_FORMAT
+    }],
+    component: function component(_ref6) {
+      var parents = _ref6.parents;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownDivider, null), /*#__PURE__*/_react.default.createElement(_Component.ClearFormatMenuItem, {
+        parents: parents,
+        api: api
+      }));
+    }
+  }]);
+};

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

@@ -14,9 +14,41 @@ const formatTypes = {
   subsup: 'subsup',
   backgroundColor: 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
+ */
 export function clearFormattingWithAnalytics(inputMethod, editorAnalyticsAPI) {
   return clearFormatting(inputMethod, editorAnalyticsAPI);
 }
+const 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
+        const fromPos = tr.doc.resolve(pos + 1);
+        const toPos = tr.doc.resolve(pos + node.nodeSize - 1);
+        const nodeRange = fromPos.blockRange(toPos);
+        if (nodeRange) {
+          const targetLiftDepth = 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) {
@@ -106,4 +138,65 @@ export function clearFormatting(inputMethod, editorAnalyticsAPI) {
     }
     return true;
   };
-}
+}
+export const clearFormattingWithAnalyticsNext = editorAnalyticsApi => inputMethod => ({
+  tr
+}) => {
+  const formattingCleared = [];
+  const {
+    schema
+  } = tr.doc.type;
+  FORMATTING_MARK_TYPES.forEach(mark => {
+    const {
+      from,
+      to
+    } = tr.selection;
+    const markType = schema.marks[mark];
+    if (!markType) {
+      return;
+    }
+    if (tr.selection instanceof CellSelection) {
+      cellSelectionNodesBetween(tr.selection, tr.doc, (node, pos) => {
+        const 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(nodeName => {
+    const formattedNodeType = schema.nodes[nodeName];
+    const {
+      $from,
+      $to
+    } = tr.selection;
+    if (tr.selection instanceof CellSelection) {
+      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 ? void 0 : editorAnalyticsApi.attachAnalyticsEvent({
+      action: ACTION.FORMATTED,
+      eventType: EVENT_TYPE.TRACK,
+      actionSubject: ACTION_SUBJECT.TEXT,
+      actionSubjectId: ACTION_SUBJECT_ID.FORMAT_CLEAR,
+      attributes: {
+        inputMethod,
+        formattingCleared,
+        dropdownMenu: inputMethod === INPUT_METHOD.TOOLBAR || inputMethod === INPUT_METHOD.FLOATING_TB ? 'textFormatting' : undefined
+      }
+    })(tr);
+  }
+  return tr;
+};

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

@@ -1,6 +1,6 @@
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { toggleMark } from '@atlaskit/editor-common/mark';
-import { nextToggleMark } from '../editor-commands/utils/marks';
+import { nextToggleMark } from './utils/marks';
 export const toggleEm = ({
   tr
 }) => {

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,13 +1,13 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
-import { bindKeymapWithCommand, clearFormatting } from '@atlaskit/editor-common/keymaps';
+import { bindKeymapWithEditorCommand, clearFormatting } from '@atlaskit/editor-common/keymaps';
 import { keymap } from '@atlaskit/editor-prosemirror/keymap';
-import { clearFormattingWithAnalytics } from '../editor-commands/clear-formatting';
+import { clearFormattingWithAnalyticsNext } from '../editor-commands/clear-formatting';
 export function keymapPlugin(editorAnalyticsAPI) {
   const list = {};
-  bindKeymapWithCommand(
+  bindKeymapWithEditorCommand(
   // Ignored via go/ees005
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-  clearFormatting.common, clearFormattingWithAnalytics(INPUT_METHOD.SHORTCUT, editorAnalyticsAPI), list);
+  clearFormatting.common, clearFormattingWithAnalyticsNext(editorAnalyticsAPI)(INPUT_METHOD.SHORTCUT), list);
   return keymap(list);
 }
 export default keymapPlugin;

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

@@ -3,7 +3,7 @@ import { bindKeymapWithEditorCommand, isCapsLockOnAndModifyKeyboardEvent, toggle
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { keydownHandler } from '@atlaskit/editor-prosemirror/keymap';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from './commands';
+import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../editor-commands/toggle-mark';
 import { pluginKey } from './plugin-key';
 export default function keymapPlugin(schema, editorAnalyticsAPI) {
   const list = {};

package/dist/es2019/textFormattingPlugin.js

@@ -1,10 +1,11 @@
 import React from 'react';
 import { code, em, strike, strong, subsup, underline } from '@atlaskit/adf-schema';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from './editor-commands/toggle-mark';
 import { plugin as clearFormattingPlugin, pluginKey as clearFormattingPluginKey } from './pm-plugins/clear-formatting';
 import clearFormattingKeymapPlugin from './pm-plugins/clear-formatting-keymap';
-import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from './pm-plugins/commands';
 import textFormattingCursorPlugin from './pm-plugins/cursor';
 import textFormattingInputRulePlugin from './pm-plugins/input-rule';
 import keymapPlugin from './pm-plugins/keymap';
@@ -13,6 +14,7 @@ import { pluginKey as textFormattingPluginKey } from './pm-plugins/plugin-key';
 import textFormattingSmartInputRulePlugin from './pm-plugins/smart-input-rule';
 import { FloatingToolbarTextFormalWithIntl as FloatingToolbarComponent } from './ui/FloatingToolbarComponent';
 import { PrimaryToolbarComponent, PrimaryToolbarComponentMemoized } from './ui/PrimaryToolbarComponent';
+import { getToolbarComponents } from './ui/toolbar-components';
 
 /**
  * Text formatting plugin to be added to an `EditorPresetBuilder` and used with `ComposableEditor`
@@ -22,7 +24,8 @@ export const textFormattingPlugin = ({
   config: options,
   api
 }) => {
-  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;
+  const isToolbarAIFCEnabled = expValEquals('platform_editor_toolbar_aifc', 'isEnabled', true);
   const primaryToolbarComponent = ({
     editorView,
     popupsMountPoint,
@@ -56,10 +59,16 @@ export const textFormattingPlugin = ({
       shouldUseResponsiveToolbar: Boolean(options === null || options === void 0 ? void 0 : options.responsiveToolbarMenu)
     });
   };
-  api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
-    name: 'textFormatting',
-    component: primaryToolbarComponent
-  });
+  if (isToolbarAIFCEnabled) {
+    var _api$toolbar;
+    api === null || api === void 0 ? void 0 : (_api$toolbar = api.toolbar) === null || _api$toolbar === void 0 ? void 0 : _api$toolbar.actions.registerComponents(getToolbarComponents(api));
+  } else {
+    var _api$primaryToolbar;
+    api === null || api === void 0 ? void 0 : (_api$primaryToolbar = api.primaryToolbar) === null || _api$primaryToolbar === void 0 ? void 0 : _api$primaryToolbar.actions.registerComponent({
+      name: 'textFormatting',
+      component: primaryToolbarComponent
+    });
+  }
   return {
     name: 'textFormatting',
     marks() {
@@ -142,7 +151,7 @@ export const textFormattingPlugin = ({
         isInitialised: !!(textFormattingState !== null && textFormattingState !== void 0 && textFormattingState.isInitialised)
       };
     },
-    pluginsOptions: {
+    pluginsOptions: isToolbarAIFCEnabled ? {} : {
       selectionToolbar: () => {
         var _api$userPreferences, _api$userPreferences$, _api$userPreferences$2, _api$selectionToolbar, _api$selectionToolbar2, _api$selectionToolbar3;
         const toolbarDocking = fg('platform_editor_use_preferences_plugin') ? api === null || api === void 0 ? void 0 : (_api$userPreferences = api.userPreferences) === null || _api$userPreferences === void 0 ? void 0 : (_api$userPreferences$ = _api$userPreferences.sharedState.currentState()) === null || _api$userPreferences$ === void 0 ? void 0 : (_api$userPreferences$2 = _api$userPreferences$.preferences) === null || _api$userPreferences$2 === void 0 ? void 0 : _api$userPreferences$2.toolbarDockingPosition : api === null || api === void 0 ? void 0 : (_api$selectionToolbar = api.selectionToolbar) === null || _api$selectionToolbar === void 0 ? void 0 : (_api$selectionToolbar2 = _api$selectionToolbar.sharedState) === null || _api$selectionToolbar2 === void 0 ? void 0 : (_api$selectionToolbar3 = _api$selectionToolbar2.currentState()) === null || _api$selectionToolbar3 === void 0 ? void 0 : _api$selectionToolbar3.toolbarDocking;
@@ -175,7 +184,7 @@ export const textFormattingPlugin = ({
         }
       }
     },
-    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) ? primaryToolbarComponent : undefined,
+    primaryToolbarComponent: !(api !== null && api !== void 0 && api.primaryToolbar) && !isToolbarAIFCEnabled ? primaryToolbarComponent : undefined,
     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),

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

@@ -0,0 +1,145 @@
+import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { clearFormatting, getAriaKeyshortcuts, tooltip } from '@atlaskit/editor-common/keymaps';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { ToolbarButton, ToolbarDropdownItem, ClearFormattingIcon, ToolbarKeyboardShortcutHint, ToolbarDropdownMenu, MoreItemsIcon, ToolbarTooltip } from '@atlaskit/editor-toolbar';
+import { clearFormattingWithAnalyticsNext } from '../../../editor-commands/clear-formatting';
+import { getInputMethodFromParentKeys, useComponentInfo } from './utils';
+export const FormatMenuItem = ({
+  parents,
+  api,
+  optionType,
+  toggleMarkWithAnalyticsCallback,
+  icon,
+  shortcut,
+  title
+}) => {
+  const {
+    isActive,
+    isDisabled,
+    isHidden,
+    shortcutContent,
+    onClick,
+    ariaLabel,
+    formatTitle
+  } = useComponentInfo({
+    api,
+    optionType,
+    title,
+    shortcut,
+    toggleMarkWithAnalyticsCallback,
+    parents
+  });
+  const Icon = icon;
+  if (isHidden) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: ""
+    }),
+    elemAfter: shortcutContent && /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: shortcutContent
+    }),
+    isDisabled: isDisabled,
+    isSelected: isActive,
+    onClick: onClick,
+    "aria-keyshortcuts": getAriaKeyshortcuts(shortcut),
+    "aria-label": ariaLabel
+  }, formatTitle);
+};
+export const FormatButton = ({
+  parents,
+  api,
+  optionType,
+  toggleMarkWithAnalyticsCallback,
+  icon,
+  shortcut,
+  title,
+  groupLocation = 'start'
+}) => {
+  const {
+    isActive,
+    isDisabled,
+    onClick,
+    ariaLabel,
+    formatTitle
+  } = useComponentInfo({
+    api,
+    optionType,
+    title,
+    shortcut,
+    toggleMarkWithAnalyticsCallback,
+    parents
+  });
+  const Icon = icon;
+  return /*#__PURE__*/React.createElement(ToolbarTooltip, {
+    content: formatTitle
+  }, /*#__PURE__*/React.createElement(ToolbarButton, {
+    iconBefore: /*#__PURE__*/React.createElement(Icon, {
+      label: ariaLabel
+    }),
+    onClick: onClick,
+    isSelected: isActive,
+    isDisabled: isDisabled,
+    groupLocation: groupLocation,
+    ariaKeyshortcuts: getAriaKeyshortcuts(shortcut)
+  }));
+};
+export const ClearFormatMenuItem = ({
+  api,
+  parents
+}) => {
+  const {
+    isInitialised,
+    isFormattingPresent
+  } = useSharedPluginStateWithSelector(api, ['textFormatting'], 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
+    };
+  });
+  const {
+    formatMessage
+  } = useIntl();
+  if (!isInitialised) {
+    return null;
+  }
+  const formatTitle = formatMessage(toolbarMessages.clearFormatting);
+  const shortcutContent = tooltip(clearFormatting);
+  const ariaLabel = tooltip(clearFormatting, formatTitle);
+  const onClick = () => {
+    var _api$analytics;
+    api === null || api === void 0 ? void 0 : api.core.actions.execute(clearFormattingWithAnalyticsNext(api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions)(getInputMethodFromParentKeys(parents)));
+  };
+  return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
+    elemBefore: /*#__PURE__*/React.createElement(ClearFormattingIcon, {
+      label: ""
+    }),
+    elemAfter: shortcutContent && /*#__PURE__*/React.createElement(ToolbarKeyboardShortcutHint, {
+      shortcut: shortcutContent
+    }),
+    isDisabled: !isFormattingPresent,
+    onClick: onClick,
+    "aria-keyshortcuts": getAriaKeyshortcuts(clearFormatting),
+    "aria-label": ariaLabel
+  }, formatTitle);
+};
+export const MoreFormattingMenu = ({
+  children,
+  groupLocation
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  const content = formatMessage(toolbarMessages.moreFormatting);
+  return /*#__PURE__*/React.createElement(ToolbarDropdownMenu, {
+    iconBefore: /*#__PURE__*/React.createElement(MoreItemsIcon, {
+      label: content,
+      testId: "more-formatting"
+    }),
+    groupLocation: groupLocation
+  }, children);
+};