@atlaskit/editor-plugin-card 8.0.1 → 8.1.0

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { linkMessages } from '@atlaskit/editor-common/messages';
-import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { FloatingToolbarButton as Button } from '@atlaskit/editor-common/ui';
 import PanelRightIcon from '@atlaskit/icon/core/panel-right';
 import { useSmartLinkContext } from '@atlaskit/link-provider';
@@ -8,7 +7,8 @@ import { Inline, Box, Flex } from '@atlaskit/primitives/compiled';
 import { getObjectAri, getObjectIconUrl, getObjectName } from '@atlaskit/smart-card';
 export const OpenPreviewPanelToolbarButton = ({
   node,
-  intl
+  intl,
+  areAnyNewToolbarFlagsEnabled
 }) => {
   const {
     store,
@@ -35,13 +35,13 @@ export const OpenPreviewPanelToolbarButton = ({
       }
     };
     const title = intl.formatMessage(linkMessages.openPreviewPanel);
-    const icon = areToolbarFlagsEnabled() ? /*#__PURE__*/React.createElement(PanelRightIcon, {
+    const icon = areAnyNewToolbarFlagsEnabled ? /*#__PURE__*/React.createElement(PanelRightIcon, {
       label: "",
       spacing: "spacious"
     }) :
     /*#__PURE__*/
     // This is a hack required for Jira until areToolbarFlagsEnabled are enabled to ensure the icon has padding
-    // Padding is removed when areToolbarFlagsEnabed for a button with icon only in platform/packages/editor/editor-common/src/ui/FloatingToolbar/Button.tsx
+    // Padding is removed when areToolbarFlagsEnabled for a button with icon only in platform/packages/editor/editor-common/src/ui/FloatingToolbar/Button.tsx
     React.createElement(Inline, {
       as: "span",
       space: "space.050",
@@ -65,7 +65,8 @@ export const OpenPreviewPanelToolbarButton = ({
         testId: "open-preview-panel-floating-toolbar-button",
         onClick: handleOpenGlancePanelClick,
         icon: icon,
-        title: title
+        title: title,
+        areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
       }));
     }
   }

package/dist/es2019/ui/toolbar.js

@@ -169,8 +169,8 @@ const unlinkCard = (node, state, editorAnalyticsApi) => {
   }
   return () => false;
 };
-const buildAlignmentOptions = (state, intl, widthPluginDependencyApi, analyticsApi, cardOptions) => {
-  if (areToolbarFlagsEnabled()) {
+const buildAlignmentOptions = (state, intl, widthPluginDependencyApi, analyticsApi, cardOptions, areAnyNewToolbarFlagsEnabled) => {
+  if (areAnyNewToolbarFlagsEnabled) {
     return buildLayoutDropdown(state, intl, state.schema.nodes.embedCard, widthPluginDependencyApi, analyticsApi, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
   }
   return buildLayoutButtons(state, intl, state.schema.nodes.embedCard, widthPluginDependencyApi, analyticsApi, true, true, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowWrapping, cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowAlignment);
@@ -213,7 +213,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       title: title
     };
   }
-  const isNewEditorToolbarDisabled = !areToolbarFlagsEnabled();
+  const areAllNewToolbarFlagsDisabled = !areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   const currentAppearance = appearanceForNodeType(node.type);
   const {
     hoverDecoration
@@ -271,7 +271,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         editorAnalyticsApi: editorAnalyticsApi,
         editorView: editorView,
         onLinkEditClick: getEditLinkCallback(editorAnalyticsApi, true),
-        currentAppearance: currentAppearance
+        currentAppearance: currentAppearance,
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
       })
     }] : [{
       id: 'editor.link.edit',
@@ -309,7 +310,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         editorAnalyticsApi: editorAnalyticsApi,
         editorView: editorView,
         onLinkEditClick: getEditLinkCallback(editorAnalyticsApi, true),
-        currentAppearance: currentAppearance
+        currentAppearance: currentAppearance,
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
       })
     }] : [{
       id: 'editor.link.edit',
@@ -329,10 +331,11 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       render: () => /*#__PURE__*/React.createElement(OpenPreviewPanelToolbarButton, {
         node: node,
         intl: intl,
-        editorAnalyticsApi: editorAnalyticsApi
+        editorAnalyticsApi: editorAnalyticsApi,
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
       })
     }] : [];
