@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
605 lines (601 loc) • 26.9 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _regeneratorRuntime from "@babel/runtime/regenerator";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
/**
* @jsxRuntime classic
* @jsx jsx
* @jsxFrag
*/
import React, { Fragment } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { getBrowserInfo } from '@atlaskit/editor-common/browser';
import { usePreviousState } from '@atlaskit/editor-common/hooks';
import { captionMessages } from '@atlaskit/editor-common/media';
import { calcMediaSinglePixelWidth, DEFAULT_IMAGE_HEIGHT, DEFAULT_IMAGE_WIDTH, ExternalImageBadge, getMaxWidthForNestedNode, MEDIA_SINGLE_GUTTER_SIZE, MediaBadges } from '@atlaskit/editor-common/media-single';
import { MediaSingle } from '@atlaskit/editor-common/ui';
import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
import { getAttrsFromUrl } from '@atlaskit/media-client';
import { fg } from '@atlaskit/platform-feature-flags';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { insertAndSelectCaptionFromMediaSinglePos } from '../pm-plugins/commands/captions';
import { isMediaBlobUrlFromAttrs } from '../pm-plugins/utils/media-common';
import { CaptionPlaceholder, CaptionPlaceholderButton } from '../ui/CaptionPlaceholder';
import { CommentBadgeWrapper } from '../ui/CommentBadge';
import ResizableMediaSingle from '../ui/ResizableMediaSingle';
import ResizableMediaSingleNext from '../ui/ResizableMediaSingle/ResizableMediaSingleNext';
import { hasPrivateAttrsChanged } from './helpers';
import { createMediaNodeUpdater } from './mediaNodeUpdater';
import { MediaSingleNodeSelector } from './styles';
var figureWrapperStyles = css({
margin: 0
});
var useMediaNodeUpdater = function useMediaNodeUpdater(_ref) {
var mediaProvider = _ref.mediaProvider,
mediaNode = _ref.mediaNode,
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
mediaSingleNodeProps = _ref.mediaSingleNodeProps;
var previousMediaProvider = usePreviousState(mediaProvider);
var previousMediaNode = usePreviousState(mediaNode);
var mediaNodeUpdaterRef = React.useRef(null);
var createOrUpdateMediaNodeUpdater = React.useCallback(function (props) {
var mediaChildNode = mediaNode.firstChild;
var updaterProps = _objectSpread(_objectSpread({}, props), {}, {
isMediaSingle: true,
node: mediaChildNode ? mediaChildNode : mediaNode,
dispatchAnalyticsEvent: dispatchAnalyticsEvent
});
if (!mediaNodeUpdaterRef.current) {
mediaNodeUpdaterRef.current = createMediaNodeUpdater(updaterProps);
} else {
mediaNodeUpdaterRef.current.setProps(updaterProps);
}
}, [mediaNode, dispatchAnalyticsEvent]);
React.useEffect(function () {
// Forced updates not required on mobile
if (mediaSingleNodeProps.isCopyPasteEnabled === false) {
return;
}
if (!mediaNodeUpdaterRef.current || previousMediaProvider !== mediaProvider) {
var _mediaNodeUpdaterRef$;
createOrUpdateMediaNodeUpdater(mediaSingleNodeProps);
(_mediaNodeUpdaterRef$ = mediaNodeUpdaterRef.current) === null || _mediaNodeUpdaterRef$ === void 0 || _mediaNodeUpdaterRef$.updateMediaSingleFileAttrs();
} else if (mediaNode.firstChild && previousMediaNode !== null && previousMediaNode !== void 0 && previousMediaNode.firstChild && mediaNode.firstChild !== (previousMediaNode === null || previousMediaNode === void 0 ? void 0 : previousMediaNode.firstChild)) {
var attrsChanged = hasPrivateAttrsChanged(previousMediaNode.firstChild.attrs, mediaNode.firstChild.attrs);
if (attrsChanged) {
var _mediaNodeUpdaterRef$2;
createOrUpdateMediaNodeUpdater(mediaSingleNodeProps);
// We need to call this method on any prop change since attrs can get removed with collab editing
(_mediaNodeUpdaterRef$2 = mediaNodeUpdaterRef.current) === null || _mediaNodeUpdaterRef$2 === void 0 || _mediaNodeUpdaterRef$2.updateMediaSingleFileAttrs();
}
}
}, [createOrUpdateMediaNodeUpdater, mediaNode, mediaProvider, mediaSingleNodeProps, previousMediaNode, previousMediaProvider]);
return mediaNodeUpdaterRef.current;
};
var mediaAsyncOperations = /*#__PURE__*/function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(props) {
var updatedDimensions, currentAttrs, updatingNode, contextId, shouldNodeBeDeepCopied, copyNode;
return _regeneratorRuntime.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return props.updater.getRemoteDimensions();
case 2:
updatedDimensions = _context.sent;
currentAttrs = props.mediaChildNode.attrs;
if (updatedDimensions && ((currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.width) !== updatedDimensions.width || (currentAttrs === null || currentAttrs === void 0 ? void 0 : currentAttrs.height) !== updatedDimensions.height)) {
props.updater.updateDimensions(updatedDimensions);
}
if (!(props.mediaChildNode.attrs.type === 'external' && props.mediaChildNode.attrs.__external)) {
_context.next = 11;
break;
}
updatingNode = props.updater.handleExternalMedia(props.getPos);
props.addPendingTask(updatingNode);
_context.next = 10;
return updatingNode;
case 10:
return _context.abrupt("return");
case 11:
contextId = props.updater.getNodeContextId();
if (contextId) {
_context.next = 15;
break;
}
_context.next = 15;
return props.updater.updateContextId();
case 15:
_context.next = 17;
return props.updater.shouldNodeBeDeepCopied();
case 17:
shouldNodeBeDeepCopied = _context.sent;
if (!shouldNodeBeDeepCopied) {
_context.next = 28;
break;
}
_context.prev = 19;
copyNode = props.updater.copyNode({
traceId: props.mediaNode.attrs.__mediaTraceId
});
props.addPendingTask(copyNode);
_context.next = 24;
return copyNode;
case 24:
_context.next = 28;
break;
case 26:
_context.prev = 26;
_context.t0 = _context["catch"](19);
case 28:
case "end":
return _context.stop();
}
}, _callee, null, [[19, 26]]);
}));
return function mediaAsyncOperations(_x) {
return _ref2.apply(this, arguments);
};
}();
var useMediaAsyncOperations = function useMediaAsyncOperations(_ref3) {
var mediaNode = _ref3.mediaNode,
mediaNodeUpdater = _ref3.mediaNodeUpdater,
addPendingTask = _ref3.addPendingTask,
getPos = _ref3.getPos;
React.useEffect(function () {
if (!mediaNodeUpdater) {
return;
}
// we want the first child of MediaSingle (type "media")
var childNode = mediaNode.firstChild;
if (!childNode) {
return;
}
mediaAsyncOperations({
mediaChildNode: childNode,
updater: mediaNodeUpdater,
getPos: getPos,
mediaNode: mediaNode,
addPendingTask: addPendingTask
});
}, [mediaNode, addPendingTask, mediaNodeUpdater, getPos]);
};
var noop = function noop() {};
/**
* Keep returning the same ProseMirror Node, unless the node content changed.
*
* React uses shallow comparation with `Object.is`,
* but that can cause multiple re-renders when the same node is given in a different instance.
*
* To avoid unnecessary re-renders, this hook uses the `Node.eq` from ProseMirror API to compare
* previous and new values.
*/
var useLatestMediaNode = function useLatestMediaNode(nextMediaNode) {
var previousMediaNode = usePreviousState(nextMediaNode);
var _React$useState = React.useState(nextMediaNode),
_React$useState2 = _slicedToArray(_React$useState, 2),
mediaNode = _React$useState2[0],
setMediaNode = _React$useState2[1];
React.useEffect(function () {
if (!previousMediaNode || typeof previousMediaNode.eq !== 'function') {
return;
}
if (!previousMediaNode.eq(nextMediaNode)) {
setMediaNode(nextMediaNode);
}
}, [previousMediaNode, nextMediaNode]);
return mediaNode;
};
var useMediaDimensionsLogic = function useMediaDimensionsLogic(_ref4) {
var childMediaNodeAttrs = _ref4.childMediaNodeAttrs;
var originalWidth = childMediaNodeAttrs.width,
originalHeight = childMediaNodeAttrs.height;
var isExternalMedia = childMediaNodeAttrs.type === 'external';
var hasMediaUrlBlob = isExternalMedia && typeof childMediaNodeAttrs.url === 'string' && isMediaBlobUrlFromAttrs(childMediaNodeAttrs);
var urlBlobAttrs = React.useMemo(function () {
if (!hasMediaUrlBlob) {
return null;
}
return getAttrsFromUrl(childMediaNodeAttrs.url);
}, [hasMediaUrlBlob, childMediaNodeAttrs]);
var _React$useMemo = React.useMemo(function () {
// original width and height of child media node (scaled)
var width = originalWidth;
var height = originalHeight;
if (isExternalMedia) {
if (urlBlobAttrs) {
if (urlBlobAttrs) {
var urlWidth = urlBlobAttrs.width,
urlHeight = urlBlobAttrs.height;
width = width || urlWidth;
height = height || urlHeight;
}
}
if (width === null) {
width = DEFAULT_IMAGE_WIDTH;
}
if (height === null) {
height = DEFAULT_IMAGE_HEIGHT;
}
}
if (!width || !height) {
width = DEFAULT_IMAGE_WIDTH;
height = DEFAULT_IMAGE_HEIGHT;
}
return {
width: width,
height: height
};
}, [originalWidth, originalHeight, isExternalMedia, urlBlobAttrs]),
width = _React$useMemo.width,
height = _React$useMemo.height;
return {
width: width,
height: height
};
};
var useUpdateSizeCallback = function useUpdateSizeCallback(_ref5) {
var mediaNode = _ref5.mediaNode,
view = _ref5.view,
getPos = _ref5.getPos;
var updateSize = React.useCallback(function (width, layout) {
var state = view.state,
dispatch = view.dispatch;
var pos = getPos();
if (typeof pos === 'undefined') {
return;
}
var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, mediaNode.attrs), {}, {
layout: layout,
width: width,
widthType: 'pixel'
}));
tr.setMeta('scrollIntoView', false);
/**
* Any changes to attributes of a node count the node as "recreated" in Prosemirror[1]
* This makes it so Prosemirror resets the selection to the child i.e. "media" instead of "media-single"
* The recommended fix is to reset the selection.[2]
*
* [1] https://discuss.prosemirror.net/t/setnodemarkup-loses-current-nodeselection/976
* [2] https://discuss.prosemirror.net/t/setnodemarkup-and-deselect/3673
*/
tr.setSelection(NodeSelection.create(tr.doc, pos));
return dispatch(tr);
}, [view, getPos, mediaNode]);
return updateSize;
};
/**
* This value is used to fallback when widthState is undefined.
*
* Previously, the old MediaSingle was ignoring the undefined situation:
*
* <MediaSingleNode
* width={widthState!.width}
* lineLength={widthState!.lineLength}
*/
var FALLBACK_MOST_COMMON_WIDTH = 760;
export var MediaSingleNodeNext = function MediaSingleNodeNext(mediaSingleNodeNextProps) {
var _pluginInjectionApi$m, _mediaNode$firstChild;
var selected = mediaSingleNodeNextProps.selected,
getPos = mediaSingleNodeNextProps.getPos,
nextMediaNode = mediaSingleNodeNextProps.node,
mediaOptions = mediaSingleNodeNextProps.mediaOptions,
fullWidthMode = mediaSingleNodeNextProps.fullWidthMode,
view = mediaSingleNodeNextProps.view,
pluginInjectionApi = mediaSingleNodeNextProps.pluginInjectionApi,
containerWidth = mediaSingleNodeNextProps.width,
lineLength = mediaSingleNodeNextProps.lineLength,
dispatchAnalyticsEvent = mediaSingleNodeNextProps.dispatchAnalyticsEvent,
editorViewMode = mediaSingleNodeNextProps.editorViewMode,
editorDisabled = mediaSingleNodeNextProps.editorDisabled,
isDrafting = mediaSingleNodeNextProps.isDrafting,
targetNodeId = mediaSingleNodeNextProps.targetNodeId,
editorAppearance = mediaSingleNodeNextProps.editorAppearance,
mediaProviderPromise = mediaSingleNodeNextProps.mediaProvider,
forwardRef = mediaSingleNodeNextProps.forwardRef,
contextIdentifierProviderPromise = mediaSingleNodeNextProps.contextIdentifierProvider,
addPendingTask = mediaSingleNodeNextProps.addPendingTask;
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
mediaProvider = _React$useState4[0],
setMediaProvider = _React$useState4[1];
var _React$useState5 = React.useState(null),
_React$useState6 = _slicedToArray(_React$useState5, 2),
_contextIdentifierProvider = _React$useState6[0],
setContextIdentifierProvider = _React$useState6[1];
var _React$useState7 = React.useState(),
_React$useState8 = _slicedToArray(_React$useState7, 2),
viewMediaClientConfig = _React$useState8[0],
setViewMediaClientConfig = _React$useState8[1];
var mountedRef = React.useRef(true);
var pos = getPos();
var isSelected = selected();
var contentWidthForLegacyExperience = getMaxWidthForNestedNode(view, getPos()) || lineLength;
var mediaNode = useLatestMediaNode(nextMediaNode);
var mediaNodeUpdater = useMediaNodeUpdater({
mediaNode: mediaNode,
mediaSingleNodeProps: mediaSingleNodeNextProps,
mediaProvider: mediaProvider,
dispatchAnalyticsEvent: dispatchAnalyticsEvent
});
useMediaAsyncOperations({
mediaNodeUpdater: mediaNodeUpdater,
getPos: getPos,
mediaNode: mediaNode,
addPendingTask: addPendingTask || noop
});
React.useLayoutEffect(function () {
mountedRef.current = true;
return function () {
mountedRef.current = false;
};
}, []);
React.useLayoutEffect(function () {
if (!mediaProviderPromise) {
return;
}
mediaProviderPromise.then(function (resolvedProvider) {
var viewMediaClientConfig = resolvedProvider.viewMediaClientConfig;
if (mountedRef.current) {
setViewMediaClientConfig(viewMediaClientConfig);
setMediaProvider(resolvedProvider);
}
});
}, [mediaProviderPromise]);
React.useEffect(function () {
if (!contextIdentifierProviderPromise) {
return;
}
contextIdentifierProviderPromise.then(function (provider) {
if (mountedRef.current) {
setContextIdentifierProvider(provider);
}
});
}, [contextIdentifierProviderPromise]);
var _ref6 = mediaNode.attrs,
layout = _ref6.layout,
widthType = _ref6.widthType,
mediaSingleWidthAttribute = _ref6.width;
var childNode = mediaNode.firstChild;
var childMediaNodeAttrs = React.useMemo(function () {
return (childNode === null || childNode === void 0 ? void 0 : childNode.attrs) || {};
}, [childNode]);
var _useMediaDimensionsLo = useMediaDimensionsLogic({
childMediaNodeAttrs: childMediaNodeAttrs
}),
width = _useMediaDimensionsLo.width,
height = _useMediaDimensionsLo.height;
var updateSize = useUpdateSizeCallback({
view: view,
getPos: getPos,
mediaNode: mediaNode
});
var canResize = React.useMemo(function () {
if (typeof pos !== 'number') {
return false;
}
var result = Boolean(!!mediaOptions.allowResizing && !editorDisabled && !editorViewMode);
if (mediaOptions.allowResizingInTables) {
return result;
}
// If resizing not allowed in tables, check parents for tables
var $pos = view.state.doc.resolve(pos);
var table = view.state.schema.nodes.table;
var disabledNode = !!findParentNodeOfTypeClosestToPos($pos, [table]);
return Boolean(result && !disabledNode);
}, [mediaOptions, pos, view, editorDisabled, editorViewMode]);
var shouldShowPlaceholder = React.useMemo(function () {
var result = mediaOptions.allowCaptions && mediaNode.childCount !== 2 && isSelected && view.state.selection instanceof NodeSelection;
return !editorDisabled && result;
}, [editorDisabled, mediaOptions.allowCaptions, mediaNode, view, isSelected]);
var isInsideTable = React.useMemo(function () {
if (typeof pos !== 'number') {
return false;
}
return findParentNodeOfTypeClosestToPos(view.state.doc.resolve(pos), [view.state.schema.nodes.table]);
}, [pos, view]);
var currentMediaElement = React.useCallback(function () {
if (typeof pos !== 'number') {
return null;
}
var mediaNode = view.domAtPos(pos + 1).node;
return mediaNode instanceof HTMLElement ? mediaNode : null;
}, [view, pos]);
var mediaSingleWidth = React.useMemo(function () {
return calcMediaSinglePixelWidth({
width: mediaSingleWidthAttribute,
widthType: widthType,
origWidth: width,
layout: layout,
// This will only be used when calculating legacy media single width
// thus we use the legacy value (exclude table as container node)
contentWidth: contentWidthForLegacyExperience,
containerWidth: containerWidth,
gutterOffset: MEDIA_SINGLE_GUTTER_SIZE
});
}, [mediaSingleWidthAttribute, widthType, width, layout, contentWidthForLegacyExperience, containerWidth]);
var currentMaxWidth = isSelected ? pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$m = pluginInjectionApi.media) === null || _pluginInjectionApi$m === void 0 || (_pluginInjectionApi$m = _pluginInjectionApi$m.sharedState.currentState()) === null || _pluginInjectionApi$m === void 0 ? void 0 : _pluginInjectionApi$m.currentMaxWidth : undefined;
var contentWidth = currentMaxWidth || lineLength;
var isCurrentNodeDrafting = Boolean(isDrafting && targetNodeId === (mediaNode === null || mediaNode === void 0 || (_mediaNode$firstChild = mediaNode.firstChild) === null || _mediaNode$firstChild === void 0 ? void 0 : _mediaNode$firstChild.attrs.id));
var mediaSingleWrapperRef = /*#__PURE__*/React.createRef();
var captionPlaceHolderRef = /*#__PURE__*/React.createRef();
var browser = getBrowserInfo();
var notIos = !browser.ios;
var onMediaSingleClicked = React.useCallback(function (event) {
var _captionPlaceHolderRe;
var browser = getBrowserInfo();
// Workaround for iOS 16 Caption selection issue
// @see https://product-fabric.atlassian.net/browse/MEX-2012
if (!browser.ios) {
return;
}
if (mediaSingleWrapperRef.current !== event.target) {
return;
}
(_captionPlaceHolderRe = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe === void 0 || _captionPlaceHolderRe.click();
}, [mediaSingleWrapperRef, captionPlaceHolderRef]);
var onMediaSingleKeyDown = React.useCallback(function (event) {
if (mediaSingleWrapperRef.current !== event.target) {
return;
}
if (event.key === 'Enter' || event.key === ' ') {
var _captionPlaceHolderRe2;
event.preventDefault();
(_captionPlaceHolderRe2 = captionPlaceHolderRef.current) === null || _captionPlaceHolderRe2 === void 0 || _captionPlaceHolderRe2.click();
}
}, [mediaSingleWrapperRef, captionPlaceHolderRef]);
var clickPlaceholder = React.useCallback(function () {
var _pluginInjectionApi$a;
if (typeof getPos === 'boolean') {
return;
}
insertAndSelectCaptionFromMediaSinglePos(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a === void 0 ? void 0 : _pluginInjectionApi$a.actions)(getPos(), mediaNode)(view.state, view.dispatch);
}, [view, getPos, mediaNode, pluginInjectionApi]);
var legacySize = React.useMemo(function () {
return {
width: mediaSingleWidthAttribute,
widthType: widthType
};
}, [widthType, mediaSingleWidthAttribute]);
var MediaChildren = jsx("figure", {
ref: mediaSingleWrapperRef,
css: figureWrapperStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: MediaSingleNodeSelector,
onClick: notIos ? undefined : onMediaSingleClicked,
onKeyDown: notIos ? undefined : onMediaSingleKeyDown
}, jsx(MediaBadges, {
mediaElement: currentMediaElement(),
mediaHeight: height,
mediaWidth: width,
extendedResizeOffset: mediaOptions.allowPixelResizing && !isInsideTable
}, function (_ref7) {
var visible = _ref7.visible;
return jsx(React.Fragment, null, visible && jsx(ExternalImageBadge, {
type: childMediaNodeAttrs.type,
url: childMediaNodeAttrs.type === 'external' ? childMediaNodeAttrs.url : undefined
}), mediaOptions.allowCommentsOnMedia && jsx(CommentBadgeWrapper, {
view: view,
api: pluginInjectionApi,
mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,
getPos: getPos,
isDrafting: isCurrentNodeDrafting
}));
}), jsx("div", {
ref: forwardRef
}), shouldShowPlaceholder && (fg('platform_editor_typography_ugc') ? jsx(CaptionPlaceholderButton
// platform_editor_typography_ugc clean up
// remove typecasting
, {
ref: captionPlaceHolderRef,
onClick: clickPlaceholder,
placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
}) : jsx(CaptionPlaceholder, {
ref: captionPlaceHolderRef,
onClick: clickPlaceholder,
placeholderMessage: mediaOptions.allowImagePreview ? captionMessages.placeholderWithDoubleClickPrompt : captionMessages.placeholder
})));
if (!expValEquals('platform_editor_media_vc_fixes', 'isEnabled', true) || widthType !== 'pixel' && expValEquals('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
return jsx(Fragment, null, canResize ? mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
view: view,
getPos: getPos,
updateSize: updateSize,
gridSize: 12,
viewMediaClientConfig: viewMediaClientConfig,
allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
selected: isSelected,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
pluginInjectionApi: pluginInjectionApi,
layout: layout,
width: width,
height: height,
containerWidth: containerWidth,
lineLength: contentWidth || FALLBACK_MOST_COMMON_WIDTH,
fullWidthMode: fullWidthMode,
hasFallbackContainer: false,
mediaSingleWidth: mediaSingleWidth,
editorAppearance: editorAppearance,
showLegacyNotification: widthType !== 'pixel',
forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning
}, MediaChildren) : jsx(ResizableMediaSingle, {
view: view,
getPos: getPos,
updateSize: updateSize,
gridSize: 12,
viewMediaClientConfig: viewMediaClientConfig,
allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
selected: isSelected,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
pluginInjectionApi: pluginInjectionApi,
layout: layout,
width: width,
height: height,
containerWidth: containerWidth,
fullWidthMode: fullWidthMode,
hasFallbackContainer: false,
mediaSingleWidth: mediaSingleWidth,
editorAppearance: editorAppearance,
lineLength: contentWidthForLegacyExperience || FALLBACK_MOST_COMMON_WIDTH,
pctWidth: mediaSingleWidthAttribute
}, MediaChildren) : jsx(MediaSingle, {
layout: layout,
width: width,
height: height,
containerWidth: containerWidth,
fullWidthMode: fullWidthMode,
hasFallbackContainer: false,
editorAppearance: editorAppearance,
pctWidth: mediaSingleWidthAttribute,
lineLength: lineLength || FALLBACK_MOST_COMMON_WIDTH,
size: legacySize
}, MediaChildren));
}
return mediaOptions.allowPixelResizing ? jsx(ResizableMediaSingleNext, {
view: view,
getPos: getPos,
updateSize: updateSize,
gridSize: 12,
viewMediaClientConfig: viewMediaClientConfig,
allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
selected: isSelected,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
pluginInjectionApi: pluginInjectionApi,
layout: layout,
width: width,
height: height,
containerWidth: containerWidth,
lineLength: contentWidth || FALLBACK_MOST_COMMON_WIDTH,
fullWidthMode: fullWidthMode,
hasFallbackContainer: false,
mediaSingleWidth: mediaSingleWidth,
editorAppearance: editorAppearance,
showLegacyNotification: widthType !== 'pixel',
forceHandlePositioning: mediaOptions === null || mediaOptions === void 0 ? void 0 : mediaOptions.forceHandlePositioning,
disableHandles: !canResize
}, MediaChildren) : jsx(ResizableMediaSingle, {
view: view,
getPos: getPos,
updateSize: updateSize,
gridSize: 12,
viewMediaClientConfig: viewMediaClientConfig,
allowBreakoutSnapPoints: mediaOptions && mediaOptions.allowBreakoutSnapPoints,
selected: isSelected,
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
pluginInjectionApi: pluginInjectionApi,
layout: layout,
width: width,
height: height,
containerWidth: containerWidth,
fullWidthMode: fullWidthMode,
hasFallbackContainer: false,
mediaSingleWidth: mediaSingleWidth,
editorAppearance: editorAppearance,
lineLength: contentWidthForLegacyExperience || FALLBACK_MOST_COMMON_WIDTH,
pctWidth: mediaSingleWidthAttribute,
disableHandles: !canResize
}, MediaChildren);
};