@atlaskit/editor-plugin-card 8.0.0 → 8.1.0

package/dist/cjs/ui/toolbar.js

@@ -176,8 +176,8 @@ var unlinkCard = function unlinkCard(node, state, editorAnalyticsApi) {
     return false;
   };
 };
-var buildAlignmentOptions = function buildAlignmentOptions(state, intl, widthPluginDependencyApi, analyticsApi, cardOptions) {
-  if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) {
+var buildAlignmentOptions = function buildAlignmentOptions(state, intl, widthPluginDependencyApi, analyticsApi, cardOptions, areAnyNewToolbarFlagsEnabled) {
+  if (areAnyNewToolbarFlagsEnabled) {
     return (0, _card.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 (0, _card.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);
@@ -222,7 +222,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         title: title
       };
     }
-    var isNewEditorToolbarDisabled = !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)();
+    var areAllNewToolbarFlagsDisabled = !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
     var currentAppearance = (0, _utils3.appearanceForNodeType)(node.type);
     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;
@@ -278,7 +278,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
             editorAnalyticsApi: editorAnalyticsApi,
             editorView: editorView,
             onLinkEditClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true),
-            currentAppearance: currentAppearance
+            currentAppearance: currentAppearance,
+            areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
           });
         }
       }] : [{
@@ -318,7 +319,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
             editorAnalyticsApi: editorAnalyticsApi,
             editorView: editorView,
             onLinkEditClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, true),
-            currentAppearance: currentAppearance
+            currentAppearance: currentAppearance,
+            areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
           });
         }
       }] : [{
@@ -340,11 +342,12 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
           return /*#__PURE__*/_react.default.createElement(_OpenPreviewButton.OpenPreviewPanelToolbarButton, {
             node: node,
             intl: intl,
-            editorAnalyticsApi: editorAnalyticsApi
+            editorAnalyticsApi: editorAnalyticsApi,
+            areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
           });
         }
       }] : [];
