@atlaskit/editor-plugin-media 6.1.0 → 6.2.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/editor-plugin-media
 
+## 6.2.0
+
+### Minor Changes
+
+- [`c0113eeccb2df`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c0113eeccb2df) -
+  [ux] ED-29120 add a new config option for default editor preset
+  (`toolbar.enableNewToolbarExperience`) which allows the new toolbar to be disabled. This is needed
+  for editors that can't be excluded at the experiment level.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 6.1.0
 
 ### Minor Changes

package/dist/cjs/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -18,6 +18,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _media = require("@atlaskit/editor-common/media");
+var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _ui = require("@atlaskit/editor-common/ui");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _chevronLeftChevronLeftLarge = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-left--chevron-left-large"));
@@ -181,6 +182,7 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
   }, {
     key: "render",
     value: function render() {
+      var _this$props$areAnyNew, _this$props$areAnyNew2;
       var formatMessage = this.props.intl.formatMessage;
       var showClearTextButton = this.state.showClearTextButton;
       var backButtonMessage = formatMessage(_media.altTextMessages.back);
@@ -211,7 +213,8 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
           size: "small"
         }),
         tooltipContent: backButtonMessageComponent,
-        onClick: this.closeMediaAltTextMenu
+        onClick: this.closeMediaAltTextMenu,
+        areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew !== void 0 ? _this$props$areAnyNew : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()
       })), (0, _react2.jsx)(_ui.PanelTextInput, {
         testId: "alt-text-input",
         ariaLabel: formatMessage(_media.altTextMessages.placeholder),
@@ -237,7 +240,8 @@ var AltTextEditComponent = exports.AltTextEditComponent = /*#__PURE__*/function
           label: formatMessage(_media.altTextMessages.clear)
         })),
         tooltipContent: formatMessage(_media.altTextMessages.clear),
-        onClick: this.handleClearText
+        onClick: this.handleClearText,
+        areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew2 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew2 !== void 0 ? _this$props$areAnyNew2 : (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()
       }))), hasErrors && (0, _react2.jsx)("section", {
         id: "errors-list",
         ref: this.errorsListRef,

package/dist/cjs/ui/MediaLinkingToolbar.js

@@ -141,7 +141,8 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
                 inputMethod: currentInputMethod
               }, true);
             }
-          }
+          },
+          areAnyNewToolbarFlagsEnabled: _this.props.areAnyNewToolbarFlagsEnabled
         })), (0, _react2.jsx)(_ui.PanelTextInput, {
           inputId: "media-link-search-input",
           testId: "media-link-input",
@@ -168,7 +169,9 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
         }), (0, _react2.jsx)("label", {
           className: "assistive",
           htmlFor: "media-link-search-input"
-        }, formatMessage(_messages.linkToolbarMessages.searchInput)), (0, _utils.normalizeUrl)(displayUrl) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
+        }, formatMessage(_messages.linkToolbarMessages.searchInput)), (0, _utils.normalizeUrl)(displayUrl) && (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
+          areAnyNewToolbarFlagsEnabled: _this.props.areAnyNewToolbarFlagsEnabled
+        }), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
           title: formatUnlinkText,
           icon: (0, _react2.jsx)(_linkBrokenEditorUnlink.default, {
             label: formatUnlinkText
@@ -181,7 +184,8 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
               event.preventDefault();
               _this.handleUnlink(true);
             }
-          }
+          },
+          areAnyNewToolbarFlagsEnabled: _this.props.areAnyNewToolbarFlagsEnabled
         }))), !!errorsList.length && (0, _react2.jsx)("section", {
           css: validationWrapper
         }, errorsList), renderRecentList()))

package/dist/cjs/ui/toolbar/alt-text.js

@@ -77,7 +77,8 @@ var altTextEditComponent = function altTextEditComponent(options) {
         value: mediaNode.attrs.alt,
         altTextValidator: options && options.altTextValidator,
         onEscape: setFocus,
-        onEnter: setFocus
+        onEnter: setFocus,
+        areAnyNewToolbarFlagsEnabled: options === null || options === void 0 ? void 0 : options.areAnyNewToolbarFlagsEnabled
       });
     }
   };

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