-    const toolbarItems = isNewEditorToolbarDisabled ? [...editItems, ...commentItems, ...openPreviewPanelItems, {
+    const toolbarItems = areAllNewToolbarFlagsDisabled ? [...editItems, ...commentItems, ...openPreviewPanelItems, {
       id: 'editor.link.openLink',
       type: 'button',
       icon: LinkExternalIcon,
@@ -345,7 +348,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       target: '_blank'
     }, {
       type: 'separator'
-    }, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
+    }, ...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled), {
       type: 'copy-button',
       items: [{
         state,
@@ -369,10 +372,10 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
       onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
       title: intl.formatMessage(commonMessages.remove),
       onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-    }] : [...openPreviewPanelItems, ...editButtonItems, ...(fg('platform_editor_controls_patch_15') ? [...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi), {
+    }] : [...openPreviewPanelItems, ...editButtonItems, ...(fg('platform_editor_controls_patch_15') ? [...getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled), {
       type: 'separator',
       fullHeight: true
-    }] : getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), {
+    }] : getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled)), {
       id: 'editor.link.openLink',
       type: 'button',
       icon: LinkExternalIcon,
@@ -389,8 +392,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     }, commentItems[0]] : commentItems)];
     if (currentAppearance === 'embed') {
       var _pluginInjectionApi$a5;
-      const alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions, cardOptions);
-      if (alignmentOptions.length && isNewEditorToolbarDisabled) {
+      const alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a5 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a5 === void 0 ? void 0 : _pluginInjectionApi$a5.actions, cardOptions, !areAllNewToolbarFlagsDisabled);
+      if (alignmentOptions.length && areAllNewToolbarFlagsDisabled) {
         alignmentOptions.push({
           type: 'separator'
         });
@@ -407,7 +410,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     // For url appearance, please see HyperlinkToolbarAppearanceProps
     if (currentAppearance) {
       const showDatasourceAppearance = allowDatasource && url;
-      toolbarItems.unshift(...getToolbarViewedItem(url, currentAppearance), isNewEditorToolbarDisabled ? {
+      toolbarItems.unshift(...getToolbarViewedItem(url, currentAppearance), areAllNewToolbarFlagsDisabled ? {
         type: 'custom',
         fallback: [],
         render: editorView => /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
@@ -420,7 +423,8 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
           allowEmbeds: allowEmbeds,
           allowBlockCards: allowBlockCards,
           editorAnalyticsApi: editorAnalyticsApi,
-          showUpgradeDiscoverability: showUpgradeDiscoverability
+          showUpgradeDiscoverability: showUpgradeDiscoverability,
+          areAnyNewToolbarFlagsEnabled: false
         })
       } : getLinkAppearanceDropdown({
         url,
@@ -433,8 +437,9 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
         allowDatasource: cardOptions.allowDatasource,
         showUpgradeDiscoverability: showUpgradeDiscoverability,
         settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
-        isDatasourceView: isDatasource
-      }), ...(showDatasourceAppearance && isNewEditorToolbarDisabled ? [{
+        isDatasourceView: isDatasource,
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
+      }), ...(showDatasourceAppearance && areAllNewToolbarFlagsDisabled ? [{
         type: 'custom',
         fallback: [],
         render: editorView => /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
@@ -443,13 +448,14 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
           url: url,
           editorView: editorView,
           editorState: state,
-          inputMethod: INPUT_METHOD.FLOATING_TB
+          inputMethod: INPUT_METHOD.FLOATING_TB,
+          areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
         })
-      }] : []), ...(!isNewEditorToolbarDisabled ? [] : [{
+      }] : []), ...(!areAllNewToolbarFlagsDisabled ? [] : [{
         type: 'separator'
       }]));
     }