-      var toolbarItems = isNewEditorToolbarDisabled ? [].concat(editItems, commentItems, openPreviewPanelItems, [{
+      var toolbarItems = areAllNewToolbarFlagsDisabled ? [].concat(editItems, commentItems, openPreviewPanelItems, [{
         id: 'editor.link.openLink',
         type: 'button',
         icon: _linkExternal.default,
@@ -357,7 +360,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         target: '_blank'
       }, {
         type: 'separator'
-      }], (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
+      }], (0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, !areAllNewToolbarFlagsDisabled)), [{
         type: 'copy-button',
         items: [{
           state: state,
@@ -381,10 +384,10 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
         onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
         title: intl.formatMessage(_messages.default.remove),
         onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
-      }]) : [].concat(openPreviewPanelItems, editButtonItems, (0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_15') ? [].concat((0, _toConsumableArray2.default)(getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi)), [{
+      }]) : [].concat(openPreviewPanelItems, editButtonItems, (0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_patch_15') ? [].concat((0, _toConsumableArray2.default)(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: _linkExternal.default,
@@ -401,8 +404,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
       }, commentItems[0]] : commentItems));
       if (currentAppearance === 'embed') {
         var _pluginInjectionApi$a4;
-        var alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, cardOptions);
-        if (alignmentOptions.length && isNewEditorToolbarDisabled) {
+        var alignmentOptions = buildAlignmentOptions(state, intl, pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.width, pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions, cardOptions, !areAllNewToolbarFlagsDisabled);
+        if (alignmentOptions.length && areAllNewToolbarFlagsDisabled) {
           alignmentOptions.push({
             type: 'separator'
           });
@@ -417,7 +420,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
       // For url appearance, please see HyperlinkToolbarAppearanceProps
       if (currentAppearance) {
         var showDatasourceAppearance = allowDatasource && url;
-        toolbarItems.unshift.apply(toolbarItems, (0, _toConsumableArray2.default)(getToolbarViewedItem(url, currentAppearance)).concat([isNewEditorToolbarDisabled ? {
+        toolbarItems.unshift.apply(toolbarItems, (0, _toConsumableArray2.default)(getToolbarViewedItem(url, currentAppearance)).concat([areAllNewToolbarFlagsDisabled ? {
           type: 'custom',
           fallback: [],
           render: function render(editorView) {
@@ -431,7 +434,8 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               allowEmbeds: allowEmbeds,
               allowBlockCards: allowBlockCards,
               editorAnalyticsApi: editorAnalyticsApi,
-              showUpgradeDiscoverability: showUpgradeDiscoverability
+              showUpgradeDiscoverability: showUpgradeDiscoverability,
+              areAnyNewToolbarFlagsEnabled: false
             });
           }
         } : (0, _LinkToolbarAppearanceDropdown.getLinkAppearanceDropdown)({
@@ -445,8 +449,9 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
           allowDatasource: cardOptions.allowDatasource,
           showUpgradeDiscoverability: showUpgradeDiscoverability,
           settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
-          isDatasourceView: isDatasource
-        })], (0, _toConsumableArray2.default)(showDatasourceAppearance && isNewEditorToolbarDisabled ? [{
+          isDatasourceView: isDatasource,
+          areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
+        })], (0, _toConsumableArray2.default)(showDatasourceAppearance && areAllNewToolbarFlagsDisabled ? [{
           type: 'custom',
           fallback: [],
           render: function render(editorView) {
@@ -456,14 +461,15 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
               url: url,
               editorView: editorView,
               editorState: state,
-              inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
+              inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
+              areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
             });
           }
-        }] : []), (0, _toConsumableArray2.default)(!isNewEditorToolbarDisabled ? [] : [{
+        }] : []), (0, _toConsumableArray2.default)(!areAllNewToolbarFlagsDisabled ? [] : [{
           type: 'separator'
         }])));
       }
-      if (!isNewEditorToolbarDisabled) {
+      if (!areAllNewToolbarFlagsDisabled) {
         var hoverDecorationProps = function hoverDecorationProps(nodeType, className) {
           return {
             onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(nodeType, true, className),
@@ -506,7 +512,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
     }
   };
 };
-var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi) {
+var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inlineCard, editorAnalyticsApi, areAnyNewToolbarFlagsEnabled) {
   return node.type === inlineCard ? [{
     id: 'editor.link.unlink',
     focusEditoronEnter: true,
@@ -515,7 +521,7 @@ var getUnlinkButtonGroup = function getUnlinkButtonGroup(state, intl, node, inli
     icon: _linkBroken.default,
     iconFallback: _linkBrokenEditorUnlink.default,
     onClick: withToolbarMetadata(unlinkCard(node, state, editorAnalyticsApi))
-  }].concat((0, _toConsumableArray2.default)((0, _toolbarFlagCheck.areToolbarFlagsEnabled)() ? [] : [{
+  }].concat((0, _toConsumableArray2.default)(areAnyNewToolbarFlagsEnabled ? [] : [{
     type: 'separator'
   }])) : [];
 };
@@ -534,7 +540,7 @@ var getSettingsButton = exports.getSettingsButton = function getSettingsButton(i
 var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId, state, cardOptions, currentAppearance, pluginInjectionApi) {
   var _node$attrs2;
   var toolbarItems = [];
-  var isNewEditorToolbarDisabled = !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)();
+  var areAllNewToolbarFlagsDisabled = !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   var canShowAppearanceSwitch = function canShowAppearanceSwitch() {
     // we do not show smart-link or the datasource icons when the node does not have a url to resolve
     if (!metadata.url) {
@@ -547,7 +553,7 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       allowEmbeds = cardOptions.allowEmbeds,
       showUpgradeDiscoverability = cardOptions.showUpgradeDiscoverability;
     var url = metadata.url;
-    if (isNewEditorToolbarDisabled) {
+    if (areAllNewToolbarFlagsDisabled) {
       toolbarItems.push({
         type: 'custom',
         fallback: [],
@@ -563,7 +569,8 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
             allowBlockCards: allowBlockCards,
             editorAnalyticsApi: editorAnalyticsApi,
             showUpgradeDiscoverability: showUpgradeDiscoverability,
-            isDatasourceView: true
+            isDatasourceView: true,
+            areAnyNewToolbarFlagsEnabled: false
           });
         }
       }, {
@@ -577,7 +584,8 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
             editorView: editorView,
             editorState: state,
             selected: true,
-            inputMethod: _analytics.INPUT_METHOD.FLOATING_TB
+            inputMethod: _analytics.INPUT_METHOD.FLOATING_TB,
+            areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
           });
         }
       }, {
@@ -595,7 +603,8 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
         allowDatasource: cardOptions.allowDatasource,
         showUpgradeDiscoverability: showUpgradeDiscoverability,
         settingsConfig: getSettingsButton(intl, editorAnalyticsApi, cardOptions.userPreferencesLink),
-        isDatasourceView: true
+        isDatasourceView: true,
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
       }), {
         type: 'separator'
       });
@@ -615,7 +624,8 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
         editorAnalyticsApi: editorAnalyticsApi,
         editorView: editorView,
         onLinkEditClick: (0, _EditLinkToolbar.getEditLinkCallback)(editorAnalyticsApi, false),
-        currentAppearance: "datasource"
+        currentAppearance: "datasource",
+        areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
       });
     }
   });
