@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
611 lines (607 loc) • 28.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MediaSingleNodeNext = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _browser = require("@atlaskit/editor-common/browser");
var _hooks = require("@atlaskit/editor-common/hooks");
var _media = require("@atlaskit/editor-common/media");
var _mediaSingle = require("@atlaskit/editor-common/media-single");
var _ui = require("@atlaskit/editor-common/ui");
var _state = require("@atlaskit/editor-prosemirror/state");
var _utils = require("@atlaskit/editor-prosemirror/utils");
var _mediaClient = require("@atlaskit/media-client");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _captions = require("../pm-plugins/commands/captions");
var _mediaCommon = require("../pm-plugins/utils/media-common");
var _CaptionPlaceholder = require("../ui/CaptionPlaceholder");
var _CommentBadge = require("../ui/CommentBadge");
var _ResizableMediaSingle = _interopRequireDefault(require("../ui/ResizableMediaSingle"));
var _ResizableMediaSingleNext = _interopRequireDefault(require("../ui/ResizableMediaSingle/ResizableMediaSingleNext"));
var _helpers = require("./helpers");
var _mediaNodeUpdater = require("./mediaNodeUpdater");
var _styles = require("./styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
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) { (0, _defineProperty2.default)(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
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
var figureWrapperStyles = (0, _react2.css)({
margin: 0
});
var useMediaNodeUpdater = function useMediaNodeUpdater(_ref) {
var mediaProvider = _ref.mediaProvider,
mediaNode = _ref.mediaNode,
dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
mediaSingleNodeProps = _ref.mediaSingleNodeProps;
var previousMediaProvider = (0, _hooks.usePreviousState)(mediaProvider);
var previousMediaNode = (0, _hooks.usePreviousState)(mediaNode);
var mediaNodeUpdaterRef = _react.default.useRef(null);
var createOrUpdateMediaNodeUpdater = _react.default.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 = (0, _mediaNodeUpdater.createMediaNodeUpdater)(updaterProps);
} else {
mediaNodeUpdaterRef.current.setProps(updaterProps);
}
}, [mediaNode, dispatchAnalyticsEvent]);
_react.default.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 = (0, _helpers.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 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(props) {
var updatedDimensions, currentAttrs, updatingNode, contextId, shouldNodeBeDeepCopied, copyNode;
return _regenerator.default.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.default.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 = (0, _hooks.usePreviousState)(nextMediaNode);
var _React$useState = _react.default.useState(nextMediaNode),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
mediaNode = _React$useState2[0],
setMediaNode = _React$useState2[1];
_react.default.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' && (0, _mediaCommon.isMediaBlobUrlFromAttrs)(childMediaNodeAttrs);
var urlBlobAttrs = _react.default.useMemo(function () {
if (!hasMediaUrlBlob) {
return null;
}
return (0, _mediaClient.getAttrsFromUrl)(childMediaNodeAttrs.url);
}, [hasMediaUrlBlob, childMediaNodeAttrs]);
var _React$useMemo = _react.default.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 = _mediaSingle.DEFAULT_IMAGE_WIDTH;
}
if (height === null) {
height = _mediaSingle.DEFAULT_IMAGE_HEIGHT;
}
}
if (!width || !height) {
width = _mediaSingle.DEFAULT_IMAGE_WIDTH;
height = _mediaSingle.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.default.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(_state.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;
var MediaSingleNodeNext = exports.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.default.useState(null),
_React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
mediaProvider = _React$useState4[0],
setMediaProvider = _React$useState4[1];
var _React$useState5 = _react.default.useState(null),
_React$useState6 = (0, _slicedToArray2.default)(_React$useState5, 2),
_contextIdentifierProvider = _React$useState6[0],
setContextIdentifierProvider = _React$useState6[1];
var _React$useState7 = _react.default.useState(),
_React$useState8 = (0, _slicedToArray2.default)(_React$useState7, 2),
viewMediaClientConfig = _React$useState8[0],
setViewMediaClientConfig = _React$useState8[1];
var mountedRef = _react.default.useRef(true);
var pos = getPos();
var isSelected = selected();
var contentWidthForLegacyExperience = (0, _mediaSingle.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.default.useLayoutEffect(function () {
mountedRef.current = true;
return function () {
mountedRef.current = false;
};
}, []);
_react.default.useLayoutEffect(function () {
if (!mediaProviderPromise) {
return;
}
mediaProviderPromise.then(function (resolvedProvider) {
var viewMediaClientConfig = resolvedProvider.viewMediaClientConfig;
if (mountedRef.current) {
setViewMediaClientConfig(viewMediaClientConfig);
setMediaProvider(resolvedProvider);
}
});
}, [mediaProviderPromise]);
_react.default.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.default.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.default.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 = !!(0, _utils.findParentNodeOfTypeClosestToPos)($pos, [table]);
return Boolean(result && !disabledNode);
}, [mediaOptions, pos, view, editorDisabled, editorViewMode]);
var shouldShowPlaceholder = _react.default.useMemo(function () {
var result = mediaOptions.allowCaptions && mediaNode.childCount !== 2 && isSelected && view.state.selection instanceof _state.NodeSelection;
return !editorDisabled && result;
}, [editorDisabled, mediaOptions.allowCaptions, mediaNode, view, isSelected]);
var isInsideTable = _react.default.useMemo(function () {
if (typeof pos !== 'number') {
return false;
}
return (0, _utils.findParentNodeOfTypeClosestToPos)(view.state.doc.resolve(pos), [view.state.schema.nodes.table]);
}, [pos, view]);
var currentMediaElement = _react.default.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.default.useMemo(function () {
return (0, _mediaSingle.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: _mediaSingle.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.default.createRef();
var captionPlaceHolderRef = /*#__PURE__*/_react.default.createRef();
var browser = (0, _browser.getBrowserInfo)();
var notIos = !browser.ios;
var onMediaSingleClicked = _react.default.useCallback(function (event) {
var _captionPlaceHolderRe;
var browser = (0, _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.default.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.default.useCallback(function () {
var _pluginInjectionApi$a;
if (typeof getPos === 'boolean') {
return;
}
(0, _captions.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.default.useMemo(function () {
return {
width: mediaSingleWidthAttribute,
widthType: widthType
};
}, [widthType, mediaSingleWidthAttribute]);
var MediaChildren = (0, _react2.jsx)("figure", {
ref: mediaSingleWrapperRef,
css: figureWrapperStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: _styles.MediaSingleNodeSelector,
onClick: notIos ? undefined : onMediaSingleClicked,
onKeyDown: notIos ? undefined : onMediaSingleKeyDown
}, (0, _react2.jsx)(_mediaSingle.MediaBadges, {
mediaElement: currentMediaElement(),
mediaHeight: height,
mediaWidth: width,
extendedResizeOffset: mediaOptions.allowPixelResizing && !isInsideTable
}, function (_ref7) {
var visible = _ref7.visible;
return (0, _react2.jsx)(_react.default.Fragment, null, visible && (0, _react2.jsx)(_mediaSingle.ExternalImageBadge, {
type: childMediaNodeAttrs.type,
url: childMediaNodeAttrs.type === 'external' ? childMediaNodeAttrs.url : undefined
}), mediaOptions.allowCommentsOnMedia && (0, _react2.jsx)(_CommentBadge.CommentBadgeWrapper, {
view: view,
api: pluginInjectionApi,
mediaNode: mediaNode === null || mediaNode === void 0 ? void 0 : mediaNode.firstChild,
getPos: getPos,
isDrafting: isCurrentNodeDrafting
}));
}), (0, _react2.jsx)("div", {
ref: forwardRef
}), shouldShowPlaceholder && ((0, _platformFeatureFlags.fg)('platform_editor_typography_ugc') ? (0, _react2.jsx)(_CaptionPlaceholder.CaptionPlaceholderButton
// platform_editor_typography_ugc clean up
// remove typecasting
, {
ref: captionPlaceHolderRef,
onClick: clickPlaceholder,
placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
}) : (0, _react2.jsx)(_CaptionPlaceholder.CaptionPlaceholder, {
ref: captionPlaceHolderRef,
onClick: clickPlaceholder,
placeholderMessage: mediaOptions.allowImagePreview ? _media.captionMessages.placeholderWithDoubleClickPrompt : _media.captionMessages.placeholder
})));
if (!(0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) || widthType !== 'pixel' && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes_patch1', 'isEnabled', true)) {
return (0, _react2.jsx)(_react.Fragment, null, canResize ? mediaOptions.allowPixelResizing ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
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) : (0, _react2.jsx)(_ResizableMediaSingle.default, {
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) : (0, _react2.jsx)(_ui.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 ? (0, _react2.jsx)(_ResizableMediaSingleNext.default, {
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) : (0, _react2.jsx)(_ResizableMediaSingle.default, {
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);
};