@@ -123,12 +123,12 @@ var handleShowMediaViewer = exports.handleShowMediaViewer = function handleShowM
 var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
   var _pluginInjectionApi$c;
   var disableDownloadButton = (0, _utils2.getIsDownloadDisabledByDataSecurityPolicy)(mediaPluginState);
-  var isNewEditorToolbarEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)();
+  var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   var preview = {
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
-    icon: isNewEditorToolbarEnabled ? _growDiagonal.default : _maximize.default,
+    icon: areAnyNewToolbarFlagsEnabled ? _growDiagonal.default : _maximize.default,
     title: intl.formatMessage(_mediaUi.messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -150,15 +150,15 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     },
     title: intl.formatMessage(_mediaUi.messages.download),
     disabled: disableDownloadButton
-  }, isNewEditorToolbarEnabled && {
+  }, areAnyNewToolbarFlagsEnabled && {
     supportsViewMode: true
   });
-  if (isViewOnly && !isNewEditorToolbarEnabled) {
+  if (isViewOnly && !areAnyNewToolbarFlagsEnabled) {
     return [];
   }
   var mediaGroup = state.schema.nodes.mediaGroup;
   var items = [];
-  if (!isNewEditorToolbarEnabled) {
+  if (!areAnyNewToolbarFlagsEnabled) {
     items.push({
       id: 'editor.media.view.switcher.inline',
       type: 'button',
@@ -278,7 +278,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
   var toolbarButtons = [];
   var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
     hoverDecoration = _ref2.hoverDecoration;
-  var isNewEditorToolbarEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)();
+  var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   var disableDownloadButton = (0, _utils2.getIsDownloadDisabledByDataSecurityPolicy)(pluginState);
   if ((0, _imageBorder.shouldShowImageBorder)(state)) {
     toolbarButtons.push({
@@ -305,7 +305,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         });
       }
     });
-    if (!isNewEditorToolbarEnabled) {
+    if (!areAnyNewToolbarFlagsEnabled) {
       toolbarButtons.push({
         type: 'separator'
       });
@@ -326,7 +326,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
     var layoutButtons = (0, _card.buildLayoutButtons)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
     var addLayoutDropdownToToolbar = function addLayoutDropdownToToolbar() {
-      if (isNewEditorToolbarEnabled) {
+      if (areAnyNewToolbarFlagsEnabled) {
         var _pluginInjectionApi$a4;
         var layoutDropdown = (0, _card.buildLayoutDropdown)(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
         toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutDropdown));
@@ -341,7 +341,9 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 layoutButtons: layoutButtons
                 // Ignored via go/ees005
                 // eslint-disable-next-line react/jsx-props-no-spreading
-              }, props));
+              }, props, {
+                areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+              }));
             },
             width: 188,
             height: 32
@@ -354,7 +356,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             title: intl.formatMessage(_card.layoutToMessages[selectedLayoutIcon.value]),
             icon: selectedLayoutIcon.icon
           };
-          toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [trigger], (0, _toConsumableArray2.default)(isNewEditorToolbarEnabled ? [] : [{
+          toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), [trigger], (0, _toConsumableArray2.default)(areAnyNewToolbarFlagsEnabled ? [] : [{
             type: 'separator'
           }]));
         }