@@ -632,13 +642,13 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
       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,
@@ -726,6 +736,7 @@ var shouldRenderToolbarPulse = exports.shouldRenderToolbarPulse = function shoul
 };
 var getStartingToolbarItems = exports.getStartingToolbarItems = function getStartingToolbarItems(options, api) {
   return function (intl, link, onEditLink, metadata, state) {
+    var areAllNewToolbarFlagsDisabled = !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
     var editLinkItem = options.allowDatasource ? [{
       type: 'custom',
       fallback: [],
@@ -741,7 +752,8 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
           url: link,
           editorView: editorView,
           onLinkEditClick: onEditLink,
-          currentAppearance: "url"
+          currentAppearance: "url",
+          areAnyNewToolbarFlagsEnabled: !areAllNewToolbarFlagsDisabled
         });
       }
     }] : [{
@@ -756,7 +768,7 @@ var getStartingToolbarItems = exports.getStartingToolbarItems = function getStar
     }, {
       type: 'separator'
     }];
-    if ((0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) {
+    if (!areAllNewToolbarFlagsDisabled) {
       var _api$analytics2, _api$analytics3;
       var hyperlinkAppearance = [(0, _HyperlinkToolbarAppearanceDropdown.getCustomHyperlinkAppearanceDropdown)({
         url: link,
@@ -820,7 +832,7 @@ var getEndingToolbarItems = exports.getEndingToolbarItems = function getEndingTo
      * Require either provider to be supplied (controls link preferences)
      * Or explicit user preferences config in order to enable button
      */
-    if ((options.provider || options.userPreferencesLink) && !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) {
+    if ((options.provider || options.userPreferencesLink) && !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar))) {
       var _api$analytics5;
       return [{
         type: 'separator'

package/dist/es2019/nodeviews/toDOM-fixes/blockCard.js

@@ -41,7 +41,7 @@ export const blockCardSpecWithFixedToDOM = () => {
           display: 'inline',
           boxDecorationBreak: 'clone',
           WebkitBoxDecorationBreak: 'clone',
-          borderRadius: "var(--ds-border-radius-100, 4px)",
+          borderRadius: "var(--ds-radius-small, 4px)",
           color: `var(--ds-link, ${B400})`,
           lineHeight: '22px',
           WebkitTransition: '0.1s all ease-in-out',

package/dist/es2019/nodeviews/toDOM-fixes/embedCard.js

@@ -97,7 +97,7 @@ export const embedCardSpecWithFixedToDOM = () => {
           marginLeft: "var(--ds-space-negative-025, -2px)",
           display: 'inline',
           boxDecorationBreak: 'clone',
-          borderRadius: "var(--ds-border-radius-100, 4px)",
+          borderRadius: "var(--ds-radius-small, 4px)",
           color: `var(--ds-link, ${B400})`,
           lineHeight: '22px',
           WebkitTransition: '0.1s all ease-in-out',

package/dist/es2019/nodeviews/toDOM-fixes/inlineCard.js

@@ -28,7 +28,7 @@ export const inlineCardSpecWithFixedToDOM = () => {
           display: 'inline',
           boxDecorationBreak: 'clone',
           WebkitBoxDecorationBreak: 'clone',
-          borderRadius: "var(--ds-border-radius-100, 4px)",
+          borderRadius: "var(--ds-radius-small, 4px)",
           color: `var(--ds-link, ${B400})`,
           lineHeight: '22px',
           WebkitTransition: '0.1s all ease-in-out',

package/dist/es2019/ui/DatasourceAppearanceButton.js

@@ -27,7 +27,8 @@ const DatasourceAppearanceButtonWithCardContext = ({
   editorView,
   editorState,
   selected,
-  inputMethod
+  inputMethod,
+  areAnyNewToolbarFlagsEnabled
 }) => {
   const {
     datasourceId,
@@ -96,7 +97,8 @@ const DatasourceAppearanceButtonWithCardContext = ({
     }),
     selected: selected,
     onClick: onChangeAppearance,
-    testId: 'card-datasource-appearance-button'
+    testId: 'card-datasource-appearance-button',
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }));
 };
 export const DatasourceAppearanceButton = ({
@@ -106,7 +108,8 @@ export const DatasourceAppearanceButton = ({
   editorView,
   editorState,
   selected,
-  inputMethod
+  inputMethod,
+  areAnyNewToolbarFlagsEnabled
 }) => {
   const cardContext = useSmartLinkContext();
   return jsx(DatasourceAppearanceButtonWithCardContext, {
@@ -117,6 +120,7 @@ export const DatasourceAppearanceButton = ({
     editorState: editorState,
     cardContext: cardContext,
     selected: selected,
-    inputMethod: inputMethod
+    inputMethod: inputMethod,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };

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

@@ -8,7 +8,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';
@@ -28,7 +27,8 @@ const EditToolbarButtonPresentation = ({
   editorView,
   extensionKey,
   onLinkEditClick,
-  intl
+  intl,
+  areAnyNewToolbarFlagsEnabled
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const containerRef = useRef();
@@ -46,11 +46,10 @@ const EditToolbarButtonPresentation = ({
       focusEditorView(editorView);
     }
   }, [currentAppearance, datasourceId, editorAnalyticsApi, editorView, extensionKey]);
-  const isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
-  const icon = isNewEditorToolbarEnabled ? jsx(EditIcon, {
+  const icon = areAnyNewToolbarFlagsEnabled ? jsx(EditIcon, {
     label: ""
   }) : undefined;
-  const tooltipContent = isNewEditorToolbarEnabled ? intl.formatMessage(linkToolbarMessages.editLink) : undefined;
+  const tooltipContent = areAnyNewToolbarFlagsEnabled ? intl.formatMessage(linkToolbarMessages.editLink) : undefined;
   switch (editVariant) {
     case 'edit-link':
       {
@@ -60,11 +59,14 @@ const EditToolbarButtonPresentation = ({
           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':
       {
@@ -73,11 +75,14 @@ const EditToolbarButtonPresentation = ({
         }, 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':
       {
@@ -94,11 +99,14 @@ const EditToolbarButtonPresentation = ({
           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/es2019/ui/EditToolbarButton/index.js

@@ -32,7 +32,8 @@ const EditToolbarButtonWithCardContext = props => {
     editorView,
     intl,
     onLinkEditClick,
-    url
+    url,
+    areAnyNewToolbarFlagsEnabled
   } = props;
   const {
     extensionKey,
@@ -85,11 +86,14 @@ const EditToolbarButtonWithCardContext = props => {
           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':
       {
@@ -98,11 +102,14 @@ const EditToolbarButtonWithCardContext = props => {
         }, 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':
       {
@@ -119,11 +126,14 @@ const EditToolbarButtonWithCardContext = props => {
           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, {
@@ -166,7 +176,8 @@ const EditToolbarButtonWithUrl = props => {
     editorView,
     intl,
     onLinkEditClick,
-    url
+    url,
+    areAnyNewToolbarFlagsEnabled
   } = props;
   const {
     extensionKey,
@@ -196,7 +207,8 @@ const EditToolbarButtonWithUrl = props => {
     editorView: editorView,
     extensionKey: extensionKey,
     onLinkEditClick: onLinkEditClick,
-    intl: intl
+    intl: intl,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };
 const EditToolbarButtonWithDatasourceId = props => {
@@ -207,7 +219,8 @@ const EditToolbarButtonWithDatasourceId = props => {
     intl,
     onLinkEditClick,
     datasourceId,
-    node
+    node,
+    areAnyNewToolbarFlagsEnabled
   } = props;
   const fetchData = useMemo(() => {
     try {
@@ -245,7 +258,8 @@ const EditToolbarButtonWithDatasourceId = props => {
     editorView: editorView,
     extensionKey: extensionKey,
     onLinkEditClick: onLinkEditClick,
-    intl: intl
+    intl: intl,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };
 export const EditToolbarButton = props => {
@@ -256,7 +270,8 @@ export const EditToolbarButton = props => {
     editorView,
     intl,
     onLinkEditClick,
-    url
+    url,
+    areAnyNewToolbarFlagsEnabled
   } = props;
   const cardContext = useSmartLinkContext();
   if (props.url) {
@@ -268,7 +283,8 @@ export const EditToolbarButton = props => {
       editorView: editorView,
       cardContext: cardContext,
       onLinkEditClick: onLinkEditClick,
-      currentAppearance: currentAppearance
+      currentAppearance: currentAppearance,
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
     });
   }
   if (props.datasourceId && props.node) {
@@ -279,7 +295,8 @@ export const EditToolbarButton = props => {
       editorAnalyticsApi: editorAnalyticsApi,
       editorView: editorView,
       onLinkEditClick: onLinkEditClick,
-      currentAppearance: currentAppearance
+      currentAppearance: currentAppearance,
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
     });
   }
   return jsx(EditToolbarButtonWithCardContext, {
@@ -290,6 +307,7 @@ export const EditToolbarButton = props => {
     editorView: editorView,
     cardContext: cardContext,
     onLinkEditClick: onLinkEditClick,
-    currentAppearance: currentAppearance
+    currentAppearance: currentAppearance,
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   });
 };

package/dist/es2019/ui/HyperlinkToolbarAppearance.js

@@ -1,11 +1,12 @@
 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$editorPluginAp5;
   const [supportedUrlsMap, setSupportedUrlsMap] = useState(new Map());
   const cardProvider = useRef(undefined);
   const {
@@ -60,6 +61,7 @@ export function HyperlinkToolbarAppearance(props) {
   if (!supportedUrlsMap.get(url)) {
     return null;
   }
+  const areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean((_props$editorPluginAp5 = props.editorPluginApi) === null || _props$editorPluginAp5 === void 0 ? void 0 : _props$editorPluginAp5.toolbar));
   return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
     key: "link-appearance",
     url: url,
@@ -68,13 +70,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/es2019/ui/HyperlinkToolbarAppearanceDropdown.js

@@ -8,11 +8,12 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives/compiled';
 import { LinkAppearanceMenu } from './LinkToolbarAppearanceDropdown';
 const CustomHyperlinkDropdown = props => {
-  var _props$cardOptions3;
+  var _props$editorPluginAp, _props$cardOptions3, _props$editorPluginAp6, _props$editorPluginAp7;
   const [supportedUrlsMap, setSupportedUrlsMap] = useState(new Map());
   const [isOpen, setIsOpen] = useState(false);
   const cardProvider = useRef(undefined);
   const containerRef = useRef(undefined);
+  const areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean((_props$editorPluginAp = props.editorPluginApi) === null || _props$editorPluginAp === void 0 ? void 0 : _props$editorPluginAp.toolbar));
   const {
     url,
     intl,
@@ -35,8 +36,8 @@ const CustomHyperlinkDropdown = props => {
       return cardProvider.current;
     }
     return new Promise(resolve => {
-      var _props$editorPluginAp, _props$editorPluginAp2, _props$editorPluginAp3, _props$editorPluginAp4;
-      const cardProvider = (_props$editorPluginAp = props.editorPluginApi) === null || _props$editorPluginAp === void 0 ? void 0 : (_props$editorPluginAp2 = _props$editorPluginAp.card) === null || _props$editorPluginAp2 === void 0 ? void 0 : (_props$editorPluginAp3 = _props$editorPluginAp2.sharedState) === null || _props$editorPluginAp3 === void 0 ? void 0 : (_props$editorPluginAp4 = _props$editorPluginAp3.currentState()) === null || _props$editorPluginAp4 === void 0 ? void 0 : _props$editorPluginAp4.provider;
+      var _props$editorPluginAp2, _props$editorPluginAp3, _props$editorPluginAp4, _props$editorPluginAp5;
+      const cardProvider = (_props$editorPluginAp2 = props.editorPluginApi) === null || _props$editorPluginAp2 === void 0 ? void 0 : (_props$editorPluginAp3 = _props$editorPluginAp2.card) === null || _props$editorPluginAp3 === void 0 ? void 0 : (_props$editorPluginAp4 = _props$editorPluginAp3.sharedState) === null || _props$editorPluginAp4 === void 0 ? void 0 : (_props$editorPluginAp5 = _props$editorPluginAp4.currentState()) === null || _props$editorPluginAp5 === void 0 ? void 0 : _props$editorPluginAp5.provider;
       if (cardProvider) {
         resolve(cardProvider);
       }
@@ -94,7 +95,8 @@ const CustomHyperlinkDropdown = props => {
       label: "",
       spacing: "compact",
       size: "small"
-    })
+    }),
+    areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
   }, title);
   return /*#__PURE__*/React.createElement(Flex, {
     ref: containerRef,
@@ -122,8 +124,11 @@ const 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$editorPluginAp6 = props.editorPluginApi) === null || _props$editorPluginAp6 === void 0 ? void 0 : _props$editorPluginAp6.toolbar)) && fg('platform_editor_controls_patch_15')) && /*#__PURE__*/React.createElement(Separator, {
+    areAnyNewToolbarFlagsEnabled: areToolbarFlagsEnabled(Boolean((_props$editorPluginAp7 = props.editorPluginApi) === null || _props$editorPluginAp7 === void 0 ? void 0 : _props$editorPluginAp7.toolbar))
+  }));
 };
 export const getCustomHyperlinkAppearanceDropdown = ({
   url,