@atlaskit/editor-plugin-media 1.37.3 → 1.38.0

package/dist/es2019/ui/ResizableMediaSingle/ResizableMediaSingleNext.js

@@ -3,7 +3,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
@@ -16,8 +16,10 @@ import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import { resizerStyles, richMediaClassName } from '@atlaskit/editor-common/styles';
 import { calcPctFromPx, handleSides, imageAlignmentMap, wrappedLayouts } from '@atlaskit/editor-common/ui';
 import { nonWrappedLayouts, setNodeSelection } from '@atlaskit/editor-common/utils';
+import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { MEDIA_PLUGIN_IS_RESIZING_KEY, MEDIA_PLUGIN_RESIZING_WIDTH_KEY } from '../../pm-plugins/main';
 import { getMediaResizeAnalyticsEvent } from '../../utils/analytics';
 import { checkMediaType } from '../../utils/check-media-type';
@@ -65,7 +67,7 @@ class ResizableMediaSingleNext extends React.Component {
           return layout;
         }
       }
-      return this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, this.isNestedNode());
+      return this.calcUnwrappedLayout(newWidth, containerWidth || 0, lineLength, fullWidthMode, this.isNestedNode());
     });
     _defineProperty(this, "calcUnwrappedLayout", (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) => {
       if (isNestedNode) {
@@ -375,7 +377,7 @@ class ResizableMediaSingleNext extends React.Component {
     } = this.props;
 
     // disable guidelines for nested media single node
-    return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
+    return this.isNestedNode() ? [] : generateDefaultGuidelines(lineLength, containerWidth || 0, fullWidthMode);
   }
   async checkVideoFile(viewMediaClientConfig) {
     if (this.pos === null || !viewMediaClientConfig) {
@@ -460,4 +462,544 @@ class ResizableMediaSingleNext extends React.Component {
     }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
   }
 }
-export default ResizableMediaSingleNext;
+const calcPxHeight = props => {
+  const {
+    newWidth,
+    previousWidth,
+    previousHeight
+  } = props;
+  return Math.round(previousHeight / previousWidth * newWidth);
+};
+const calcMinWidth = ({
+  isVideoFile,
+  contentWidth
+}) => {
+  return Math.min(contentWidth || akEditorDefaultLayoutWidth, isVideoFile ? MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
+};
+const calcMaxWidth = ({
+  containerWidth,
+  editorAppearance
+}) => {
+  return calcMediaSingleMaxWidth(containerWidth, editorAppearance);
+};
+const setIsResizingPluginState = ({
+  isResizing,
+  nodePosition,
+  initialWidth
+}) => (state, dispatch) => {
+  const tr = state.tr;
+  tr.setMeta(MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
+  tr.setMeta('is-resizer-resizing', isResizing);
+  if (isResizing && typeof nodePosition === 'number') {
+    tr.setSelection(NodeSelection.create(state.doc, nodePosition));
+  }
+  if (isResizing && typeof initialWidth === 'number') {
+    tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, initialWidth);
+  }
+  if (dispatch) {
+    dispatch(tr);
+  }
+  return true;
+};
+const calcUnwrappedLayout = (width, containerWidth, contentWidth, fullWidthMode, isNestedNode) => {
+  if (isNestedNode) {
+    return 'center';
+  }
+  if (fullWidthMode) {
+    if (width < contentWidth) {
+      return 'center';
+    }
+    return 'full-width';
+  }
+
+  // handle top-level node in fixed-width editor
+  if (width <= contentWidth) {
+    return 'center';
+  }
+  if (width < Math.min(containerWidth - akEditorGutterPaddingDynamic() * 2, akEditorFullWidthLayoutWidth)) {
+    return 'wide';
+  }
+
+  // set full width to be containerWidth - akEditorGutterPaddingDynamic() * 2
+  // instead of containerWidth - akEditorBreakoutPadding,
+  // so that we have image aligned with text
+  return 'full-width';
+};
+const calcNewLayout = ({
+  layout,
+  containerWidth,
+  lineLength,
+  fullWidthMode,
+  isNestedNode
+}) => (newWidth, stop) => {
+  const newPct = calcPctFromPx(newWidth, lineLength) * 100;
+  const wrappedLayout = wrappedLayouts.indexOf(layout) > -1;
+  if (newPct <= 100 && wrappedLayout) {
+    if (!stop || newPct !== 100) {
+      return layout;
+    }
+  }
+  return calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, isNestedNode);
+};
+const calculateSizeState = props => (size, delta, onResizeStop = false, aspectRatio) => {
+  const calculatedWidth = Math.round(size.width + delta.width);
+  const calculatedWidthWithLayout = calcNewLayout(props)(calculatedWidth, onResizeStop);
+  return {
+    width: calculatedWidth,
+    height: calculatedWidth / aspectRatio,
+    layout: calculatedWidthWithLayout
+  };
+};
+const getAspectRatio = ({
+  width,
+  height
+}) => {
+  if (width && height > 0) {
+    return width / height;
+  }
+
+  // TODO handle this case
+  return 1;
+};
+const updateSizeInPluginState = throttle(({
+  width,
+  view
+}) => {
+  const {
+    state,
+    dispatch
+  } = view;
+  const tr = state.tr;
+  tr.setMeta(MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
+  return dispatch(tr);
+}, MEDIA_SINGLE_RESIZE_THROTTLE_TIME);
+export const ResizableMediaSingleNextFunctional = props => {
+  const {
+    width: origWidth,
+    children,
+    containerWidth,
+    fullWidthMode,
+    layout,
+    selected,
+    showLegacyNotification,
+    className,
+    dispatchAnalyticsEvent,
+    editorAppearance,
+    getPos,
+    lineLength,
+    mediaSingleWidth,
+    height,
+    nodeType,
+    pluginInjectionApi,
+    updateSize,
+    view,
+    viewMediaClientConfig
+  } = props;
+  const initialWidth = useMemo(() => {
+    return mediaSingleWidth || DEFAULT_IMAGE_WIDTH;
+  }, [mediaSingleWidth]);
+  const [dimensions, setDimensions] = useState({
+    width: initialWidth,
+    height: calcPxHeight({
+      newWidth: initialWidth,
+      previousWidth: initialWidth,
+      previousHeight: height
+    })
+  });
+  const dimensionsRef = useRef(dimensions);
+  const lastSnappedGuidelineKeysRef = useRef([]);
+  const [snaps, setSnaps] = useState({});
+  const [isResizing, setIsResizing] = useState(false);
+  const [isVideoFile, setIsVideoFile] = useState(true);
+  const nodePosition = useMemo(() => {
+    if (typeof getPos !== 'function') {
+      return null;
+    }
+    const pos = getPos();
+    if (Number.isNaN(pos) || typeof pos !== 'number') {
+      return null;
+    }
+    return pos;
+  }, [getPos]);
+  const isNestedNode = useMemo(() => {
+    if (nodePosition === null) {
+      return false;
+    }
+    const $pos = view.state.doc.resolve(nodePosition);
+    return !!($pos && $pos.depth !== 0);
+  }, [nodePosition, view]);
+  const maybeContainerWidth = containerWidth || origWidth;
+  const memoizedCss = useMemo(() => {
+    return wrapperStyle({
+      layout,
+      containerWidth: maybeContainerWidth,
+      fullWidthMode,
+      mediaSingleWidth: dimensions.width,
+      isNestedNode,
+      isExtendedResizeExperienceOn: true
+    });
+  }, [layout, maybeContainerWidth, fullWidthMode, dimensions.width, isNestedNode]);
+  const maxWidth = useMemo(() => {
+    if (!isResizing && isNestedNode) {
+      return undefined;
+    }
+    if (isNestedNode || fullWidthMode) {
+      return lineLength;
+    }
+    return calcMaxWidth({
+      containerWidth,
+      editorAppearance
+    });
+  }, [isNestedNode, fullWidthMode, lineLength, editorAppearance, containerWidth, isResizing]);
+  const minWidth = calcMinWidth({
+    isVideoFile,
+    contentWidth: lineLength
+  });
+
+  // while is not resizing, we take 100% as min-width if the container width is less than the min-width
+  const minViewWidth = isResizing ? minWidth : `min(${minWidth}px, 100%)`;
+  const resizerNextClassName = useMemo(() => {
+    // TODO: Clean up where this lives and how it gets generated
+    const classNameNext = classnames(richMediaClassName, `image-${layout}`, isResizing ? 'is-resizing' : 'not-resizing', className, {
+      'richMedia-selected': selected,
+      'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
+    });
+    return classnames(classNameNext, resizerStyles);
+  }, [className, isResizing, layout, selected]);
+  const isInsideInlineLike = useMemo(() => {
+    if (nodePosition === null) {
+      return false;
+    }
+    const $pos = view.state.doc.resolve(nodePosition);
+    const {
+      listItem
+    } = view.state.schema.nodes;
+    return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
+  }, [nodePosition, view]);
+  const enable = useMemo(() => {
+    return handleSides.reduce((acc, side) => {
+      const oppositeSide = side === 'left' ? 'right' : 'left';
+      acc[side] = nonWrappedLayouts.concat(`wrap-${oppositeSide}`).concat(`align-${imageAlignmentMap[oppositeSide]}`).indexOf(layout) > -1;
+      if (side === 'left' && isInsideInlineLike) {
+        acc[side] = false;
+      }
+      return acc;
+    }, {});
+  }, [layout, isInsideInlineLike]);
+  const defaultGuidelines = useMemo(() => {
+    if (isNestedNode) {
+      return [];
+    }
+    return generateDefaultGuidelines(lineLength, containerWidth, fullWidthMode);
+  }, [isNestedNode, lineLength, containerWidth, fullWidthMode]);
+  const relativeGuidesRef = useRef({});
+  const guidelinesRef = useRef([]);
+  const updateGuidelines = useCallback(() => {
+    const {
+      relativeGuides,
+      dynamicGuides
+    } = generateDynamicGuidelines(view.state, lineLength, {
+      styles: {
+        lineStyle: 'dashed'
+      },
+      show: false
+    });
+
+    // disable guidelines for nested media single node
+    const dynamicGuidelines = isNestedNode ? [] : dynamicGuides;
+    relativeGuidesRef.current = relativeGuides;
+    guidelinesRef.current = [...defaultGuidelines, ...dynamicGuidelines];
+  }, [view, lineLength, defaultGuidelines, isNestedNode]);
+  const isGuidelineEnabled = useMemo(() => {
+    return !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.guideline);
+  }, [pluginInjectionApi]);
+  const handleResizeStart = useCallback(() => {
+    setIsResizing(true);
+    setIsResizingPluginState({
+      isResizing: true,
+      nodePosition,
+      initialWidth: dimensionsRef.current.width
+    })(view.state, view.dispatch);
+    if (isGuidelineEnabled) {
+      updateGuidelines();
+    }
+  }, [view, nodePosition, updateGuidelines, isGuidelineEnabled]);
+  const getRelativeGuides = useCallback(() => {
+    var _pluginInjectionApi$g, _pluginInjectionApi$g2;
+    if (typeof nodePosition !== 'number') {
+      return [];
+    }
+    const guidelinePluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g === void 0 ? void 0 : (_pluginInjectionApi$g2 = _pluginInjectionApi$g.sharedState) === null || _pluginInjectionApi$g2 === void 0 ? void 0 : _pluginInjectionApi$g2.currentState();
+    const {
+      top: topOffset
+    } = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
+      top: 0,
+      left: 0
+    };
+    const $pos = view.state.doc.resolve(nodePosition);
+    const relativeGuides = $pos && $pos.nodeAfter && dimensionsRef.current.width ? getRelativeGuidelines(relativeGuidesRef.current, {
+      node: $pos.nodeAfter,
+      pos: $pos.pos
+    }, view, lineLength, topOffset, dimensionsRef.current) : [];
+    return relativeGuides;
+  }, [pluginInjectionApi, nodePosition, view, lineLength]);
+  const updateActiveGuidelines = useCallback((width = 0, guidelines, guidelineSnapsReference) => {
+    var _pluginInjectionApi$g3, _pluginInjectionApi$g4;
+    if (!guidelineSnapsReference.snaps.x) {
+      return;
+    }
+    const {
+      gap,
+      keys: activeGuidelineKeys
+    } = findClosestSnap(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, MEDIA_SINGLE_SNAP_GAP);
+    const relativeGuidelines = activeGuidelineKeys.length ? [] : getRelativeGuides();
+    lastSnappedGuidelineKeysRef.current = activeGuidelineKeys.length ? activeGuidelineKeys : relativeGuidelines.map(rg => rg.key);
+    const nextGuideLines = [...getGuidelinesWithHighlights(gap, MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines), ...relativeGuidelines];
+    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g3 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g3 === void 0 ? void 0 : (_pluginInjectionApi$g4 = _pluginInjectionApi$g3.actions) === null || _pluginInjectionApi$g4 === void 0 ? void 0 : _pluginInjectionApi$g4.displayGuideline(view)({
+      guidelines: nextGuideLines
+    });
+  }, [getRelativeGuides, pluginInjectionApi, view]);
+  const aspectRatioRef = useRef(getAspectRatio({
+    width: props.width,
+    height: props.height
+  }));
+  const handleResize = useCallback((size, delta) => {
+    const {
+      width,
+      height,
+      layout: newLayout
+    } = calculateSizeState({
+      layout,
+      containerWidth,
+      lineLength,
+      fullWidthMode,
+      isNestedNode
+    })(size, delta, false, aspectRatioRef.current);
+    if (isGuidelineEnabled) {
+      const guidelineSnaps = getGuidelineSnaps(guidelinesRef.current, lineLength, layout);
+      updateActiveGuidelines(width, guidelinesRef.current, guidelineSnaps);
+      const relativeSnaps = getRelativeGuideSnaps(relativeGuidesRef.current, aspectRatioRef.current);
+      setSnaps({
+        x: [...(guidelineSnaps.snaps.x || []), ...relativeSnaps]
+      });
+    }
+    setDimensions({
+      width,
+      height
+    });
+    updateSizeInPluginState({
+      width,
+      view
+    });
+    if (newLayout !== layout) {
+      updateSize(width, newLayout);
+    }
+  }, [view, updateSize, layout, isGuidelineEnabled, containerWidth, lineLength, fullWidthMode, isNestedNode, updateActiveGuidelines]);
+  const handleResizeStop = useCallback((size, delta) => {
+    var _pluginInjectionApi$g5, _pluginInjectionApi$g6;
+    if (typeof nodePosition !== 'number') {
+      return;
+    }
+    const {
+      width,
+      height,
+      layout: newLayout
+    } = calculateSizeState({
+      layout,
+      containerWidth,
+      lineLength,
+      fullWidthMode,
+      isNestedNode
+    })(size, delta, false, aspectRatioRef.current);
+    if (dispatchAnalyticsEvent) {
+      const $pos = view.state.doc.resolve(nodePosition);
+      const event = getMediaResizeAnalyticsEvent(nodeType || 'mediaSingle', {
+        width,
+        layout: newLayout,
+        widthType: 'pixel',
+        snapType: getGuidelineTypeFromKey(lastSnappedGuidelineKeysRef.current, guidelinesRef.current),
+        parentNode: $pos ? $pos.parent.type.name : undefined,
+        inputMethod: 'mouse'
+      });
+      if (event) {
+        dispatchAnalyticsEvent(event);
+      }
+    }
+    setIsResizing(false);
+    setIsResizingPluginState({
+      isResizing: false
+    })(view.state, view.dispatch);
+    pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g5 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g5 === void 0 ? void 0 : (_pluginInjectionApi$g6 = _pluginInjectionApi$g5.actions) === null || _pluginInjectionApi$g6 === void 0 ? void 0 : _pluginInjectionApi$g6.displayGuideline(view)({
+      guidelines: []
+    });
+    let newWidth = width;
+    if (newLayout === 'full-width') {
+      // When a node reaches full width in current viewport,
+      // update its width with 1800 to align with pixel entry
+      newWidth = akEditorFullWidthLayoutWidth;
+    }
+    setDimensions({
+      width: newWidth,
+      height
+    });
+    updateSize(newWidth, newLayout);
+  }, [nodeType, dispatchAnalyticsEvent, containerWidth, fullWidthMode, isNestedNode, layout, lineLength, view, nodePosition, pluginInjectionApi, updateSize]);
+  const mountedRef = React.useRef(true);
+  useLayoutEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  useLayoutEffect(() => {
+    setDimensions({
+      width: initialWidth,
+      height: calcPxHeight({
+        newWidth: initialWidth,
+        previousWidth: initialWidth,
+        previousHeight: height
+      })
+    });
+  }, [initialWidth, height]);
+  useEffect(() => {
+    dimensionsRef.current = dimensions;
+  }, [dimensions]);
+  useEffect(() => {
+    if (!viewMediaClientConfig || typeof nodePosition !== 'number') {
+      return;
+    }
+    const mediaNode = view.state.doc.nodeAt(nodePosition + 1);
+    if (!mediaNode) {
+      return;
+    }
+    checkMediaType(mediaNode, viewMediaClientConfig).then(mediaType => {
+      if (mountedRef.current) {
+        const isVideoFile = mediaType !== 'external' && mediaType !== 'image';
+        setIsVideoFile(isVideoFile);
+      }
+    });
+  }, [view, viewMediaClientConfig, nodePosition]);
+  return jsx("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    css: memoizedCss
+  }, jsx(ResizerNext, {
+    minWidth: minViewWidth,
+    maxWidth: maxWidth
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: resizerNextClassName,
+    snapGap: MEDIA_SINGLE_SNAP_GAP,
+    enable: enable,
+    width: dimensions.width,
+    handleResizeStart: handleResizeStart,
+    handleResize: handleResize,
+    handleResizeStop: handleResizeStop,
+    snap: snaps,
+    resizeRatio: nonWrappedLayouts.includes(layout) ? 2 : 1,
+    "data-testid": resizerNextTestId,
+    isHandleVisible: selected,
+    handlePositioning: isNestedNode ? 'adjacent' : undefined,
+    handleHighlight: "full-height"
+  }, children, showLegacyNotification && jsx(ResizableMediaMigrationNotification, null)));
+};
+const ResizableMediaSingleToggle = ({
+  allowBreakoutSnapPoints,
+  children,
+  className,
+  containerWidth,
+  dataAttributes,
+  disableHandles,
+  dispatchAnalyticsEvent,
+  editorAppearance,
+  fullWidthMode,
+  getPos,
+  gridSize,
+  handleMediaSingleRef,
+  hasFallbackContainer,
+  height,
+  isInsideOfInlineExtension,
+  isLoading,
+  layout,
+  lineLength,
+  mediaSingleWidth,
+  nodeType,
+  pctWidth,
+  pluginInjectionApi,
+  selected,
+  showLegacyNotification,
+  size,
+  updateSize,
+  view,
+  viewMediaClientConfig,
+  width
+}) => {
+  if (fg('platform_editor_react18_phase2__media_single')) {
+    return jsx(ResizableMediaSingleNextFunctional, {
+      allowBreakoutSnapPoints: allowBreakoutSnapPoints,
+      children: children
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      ,
+      className: className,
+      containerWidth: containerWidth,
+      dataAttributes: dataAttributes,
+      disableHandles: disableHandles,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+      editorAppearance: editorAppearance,
+      fullWidthMode: fullWidthMode,
+      getPos: getPos,
+      gridSize: gridSize,
+      handleMediaSingleRef: handleMediaSingleRef,
+      hasFallbackContainer: hasFallbackContainer,
+      height: height,
+      isInsideOfInlineExtension: isInsideOfInlineExtension,
+      isLoading: isLoading,
+      layout: layout,
+      lineLength: lineLength,
+      mediaSingleWidth: mediaSingleWidth,
+      nodeType: nodeType,
+      pctWidth: pctWidth,
+      pluginInjectionApi: pluginInjectionApi,
+      selected: selected,
+      showLegacyNotification: showLegacyNotification,
+      size: size,
+      updateSize: updateSize,
+      view: view,
+      viewMediaClientConfig: viewMediaClientConfig,
+      width: width
+    });
+  }
+  return jsx(ResizableMediaSingleNext, {
+    allowBreakoutSnapPoints: allowBreakoutSnapPoints,
+    children: children
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    ,
+    className: className,
+    containerWidth: containerWidth,
+    dataAttributes: dataAttributes,
+    disableHandles: disableHandles,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    editorAppearance: editorAppearance,
+    fullWidthMode: fullWidthMode,
+    getPos: getPos,
+    gridSize: gridSize,
+    handleMediaSingleRef: handleMediaSingleRef,
+    hasFallbackContainer: hasFallbackContainer,
+    height: height,
+    isInsideOfInlineExtension: isInsideOfInlineExtension,
+    isLoading: isLoading,
+    layout: layout,
+    lineLength: lineLength,
+    mediaSingleWidth: mediaSingleWidth,
+    nodeType: nodeType,
+    pctWidth: pctWidth,
+    pluginInjectionApi: pluginInjectionApi,
+    selected: selected,
+    showLegacyNotification: showLegacyNotification,
+    size: size,
+    updateSize: updateSize,
+    view: view,
+    viewMediaClientConfig: viewMediaClientConfig,
+    width: width
+  });
+};
+export default ResizableMediaSingleToggle;