@@ -376,7 +378,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         addLayoutDropdownToToolbar();
       } else {
         toolbarButtons = [].concat((0, _toConsumableArray2.default)(toolbarButtons), (0, _toConsumableArray2.default)(layoutButtons));
-        if (layoutButtons.length && !isNewEditorToolbarEnabled) {
+        if (layoutButtons.length && !areAnyNewToolbarFlagsEnabled) {
           toolbarButtons.push({
             type: 'separator'
           });
@@ -392,7 +394,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         var hasCaption = (0, _utils.contains)(selectedNode.node, state.schema.nodes.caption);
         var inlineSwitcherTitle = intl.formatMessage(hasCaption ? _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : _messages.mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
         var floatingSwitcherTitle = intl.formatMessage(_messages.mediaAndEmbedToolbarMessages.changeToMediaSingle);
-        if (!isNewEditorToolbarEnabled) {
+        if (!areAnyNewToolbarFlagsEnabled) {
           var _pluginInjectionApi$a5;
           toolbarButtons.push({
             type: 'button',
@@ -437,7 +439,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
 
     // A separator is needed regardless switcher is enabled or not
-    if ((0, _experiments.editorExperiment)('platform_editor_toolbar_aifc', true)) {
+    if (Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar) && (0, _experiments.editorExperiment)('platform_editor_toolbar_aifc', true)) {
       toolbarButtons.push({
         type: 'separator',
         fullHeight: true
@@ -488,14 +490,14 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         }
         return [sizeInput];
       }
-      if (!isNewEditorToolbarEnabled) {
+      if (!areAnyNewToolbarFlagsEnabled) {
         toolbarButtons.push(sizeInput);
         toolbarButtons.push({
           type: 'separator'
         });
       }
     }
-    if (!isNewEditorToolbarEnabled) {
+    if (!areAnyNewToolbarFlagsEnabled) {
       if (allowCommentsOnMedia) {
         toolbarButtons.push((0, _comments.commentButton)(intl, state, pluginInjectionApi, onCommentButtonMount), {
           type: 'separator',
@@ -538,7 +540,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 onAddLink: editLink,
                 onEditLink: editLink,
                 onOpenLink: openLink,
-                isViewOnly: isViewOnly
+                isViewOnly: isViewOnly,
+                areAnyNewToolbarFlagsEnabled: false
               });
             }
             return null;
@@ -593,7 +596,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       supportsViewMode: true
     });
   }
-  if (!isNewEditorToolbarEnabled) {
+  if (!areAnyNewToolbarFlagsEnabled) {
     var _pluginInjectionApi$a8;
     if (allowAltTextOnImages) {
       var _pluginInjectionApi$a7;
@@ -759,7 +762,8 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
       return (0, _altText2.getAltTextToolbar)(baseToolbar, {
         altTextValidator: altTextValidator,
         forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 || (_pluginInjectionApi$f = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f === void 0 ? void 0 : _pluginInjectionApi$f.forceFocusSelector,
-        triggerButtonSelector: overflowButtonSelector
+        triggerButtonSelector: overflowButtonSelector,
+        areAnyNewToolbarFlagsEnabled: (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))
       });
     }
   }
@@ -807,7 +811,7 @@ var floatingToolbar = exports.floatingToolbar = function floatingToolbar(state,
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
   }
-  if (!mediaPluginState.isResizing && (0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) {
+  if (!mediaPluginState.isResizing && (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
     var _pluginInjectionApi$a0, _pluginInjectionApi$a1;
     (0, _utils2.updateToFullHeightSeparator)(items);
     var customOptions = [].concat((0, _toConsumableArray2.default)((0, _linking3.getLinkingDropdownOptions)(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), (0, _toConsumableArray2.default)((0, _altText2.getAltTextDropdownOption)(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a0 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a0 === void 0 ? void 0 : _pluginInjectionApi$a0.actions)), (0, _toConsumableArray2.default)((0, _pixelResizing2.getResizeDropdownOption)(options, state, intl.formatMessage, selectedNodeType)));

package/dist/cjs/ui/toolbar/layout-group.js

@@ -22,16 +22,19 @@ var containerStyles = (0, _primitives.xcss)({
 var LayoutGroup = exports.LayoutGroup = function LayoutGroup(_ref) {
   var layoutButtons = _ref.layoutButtons,
     dispatchCommand = _ref.dispatchCommand,
-    hide = _ref.hide;
+    hide = _ref.hide,
+    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
   return (0, _react.jsx)(_primitives.Box, {
     xcss: containerStyles
   }, (0, _react.jsx)(_button.ButtonGroup, null, layoutButtons.map(function (item, idx) {
     switch (item.type) {
       case 'separator':
+        return (0, _react.jsx)(_ui.FloatingToolbarSeparator
         // Ignored via go/ees005
         // eslint-disable-next-line react/no-array-index-key
-        return (0, _react.jsx)(_ui.FloatingToolbarSeparator, {
-          key: idx
+        , {
+          key: idx,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         });
       case 'button':
         // Ignored via go/ees005
@@ -51,7 +54,8 @@ var LayoutGroup = exports.LayoutGroup = function LayoutGroup(_ref) {
           onClick: function onClick() {
             dispatchCommand(item.onClick);
             hide();
-          }
+          },
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         });
     }
   })));

package/dist/cjs/ui/toolbar/linking-toolbar-appearance.js

@@ -38,7 +38,8 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
     onEditLink = _ref.onEditLink,
     onOpenLink = _ref.onOpenLink,
     isInlineNode = _ref.isInlineNode,
-    isViewOnly = _ref.isViewOnly;
+    isViewOnly = _ref.isViewOnly,
+    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
   var _useState = (0, _react.useState)(true),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     showLinkingControls = _useState2[0],
@@ -75,7 +76,8 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
         description: title,
         keymap: _keymaps.addLink
       }),
-      testId: "edit-link-button"
+      testId: "edit-link-button",
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
     }, title)), (0, _react2.jsx)(_ui.FloatingToolbarButton, {
       target: "_blank",
       href: isValidUrl ? mediaLinkingState.link : undefined,
@@ -89,8 +91,11 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
       })
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
-      className: "hyperlink-open-link"
-    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null));
+      className: "hyperlink-open-link",
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    }));
   } else {
     var _title = intl.formatMessage(_messages.linkToolbarMessages.addLink);
     return !isViewOnly ? (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_ui.FloatingToolbarButton, {
@@ -105,7 +110,10 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
         color: "currentColor",
         label: _title,
         spacing: "spacious"
-      })
-    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)) : null;
+      }),
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, {
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    })) : null;
   }
 };

