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

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

@@ -0,0 +1,120 @@
+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 { useIntl } from 'react-intl-next';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
+import { toggleBold, toggleCode, toggleItalic, toggleStrikethrough, toggleSubscript, toggleSuperscript, toggleUnderline, tooltip } from '@atlaskit/editor-common/keymaps';
+import { toolbarMessages } from '@atlaskit/editor-common/messages';
+import { TEXT_FORMAT_OPTION_MENU_RANK } from '@atlaskit/editor-common/toolbar';
+import { BoldIcon, ItalicIcon, UnderlineIcon, CodeIcon, StrikeThroughIcon, SubscriptIcon, SuperscriptIcon } from '@atlaskit/editor-toolbar';
+import { toggleStrongWithAnalytics, toggleEmWithAnalytics, toggleUnderlineWithAnalytics, toggleCodeWithAnalytics, toggleStrikeWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics } from '../../../editor-commands/toggle-mark';
+import { getInputMethod } from '../input-method-utils';
+import { ToolbarType } from '../types';
+export var getInputMethodFromParentKeys = function getInputMethodFromParentKeys(parentKeys) {
+  var _parentKeys$at;
+  return 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' ? ToolbarType.FLOATING : ToolbarType.PRIMARY);
+};
+export var 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 = 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 = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  var formatTitle = formatMessage(title);
+  var shortcutContent = tooltip(shortcut);
+  var ariaLabel = 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
+  });
+};
+export var formatOptions = {
+  strong: {
+    rank: TEXT_FORMAT_OPTION_MENU_RANK.BOLD,
+    icon: BoldIcon,
+    title: toolbarMessages.bold,
+    command: toggleStrongWithAnalytics,
+    shortcut: toggleBold
+  },
+  em: {
+    rank: TEXT_FORMAT_OPTION_MENU_RANK.ITALIC,
+    icon: ItalicIcon,
+    title: toolbarMessages.italic,
+    command: toggleEmWithAnalytics,
+    shortcut: toggleItalic
+  },
+  underline: {
+    rank: TEXT_FORMAT_OPTION_MENU_RANK.UNDERLINE,
+    icon: UnderlineIcon,
+    title: toolbarMessages.underline,
+    command: toggleUnderlineWithAnalytics,
+    shortcut: toggleUnderline
+  },
+  strike: {
+    rank: TEXT_FORMAT_OPTION_MENU_RANK.STRIKETHROUGH,
+    icon: StrikeThroughIcon,
+    title: toolbarMessages.strike,
+    command: toggleStrikeWithAnalytics,
+    shortcut: toggleStrikethrough
+  },
+  code: {
+    rank: TEXT_FORMAT_OPTION_MENU_RANK.CODE,
+    icon: CodeIcon,
+    title: toolbarMessages.code,
+    command: toggleCodeWithAnalytics,
+    shortcut: toggleCode
+  },
+  subscript: {
+    rank: TEXT_FORMAT_OPTION_MENU_RANK.SUBSCRIPT,
+    icon: SubscriptIcon,
+    title: toolbarMessages.subscript,
+    command: toggleSubscriptWithAnalytics,
+    shortcut: toggleSubscript
+  },
+  superscript: {
+    rank: TEXT_FORMAT_OPTION_MENU_RANK.SUPERSCRIPT,
+    icon: SuperscriptIcon,
+    title: toolbarMessages.superscript,
+    command: toggleSuperscriptWithAnalytics,
+    shortcut: toggleSuperscript
+  }
+};

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

@@ -18,7 +18,7 @@ import ItalicIcon from '@atlaskit/icon/core/migration/text-italic--editor-italic
 import TextStrikethroughIcon from '@atlaskit/icon/core/text-strikethrough';
 import UnderlineIcon from '@atlaskit/icon/core/text-underline';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../pm-plugins/commands';
