@atlaskit/editor-plugin-media 6.1.0 → 6.2.1

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)];

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

@@ -14,17 +14,20 @@ const containerStyles = xcss({
 export const LayoutGroup = ({
   layoutButtons,
   dispatchCommand,
-  hide
+  hide,
+  areAnyNewToolbarFlagsEnabled
 }) => {
   return jsx(Box, {
     xcss: containerStyles
   }, jsx(ButtonGroup, null, layoutButtons.map((item, idx) => {
     switch (item.type) {
       case 'separator':
+        return jsx(FloatingToolbarSeparator
         // Ignored via go/ees005
         // eslint-disable-next-line react/no-array-index-key
-        return jsx(FloatingToolbarSeparator, {
-          key: idx
+        , {
+          key: idx,
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         });
       case 'button':
         // Ignored via go/ees005
@@ -44,7 +47,8 @@ export const LayoutGroup = ({
           onClick: () => {
             dispatchCommand(item.onClick);
             hide();
-          }
+          },
+          areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
         });
     }
   })));

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

@@ -27,7 +27,8 @@ export const LinkToolbarAppearance = ({
   onEditLink,
   onOpenLink,
   isInlineNode,
-  isViewOnly
+  isViewOnly,
+  areAnyNewToolbarFlagsEnabled
 }) => {
   const [showLinkingControls, setShowLinkingControls] = useState(true);
   useEffect(() => {
@@ -62,7 +63,8 @@ export const LinkToolbarAppearance = ({
         description: title,
         keymap: addLink
       }),
-      testId: "edit-link-button"
+      testId: "edit-link-button",
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
     }, title)), jsx(ToolbarButton, {
       target: "_blank",
       href: isValidUrl ? mediaLinkingState.link : undefined,
@@ -76,8 +78,11 @@ export const LinkToolbarAppearance = ({
       })
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
-      className: "hyperlink-open-link"
-    }), jsx(Separator, null));
+      className: "hyperlink-open-link",
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    }), jsx(Separator, {
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    }));
   } else {
     const title = intl.formatMessage(linkToolbarMessages.addLink);
     return !isViewOnly ? jsx(Fragment, null, jsx(ToolbarButton, {
@@ -92,7 +97,10 @@ export const LinkToolbarAppearance = ({
         color: "currentColor",
         label: title,
         spacing: "spacious"
-      })
-    }), jsx(Separator, null)) : null;
+      }),
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    }), jsx(Separator, {
+      areAnyNewToolbarFlagsEnabled: areAnyNewToolbarFlagsEnabled
+    })) : null;
   }
 };

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { isSafeUrl } from '@atlaskit/adf-schema';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
 import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
+import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
 import { RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
 import LinkIcon from '@atlaskit/icon/core/link';
 import LinkExternalIcon from '@atlaskit/icon/core/link-external';
@@ -114,7 +115,8 @@ export const getLinkingToolbar = (toolbarBaseConfig, mediaLinkingState, state, i
               },
               onBlur: () => {
                 hideLinkingToolbar(view.state, view.dispatch, view);
-              }
+              },
+              areAnyNewToolbarFlagsEnabled: areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))
             });
           }
         }]

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

@@ -37,12 +37,12 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
     return getMediaInlineImageToolbar(state, intl, mediaPluginState, hoverDecoration, editorAnalyticsAPI, pluginInjectionApi, mediaLinkingState, options);
   }
   const items = [];
-  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;
@@ -51,7 +51,7 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
         api: pluginInjectionApi
       })) !== null && _handleShowMediaViewe !== void 0 ? _handleShowMediaViewe : false;
     },
