@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
602 lines (594 loc) • 27 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.resizerNextTestId = exports.default = exports.ResizableMediaSingleNextFunctional = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _throttle = _interopRequireDefault(require("lodash/throttle"));
var _guideline = require("@atlaskit/editor-common/guideline");
var _mediaSingle = require("@atlaskit/editor-common/media-single");
var _resizer = require("@atlaskit/editor-common/resizer");
var _styles = require("@atlaskit/editor-common/styles");
var _ui = require("@atlaskit/editor-common/ui");
var _utils = require("@atlaskit/editor-common/utils");
var _state = require("@atlaskit/editor-prosemirror/state");
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _main = require("../../pm-plugins/main");
var _analytics = require("../../pm-plugins/utils/analytics");
var _checkMediaType = require("../../pm-plugins/utils/check-media-type");
var _ResizableMediaMigrationNotification = require("./ResizableMediaMigrationNotification");
var _styled = require("./styled");
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); }
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
var resizerNextTestId = exports.resizerNextTestId = 'mediaSingle.resizerNext.testid';
var getNodePosition = function getNodePosition(getPos) {
if (typeof getPos !== 'function') {
return null;
}
var pos = getPos();
if (Number.isNaN(pos) || typeof pos !== 'number') {
return null;
}
return pos;
};
var calcPxHeight = function calcPxHeight(props) {
var newWidth = props.newWidth,
previousWidth = props.previousWidth,
previousHeight = props.previousHeight;
return Math.round(previousHeight / previousWidth * newWidth);
};
var calcMinWidth = function calcMinWidth(_ref) {
var isVideoFile = _ref.isVideoFile,
contentWidth = _ref.contentWidth;
return Math.min(contentWidth || _editorSharedStyles.akEditorDefaultLayoutWidth, isVideoFile ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
};
var calcMaxWidth = function calcMaxWidth(_ref2) {
var containerWidth = _ref2.containerWidth,
editorAppearance = _ref2.editorAppearance;
return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth, editorAppearance);
};
var setIsResizingPluginState = function setIsResizingPluginState(_ref3) {
var isResizing = _ref3.isResizing,
nodePosition = _ref3.nodePosition,
initialWidth = _ref3.initialWidth;
return function (state, dispatch) {
var tr = state.tr;
tr.setMeta(_main.MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
tr.setMeta('is-resizer-resizing', isResizing);
if (isResizing && typeof nodePosition === 'number') {
tr.setSelection(_state.NodeSelection.create(state.doc, nodePosition));
}
if (isResizing && typeof initialWidth === 'number') {
tr.setMeta(_main.MEDIA_PLUGIN_RESIZING_WIDTH_KEY, initialWidth);
}
if (dispatch) {
dispatch(tr);
}
return true;
};
};
var calcUnwrappedLayout = function 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';
}
var padding = containerWidth <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
exposure: true
}) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
if (width < Math.min(containerWidth - padding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth)) {
return 'wide';
}
// set full width to be containerWidth - padding * 2
// instead of containerWidth - akEditorBreakoutPadding,
// so that we have image aligned with text
return 'full-width';
};
var calcNewLayout = function calcNewLayout(_ref4) {
var layout = _ref4.layout,
containerWidth = _ref4.containerWidth,
lineLength = _ref4.lineLength,
fullWidthMode = _ref4.fullWidthMode,
isNestedNode = _ref4.isNestedNode;
return function (newWidth, stop) {
var newPct = (0, _ui.calcPctFromPx)(newWidth, lineLength) * 100;
var wrappedLayout = _ui.wrappedLayouts.indexOf(layout) > -1;
if (newPct <= 100 && wrappedLayout) {
if (!stop || newPct !== 100) {
return layout;
}
}
return calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, isNestedNode);
};
};
var calculateSizeState = function calculateSizeState(props) {
return function (size, delta) {
var onResizeStop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var aspectRatio = arguments.length > 3 ? arguments[3] : undefined;
var calculatedWidth = Math.round(size.width + delta.width);
var calculatedWidthWithLayout = calcNewLayout(props)(calculatedWidth, onResizeStop);
return {
width: calculatedWidth,
height: calculatedWidth / aspectRatio,
layout: calculatedWidthWithLayout
};
};
};
var getAspectRatio = function getAspectRatio(_ref5) {
var width = _ref5.width,
height = _ref5.height;
if (width && height > 0) {
return width / height;
}
// TODO: ED-26962 - handle this case
return 1;
};
var updateSizeInPluginState = (0, _throttle.default)(function (_ref6) {
var width = _ref6.width,
view = _ref6.view;
var state = view.state,
dispatch = view.dispatch;
var tr = state.tr;
tr.setMeta(_main.MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
return dispatch(tr);
}, _mediaSingle.MEDIA_SINGLE_RESIZE_THROTTLE_TIME);
var ResizableMediaSingleNextFunctional = exports.ResizableMediaSingleNextFunctional = function ResizableMediaSingleNextFunctional(props) {
var origWidth = props.width,
children = props.children,
containerWidth = props.containerWidth,
fullWidthMode = props.fullWidthMode,
layout = props.layout,
selected = props.selected,
showLegacyNotification = props.showLegacyNotification,
className = props.className,
dispatchAnalyticsEvent = props.dispatchAnalyticsEvent,
editorAppearance = props.editorAppearance,
getPos = props.getPos,
lineLength = props.lineLength,
mediaSingleWidth = props.mediaSingleWidth,
height = props.height,
nodeType = props.nodeType,
pluginInjectionApi = props.pluginInjectionApi,
updateSize = props.updateSize,
view = props.view,
viewMediaClientConfig = props.viewMediaClientConfig,
forceHandlePositioning = props.forceHandlePositioning,
disableHandles = props.disableHandles;
var initialWidth = (0, _react.useMemo)(function () {
return mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
}, [mediaSingleWidth]);
var _useState = (0, _react.useState)({
width: initialWidth,
height: calcPxHeight({
newWidth: initialWidth,
previousWidth: initialWidth,
previousHeight: height
})
}),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
dimensions = _useState2[0],
setDimensions = _useState2[1];
var dimensionsRef = (0, _react.useRef)(dimensions);
var lastSnappedGuidelineKeysRef = (0, _react.useRef)([]);
var _useState3 = (0, _react.useState)({}),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
snaps = _useState4[0],
setSnaps = _useState4[1];
var _useState5 = (0, _react.useState)(false),
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
isResizing = _useState6[0],
setIsResizing = _useState6[1];
var _useState7 = (0, _react.useState)(false),
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
isVideoFile = _useState8[0],
setIsVideoFile = _useState8[1];
var _useState9 = (0, _react.useState)(false),
_useState0 = (0, _slicedToArray2.default)(_useState9, 2),
hasResized = _useState0[0],
setHasResized = _useState0[1];
var nodePosition = (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? getNodePosition(getPos) :
// eslint-disable-next-line react-hooks/rules-of-hooks
(0, _react.useMemo)(function () {
return getNodePosition(getPos);
}, [getPos]);
var isNestedNode = (0, _react.useMemo)(function () {
if (nodePosition === null) {
return false;
}
var $pos = view.state.doc.resolve(nodePosition);
return !!($pos && $pos.depth !== 0);
}, [nodePosition, view]);
var isAdjacentMode = (0, _react.useMemo)(function () {
if (forceHandlePositioning === 'adjacent') {
return true;
}
return isNestedNode;
}, [isNestedNode, forceHandlePositioning]);
var maybeContainerWidth = containerWidth || origWidth;
var memoizedCss = (0, _react.useMemo)(function () {
return (0, _styled.wrapperStyle)({
layout: layout,
containerWidth: maybeContainerWidth,
fullWidthMode: fullWidthMode,
mediaSingleWidth: dimensions.width,
isNestedNode: isAdjacentMode,
isExtendedResizeExperienceOn: true
});
}, [layout, maybeContainerWidth, fullWidthMode, dimensions.width, isAdjacentMode]);
var maxWidth = (0, _react.useMemo)(function () {
if (editorAppearance === 'chromeless' && forceHandlePositioning === 'adjacent') {
return containerWidth - _mediaSingle.MEDIA_SINGLE_ADJACENT_HANDLE_MARGIN * 2;
}
if (!isResizing && isAdjacentMode) {
return undefined;
}
if (isAdjacentMode || fullWidthMode) {
return lineLength;
}
if (!isResizing && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
return "var(--ak-editor-max-container-width)";
}
return calcMaxWidth({
containerWidth: containerWidth,
editorAppearance: editorAppearance
});
}, [isAdjacentMode, fullWidthMode, lineLength, editorAppearance, containerWidth, isResizing, forceHandlePositioning]);
var minWidth = calcMinWidth({
isVideoFile: isVideoFile,
contentWidth: lineLength
});
// while is not resizing, we take 100% as min-width if the container width is less than the min-width
var minViewWidth = isResizing ? minWidth : "min(".concat(minWidth, "px, 100%)");
var resizerNextClassName = (0, _react.useMemo)(function () {
var classNameNext = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', className, _styles.resizerItemClassName, {
'display-handle': (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
'richMedia-selected': selected,
'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
});
return classNameNext;
}, [className, disableHandles, isResizing, layout, selected]);
var isInsideInlineLike = (0, _react.useMemo)(function () {
if (nodePosition === null) {
return false;
}
var $pos = view.state.doc.resolve(nodePosition);
var listItem = view.state.schema.nodes.listItem;
return !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
}, [nodePosition, view]);
var enable = (0, _react.useMemo)(function () {
if (disableHandles && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
return {
left: false,
right: false
};
}
return _ui.handleSides.reduce(function (acc, side) {
var oppositeSide = side === 'left' ? 'right' : 'left';
acc[side] = _utils.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
if (side === 'left' && isInsideInlineLike) {
acc[side] = false;
}
return acc;
}, {});
}, [disableHandles, layout, isInsideInlineLike]);
var defaultGuidelines = (0, _react.useMemo)(function () {
if (isAdjacentMode) {
return [];
}
return (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth, fullWidthMode);
}, [isAdjacentMode, lineLength, containerWidth, fullWidthMode]);
var relativeGuidesRef = (0, _react.useRef)({});
var guidelinesRef = (0, _react.useRef)([]);
var updateGuidelines = (0, _react.useCallback)(function () {
var _generateDynamicGuide = (0, _guideline.generateDynamicGuidelines)(view.state, lineLength, {
styles: {
lineStyle: 'dashed'
},
show: false
}),
relativeGuides = _generateDynamicGuide.relativeGuides,
dynamicGuides = _generateDynamicGuide.dynamicGuides;
// disable guidelines for nested media single node
var dynamicGuidelines = isAdjacentMode ? [] : dynamicGuides;
relativeGuidesRef.current = relativeGuides;
guidelinesRef.current = [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines));
}, [view, lineLength, defaultGuidelines, isAdjacentMode]);
var isGuidelineEnabled = (0, _react.useMemo)(function () {
return !!(pluginInjectionApi !== null && pluginInjectionApi !== void 0 && pluginInjectionApi.guideline);
}, [pluginInjectionApi]);
var handleResizeStart = (0, _react.useCallback)(function () {
setIsResizing(true);
setIsResizingPluginState({
isResizing: true,
nodePosition: nodePosition,
initialWidth: dimensionsRef.current.width
})(view.state, view.dispatch);
if (isGuidelineEnabled) {
updateGuidelines();
}
}, [view, nodePosition, updateGuidelines, isGuidelineEnabled]);
var getRelativeGuides = (0, _react.useCallback)(function () {
var _pluginInjectionApi$g;
if (typeof nodePosition !== 'number') {
return [];
}
var guidelinePluginState = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g === void 0 || (_pluginInjectionApi$g = _pluginInjectionApi$g.sharedState) === null || _pluginInjectionApi$g === void 0 ? void 0 : _pluginInjectionApi$g.currentState();
var _ref7 = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
top: 0,
left: 0
},
topOffset = _ref7.top;
var $pos = view.state.doc.resolve(nodePosition);
var relativeGuides = $pos && $pos.nodeAfter && dimensionsRef.current.width ? (0, _guideline.getRelativeGuidelines)(relativeGuidesRef.current, {
node: $pos.nodeAfter,
pos: $pos.pos
}, view, lineLength, topOffset, dimensionsRef.current) : [];
return relativeGuides;
}, [pluginInjectionApi, nodePosition, view, lineLength]);
var updateActiveGuidelines = (0, _react.useCallback)(function () {
var _pluginInjectionApi$g2;
var width = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
var guidelines = arguments.length > 1 ? arguments[1] : undefined;
var guidelineSnapsReference = arguments.length > 2 ? arguments[2] : undefined;
if (!guidelineSnapsReference.snaps.x) {
return;
}
var _findClosestSnap = (0, _guideline.findClosestSnap)(width, guidelineSnapsReference.snaps.x, guidelineSnapsReference.guidelineReference, _mediaSingle.MEDIA_SINGLE_SNAP_GAP),
gap = _findClosestSnap.gap,
activeGuidelineKeys = _findClosestSnap.keys;
var relativeGuidelines = activeGuidelineKeys.length ? [] : getRelativeGuides();
lastSnappedGuidelineKeysRef.current = activeGuidelineKeys.length ? activeGuidelineKeys : relativeGuidelines.map(function (rg) {
return rg.key;
});
var nextGuideLines = [].concat((0, _toConsumableArray2.default)((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines)), (0, _toConsumableArray2.default)(relativeGuidelines));
pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$g2 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g2 === void 0 || (_pluginInjectionApi$g2 = _pluginInjectionApi$g2.actions) === null || _pluginInjectionApi$g2 === void 0 || _pluginInjectionApi$g2.displayGuideline(view)({
guidelines: nextGuideLines
});
}, [getRelativeGuides, pluginInjectionApi, view]);
var aspectRatioRef = (0, _react.useRef)(getAspectRatio({
width: props.width,
height: props.height
}));
var resizerContainerRef = (0, _react.useRef)(null);
var handleResize = (0, _react.useCallback)(function (size, delta) {
var _calculateSizeState = calculateSizeState({
layout: layout,
containerWidth: containerWidth,
lineLength: lineLength,
fullWidthMode: fullWidthMode,
isNestedNode: isAdjacentMode
})(size, delta, false, aspectRatioRef.current),
width = _calculateSizeState.width,
height = _calculateSizeState.height,
newLayout = _calculateSizeState.layout;
var resizerDomEl = resizerContainerRef.current;
if (resizerDomEl && !hasResized && (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
// dispatch resize event to media node DOM element inside resizerDom
var mediaDomEl = resizerDomEl.querySelector('div[data-prosemirror-node-name="media"]');
var event = new CustomEvent('resized');
mediaDomEl === null || mediaDomEl === void 0 || mediaDomEl.dispatchEvent(event);
setHasResized(true);
}
if (isGuidelineEnabled) {
var guidelineSnaps = (0, _guideline.getGuidelineSnaps)(guidelinesRef.current, lineLength, layout);
updateActiveGuidelines(width, guidelinesRef.current, guidelineSnaps);
var relativeSnaps = (0, _guideline.getRelativeGuideSnaps)(relativeGuidesRef.current, aspectRatioRef.current);
setSnaps({
x: [].concat((0, _toConsumableArray2.default)(guidelineSnaps.snaps.x || []), (0, _toConsumableArray2.default)(relativeSnaps))
});
}
setDimensions({
width: width,
height: height
});
updateSizeInPluginState({
width: width,
view: view
});
if (newLayout !== layout) {
updateSize(width, newLayout);
}
}, [layout, containerWidth, lineLength, fullWidthMode, isAdjacentMode, hasResized, isGuidelineEnabled, view, updateActiveGuidelines, updateSize]);
var handleResizeStop = (0, _react.useCallback)(function (size, delta) {
var _pluginInjectionApi$g3;
if (typeof nodePosition !== 'number') {
return;
}
var _calculateSizeState2 = calculateSizeState({
layout: layout,
containerWidth: containerWidth,
lineLength: lineLength,
fullWidthMode: fullWidthMode,
isNestedNode: isAdjacentMode
})(size, delta, false, aspectRatioRef.current),
width = _calculateSizeState2.width,
height = _calculateSizeState2.height,
newLayout = _calculateSizeState2.layout;
if (dispatchAnalyticsEvent) {
var $pos = view.state.doc.resolve(nodePosition);
var event = (0, _analytics.getMediaResizeAnalyticsEvent)(nodeType || 'mediaSingle', {
width: width,
layout: newLayout,
widthType: 'pixel',
snapType: (0, _guideline.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 || (_pluginInjectionApi$g3 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g3 === void 0 || (_pluginInjectionApi$g3 = _pluginInjectionApi$g3.actions) === null || _pluginInjectionApi$g3 === void 0 || _pluginInjectionApi$g3.displayGuideline(view)({
guidelines: []
});
var 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 = _editorSharedStyles.akEditorFullWidthLayoutWidth;
}
setDimensions({
width: newWidth,
height: height
});
updateSize(newWidth, newLayout);
}, [nodeType, dispatchAnalyticsEvent, containerWidth, fullWidthMode, isAdjacentMode, layout, lineLength, view, nodePosition, pluginInjectionApi, updateSize]);
var mountedRef = _react.default.useRef(true);
(0, _react.useLayoutEffect)(function () {
mountedRef.current = true;
return function () {
mountedRef.current = false;
};
}, []);
(0, _react.useLayoutEffect)(function () {
setDimensions({
width: initialWidth,
height: calcPxHeight({
newWidth: initialWidth,
previousWidth: initialWidth,
previousHeight: height
})
});
}, [initialWidth, height]);
(0, _react.useEffect)(function () {
dimensionsRef.current = dimensions;
}, [dimensions]);
(0, _react.useEffect)(function () {
if (!viewMediaClientConfig || typeof nodePosition !== 'number') {
return;
}
var mediaNode = view.state.doc.nodeAt(nodePosition + 1);
if (!mediaNode) {
return;
}
(0, _checkMediaType.checkMediaType)(mediaNode, viewMediaClientConfig).then(function (mediaType) {
if (mountedRef.current) {
var _isVideoFile = mediaType !== 'external' && mediaType !== 'image';
setIsVideoFile(_isVideoFile);
}
});
}, [view, viewMediaClientConfig, nodePosition]);
var handlePositioning = (0, _react.useMemo)(function () {
if (forceHandlePositioning) {
return forceHandlePositioning;
}
return isAdjacentMode ? 'adjacent' : undefined;
}, [forceHandlePositioning, isAdjacentMode]);
return (0, _react2.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,
ref: resizerContainerRef
}, (0, _react2.jsx)(_resizer.ResizerNext, {
minWidth: minViewWidth,
maxWidth: maxWidth
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: resizerNextClassName,
snapGap: _mediaSingle.MEDIA_SINGLE_SNAP_GAP,
enable: enable,
width: dimensions.width,
handleResizeStart: handleResizeStart,
handleResize: handleResize,
handleResizeStop: handleResizeStop,
snap: snaps,
resizeRatio: _utils.nonWrappedLayouts.includes(layout) ? 2 : 1,
"data-testid": resizerNextTestId,
isHandleVisible: (0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true) ? selected && !disableHandles : selected,
handlePositioning: handlePositioning,
handleHighlight: "full-height"
}, children, showLegacyNotification && (0, _react2.jsx)(_ResizableMediaMigrationNotification.ResizableMediaMigrationNotification, null)));
};
var ResizableMediaSingleToggle = function ResizableMediaSingleToggle(_ref8) {
var allowBreakoutSnapPoints = _ref8.allowBreakoutSnapPoints,
children = _ref8.children,
className = _ref8.className,
containerWidth = _ref8.containerWidth,
dataAttributes = _ref8.dataAttributes,
disableHandles = _ref8.disableHandles,
dispatchAnalyticsEvent = _ref8.dispatchAnalyticsEvent,
editorAppearance = _ref8.editorAppearance,
fullWidthMode = _ref8.fullWidthMode,
getPos = _ref8.getPos,
gridSize = _ref8.gridSize,
handleMediaSingleRef = _ref8.handleMediaSingleRef,
hasFallbackContainer = _ref8.hasFallbackContainer,
height = _ref8.height,
isInsideOfInlineExtension = _ref8.isInsideOfInlineExtension,
isLoading = _ref8.isLoading,
layout = _ref8.layout,
lineLength = _ref8.lineLength,
mediaSingleWidth = _ref8.mediaSingleWidth,
nodeType = _ref8.nodeType,
pctWidth = _ref8.pctWidth,
pluginInjectionApi = _ref8.pluginInjectionApi,
selected = _ref8.selected,
showLegacyNotification = _ref8.showLegacyNotification,
size = _ref8.size,
updateSize = _ref8.updateSize,
view = _ref8.view,
viewMediaClientConfig = _ref8.viewMediaClientConfig,
width = _ref8.width,
forceHandlePositioning = _ref8.forceHandlePositioning;
return (0, _react2.jsx)(ResizableMediaSingleNextFunctional, {
allowBreakoutSnapPoints: allowBreakoutSnapPoints
// eslint-disable-next-line react/no-children-prop
,
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,
forceHandlePositioning: forceHandlePositioning
});
};
var _default = exports.default = ResizableMediaSingleToggle;