-    if (!isNewEditorToolbarDisabled) {
+    if (!areAllNewToolbarFlagsDisabled) {
       const hoverDecorationProps = (nodeType, className) => ({
         onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
         onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, false, className),
@@ -491,7 +497,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
     return toolbarItems;
   }
 };
-const getUnlinkButtonGroup = (state, intl, node, inlineCard, editorAnalyticsApi) => {
+const getUnlinkButtonGroup = (state, intl, node, inlineCard, editorAnalyticsApi, areAnyNewToolbarFlagsEnabled) => {
   return node.type === inlineCard ? [{
     id: 'editor.link.unlink',
     focusEditoronEnter: true,
@@ -500,7 +506,7 @@ const getUnlinkButtonGroup = (state, intl, node, inlineCard, editorAnalyticsApi)
     icon: LinkBrokenIcon,
     iconFallback: UnlinkIcon,
     onClick: withToolbarMetadata(unlinkCard(node, state, editorAnalyticsApi))
-  }, ...(areToolbarFlagsEnabled() ? [] : [{
+  }, ...(areAnyNewToolbarFlagsEnabled ? [] : [{
     type: 'separator'
   }])] : [];
 };
@@ -519,7 +525,7 @@ export const getSettingsButton = (intl, editorAnalyticsApi, userPreferencesLink)
 const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) => {
   var _node$attrs2;
   const toolbarItems = [];
-  const isNewEditorToolbarDisabled = !areToolbarFlagsEnabled();
+  const areAllNewToolbarFlagsDisabled = !areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   const canShowAppearanceSwitch = () => {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
@@ -536,7 +542,7 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
     const {
       url
     } = metadata;
-    if (isNewEditorToolbarDisabled) {
+    if (areAllNewToolbarFlagsDisabled) {
       toolbarItems.push({
         type: 'custom',
         fallback: [],
@@ -552,7 +558,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
             allowBlockCards: allowBlockCards,
             editorAnalyticsApi: editorAnalyticsApi,
             showUpgradeDiscoverability: showUpgradeDiscoverability,
-            isDatasourceView: true
+            isDatasourceView: true,
+            areAnyNewToolbarFlagsEnabled: false
           });
         }
       }, {
@@ -565,7 +572,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
           editorView: editorView,
           editorState: state,
           selected: true,
-          inputMethod: INPUT_METHOD.FLOATING_TB
+          inputMethod: INPUT_METHOD.FLOATING_TB,
+          areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
         })
       }, {
         type: 'separator'
@@ -582,7 +590,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
         allowDatasource: cardOptions.allowDatasource,
         showUpgradeDiscoverability: showUpgradeDiscoverability,
         settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
-        isDatasourceView: true
+        isDatasourceView: true,
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
       }), {
         type: 'separator'
       });
@@ -601,7 +610,8 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       editorAnalyticsApi: editorAnalyticsApi,
       editorView: editorView,
       onLinkEditClick: getEditLinkCallback(editorAnalyticsApi, false),
-      currentAppearance: "datasource"
+      currentAppearance: "datasource",
+      areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
     })
   });
   if (node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.url) {
@@ -617,13 +627,13 @@ const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hove
       href: node.attrs.url,
       target: '_blank'
     });
-    if (isNewEditorToolbarDisabled) {
+    if (areAllNewToolbarFlagsDisabled) {
       toolbarItems.push({
         type: 'separator'
       });
     }
   }