package/dist/cjs/ui/toolbar/linking.js

@@ -11,6 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _adfSchema = require("@atlaskit/adf-schema");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _messages = require("@atlaskit/editor-common/messages");
+var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
 var _ui = require("@atlaskit/editor-common/ui");
 var _link = _interopRequireDefault(require("@atlaskit/icon/core/link"));
 var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
@@ -109,7 +110,8 @@ var getLinkingToolbar = exports.getLinkingToolbar = function getLinkingToolbar(t
               },
               onBlur: function onBlur() {
                 (0, _linking.hideLinkingToolbar)(view.state, view.dispatch, view);
-              }
+              },
+              areAnyNewToolbarFlagsEnabled: (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))
             });
           }
         }]

package/dist/cjs/ui/toolbar/mediaInline.js

@@ -48,12 +48,12 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
     return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
   }
   var items = [];
-  var isNewEditorToolbarEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)();
+  var areAnyNewToolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   var preview = _objectSpread({
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
-    icon: isNewEditorToolbarEnabled ? _growDiagonal.default : _maximize.default,
+    icon: areAnyNewToolbarFlagsEnabled ? _growDiagonal.default : _maximize.default,
     title: intl.formatMessage(_mediaUi.messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -62,7 +62,7 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
         api: pluginInjectionApi
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
     }
-  }, isNewEditorToolbarEnabled && {
+  }, areAnyNewToolbarFlagsEnabled && {
     supportsViewMode: true
   });
   var disableDownloadButton = (0, _utils.getIsDownloadDisabledByDataSecurityPolicy)(mediaPluginState);
@@ -76,10 +76,10 @@ var generateMediaInlineFloatingToolbar = exports.generateMediaInlineFloatingTool
     },
     disabled: disableDownloadButton,
     title: intl.formatMessage(_mediaUi.messages.download)