+import { toggleCodeWithAnalytics, toggleEmWithAnalytics, toggleStrikeWithAnalytics, toggleStrongWithAnalytics, toggleSubscriptWithAnalytics, toggleSuperscriptWithAnalytics, toggleUnderlineWithAnalytics } from '../../../editor-commands/toggle-mark';
 import { Subscript, Superscript } from '../icons';
 import { getInputMethod } from '../input-method-utils';
 import { IconTypes } from '../types';

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

@@ -8,6 +8,16 @@ export var IconTypes = /*#__PURE__*/function (IconTypes) {
   IconTypes["superscript"] = "superscript";
   return IconTypes;
 }({});
+export var 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;
+}({});
 export var ToolbarType = /*#__PURE__*/function (ToolbarType) {
   ToolbarType["PRIMARY"] = "primaryToolbar";
   ToolbarType["FLOATING"] = "floatingToolbar";

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

@@ -0,0 +1,123 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React from 'react';
+import { TEXT_FORMAT_CLEAR_MENU_RANK, TEXT_FORMAT_GROUP_RANK, TEXT_FORMAT_MENU_SECTION_RANK, TEXT_SECTION_RANK } from '@atlaskit/editor-common/toolbar';
+import { ToolbarDropdownDivider } from '@atlaskit/editor-toolbar';
+import { FormatMenuItem, FormatButton, ClearFormatMenuItem, MoreFormattingMenu } from './Toolbar/components/Component';
+import { formatOptions } from './Toolbar/components/utils';
+import { FormatOptions } from './Toolbar/types';
+var getFormatMenuItems = function getFormatMenuItems(api) {
+  return Object.entries(formatOptions).map(function (_ref) {
+    var _ref2 = _slicedToArray(_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.createElement(FormatMenuItem, {
+          api: api,
+          parents: parents,
+          icon: icon,
+          shortcut: shortcut,
+          title: title,
+          optionType: optionType,
+          toggleMarkWithAnalyticsCallback: command
+        });
+      }
+    };
+  });
+};
+export var getToolbarComponents = function getToolbarComponents(api) {
+  return [{
+    type: 'group',
+    key: 'text-formatting',
+    parents: [{
+      type: 'section',
+      key: 'text-section',
+      rank: TEXT_SECTION_RANK.FORMAT
+    }]
+  }, {
+    type: 'button',
+    key: 'bold',
+    parents: [{
+      type: 'group',
+      key: 'text-formatting',
+      rank: TEXT_FORMAT_GROUP_RANK.FORMAT_BUTTON
+    }],
+    component: function component(_ref4) {
+      var parents = _ref4.parents;
+      var _formatOptions$strong = formatOptions.strong,
+        icon = _formatOptions$strong.icon,
+        command = _formatOptions$strong.command,
+        shortcut = _formatOptions$strong.shortcut,
+        title = _formatOptions$strong.title;
+      return /*#__PURE__*/React.createElement(FormatButton, {
+        api: api,
+        parents: parents,
+        icon: icon,
+        title: title,
+        shortcut: shortcut,
+        optionType: FormatOptions.strong,
+        toggleMarkWithAnalyticsCallback: command
+      });
+    }
+  }, {
+    type: 'menu',
+    key: 'more-formatting',
+    parents: [{
+      type: 'group',
+      key: 'text-formatting',
+      rank: TEXT_FORMAT_GROUP_RANK.MORE_FORMATTING
+    }],
+    component: function component(_ref5) {
+      var children = _ref5.children,
+        groupLocation = _ref5.groupLocation;
+      return /*#__PURE__*/React.createElement(MoreFormattingMenu, {
+        groupLocation: groupLocation
+      }, children);
+    }
+  }, {
+    type: 'menu-section',
+    key: 'text-formatting-section',
+    parents: [{
+      type: 'menu',
+      key: 'more-formatting',
+      rank: TEXT_FORMAT_MENU_SECTION_RANK.FORMAT_OPTIONS
+    }]
+  }].concat(_toConsumableArray(getFormatMenuItems(api)), [{
+    type: 'menu-section',
+    key: 'clear-formatting-section',
+    parents: [{
+      type: 'menu',
+      key: 'more-formatting',
+      rank: TEXT_FORMAT_MENU_SECTION_RANK.CLEAR_FORMAT
+    }]
+  }, {
+    type: 'menu-item',
+    key: 'clear-formatting',
+    parents: [{
+      type: 'menu-section',
+      key: 'clear-formatting-section',
+      rank: TEXT_FORMAT_CLEAR_MENU_RANK.CLEAR_FORMAT
+    }],
+    component: function component(_ref6) {
+      var parents = _ref6.parents;
+      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ToolbarDropdownDivider, null), /*#__PURE__*/React.createElement(ClearFormatMenuItem, {
+        parents: parents,
+        api: api
+      }));
+    }
+  }]);
+};