-  if (isNewEditorToolbarDisabled) {
+  if (areAllNewToolbarFlagsDisabled) {
     toolbarItems.push({
       type: 'copy-button',
       supportsViewMode: true,
@@ -711,6 +721,7 @@ export const shouldRenderToolbarPulse = (embedEnabled, appearance, status, isDis
 };
 export const getStartingToolbarItems = (options, api) => {
   return (intl, link, onEditLink, metadata, state) => {
+    const areAllNewToolbarFlagsDisabled = !areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
     const editLinkItem = options.allowDatasource ? [{
       type: 'custom',
       fallback: [],
@@ -726,7 +737,8 @@ export const getStartingToolbarItems = (options, api) => {
           url: link,
           editorView: editorView,
           onLinkEditClick: onEditLink,
-          currentAppearance: "url"
+          currentAppearance: "url",
+          areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
         });
       }
     }] : [{
@@ -741,7 +753,7 @@ export const getStartingToolbarItems = (options, api) => {
     }, {
       type: 'separator'
     }];
-    if (areToolbarFlagsEnabled()) {
+    if (!areAllNewToolbarFlagsDisabled) {
       var _api$analytics2, _api$analytics3;
       const hyperlinkAppearance = [getCustomHyperlinkAppearanceDropdown({
         url: link,
@@ -800,7 +812,7 @@ export const getEndingToolbarItems = (options, api) => (intl, link) => {
    * Require either provider to be supplied (controls link preferences)
    * Or explicit user preferences config in order to enable button
    */
-  if ((options.provider || options.userPreferencesLink) && !areToolbarFlagsEnabled()) {
+  if ((options.provider || options.userPreferencesLink) && !areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
     var _api$analytics5;
     return [{
       type: 'separator'

package/dist/esm/ui/DatasourceAppearanceButton.js

@@ -27,7 +27,8 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
     editorView = _ref.editorView,
     editorState = _ref.editorState,
     selected = _ref.selected,
-    inputMethod = _ref.inputMethod;
+    inputMethod = _ref.inputMethod,
+    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
   var _useFetchDatasourceIn = useFetchDatasourceInfo({
       isRegularCardNode: true,
       url: url,
@@ -94,7 +95,8 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
     }),
     selected: selected,
     onClick: onChangeAppearance,
-    testId: 'card-datasource-appearance-button'
+    testId: 'card-datasource-appearance-button',
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }));
 };
 export var DatasourceAppearanceButton = function DatasourceAppearanceButton(_ref2) {
@@ -104,7 +106,8 @@ export var DatasourceAppearanceButton = function DatasourceAppearanceButton(_ref
     editorView = _ref2.editorView,
     editorState = _ref2.editorState,
     selected = _ref2.selected,
-    inputMethod = _ref2.inputMethod;
+    inputMethod = _ref2.inputMethod,
+    areAnyNewToolbarFlagsEnabled = _ref2.areAnyNewToolbarFlagsEnabled;
   var cardContext = useSmartLinkContext();
   return jsx(DatasourceAppearanceButtonWithCardContext, {
     url: url,
@@ -114,6 +117,7 @@ export var DatasourceAppearanceButton = function DatasourceAppearanceButton(_ref
     editorState: editorState,
     cardContext: cardContext,
     selected: selected,
-    inputMethod: inputMethod
+    inputMethod: inputMethod,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };

package/dist/esm/ui/EditToolbarButton/EditToolbarButtonPresentation.js

@@ -9,7 +9,6 @@ import { useCallback, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
-import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationType, DropdownContainer as UiDropdown } from '@atlaskit/editor-common/ui-menu';
 import EditIcon from '@atlaskit/icon/core/edit';
@@ -29,7 +28,8 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
     editorView = _ref.editorView,
     extensionKey = _ref.extensionKey,
     onLinkEditClick = _ref.onLinkEditClick,
-    intl = _ref.intl;
+    intl = _ref.intl,
+    areAnyNewToolbarFlagsEnabled = _ref.areAnyNewToolbarFlagsEnabled;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
@@ -55,11 +55,10 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
       focusEditorView(editorView);
     }
   }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
-  var isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
-  var icon = isNewEditorToolbarEnabled ? jsx(EditIcon, {
+  var icon = areAnyNewToolbarFlagsEnabled ? jsx(EditIcon, {
     label: ""
   }) : undefined;
-  var tooltipContent = isNewEditorToolbarEnabled ? intl.formatMessage(linkToolbarMessages.editLink) : undefined;
+  var tooltipContent = areAnyNewToolbarFlagsEnabled ? intl.formatMessage(linkToolbarMessages.editLink) : undefined;
   switch (editVariant) {
     case 'edit-link':
       {
@@ -69,11 +68,14 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
           testId: "edit-link",
           onClick: onEditLink,
           icon: icon,
-          tooltipContent: tooltipContent
-        }, !isNewEditorToolbarEnabled && jsx(FormattedMessage
+          tooltipContent: tooltipContent,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+        }, !areAnyNewToolbarFlagsEnabled && jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editLink)), !isNewEditorToolbarEnabled && jsx(Separator, null));
+        , linkToolbarMessages.editLink)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
       }
     case 'edit-datasource':
       {
@@ -82,11 +84,14 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
         }, jsx(Button, {
           testId: "edit-datasource",
           tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
-          onClick: onEditDatasource
+          onClick: onEditDatasource,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editDatasourceStandalone)), !isNewEditorToolbarEnabled && jsx(Separator, null));
+        , linkToolbarMessages.editDatasourceStandalone)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
       }
     case 'edit-dropdown':
       {
@@ -103,11 +108,14 @@ var EditToolbarButtonPresentation = function EditToolbarButtonPresentation(_ref)
           onClick: toggleOpen,
           selected: isOpen,
           disabled: false,
-          ariaHasPopup: true
+          ariaHasPopup: true,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , messages.editDropdownTriggerTitle)), !isNewEditorToolbarEnabled && jsx(Separator, null));
+        , messages.editDropdownTriggerTitle)), !areAnyNewToolbarFlagsEnabled && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
         return jsx(Flex, {
           ref: containerRef
         }, jsx(UiDropdown, {

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

@@ -34,7 +34,8 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
     editorView = props.editorView,
     intl = props.intl,
     onLinkEditClick = props.onLinkEditClick,
-    url = props.url;
+    url = props.url,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   var _useFetchDatasourceIn = useFetchDatasourceInfo({
       isRegularCardNode: true,
       url: url,
@@ -94,11 +95,14 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
           gap: "space.050"
         }, jsx(Button, {
           testId: "edit-link",
-          onClick: onEditLink
+          onClick: onEditLink,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editLink)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, null));
+        , linkToolbarMessages.editLink)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
       }
     case 'edit-datasource':
       {
@@ -107,11 +111,14 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
         }, jsx(Button, {
           testId: "edit-datasource",
           tooltipContent: intl.formatMessage(linkToolbarMessages.editDatasourceStandaloneTooltip),
-          onClick: onEditDatasource
+          onClick: onEditDatasource,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , linkToolbarMessages.editDatasourceStandalone)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, null));
+        , linkToolbarMessages.editDatasourceStandalone)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
       }
     case 'edit-dropdown':
       {
@@ -128,11 +135,14 @@ var EditToolbarButtonWithCardContext = function EditToolbarButtonWithCardContext
           onClick: toggleOpen,
           selected: isOpen,
           disabled: false,
-          ariaHasPopup: true
+          ariaHasPopup: true,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         }, jsx(FormattedMessage
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
-        , messages.editDropdownTriggerTitle)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, null));
+        , messages.editDropdownTriggerTitle)), !editorExperiment('platform_editor_controls', 'variant1') && jsx(Separator, {
+          areAnyNewToolbarFlagsEnabled: false
+        }));
         return jsx(Flex, {
           ref: containerRef
         }, jsx(UiDropdown, {
@@ -174,7 +184,8 @@ var EditToolbarButtonWithUrl = function EditToolbarButtonWithUrl(props) {
     editorView = props.editorView,
     intl = props.intl,
     onLinkEditClick = props.onLinkEditClick,
-    url = props.url;
+    url = props.url,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   var _useFetchDatasourceIn2 = useFetchDatasourceInfo({
       isRegularCardNode: true,
       url: url,
@@ -202,7 +213,8 @@ var EditToolbarButtonWithUrl = function EditToolbarButtonWithUrl(props) {
     editorView: editorView,
     extensionKey: extensionKey,
     onLinkEditClick: onLinkEditClick,
-    intl: intl
+    intl: intl,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };
 var EditToolbarButtonWithDatasourceId = function EditToolbarButtonWithDatasourceId(props) {
@@ -212,7 +224,8 @@ var EditToolbarButtonWithDatasourceId = function EditToolbarButtonWithDatasource
     intl = props.intl,
     onLinkEditClick = props.onLinkEditClick,
     datasourceId = props.datasourceId,
-    node = props.node;
+    node = props.node,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   var fetchData = useMemo(function () {
     try {
       var _attrs$datasource$vie;
@@ -250,7 +263,8 @@ var EditToolbarButtonWithDatasourceId = function EditToolbarButtonWithDatasource
     editorView: editorView,
     extensionKey: extensionKey,
     onLinkEditClick: onLinkEditClick,
-    intl: intl
+    intl: intl,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };
 export var EditToolbarButton = function EditToolbarButton(props) {
@@ -260,7 +274,8 @@ export var EditToolbarButton = function EditToolbarButton(props) {
     editorView = props.editorView,
     intl = props.intl,
     onLinkEditClick = props.onLinkEditClick,
-    url = props.url;
+    url = props.url,
+    areAnyNewToolbarFlagsEnabled = props.areAnyNewToolbarFlagsEnabled;
   var cardContext = useSmartLinkContext();
   if (props.url) {
     return jsx(EditToolbarButtonWithUrl, {
@@ -271,7 +286,8 @@ export var EditToolbarButton = function EditToolbarButton(props) {
       editorView: editorView,
       cardContext: cardContext,
       onLinkEditClick: onLinkEditClick,
-      currentAppearance: currentAppearance
+      currentAppearance: currentAppearance,
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
     });
   }
   if (props.datasourceId && props.node) {
@@ -282,7 +298,8 @@ export var EditToolbarButton = function EditToolbarButton(props) {
       editorAnalyticsApi: editorAnalyticsApi,
       editorView: editorView,
       onLinkEditClick: onLinkEditClick,
-      currentAppearance: currentAppearance
+      currentAppearance: currentAppearance,
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
     });
   }
   return jsx(EditToolbarButtonWithCardContext, {
@@ -293,6 +310,7 @@ export var EditToolbarButton = function EditToolbarButton(props) {
     editorView: editorView,
     cardContext: cardContext,
     onLinkEditClick: onLinkEditClick,
-    currentAppearance: currentAppearance
+    currentAppearance: currentAppearance,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };

package/dist/esm/ui/HyperlinkToolbarAppearance.js

@@ -3,12 +3,13 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 import React, { useEffect, useRef, useState } from 'react';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
+import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { FloatingToolbarSeparator as Separator } from '@atlaskit/editor-common/ui';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
 import { LinkToolbarAppearance } from './LinkToolbarAppearance';
 export function HyperlinkToolbarAppearance(props) {
-  var _props$cardOptions3;
+  var _props$cardOptions3, _props$editorPluginAp2;
   var _useState = useState(new Map()),
     _useState2 = _slicedToArray(_useState, 2),
     supportedUrlsMap = _useState2[0],
@@ -127,6 +128,7 @@ export function HyperlinkToolbarAppearance(props) {
   if (!supportedUrlsMap.get(url)) {
     return null;
   }
+  var areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean((_props$editorPluginAp2 = props.editorPluginApi) === null || _props$editorPluginAp2 === void 0 ? void 0 : _props$editorPluginAp2.toolbar));
   return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
     key: "link-appearance",
     url: url,
@@ -135,13 +137,17 @@ export function HyperlinkToolbarAppearance(props) {
     editorState: editorState,
     allowEmbeds: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowEmbeds,
     allowBlockCards: cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowBlockCards,
-    editorAnalyticsApi: editorAnalyticsApi
+    editorAnalyticsApi: editorAnalyticsApi,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }), (cardOptions === null || cardOptions === void 0 ? void 0 : cardOptions.allowDatasource) && /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
     intl: intl,
     url: url,
     editorState: editorState,
     editorView: editorView,
     editorAnalyticsApi: editorAnalyticsApi,
-    inputMethod: INPUT_METHOD.FLOATING_TB
-  }), /*#__PURE__*/React.createElement(Separator, null));
+    inputMethod: INPUT_METHOD.FLOATING_TB,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+  }), /*#__PURE__*/React.createElement(Separator, {
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+  }));
 }

package/dist/esm/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -11,7 +11,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
 var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
-  var _props$cardOptions3;
+  var _props$editorPluginAp, _props$cardOptions3, _props$editorPluginAp3, _props$editorPluginAp4;
   var _useState = useState(new Map()),
     _useState2 = _slicedToArray(_useState, 2),
     supportedUrlsMap = _useState2[0],
@@ -22,6 +22,7 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
     setIsOpen = _useState4[1];
   var cardProvider = useRef(undefined);
   var containerRef = useRef(undefined);
+  var areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean((_props$editorPluginAp = props.editorPluginApi) === null || _props$editorPluginAp === void 0 ? void 0 : _props$editorPluginAp.toolbar));
   var url = props.url,
     intl = props.intl,
     editorView = props.editorView,
@@ -52,8 +53,8 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
             return _context.abrupt("return", cardProvider.current);
           case 4:
             return _context.abrupt("return", new Promise(function (resolve) {
-              var _props$editorPluginAp;
-              var cardProvider = (_props$editorPluginAp = props.editorPluginApi) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.card) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.sharedState) === null || _props$editorPluginAp === void 0 || (_props$editorPluginAp = _props$editorPluginAp.currentState()) === null || _props$editorPluginAp === void 0 ? void 0 : _props$editorPluginAp.provider;
+              var _props$editorPluginAp2;
+              var cardProvider = (_props$editorPluginAp2 = props.editorPluginApi) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.card) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.sharedState) === null || _props$editorPluginAp2 === void 0 || (_props$editorPluginAp2 = _props$editorPluginAp2.currentState()) === null || _props$editorPluginAp2 === void 0 ? void 0 : _props$editorPluginAp2.provider;
               if (cardProvider) {
                 resolve(cardProvider);
               }
@@ -170,7 +171,8 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
       label: "",
       spacing: "compact",
       size: "small"
-    })
+    }),
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }, title);
   return /*#__PURE__*/React.createElement(Flex, {
     ref: containerRef,
@@ -198,8 +200,11 @@ var CustomHyperlinkDropdown = function CustomHyperlinkDropdown(props) {
     isDatasourceView: isDatasourceView,
     allowDatasource: allowDatasource,
     dispatchCommand: dispatchCommand,
-    settingsConfig: settingsConfig
-  })), !(areToolbarFlagsEnabled() && fg('platform_editor_controls_patch_15')) && /*#__PURE__*/React.createElement(Separator, null));
+    settingsConfig: settingsConfig,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+  })), !(areToolbarFlagsEnabled(Boolean((_props$editorPluginAp3 = props.editorPluginApi) === null || _props$editorPluginAp3 === void 0 ? void 0 : _props$editorPluginAp3.toolbar)) && fg('platform_editor_controls_patch_15')) && /*#__PURE__*/React.createElement(Separator, {
+    areAnyNewToolbarFlagsEnabled: areToolbarFlagsEnabled(Boolean((_props$editorPluginAp4 = props.editorPluginApi) === null || _props$editorPluginAp4 === void 0 ? void 0 : _props$editorPluginAp4.toolbar))
+  }));
 };
 export var getCustomHyperlinkAppearanceDropdown = function getCustomHyperlinkAppearanceDropdown(_ref3) {
   var url = _ref3.url,