package/dist/es2019/utils/media-common.js

@@ -233,6 +233,28 @@ export const getMediaFromSupportedMediaNodesFromSelection = state => {
       return null;
   }
 };
+export const isNodeDoubleClickSupportedInLivePagesViewMode = (isViewMode, node) => {
+  if (!node) {
+    return false;
+  }
+  // Double Click is not supported for video nodes on both views
+  if (isVideo(node.attrs.__fileMimeType)) {
+    return false;
+  }
+
+  // Double click is supported for all editor media nodes
+  if (!isViewMode) {
+    return true;
+  }
+
+  // Double Click is not supported for mediaGroup and mediaInline nodes that are file
+  if (node.type === node.type.schema.nodes.mediaGroup || node.type === node.type.schema.nodes.mediaInline && node.attrs.type === 'file') {
+    return false;
+  }
+
+  // Double Click supported for all other media nodes
+  return true;
+};
 export const getIdentifier = attrs => {
   if (isExternalMedia(attrs)) {
     return {

package/dist/esm/nodeviews/mediaSingle.js

@@ -71,7 +71,7 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
       isCopying: false
     });
     _defineProperty(_assertThisInitialized(_this), "mediaSingleWrapperRef", /*#__PURE__*/React.createRef());
-    // platform_editor_typography_migration_ugc clean up
+    // platform_editor_typography_ugc clean up
     // remove HTMLSpanElement type
     _defineProperty(_assertThisInitialized(_this), "captionPlaceHolderRef", /*#__PURE__*/React.createRef());
     _defineProperty(_assertThisInitialized(_this), "createOrUpdateMediaNodeUpdater", function (props) {
@@ -505,8 +505,8 @@ var MediaSingleNode = /*#__PURE__*/function (_Component) {
         isDrafting: isCurrentNodeDrafting
       }), jsx("div", {
         ref: this.props.forwardRef
-      }), shouldShowPlaceholder && (editorExperiment('typography_migration_ugc', true) ? jsx(CaptionPlaceholderButton
-      // platform_editor_typography_migration_ugc clean up
+      }), shouldShowPlaceholder && (fg('platform_editor_typography_ugc') ? jsx(CaptionPlaceholderButton
+      // platform_editor_typography_ugc clean up
       // remove typecasting
       , {
         ref: this.captionPlaceHolderRef,

package/dist/esm/nodeviews/mediaSingleNext.js

@@ -511,8 +511,8 @@ export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNex
     isDrafting: isCurrentNodeDrafting
   }), jsx("div", {
     ref: forwardRef
-  }), shouldShowPlaceholder && (editorExperiment('typography_migration_ugc', true) ? jsx(CaptionPlaceholderButton
-  // platform_editor_typography_migration_ugc clean up
+  }), shouldShowPlaceholder && (fg('platform_editor_typography_ugc') ? jsx(CaptionPlaceholderButton
+  // platform_editor_typography_ugc clean up
   // remove typecasting
   , {
     ref: captionPlaceHolderRef,