package/dist/types/editor-commands/clear-formatting.d.ts

@@ -1,7 +1,13 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
+import type { ClearFormattingWithAnalyticsEditorCommand } from './types';
 export declare const FORMATTING_NODE_TYPES: string[];
 export declare const FORMATTING_MARK_TYPES: string[];
+/**
+ * Consider removing this function when cleaning up platform_editor–toolbar_aifc
+ * @deprecated use `clearFormattingWithAnalyticsNext` instead, which returns EditorCommand
+ */
 export declare function clearFormattingWithAnalytics(inputMethod: INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB, editorAnalyticsAPI: EditorAnalyticsAPI | undefined): Command;
 export declare function clearFormatting(inputMethod?: INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined): Command;
+export declare const clearFormattingWithAnalyticsNext: ClearFormattingWithAnalyticsEditorCommand;

package/dist/{types-ts4.5/pm-plugins/commands.d.ts → types/editor-commands/toggle-mark.d.ts}

@@ -1,8 +1,6 @@
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { EditorCommand, ExtractInjectionAPI, InputMethodBasic } from '@atlaskit/editor-common/types';
+import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { TextFormattingPlugin } from '../textFormattingPluginType';
-type ToggleMarkWithAnalyticsEditorCommand = (editorAnalyticsApi: EditorAnalyticsAPI | undefined, api?: ExtractInjectionAPI<TextFormattingPlugin>) => ToggleMarkEditorCommand;
-export type ToggleMarkEditorCommand = (inputMethod: InputMethodBasic) => EditorCommand;
+import type { ToggleMarkWithAnalyticsEditorCommand } from './types';
 export declare const toggleEm: EditorCommand;
 export declare const toggleEmWithAnalytics: ToggleMarkWithAnalyticsEditorCommand;
 export declare const toggleStrike: EditorCommand;
@@ -19,4 +17,3 @@ export declare const toggleCode: ({ api }: {
     api: ExtractInjectionAPI<TextFormattingPlugin> | undefined;
 }) => EditorCommand;
 export declare const toggleCodeWithAnalytics: ToggleMarkWithAnalyticsEditorCommand;
-export {};

package/dist/types/editor-commands/types.d.ts

@@ -0,0 +1,6 @@
+import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { EditorCommand, ExtractInjectionAPI, InputMethodBasic } from '@atlaskit/editor-common/types';
+import type { TextFormattingPlugin } from '../textFormattingPluginType';
+export type ToggleMarkWithAnalyticsEditorCommand = (editorAnalyticsApi: EditorAnalyticsAPI | undefined, api?: ExtractInjectionAPI<TextFormattingPlugin>) => ToggleMarkEditorCommand;
+export type ToggleMarkEditorCommand = (inputMethod: InputMethodBasic) => EditorCommand;
+export type ClearFormattingWithAnalyticsEditorCommand = (editorAnalyticsApi: EditorAnalyticsAPI | undefined) => (inputMethod: INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB) => EditorCommand;

package/dist/types/index.d.ts

@@ -1,3 +1,3 @@
 export { textFormattingPlugin } from './textFormattingPlugin';
 export type { TextFormattingPlugin, TextFormattingPluginOptions } from './textFormattingPluginType';