-  }, isNewEditorToolbarEnabled && {
+  }, areAnyNewToolbarFlagsEnabled && {
     supportsViewMode: true
   });
-  if (!isNewEditorToolbarEnabled) {
+  if (!areAnyNewToolbarFlagsEnabled) {
     items.push({
       id: 'editor.media.view.switcher.inline',
       type: 'button',
@@ -304,7 +304,8 @@ var getMediaInlineImageToolbar = function getMediaInlineImageToolbar(state, intl
             onEditLink: editLink,
             onOpenLink: openLink,
             isInlineNode: true,
-            isViewOnly: options.isViewOnly
+            isViewOnly: options.isViewOnly,
+            areAnyNewToolbarFlagsEnabled: (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))
           });
         }
         return null;

package/dist/es2019/pm-plugins/alt-text/ui/AltTextEdit.js

@@ -13,6 +13,7 @@ import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent } from '@atlaskit/editor-common/analytics';
 import { escape, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { altTextMessages as messages } from '@atlaskit/editor-common/media';
+import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { RECENT_SEARCH_WIDTH_IN_PX as CONTAINER_WIDTH_IN_PX, FloatingToolbarButton as Button, ErrorMessage, PanelTextInput } from '@atlaskit/editor-common/ui';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
 import ChevronLeftLargeIcon from '@atlaskit/icon/core/migration/chevron-left--chevron-left-large';
@@ -164,6 +165,7 @@ export class AltTextEditComponent extends React.Component {
     return [];
   }
   render() {
+    var _this$props$areAnyNew, _this$props$areAnyNew2;
     const {
       intl: {
         formatMessage
@@ -200,7 +202,8 @@ export class AltTextEditComponent extends React.Component {
         size: "small"
       }),
       tooltipContent: backButtonMessageComponent,
-      onClick: this.closeMediaAltTextMenu
+      onClick: this.closeMediaAltTextMenu,
+      areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew !== void 0 ? _this$props$areAnyNew : areToolbarFlagsEnabled()
     })), jsx(PanelTextInput, {
       testId: "alt-text-input",
       ariaLabel: formatMessage(messages.placeholder),
@@ -226,7 +229,8 @@ export class AltTextEditComponent extends React.Component {
         label: formatMessage(messages.clear)
       })),
       tooltipContent: formatMessage(messages.clear),
-      onClick: this.handleClearText
+      onClick: this.handleClearText,
+      areAnyNewToolbarFlagsEnabled: (_this$props$areAnyNew2 = this.props.areAnyNewToolbarFlagsEnabled) !== null && _this$props$areAnyNew2 !== void 0 ? _this$props$areAnyNew2 : areToolbarFlagsEnabled()
     }))), hasErrors && jsx("section", {
       id: "errors-list",
       ref: this.errorsListRef,

package/dist/es2019/ui/MediaLinkingToolbar.js

@@ -134,7 +134,8 @@ class LinkAddToolbar extends React.PureComponent {
                 inputMethod: currentInputMethod
               }, true);
             }
-          }
+          },
+          areAnyNewToolbarFlagsEnabled: this.props.areAnyNewToolbarFlagsEnabled
         })), jsx(PanelTextInput, {
           inputId: "media-link-search-input",
           testId: "media-link-input",
@@ -161,7 +162,9 @@ class LinkAddToolbar extends React.PureComponent {
         }), jsx("label", {
           className: "assistive",
           htmlFor: "media-link-search-input"
-        }, formatMessage(linkToolbarMessages.searchInput)), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, null), jsx(Button, {
+        }, formatMessage(linkToolbarMessages.searchInput)), normalizeUrl(displayUrl) && jsx(Fragment, null, jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: this.props.areAnyNewToolbarFlagsEnabled
+        }), jsx(Button, {
           title: formatUnlinkText,
           icon: jsx(EditorUnlinkIcon, {
             label: formatUnlinkText
@@ -172,7 +175,8 @@ class LinkAddToolbar extends React.PureComponent {
               event.preventDefault();
               this.handleUnlink(true);
             }
-          }
+          },
+          areAnyNewToolbarFlagsEnabled: this.props.areAnyNewToolbarFlagsEnabled
         }))), !!errorsList.length && jsx("section", {
           css: validationWrapper
         }, errorsList), renderRecentList()))

