@atlaskit/editor-plugin-text-formatting 2.1.9 → 2.1.10

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-text-formatting
 
+## 2.1.10
+
+### Patch Changes
+
+- [#139159](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139159)
+  [`d839f4396d5c1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d839f4396d5c1) -
+  [ux] Update text formatting dropdown menu icon on primary toolbar
+- Updated dependencies
+
 ## 2.1.9
 
 ### Patch Changes

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

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _messages = require("@atlaskit/editor-common/messages");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dropdownToolbarButton = require("./dropdown-toolbar-button");
 var _menuState = require("./hooks/menu-state");
@@ -18,6 +19,7 @@ var _moreButton = require("./more-button");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
+  var _items$0$items$;
   var editorView = _ref.editorView,
     moreButtonLabel = _ref.moreButtonLabel,
     isReducedSpacing = _ref.isReducedSpacing,
@@ -52,6 +54,7 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
   var activeItem = items[0].items.find(function (item) {
     return item.isActive;
   });
+  var defaultIcon = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') ? (_items$0$items$ = items[0].items[0]) === null || _items$0$items$ === void 0 ? void 0 : _items$0$items$.elemBefore : undefined;
   return /*#__PURE__*/_react.default.createElement(_uiMenu.DropdownMenuWithKeyboardNavigation, {
     mountTo: popupsMountPoint,
     onOpenChange: closeMenu,
@@ -109,6 +112,6 @@ var FormattingTextDropdownMenu = exports.FormattingTextDropdownMenu = /*#__PURE_
       }
     },
     toolbarType: toolbarType,
-    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : undefined
+    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon
   }));
 });

package/dist/cjs/ui/Toolbar/hooks/responsive-toolbar-buttons.js

@@ -5,32 +5,33 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useResponsiveToolbarButtons = exports.useResponsiveIconTypeMenu = exports.useResponsiveIconTypeButtons = void 0;
 var _react = require("react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _constants = require("../constants");
 var _useIconList = require("./use-icon-list");
 var useResponsiveIconTypeButtons = exports.useResponsiveIconTypeButtons = function useResponsiveIconTypeButtons(_ref) {
   var toolbarSize = _ref.toolbarSize,
     responsivenessEnabled = _ref.responsivenessEnabled;
-  var ResponsiveCustomButtonToolbar = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _constants.ResponsiveCustomButtonToolbarNext : _constants.ResponsiveCustomButtonToolbar;
+  var ResponsiveCustomButtonToolbar = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') ? _constants.ResponsiveCustomButtonToolbarNext : _constants.ResponsiveCustomButtonToolbar;
   var iconTypeList = (0, _react.useMemo)(function () {
     return ResponsiveCustomButtonToolbar[toolbarSize];
   }, [toolbarSize, ResponsiveCustomButtonToolbar]);
   if (responsivenessEnabled) {
     return iconTypeList;
   }
-  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _constants.DefaultButtonsToolbarNext : _constants.DefaultButtonsToolbar;
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') ? _constants.DefaultButtonsToolbarNext : _constants.DefaultButtonsToolbar;
 };
 var useResponsiveIconTypeMenu = exports.useResponsiveIconTypeMenu = function useResponsiveIconTypeMenu(_ref2) {
   var toolbarSize = _ref2.toolbarSize,
     responsivenessEnabled = _ref2.responsivenessEnabled;
-  var ResponsiveCustomMenu = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _constants.ResponsiveCustomMenuNext : _constants.ResponsiveCustomMenu;
+  var ResponsiveCustomMenu = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') ? _constants.ResponsiveCustomMenuNext : _constants.ResponsiveCustomMenu;
   var iconTypeList = (0, _react.useMemo)(function () {
     return ResponsiveCustomMenu[toolbarSize];
   }, [toolbarSize, ResponsiveCustomMenu]);
   if (responsivenessEnabled) {
     return iconTypeList;
   }
-  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? _constants.DefaultButtonsMenuNext : _constants.DefaultButtonsMenu;
+  return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') ? _constants.DefaultButtonsMenuNext : _constants.DefaultButtonsMenu;
 };
 var useResponsiveToolbarButtons = exports.useResponsiveToolbarButtons = function useResponsiveToolbarButtons(_ref3) {
   var icons = _ref3.icons,

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

@@ -15,6 +15,7 @@ var _messages = require("@atlaskit/editor-common/messages");
 var _styles = require("@atlaskit/editor-common/styles");
 var _ui = require("@atlaskit/editor-common/ui");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _utils = require("../../editor-commands/utils");
 var _dropdownMenu = require("./dropdown-menu");
 var _clearFormattingIcon = require("./hooks/clear-formatting-icon");
@@ -180,7 +181,7 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
       isReducedSpacing: isReducedSpacing,
       moreButtonLabel: moreFormattingButtonLabel,
       hasFormattingActive: hasFormattingActive,
-      hasMoreButton: true,
+      hasMoreButton: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4') ? false : true,
       items: items,
       intl: intl,
       toolbarType: toolbarType

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

@@ -2,6 +2,7 @@ import React, { useCallback, useState } from 'react';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DropdownToolbarButton } from './dropdown-toolbar-button';
 import { useMenuState } from './hooks/menu-state';
@@ -19,6 +20,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
   intl,
   toolbarType
 }) => {
+  var _items$0$items$;
   const [isMenuOpen, toggleMenu, closeMenu] = useMenuState();
   const [isOpenedByKeyboard, setIsOpenedByKeyboard] = useState(false);
   const onItemActivated = useCallback(({
@@ -33,6 +35,7 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
     }
   }, [editorView.state, editorView.dispatch, closeMenu]);
   const activeItem = items[0].items.find(item => item.isActive);
+  const defaultIcon = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4') ? (_items$0$items$ = items[0].items[0]) === null || _items$0$items$ === void 0 ? void 0 : _items$0$items$.elemBefore : undefined;
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: popupsMountPoint,
     onOpenChange: closeMenu,
@@ -90,6 +93,6 @@ export const FormattingTextDropdownMenu = /*#__PURE__*/React.memo(({
       }
     },
     toolbarType: toolbarType,
-    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : undefined
+    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon
   }));
 });

package/dist/es2019/ui/Toolbar/hooks/responsive-toolbar-buttons.js

@@ -1,4 +1,5 @@
 import { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DefaultButtonsMenu, DefaultButtonsMenuNext, DefaultButtonsToolbar, DefaultButtonsToolbarNext, ResponsiveCustomButtonToolbar as ResponsiveCustomButtonToolbarLegacy, ResponsiveCustomButtonToolbarNext, ResponsiveCustomMenu as ResponsiveCustomMenuLegacy, ResponsiveCustomMenuNext } from '../constants';
 import { useIconList } from './use-icon-list';
@@ -6,23 +7,23 @@ export const useResponsiveIconTypeButtons = ({
   toolbarSize,
   responsivenessEnabled
 }) => {
-  const ResponsiveCustomButtonToolbar = editorExperiment('platform_editor_controls', 'variant1') ? ResponsiveCustomButtonToolbarNext : ResponsiveCustomButtonToolbarLegacy;
+  const ResponsiveCustomButtonToolbar = editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_4') ? ResponsiveCustomButtonToolbarNext : ResponsiveCustomButtonToolbarLegacy;
   const iconTypeList = useMemo(() => ResponsiveCustomButtonToolbar[toolbarSize], [toolbarSize, ResponsiveCustomButtonToolbar]);
   if (responsivenessEnabled) {
     return iconTypeList;
   }
-  return editorExperiment('platform_editor_controls', 'variant1') ? DefaultButtonsToolbarNext : DefaultButtonsToolbar;
+  return editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_4') ? DefaultButtonsToolbarNext : DefaultButtonsToolbar;
 };
 export const useResponsiveIconTypeMenu = ({
   toolbarSize,
   responsivenessEnabled
 }) => {
-  const ResponsiveCustomMenu = editorExperiment('platform_editor_controls', 'variant1') ? ResponsiveCustomMenuNext : ResponsiveCustomMenuLegacy;
+  const ResponsiveCustomMenu = editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_4') ? ResponsiveCustomMenuNext : ResponsiveCustomMenuLegacy;
   const iconTypeList = useMemo(() => ResponsiveCustomMenu[toolbarSize], [toolbarSize, ResponsiveCustomMenu]);
   if (responsivenessEnabled) {
     return iconTypeList;
   }
-  return editorExperiment('platform_editor_controls', 'variant1') ? DefaultButtonsMenuNext : DefaultButtonsMenu;
+  return editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_4') ? DefaultButtonsMenuNext : DefaultButtonsMenu;
 };
 export const useResponsiveToolbarButtons = ({
   icons,

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

@@ -12,6 +12,7 @@ import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { Announcer } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { compareItemsArrays, isArrayContainsContent } from '../../editor-commands/utils';
 import { FormattingTextDropdownMenu } from './dropdown-menu';
 import { useClearIcon } from './hooks/clear-formatting-icon';
@@ -167,7 +168,7 @@ const ToolbarFormatting = ({
       isReducedSpacing: isReducedSpacing,
       moreButtonLabel: moreFormattingButtonLabel,
       hasFormattingActive: hasFormattingActive,
-      hasMoreButton: true,
+      hasMoreButton: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4') ? false : true,
       items: items,
       intl: intl,
       toolbarType: toolbarType

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

@@ -3,11 +3,13 @@ import React, { useCallback, useState } from 'react';
 import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { DropdownMenuWithKeyboardNavigation as DropdownMenu } from '@atlaskit/editor-common/ui-menu';
 import { akEditorMenuZIndex } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DropdownToolbarButton } from './dropdown-toolbar-button';
 import { useMenuState } from './hooks/menu-state';
 import { MoreButton } from './more-button';
 export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref) {
+  var _items$0$items$;
   var editorView = _ref.editorView,
     moreButtonLabel = _ref.moreButtonLabel,
     isReducedSpacing = _ref.isReducedSpacing,
@@ -42,6 +44,7 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
   var activeItem = items[0].items.find(function (item) {
     return item.isActive;
   });
+  var defaultIcon = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4') ? (_items$0$items$ = items[0].items[0]) === null || _items$0$items$ === void 0 ? void 0 : _items$0$items$.elemBefore : undefined;
   return /*#__PURE__*/React.createElement(DropdownMenu, {
     mountTo: popupsMountPoint,
     onOpenChange: closeMenu,
@@ -99,6 +102,6 @@ export var FormattingTextDropdownMenu = /*#__PURE__*/React.memo(function (_ref)
       }
     },
     toolbarType: toolbarType,
-    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : undefined
+    iconBefore: activeItem ? activeItem === null || activeItem === void 0 ? void 0 : activeItem.elemBefore : defaultIcon
   }));
 });

package/dist/esm/ui/Toolbar/hooks/responsive-toolbar-buttons.js

@@ -1,30 +1,31 @@
 import { useMemo } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { DefaultButtonsMenu, DefaultButtonsMenuNext, DefaultButtonsToolbar, DefaultButtonsToolbarNext, ResponsiveCustomButtonToolbar as ResponsiveCustomButtonToolbarLegacy, ResponsiveCustomButtonToolbarNext, ResponsiveCustomMenu as ResponsiveCustomMenuLegacy, ResponsiveCustomMenuNext } from '../constants';
 import { useIconList } from './use-icon-list';
 export var useResponsiveIconTypeButtons = function useResponsiveIconTypeButtons(_ref) {
   var toolbarSize = _ref.toolbarSize,
     responsivenessEnabled = _ref.responsivenessEnabled;
-  var ResponsiveCustomButtonToolbar = editorExperiment('platform_editor_controls', 'variant1') ? ResponsiveCustomButtonToolbarNext : ResponsiveCustomButtonToolbarLegacy;
+  var ResponsiveCustomButtonToolbar = editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_4') ? ResponsiveCustomButtonToolbarNext : ResponsiveCustomButtonToolbarLegacy;
   var iconTypeList = useMemo(function () {
     return ResponsiveCustomButtonToolbar[toolbarSize];
   }, [toolbarSize, ResponsiveCustomButtonToolbar]);
   if (responsivenessEnabled) {
     return iconTypeList;
   }
-  return editorExperiment('platform_editor_controls', 'variant1') ? DefaultButtonsToolbarNext : DefaultButtonsToolbar;
+  return editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_4') ? DefaultButtonsToolbarNext : DefaultButtonsToolbar;
 };
 export var useResponsiveIconTypeMenu = function useResponsiveIconTypeMenu(_ref2) {
   var toolbarSize = _ref2.toolbarSize,
     responsivenessEnabled = _ref2.responsivenessEnabled;
-  var ResponsiveCustomMenu = editorExperiment('platform_editor_controls', 'variant1') ? ResponsiveCustomMenuNext : ResponsiveCustomMenuLegacy;
+  var ResponsiveCustomMenu = editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_4') ? ResponsiveCustomMenuNext : ResponsiveCustomMenuLegacy;
   var iconTypeList = useMemo(function () {
     return ResponsiveCustomMenu[toolbarSize];
   }, [toolbarSize, ResponsiveCustomMenu]);
   if (responsivenessEnabled) {
     return iconTypeList;
   }
-  return editorExperiment('platform_editor_controls', 'variant1') ? DefaultButtonsMenuNext : DefaultButtonsMenu;
+  return editorExperiment('platform_editor_controls', 'variant1') && !fg('platform_editor_controls_patch_4') ? DefaultButtonsMenuNext : DefaultButtonsMenu;
 };
 export var useResponsiveToolbarButtons = function useResponsiveToolbarButtons(_ref3) {
   var icons = _ref3.icons,

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

@@ -14,6 +14,7 @@ import { toolbarMessages } from '@atlaskit/editor-common/messages';
 import { buttonGroupStyle, buttonGroupStyleBeforeVisualRefresh, separatorStyles, wrapperStyle } from '@atlaskit/editor-common/styles';
 import { Announcer } from '@atlaskit/editor-common/ui';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { compareItemsArrays, isArrayContainsContent } from '../../editor-commands/utils';
 import { FormattingTextDropdownMenu } from './dropdown-menu';
 import { useClearIcon } from './hooks/clear-formatting-icon';
@@ -172,7 +173,7 @@ var ToolbarFormatting = function ToolbarFormatting(_ref) {
       isReducedSpacing: isReducedSpacing,
       moreButtonLabel: moreFormattingButtonLabel,
       hasFormattingActive: hasFormattingActive,
-      hasMoreButton: true,
+      hasMoreButton: editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_4') ? false : true,
       items: items,
       intl: intl,
       toolbarType: toolbarType

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-text-formatting",
-	"version": "2.1.9",
+	"version": "2.1.10",
 	"description": "Text-formatting plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,11 +34,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.6.0",
-		"@atlaskit/editor-common": "^103.0.0",
+		"@atlaskit/editor-common": "^103.3.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-base": "^2.3.0",
 		"@atlaskit/editor-plugin-primary-toolbar": "^3.1.0",
-		"@atlaskit/editor-plugin-selection-toolbar": "^3.1.0",
+		"@atlaskit/editor-plugin-selection-toolbar": "^3.3.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.4.0",
 		"@atlaskit/editor-tables": "^2.9.0",
@@ -109,6 +109,9 @@
 		},
 		"editor_inline_comments_on_inline_nodes": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_4": {
+			"type": "boolean"
 		}
 	}
 }