-    ...(isNewEditorToolbarEnabled && {
+    ...(areAnyNewToolbarFlagsEnabled && {
       supportsViewMode: true
     })
   };
@@ -66,11 +66,11 @@ export const generateMediaInlineFloatingToolbar = (state, intl, mediaPluginState
     },
     disabled: disableDownloadButton,
     title: intl.formatMessage(messages.download),
-    ...(isNewEditorToolbarEnabled && {
+    ...(areAnyNewToolbarFlagsEnabled && {
       supportsViewMode: true
     })
   };
-  if (!isNewEditorToolbarEnabled) {
+  if (!areAnyNewToolbarFlagsEnabled) {
     items.push({
       id: 'editor.media.view.switcher.inline',
       type: 'button',
@@ -296,7 +296,8 @@ const getMediaInlineImageToolbar = (state, intl, mediaPluginState, hoverDecorati
             onEditLink: editLink,
             onOpenLink: openLink,
             isInlineNode: true,
-            isViewOnly: options.isViewOnly
+            isViewOnly: options.isViewOnly,
+            areAnyNewToolbarFlagsEnabled: areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))
           });
         }
         return null;

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

@@ -20,6 +20,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';
@@ -178,6 +179,7 @@ export var AltTextEditComponent = /*#__PURE__*/function (_React$Component) {
   }, {
     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(messages.back);
@@ -208,7 +210,8 @@ export var AltTextEditComponent = /*#__PURE__*/function (_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),
@@ -234,7 +237,8 @@ export var AltTextEditComponent = /*#__PURE__*/function (_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/esm/pm-plugins/utils/media-single.js

@@ -8,7 +8,6 @@ import { DEFAULT_IMAGE_WIDTH, getMaxWidthForNestedNodeNext, getMediaSingleInitia
 import { atTheBeginningOfBlock } from '@atlaskit/editor-common/selection';
 import { checkNodeDown, isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
-import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert as pmSafeInsert, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { copyOptionalAttrsFromMediaState, isInsidePotentialEmptyParagraph } from '../utils/media-common';
@@ -38,43 +37,27 @@ function insertNodesWithOptionalParagraph(_ref) {
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     insertMediaVia = _ref.insertMediaVia;
   return function (state, dispatch) {
-    var tr = state.tr,
-      schema = state.schema;
-    var paragraph = schema.nodes.paragraph;
+    var tr = state.tr;
     var inputMethod = analyticsAttributes.inputMethod,
       fileExtension = analyticsAttributes.fileExtension,
       newType = analyticsAttributes.newType,
       previousType = analyticsAttributes.previousType;
     var updatedTr = tr;
     var openEnd = 0;
-    if (shouldAddParagraph(state) && !fg('platform_editor_axe_leading_paragraph_from_media')) {
-      nodes.push(paragraph.create());
-      openEnd = 1;
-    }
     if (state.selection.empty) {
-      var insertFrom = atTheBeginningOfBlock(state) && fg('platform_editor_axe_leading_paragraph_from_media') ? state.selection.$from.before() : state.selection.from;
-      if (fg('platform_editor_axe_leading_paragraph_from_media')) {
-        if (fg('platform_editor_multi_images_overridden_upload_fix')) {
-          // the use of pmSafeInsert causes the node selection to media single node.
-          // It leads to discrepancy between the full-page and comment editor - not sure why :shrug:
-          // When multiple images are uploaded, the node selection is set to the previous node
-          // and got overridden by the next node inserted.
-          // It also causes the images position shifted when the images are uploaded.
-          // E.g the images are uploaded after a table, the images will be inserted inside the table.
-          // so we revert to use tr.insert instead. No extra paragraph is added.
-          updatedTr = updatedTr.insert(insertFrom, nodes);
-        } else {
-          var shouldInsertFrom = !isInsidePotentialEmptyParagraph(state);
-          updatedTr = atTheBeginningOfBlock(state) ? pmSafeInsert(nodes[0], shouldInsertFrom ? insertFrom : undefined, false)(updatedTr) : updatedTr.insert(insertFrom, nodes);
-        }
+      var insertFrom = atTheBeginningOfBlock(state) ? state.selection.$from.before() : state.selection.from;
+      if (fg('platform_editor_multi_images_overridden_upload_fix')) {
+        // the use of pmSafeInsert causes the node selection to media single node.
+        // It leads to discrepancy between the full-page and comment editor - not sure why :shrug:
+        // When multiple images are uploaded, the node selection is set to the previous node
+        // and got overridden by the next node inserted.
+        // It also causes the images position shifted when the images are uploaded.
+        // E.g the images are uploaded after a table, the images will be inserted inside the table.
+        // so we revert to use tr.insert instead. No extra paragraph is added.
+        updatedTr = updatedTr.insert(insertFrom, nodes);
       } else {
-        updatedTr.insert(insertFrom, nodes);
-      }
-      var endPos = state.selection.from + nodes.reduce(function (totalSize, currNode) {
-        return totalSize + currNode.nodeSize;
-      }, 0);
-      if (!fg('platform_editor_axe_leading_paragraph_from_media')) {
-        updatedTr.setSelection(new TextSelection(updatedTr.doc.resolve(endPos), updatedTr.doc.resolve(endPos)));
+        var shouldInsertFrom = !isInsidePotentialEmptyParagraph(state);
+        updatedTr = atTheBeginningOfBlock(state) ? pmSafeInsert(nodes[0], shouldInsertFrom ? insertFrom : undefined, false)(updatedTr) : updatedTr.insert(insertFrom, nodes);
       }
     } else {
       updatedTr.replaceSelection(new Slice(Fragment.from(nodes), 0, openEnd));

package/dist/esm/ui/MediaLinkingToolbar.js

@@ -137,7 +137,8 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
                 inputMethod: currentInputMethod
               }, true);
             }
-          }
+          },
+          areAnyNewToolbarFlagsEnabled: _this.props.areAnyNewToolbarFlagsEnabled
         })), jsx(PanelTextInput, {
           inputId: "media-link-search-input",
           testId: "media-link-input",
@@ -164,7 +165,9 @@ var LinkAddToolbar = /*#__PURE__*/function (_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
@@ -177,7 +180,8 @@ var LinkAddToolbar = /*#__PURE__*/function (_React$PureComponent) {
               event.preventDefault();
               _this.handleUnlink(true);
             }
-          }
+          },
+          areAnyNewToolbarFlagsEnabled: _this.props.areAnyNewToolbarFlagsEnabled
         }))), !!errorsList.length && jsx("section", {
           css: validationWrapper
         }, errorsList), renderRecentList()))

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