-export type { ToggleMarkEditorCommand } from './pm-plugins/commands';
+export type { ToggleMarkEditorCommand } from './editor-commands/types';

package/dist/types/textFormattingPluginType.d.ts

@@ -3,8 +3,9 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BasePlugin } from '@atlaskit/editor-plugin-base';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
-import type { ToggleMarkEditorCommand } from './pm-plugins/commands';
+import type { ToggleMarkEditorCommand } from './editor-commands/types';
 export type TextFormattingPluginOptions = CommonTextFormattingOptions;
 export type TextFormattingPlugin = NextEditorPlugin<'textFormatting', {
     pluginConfiguration: TextFormattingPluginOptions | undefined;
@@ -13,7 +14,8 @@ export type TextFormattingPlugin = NextEditorPlugin<'textFormatting', {
         OptionalPlugin<PrimaryToolbarPlugin>,
         OptionalPlugin<BasePlugin>,
         OptionalPlugin<SelectionToolbarPlugin>,
-        OptionalPlugin<UserPreferencesPlugin>
+        OptionalPlugin<UserPreferencesPlugin>,
+        OptionalPlugin<ToolbarPlugin>
     ];
     commands: {
         toggleSuperscript: ToggleMarkEditorCommand;

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { type ToolbarButtonGroupLocation } from '@atlaskit/editor-toolbar';
+import type { FormatComponentProps } from './utils';
+export declare const FormatMenuItem: ({ parents, api, optionType, toggleMarkWithAnalyticsCallback, icon, shortcut, title, }: FormatComponentProps) => React.JSX.Element | null;
+export declare const FormatButton: ({ parents, api, optionType, toggleMarkWithAnalyticsCallback, icon, shortcut, title, groupLocation, }: FormatComponentProps) => React.JSX.Element;
+export declare const ClearFormatMenuItem: ({ api, parents, }: Pick<FormatComponentProps, 'api' | 'parents'>) => React.JSX.Element | null;
+export declare const MoreFormattingMenu: ({ children, groupLocation, }: {
+    children?: ReactNode;
+    groupLocation?: ToolbarButtonGroupLocation | undefined;
+}) => React.JSX.Element;

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

@@ -0,0 +1,38 @@
+import type { MessageDescriptor } from 'react-intl-next';
+import type { Keymap } from '@atlaskit/editor-common/keymaps';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type IconComponent, type ToolbarButtonGroupLocation } from '@atlaskit/editor-toolbar';
+import type { ComponentTypes } from '@atlaskit/editor-toolbar-model';
+import type { ToggleMarkWithAnalyticsEditorCommand, ClearFormattingWithAnalyticsEditorCommand } from '../../../editor-commands/types';
+import { type TextFormattingPlugin } from '../../../textFormattingPluginType';
+import type { FormatOptions } from '../types';
+export type FormatComponentProps = {
+    api?: ExtractInjectionAPI<TextFormattingPlugin>;
+    parents: ComponentTypes;
+    icon: IconComponent;
+    shortcut: Keymap;
+    title: MessageDescriptor;
+    optionType: string;
+    toggleMarkWithAnalyticsCallback: ToggleMarkWithAnalyticsEditorCommand | ClearFormattingWithAnalyticsEditorCommand;
+    ariaLabel?: string;
+    groupLocation?: ToolbarButtonGroupLocation;
+};
+export declare const getInputMethodFromParentKeys: (parentKeys: ComponentTypes) => import("@atlaskit/editor-common/types").InputMethodToolbar;
+export declare const useComponentInfo: ({ api, optionType, title, shortcut, toggleMarkWithAnalyticsCallback, parents, }: Omit<FormatComponentProps, 'icon' | 'ariaLabel' | 'groupLocation'>) => {
+    formatTitle: string;
+    shortcutContent: string | undefined;
+    ariaLabel: string;
+    onClick: () => void;
+    isActive: boolean;
+    isDisabled: boolean;
+    isHidden: boolean;
+};
+type FormatOptionInfo = {
+    rank: number;
+    icon: IconComponent;
+    title: MessageDescriptor;
+    command: ToggleMarkWithAnalyticsEditorCommand;
+    shortcut: Keymap;
+};
+export declare const formatOptions: Record<FormatOptions, FormatOptionInfo>;
+export {};

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

@@ -12,6 +12,20 @@ export declare enum IconTypes {
     subscript = "subscript",
     superscript = "superscript"
 }
+export declare enum FormatOptions {
+    strong = "strong",
+    em = "em",
+    underline = "underline",
+    strike = "strike",
+    code = "code",
+    subscript = "subscript",
+    superscript = "superscript"
+}
+export type FormatOptionState = {
+    isActive: boolean;
+    isDisabled: boolean;
+    isHidden: boolean;
+};
 export interface MenuIconItem extends MenuItem {
     command: Command;
     iconMark?: IconTypes;

package/dist/types/ui/toolbar-components.d.ts

@@ -0,0 +1,4 @@
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import { type TextFormattingPlugin } from '../textFormattingPluginType';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<TextFormattingPlugin>) => RegisterComponent[];

package/dist/types-ts4.5/editor-commands/clear-formatting.d.ts

@@ -1,7 +1,13 @@
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { Command } from '@atlaskit/editor-common/types';
+import type { ClearFormattingWithAnalyticsEditorCommand } from './types';
 export declare const FORMATTING_NODE_TYPES: string[];
 export declare const FORMATTING_MARK_TYPES: string[];
+/**
+ * Consider removing this function when cleaning up platform_editor–toolbar_aifc
+ * @deprecated use `clearFormattingWithAnalyticsNext` instead, which returns EditorCommand
+ */
 export declare function clearFormattingWithAnalytics(inputMethod: INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB, editorAnalyticsAPI: EditorAnalyticsAPI | undefined): Command;
 export declare function clearFormatting(inputMethod?: INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined): Command;
+export declare const clearFormattingWithAnalyticsNext: ClearFormattingWithAnalyticsEditorCommand;

package/dist/{types/pm-plugins/commands.d.ts → types-ts4.5/editor-commands/toggle-mark.d.ts}

@@ -1,8 +1,6 @@
-import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { EditorCommand, ExtractInjectionAPI, InputMethodBasic } from '@atlaskit/editor-common/types';
+import type { EditorCommand, ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import type { TextFormattingPlugin } from '../textFormattingPluginType';
-type ToggleMarkWithAnalyticsEditorCommand = (editorAnalyticsApi: EditorAnalyticsAPI | undefined, api?: ExtractInjectionAPI<TextFormattingPlugin>) => ToggleMarkEditorCommand;
-export type ToggleMarkEditorCommand = (inputMethod: InputMethodBasic) => EditorCommand;
+import type { ToggleMarkWithAnalyticsEditorCommand } from './types';
 export declare const toggleEm: EditorCommand;
 export declare const toggleEmWithAnalytics: ToggleMarkWithAnalyticsEditorCommand;
 export declare const toggleStrike: EditorCommand;
@@ -19,4 +17,3 @@ export declare const toggleCode: ({ api }: {
     api: ExtractInjectionAPI<TextFormattingPlugin> | undefined;
 }) => EditorCommand;
 export declare const toggleCodeWithAnalytics: ToggleMarkWithAnalyticsEditorCommand;
-export {};

package/dist/types-ts4.5/editor-commands/types.d.ts

@@ -0,0 +1,6 @@
+import type { EditorAnalyticsAPI, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import type { EditorCommand, ExtractInjectionAPI, InputMethodBasic } from '@atlaskit/editor-common/types';
+import type { TextFormattingPlugin } from '../textFormattingPluginType';
+export type ToggleMarkWithAnalyticsEditorCommand = (editorAnalyticsApi: EditorAnalyticsAPI | undefined, api?: ExtractInjectionAPI<TextFormattingPlugin>) => ToggleMarkEditorCommand;
+export type ToggleMarkEditorCommand = (inputMethod: InputMethodBasic) => EditorCommand;
+export type ClearFormattingWithAnalyticsEditorCommand = (editorAnalyticsApi: EditorAnalyticsAPI | undefined) => (inputMethod: INPUT_METHOD.TOOLBAR | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB) => EditorCommand;

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

@@ -1,3 +1,3 @@
 export { textFormattingPlugin } from './textFormattingPlugin';
 export type { TextFormattingPlugin, TextFormattingPluginOptions } from './textFormattingPluginType';
-export type { ToggleMarkEditorCommand } from './pm-plugins/commands';
+export type { ToggleMarkEditorCommand } from './editor-commands/types';

package/dist/types-ts4.5/textFormattingPluginType.d.ts

@@ -3,8 +3,9 @@ import type { AnalyticsPlugin } from '@atlaskit/editor-plugin-analytics';
 import type { BasePlugin } from '@atlaskit/editor-plugin-base';
 import type { PrimaryToolbarPlugin } from '@atlaskit/editor-plugin-primary-toolbar';
 import type { SelectionToolbarPlugin } from '@atlaskit/editor-plugin-selection-toolbar';
+import type { ToolbarPlugin } from '@atlaskit/editor-plugin-toolbar';
 import type { UserPreferencesPlugin } from '@atlaskit/editor-plugin-user-preferences';
-import type { ToggleMarkEditorCommand } from './pm-plugins/commands';
+import type { ToggleMarkEditorCommand } from './editor-commands/types';
 export type TextFormattingPluginOptions = CommonTextFormattingOptions;
 export type TextFormattingPlugin = NextEditorPlugin<'textFormatting', {
     pluginConfiguration: TextFormattingPluginOptions | undefined;
@@ -13,7 +14,8 @@ export type TextFormattingPlugin = NextEditorPlugin<'textFormatting', {
         OptionalPlugin<PrimaryToolbarPlugin>,
         OptionalPlugin<BasePlugin>,
         OptionalPlugin<SelectionToolbarPlugin>,
-        OptionalPlugin<UserPreferencesPlugin>
+        OptionalPlugin<UserPreferencesPlugin>,
+        OptionalPlugin<ToolbarPlugin>
     ];
     commands: {
         toggleSuperscript: ToggleMarkEditorCommand;

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

@@ -0,0 +1,11 @@
+import type { ReactNode } from 'react';
+import React from 'react';
+import { type ToolbarButtonGroupLocation } from '@atlaskit/editor-toolbar';
+import type { FormatComponentProps } from './utils';
+export declare const FormatMenuItem: ({ parents, api, optionType, toggleMarkWithAnalyticsCallback, icon, shortcut, title, }: FormatComponentProps) => React.JSX.Element | null;
+export declare const FormatButton: ({ parents, api, optionType, toggleMarkWithAnalyticsCallback, icon, shortcut, title, groupLocation, }: FormatComponentProps) => React.JSX.Element;
+export declare const ClearFormatMenuItem: ({ api, parents, }: Pick<FormatComponentProps, 'api' | 'parents'>) => React.JSX.Element | null;
+export declare const MoreFormattingMenu: ({ children, groupLocation, }: {
+    children?: ReactNode;
+    groupLocation?: ToolbarButtonGroupLocation | undefined;
+}) => React.JSX.Element;

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

@@ -0,0 +1,38 @@
+import type { MessageDescriptor } from 'react-intl-next';
+import type { Keymap } from '@atlaskit/editor-common/keymaps';
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type IconComponent, type ToolbarButtonGroupLocation } from '@atlaskit/editor-toolbar';
+import type { ComponentTypes } from '@atlaskit/editor-toolbar-model';
+import type { ToggleMarkWithAnalyticsEditorCommand, ClearFormattingWithAnalyticsEditorCommand } from '../../../editor-commands/types';
+import { type TextFormattingPlugin } from '../../../textFormattingPluginType';
+import type { FormatOptions } from '../types';
+export type FormatComponentProps = {
+    api?: ExtractInjectionAPI<TextFormattingPlugin>;
+    parents: ComponentTypes;
+    icon: IconComponent;
+    shortcut: Keymap;
+    title: MessageDescriptor;
+    optionType: string;
+    toggleMarkWithAnalyticsCallback: ToggleMarkWithAnalyticsEditorCommand | ClearFormattingWithAnalyticsEditorCommand;
+    ariaLabel?: string;
+    groupLocation?: ToolbarButtonGroupLocation;
+};
+export declare const getInputMethodFromParentKeys: (parentKeys: ComponentTypes) => import("@atlaskit/editor-common/types").InputMethodToolbar;
+export declare const useComponentInfo: ({ api, optionType, title, shortcut, toggleMarkWithAnalyticsCallback, parents, }: Omit<FormatComponentProps, 'icon' | 'ariaLabel' | 'groupLocation'>) => {
+    formatTitle: string;
+    shortcutContent: string | undefined;
+    ariaLabel: string;
+    onClick: () => void;
+    isActive: boolean;
+    isDisabled: boolean;
+    isHidden: boolean;
+};
+type FormatOptionInfo = {
+    rank: number;
+    icon: IconComponent;
+    title: MessageDescriptor;
+    command: ToggleMarkWithAnalyticsEditorCommand;
+    shortcut: Keymap;
+};
+export declare const formatOptions: Record<FormatOptions, FormatOptionInfo>;
+export {};

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

@@ -12,6 +12,20 @@ export declare enum IconTypes {
     subscript = "subscript",
     superscript = "superscript"
 }
+export declare enum FormatOptions {
+    strong = "strong",
+    em = "em",
+    underline = "underline",
+    strike = "strike",
+    code = "code",
+    subscript = "subscript",
+    superscript = "superscript"
+}
+export type FormatOptionState = {
+    isActive: boolean;
+    isDisabled: boolean;
+    isHidden: boolean;
+};
 export interface MenuIconItem extends MenuItem {
     command: Command;
     iconMark?: IconTypes;

package/dist/types-ts4.5/ui/toolbar-components.d.ts

@@ -0,0 +1,4 @@
+import { type ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { type RegisterComponent } from '@atlaskit/editor-toolbar-model';
+import { type TextFormattingPlugin } from '../textFormattingPluginType';
+export declare const getToolbarComponents: (api?: ExtractInjectionAPI<TextFormattingPlugin>) => RegisterComponent[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-formatting",
-	"version": "3.0.7",
+	"version": "3.0.8",
 	"description": "Text-formatting plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,28 +37,30 @@
 		"@atlaskit/editor-plugin-base": "^4.1.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^4.1.0",
 		"@atlaskit/editor-plugin-selection-toolbar": "^4.2.0",
+		"@atlaskit/editor-plugin-toolbar": "^0.0.5",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.5.0",
 		"@atlaskit/editor-tables": "^2.9.0",
+		"@atlaskit/editor-toolbar": "^0.0.9",
+		"@atlaskit/editor-toolbar-model": "^0.0.4",
 		"@atlaskit/icon": "^27.9.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/prosemirror-input-rules": "^3.3.0",
-		"@atlaskit/tmp-editor-statsig": "^9.22.0",
+		"@atlaskit/prosemirror-input-rules": "^3.4.0",
+		"@atlaskit/tmp-editor-statsig": "^9.24.0",
 		"@atlaskit/tokens": "^6.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^107.16.0",
+		"@atlaskit/editor-common": "^107.17.0",
 		"react": "^18.2.0"
 	},
 	"devDependencies": {
 		"@atlaskit/editor-plugin-composition": "^2.0.0",
 		"@atlaskit/editor-plugin-decorations": "^3.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^2.0.0",
-		"@testing-library/react": "^13.4.0",
-		"typescript": "~5.4.2"
+		"@testing-library/react": "^13.4.0"
 	},
 	"techstack": {
 		"@atlassian/frontend": {