package/dist/es2019/ui/toolbar/alt-text.js

@@ -71,7 +71,8 @@ const altTextEditComponent = options => {
         value: mediaNode.attrs.alt,
         altTextValidator: options && options.altTextValidator,
         onEscape: setFocus,
-        onEnter: setFocus
+        onEnter: setFocus,
+        areAnyNewToolbarFlagsEnabled: options === null || options === void 0 ? void 0 : options.areAnyNewToolbarFlagsEnabled
       });
     }
   };

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

@@ -111,12 +111,12 @@ export const handleShowMediaViewer = ({
 const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) => {
   var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$c3;
   const disableDownloadButton = getIsDownloadDisabledByDataSecurityPolicy(mediaPluginState);
-  const isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
+  const areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   const preview = {
     id: 'editor.media.viewer',
     testId: 'file-preview-toolbar-button',
     type: 'button',
-    icon: isNewEditorToolbarEnabled ? GrowDiagonalIcon : MaximizeIcon,
+    icon: areAnyNewToolbarFlagsEnabled ? GrowDiagonalIcon : MaximizeIcon,
     title: intl.formatMessage(messages.preview),
     onClick: () => {
       var _handleShowMediaViewe;
@@ -138,18 +138,18 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
     },
     title: intl.formatMessage(messages.download),
     disabled: disableDownloadButton,
-    ...(isNewEditorToolbarEnabled && {
+    ...(areAnyNewToolbarFlagsEnabled && {
       supportsViewMode: true
     })
   };
-  if (isViewOnly && !isNewEditorToolbarEnabled) {
+  if (isViewOnly && !areAnyNewToolbarFlagsEnabled) {
     return [];
   }
   const {
     mediaGroup
   } = state.schema.nodes;
   const items = [];
-  if (!isNewEditorToolbarEnabled) {
+  if (!areAnyNewToolbarFlagsEnabled) {
     items.push({
       id: 'editor.media.view.switcher.inline',
       type: 'button',
@@ -268,7 +268,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
   const {
     hoverDecoration
   } = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {};
-  const isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
+  const areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   const disableDownloadButton = getIsDownloadDisabledByDataSecurityPolicy(pluginState);
   if (shouldShowImageBorder(state)) {
     toolbarButtons.push({
@@ -297,7 +297,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         });
       }
     });
-    if (!isNewEditorToolbarEnabled) {
+    if (!areAnyNewToolbarFlagsEnabled) {
       toolbarButtons.push({
         type: 'separator'
       });
@@ -318,7 +318,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     }
     const layoutButtons = buildLayoutButtons(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
     const addLayoutDropdownToToolbar = () => {
-      if (isNewEditorToolbarEnabled) {
+      if (areAnyNewToolbarFlagsEnabled) {
         var _pluginInjectionApi$a4;
         const layoutDropdown = buildLayoutDropdown(state, intl, state.schema.nodes.mediaSingle, widthPlugin, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, allowResizing, allowResizingInTables, true, true, isChangingLayoutDisabled, allowPixelResizing);
         toolbarButtons = [...toolbarButtons, ...layoutDropdown];
@@ -333,7 +333,9 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
                 layoutButtons: layoutButtons
                 // Ignored via go/ees005
                 // eslint-disable-next-line react/jsx-props-no-spreading
-              }, props));
+              }, props, {
+                areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+              }));
             },
             width: 188,
             height: 32
@@ -346,7 +348,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
             title: intl.formatMessage(layoutToMessages[selectedLayoutIcon.value]),
             icon: selectedLayoutIcon.icon
           };
-          toolbarButtons = [...toolbarButtons, trigger, ...(isNewEditorToolbarEnabled ? [] : [{
+          toolbarButtons = [...toolbarButtons, trigger, ...(areAnyNewToolbarFlagsEnabled ? [] : [{
             type: 'separator'
           }])];
         }
@@ -368,7 +370,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         addLayoutDropdownToToolbar();
       } else {
         toolbarButtons = [...toolbarButtons, ...layoutButtons];
-        if (layoutButtons.length && !isNewEditorToolbarEnabled) {
+        if (layoutButtons.length && !areAnyNewToolbarFlagsEnabled) {
           toolbarButtons.push({
             type: 'separator'
           });
@@ -384,7 +386,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         const hasCaption = contains(selectedNode.node, state.schema.nodes.caption);
         const inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
         const floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
-        if (!isNewEditorToolbarEnabled) {
+        if (!areAnyNewToolbarFlagsEnabled) {
           var _pluginInjectionApi$a5;
           toolbarButtons.push({
             type: 'button',
@@ -425,7 +427,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
     }
 
     // A separator is needed regardless switcher is enabled or not
-    if (editorExperiment('platform_editor_toolbar_aifc', true)) {
+    if (Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar) && editorExperiment('platform_editor_toolbar_aifc', true)) {
       toolbarButtons.push({
         type: 'separator',
         fullHeight: true
@@ -480,14 +482,14 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         }
         return [sizeInput];
       }
-      if (!isNewEditorToolbarEnabled) {
+      if (!areAnyNewToolbarFlagsEnabled) {
         toolbarButtons.push(sizeInput);
         toolbarButtons.push({
           type: 'separator'
         });
       }
     }
-    if (!isNewEditorToolbarEnabled) {
+    if (!areAnyNewToolbarFlagsEnabled) {
       if (allowCommentsOnMedia) {
         toolbarButtons.push(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount), {
           type: 'separator',
@@ -536,7 +538,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
                 onAddLink: editLink,
                 onEditLink: editLink,
                 onOpenLink: openLink,
-                isViewOnly: isViewOnly
+                isViewOnly: isViewOnly,
+                areAnyNewToolbarFlagsEnabled: false
               });
             }
             return null;
@@ -591,7 +594,7 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
       supportsViewMode: true
     });
   }
-  if (!isNewEditorToolbarEnabled) {
+  if (!areAnyNewToolbarFlagsEnabled) {
     var _pluginInjectionApi$a8;
     if (allowAltTextOnImages) {
       var _pluginInjectionApi$a7;
@@ -759,7 +762,8 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
       return getAltTextToolbar(baseToolbar, {
         altTextValidator,
         forceFocusSelector: pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$f = pluginInjectionApi.floatingToolbar) === null || _pluginInjectionApi$f === void 0 ? void 0 : (_pluginInjectionApi$f2 = _pluginInjectionApi$f.actions) === null || _pluginInjectionApi$f2 === void 0 ? void 0 : _pluginInjectionApi$f2.forceFocusSelector,
-        triggerButtonSelector: overflowButtonSelector
+        triggerButtonSelector: overflowButtonSelector,
+        areAnyNewToolbarFlagsEnabled: areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))
       });
     }
   }
@@ -809,7 +813,7 @@ export const floatingToolbar = (state, intl, options = {}, pluginInjectionApi) =
     };
     items = generateMediaSingleFloatingToolbar(state, intl, options, mediaPluginState, mediaLinkingState, pluginInjectionApi);
   }
-  if (!mediaPluginState.isResizing && areToolbarFlagsEnabled()) {
+  if (!mediaPluginState.isResizing && areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))) {
     var _pluginInjectionApi$a0, _pluginInjectionApi$a1;
     updateToFullHeightSeparator(items);
     const customOptions = [...getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly), ...getAltTextDropdownOption(state, intl.formatMessage, allowAltTextOnImages, selectedNodeType, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a0 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a0 === void 0 ? void 0 : _pluginInjectionApi$a0.actions), ...getResizeDropdownOption(options, state, intl.formatMessage, selectedNodeType)];