@@ -70,7 +70,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/esm/ui/toolbar/index.js

@@ -114,12 +114,12 @@ export var handleShowMediaViewer = function handleShowMediaViewer(_ref) {
 var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar(state, intl, mediaPluginState, hoverDecoration, pluginInjectionApi, editorAnalyticsAPI, forceFocusSelector, isViewOnly) {
   var _pluginInjectionApi$c;
   var disableDownloadButton = getIsDownloadDisabledByDataSecurityPolicy(mediaPluginState);
-  var isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
+  var areAnyNewToolbarFlagsEnabled = 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 ? GrowDiagonalIcon : MaximizeIcon,
+    icon: areAnyNewToolbarFlagsEnabled ? GrowDiagonalIcon : MaximizeIcon,
     title: intl.formatMessage(messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -141,15 +141,15 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     },
     title: intl.formatMessage(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',
@@ -269,7 +269,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 = areToolbarFlagsEnabled();
+  var areAnyNewToolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar));
   var disableDownloadButton = getIsDownloadDisabledByDataSecurityPolicy(pluginState);
   if (shouldShowImageBorder(state)) {
     toolbarButtons.push({
@@ -296,7 +296,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         });
       }
     });
-    if (!isNewEditorToolbarEnabled) {
+    if (!areAnyNewToolbarFlagsEnabled) {
       toolbarButtons.push({
         type: 'separator'
       });
@@ -317,7 +317,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
     var layoutButtons = 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 = 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(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutDropdown));
@@ -332,7 +332,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
@@ -345,7 +347,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
             title: intl.formatMessage(layoutToMessages[selectedLayoutIcon.value]),
             icon: selectedLayoutIcon.icon
           };
-          toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), [trigger], _toConsumableArray(isNewEditorToolbarEnabled ? [] : [{
+          toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), [trigger], _toConsumableArray(areAnyNewToolbarFlagsEnabled ? [] : [{
             type: 'separator'
           }]));
         }
@@ -367,7 +369,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         addLayoutDropdownToToolbar();
       } else {
         toolbarButtons = [].concat(_toConsumableArray(toolbarButtons), _toConsumableArray(layoutButtons));
-        if (layoutButtons.length && !isNewEditorToolbarEnabled) {
+        if (layoutButtons.length && !areAnyNewToolbarFlagsEnabled) {
           toolbarButtons.push({
             type: 'separator'
           });
@@ -383,7 +385,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         var hasCaption = contains(selectedNode.node, state.schema.nodes.caption);
         var inlineSwitcherTitle = intl.formatMessage(hasCaption ? mediaAndEmbedToolbarMessages.changeToMediaInlineImageCaptionWarning : mediaAndEmbedToolbarMessages.changeToMediaInlineImage);
         var floatingSwitcherTitle = intl.formatMessage(mediaAndEmbedToolbarMessages.changeToMediaSingle);
-        if (!isNewEditorToolbarEnabled) {
+        if (!areAnyNewToolbarFlagsEnabled) {
           var _pluginInjectionApi$a5;
           toolbarButtons.push({
             type: 'button',
@@ -428,7 +430,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
     }
 
     // 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
@@ -479,14 +481,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(commentButton(intl, state, pluginInjectionApi, onCommentButtonMount), {
           type: 'separator',
@@ -529,7 +531,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
                 onAddLink: editLink,
                 onEditLink: editLink,
                 onOpenLink: openLink,
-                isViewOnly: isViewOnly
+                isViewOnly: isViewOnly,
+                areAnyNewToolbarFlagsEnabled: false
               });
             }
             return null;
@@ -584,7 +587,7 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
       supportsViewMode: true
     });
   }
-  if (!isNewEditorToolbarEnabled) {
+  if (!areAnyNewToolbarFlagsEnabled) {
     var _pluginInjectionApi$a8;
     if (allowAltTextOnImages) {
       var _pluginInjectionApi$a7;
@@ -750,7 +753,8 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
       return 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: areToolbarFlagsEnabled(Boolean(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : pluginInjectionApi.toolbar))
       });
     }
   }
@@ -798,7 +802,7 @@ export var floatingToolbar = function floatingToolbar(state, intl) {
     };
     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);
     var customOptions = [].concat(_toConsumableArray(getLinkingDropdownOptions(state, intl, mediaLinkingState, allowMediaInline && selectedNodeType && selectedNodeType === mediaInline, allowLinking, isViewOnly)), _toConsumableArray(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)), _toConsumableArray(getResizeDropdownOption(options, state, intl.formatMessage, selectedNodeType)));

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

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