@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
540 lines (531 loc) • 25.1 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.resizerNextTestId = exports.default = void 0;
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _throttle = _interopRequireDefault(require("lodash/throttle"));
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
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 _utils2 = require("@atlaskit/editor-prosemirror/utils");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _main = require("../../pm-plugins/main");
var _analytics = require("../../utils/analytics");
var _checkMediaType = require("../../utils/check-media-type");
var _ResizableMediaMigrationNotification = require("./ResizableMediaMigrationNotification");
var _styled = require("./styled");
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
var resizerNextTestId = exports.resizerNextTestId = 'mediaSingle.resizerNext.testid';
// eslint-disable-next-line @repo/internal/react/no-class-components
var ResizableMediaSingleNext = /*#__PURE__*/function (_React$Component) {
(0, _inherits2.default)(ResizableMediaSingleNext, _React$Component);
var _super = _createSuper(ResizableMediaSingleNext);
function ResizableMediaSingleNext(props) {
var _this;
(0, _classCallCheck2.default)(this, ResizableMediaSingleNext);
_this = _super.call(this, props);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "lastSnappedGuidelineKeys", []);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateGuidelines", function () {
var _this$props = _this.props,
view = _this$props.view,
lineLength = _this$props.lineLength;
var defaultGuidelines = _this.getDefaultGuidelines();
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 = _this.isNestedNode() ? [] : dynamicGuides;
_this.setState({
relativeGuides: relativeGuides,
guidelines: [].concat((0, _toConsumableArray2.default)(defaultGuidelines), (0, _toConsumableArray2.default)(dynamicGuidelines))
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcNewLayout", function (newWidth, stop) {
var _this$props2 = _this.props,
layout = _this$props2.layout,
containerWidth = _this$props2.containerWidth,
lineLength = _this$props2.lineLength,
fullWidthMode = _this$props2.fullWidthMode;
var newPct = (0, _ui.calcPctFromPx)(newWidth, lineLength) * 100;
if (newPct <= 100 && _this.wrappedLayout) {
if (!stop || newPct !== 100) {
return layout;
}
}
return _this.calcUnwrappedLayout(newWidth, containerWidth, lineLength, fullWidthMode, _this.isNestedNode());
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcUnwrappedLayout", function (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 - _editorSharedStyles.akEditorGutterPadding * 2, _editorSharedStyles.akEditorFullWidthLayoutWidth)) {
return 'wide';
}
// set full width to be containerWidth - akEditorGutterPadding * 2
// instead of containerWidth - akEditorBreakoutPadding,
// so that we have image aligned with text
return 'full-width';
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcPxHeight", function (newWidth) {
var _this$props3 = _this.props,
_this$props3$width = _this$props3.width,
width = _this$props3$width === void 0 ? newWidth : _this$props3$width,
height = _this$props3.height;
return Math.round(height / width * newWidth);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "displayGuideline", function (guidelines) {
var _this$props$pluginInj;
return (_this$props$pluginInj = _this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.guideline) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.actions) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.displayGuideline(_this.props.view)({
guidelines: guidelines
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setIsResizing", function (isResizing) {
var _this$props$view = _this.props.view,
state = _this$props$view.state,
dispatch = _this$props$view.dispatch;
var tr = state.tr;
tr.setMeta(_main.MEDIA_PLUGIN_IS_RESIZING_KEY, isResizing);
return dispatch(tr);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateSizeInPluginState", (0, _throttle.default)(function (width) {
var _this$props$view2 = _this.props.view,
state = _this$props$view2.state,
dispatch = _this$props$view2.dispatch;
var tr = state.tr;
tr.setMeta(_main.MEDIA_PLUGIN_RESIZING_WIDTH_KEY, width);
return dispatch(tr);
}, _mediaSingle.MEDIA_SINGLE_RESIZE_THROTTLE_TIME));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMaxWidth", (0, _memoizeOne.default)(function (contentWidth, containerWidth, fullWidthMode) {
if (_this.isNestedNode() || fullWidthMode) {
return contentWidth;
}
return (0, _mediaSingle.calcMediaSingleMaxWidth)(containerWidth);
}));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calcMinWidth", (0, _memoizeOne.default)(function (isVideoFile, contentWidth) {
return Math.min(contentWidth || _editorSharedStyles.akEditorDefaultLayoutWidth, isVideoFile ? _mediaSingle.MEDIA_SINGLE_VIDEO_MIN_PIXEL_WIDTH : _mediaSingle.MEDIA_SINGLE_DEFAULT_MIN_PIXEL_WIDTH);
}));
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getRelativeGuides", function () {
var _this$props$pluginInj2;
var guidelinePluginState = (_this$props$pluginInj2 = _this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.guideline) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.sharedState) === null || _this$props$pluginInj2 === void 0 ? void 0 : _this$props$pluginInj2.currentState();
var _ref = (guidelinePluginState === null || guidelinePluginState === void 0 ? void 0 : guidelinePluginState.rect) || {
top: 0,
left: 0
},
topOffset = _ref.top;
var $pos = _this.$pos;
var relativeGuides = $pos && $pos.nodeAfter && _this.state.size.width ? (0, _guideline.getRelativeGuidelines)(_this.state.relativeGuides, {
node: $pos.nodeAfter,
pos: $pos.pos
}, _this.props.view, _this.props.lineLength, topOffset, _this.state.size) : [];
return relativeGuides;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateActiveGuidelines", function () {
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) {
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 ? [] : _this.getRelativeGuides();
_this.lastSnappedGuidelineKeys = activeGuidelineKeys.length ? activeGuidelineKeys : relativeGuidelines.map(function (rg) {
return rg.key;
});
_this.displayGuideline([].concat((0, _toConsumableArray2.default)((0, _guideline.getGuidelinesWithHighlights)(gap, _mediaSingle.MEDIA_SINGLE_SNAP_GAP, activeGuidelineKeys, guidelines)), (0, _toConsumableArray2.default)(relativeGuidelines)));
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "calculateSizeState", function (size, delta) {
var onResizeStop = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
var calculatedWidth = Math.round(size.width + delta.width);
var calculatedWidthWithLayout = _this.calcNewLayout(calculatedWidth, onResizeStop);
return {
width: calculatedWidth,
height: calculatedWidth / _this.aspectRatio,
layout: calculatedWidthWithLayout
};
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "selectCurrentMediaNode", function () {
// TODO: if adding !this.props.selected, it doesn't work if media single node is at top postion
if (_this.pos === null) {
return;
}
(0, _utils.setNodeSelection)(_this.props.view, _this.pos);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStart", function () {
_this.setState({
isResizing: true
});
_this.selectCurrentMediaNode();
_this.setIsResizing(true);
_this.updateSizeInPluginState(_this.state.size.width);
// re-calculate guidelines
if (_this.isGuidelineEnabled) {
_this.updateGuidelines();
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResize", function (size, delta) {
var _this$props4 = _this.props,
layout = _this$props4.layout,
updateSize = _this$props4.updateSize,
lineLength = _this$props4.lineLength;
var _this$calculateSizeSt = _this.calculateSizeState(size, delta),
width = _this$calculateSizeSt.width,
height = _this$calculateSizeSt.height,
newLayout = _this$calculateSizeSt.layout;
if (_this.isGuidelineEnabled) {
var guidelineSnaps = (0, _guideline.getGuidelineSnaps)(_this.state.guidelines, lineLength, layout);
_this.updateActiveGuidelines(width, _this.state.guidelines, guidelineSnaps);
var relativeSnaps = (0, _guideline.getRelativeGuideSnaps)(_this.state.relativeGuides, _this.aspectRatio);
_this.setState({
size: {
width: width,
height: height
},
snaps: {
x: [].concat((0, _toConsumableArray2.default)(guidelineSnaps.snaps.x || []), (0, _toConsumableArray2.default)(relativeSnaps))
}
});
} else {
_this.setState({
size: {
width: width,
height: height
}
});
}
_this.updateSizeInPluginState(width);
if (newLayout !== layout) {
updateSize(width, newLayout);
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleResizeStop", function (size, delta) {
var _this$props5 = _this.props,
updateSize = _this$props5.updateSize,
dispatchAnalyticsEvent = _this$props5.dispatchAnalyticsEvent,
nodeType = _this$props5.nodeType;
var _this$calculateSizeSt2 = _this.calculateSizeState(size, delta, true),
width = _this$calculateSizeSt2.width,
height = _this$calculateSizeSt2.height,
newLayout = _this$calculateSizeSt2.layout;
if (dispatchAnalyticsEvent) {
var $pos = _this.$pos;
var event = (0, _analytics.getMediaResizeAnalyticsEvent)(nodeType || 'mediaSingle', {
width: width,
layout: newLayout,
widthType: 'pixel',
snapType: (0, _guideline.getGuidelineTypeFromKey)(_this.lastSnappedGuidelineKeys, _this.state.guidelines),
parentNode: $pos ? $pos.parent.type.name : undefined
});
if (event) {
dispatchAnalyticsEvent(event);
}
}
_this.setIsResizing(false);
_this.displayGuideline([]);
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;
}
_this.setState({
isResizing: false,
size: {
width: newWidth,
height: height
}
}, function () {
updateSize(newWidth, newLayout);
});
});
var initialWidth = props.mediaSingleWidth || _mediaSingle.DEFAULT_IMAGE_WIDTH;
_this.state = {
isVideoFile: true,
isResizing: false,
size: {
width: initialWidth,
height: _this.calcPxHeight(initialWidth)
},
snaps: {},
relativeGuides: {},
guidelines: []
};
return _this;
}
(0, _createClass2.default)(ResizableMediaSingleNext, [{
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps) {
if (prevProps.mediaSingleWidth !== this.props.mediaSingleWidth && this.props.mediaSingleWidth) {
// update size when lineLength becomes defined later
// ensures extended experience renders legacy image with the same size as the legacy experience
var initialWidth = this.props.mediaSingleWidth;
this.setState({
size: {
width: initialWidth,
height: this.calcPxHeight(initialWidth)
}
});
}
return true;
}
}, {
key: "componentDidMount",
value: function () {
var _componentDidMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
var viewMediaClientConfig;
return _regenerator.default.wrap(function _callee$(_context) {
while (1) switch (_context.prev = _context.next) {
case 0:
viewMediaClientConfig = this.props.viewMediaClientConfig;
if (!viewMediaClientConfig) {
_context.next = 4;
break;
}
_context.next = 4;
return this.checkVideoFile(viewMediaClientConfig);
case 4:
case "end":
return _context.stop();
}
}, _callee, this);
}));
function componentDidMount() {
return _componentDidMount.apply(this, arguments);
}
return componentDidMount;
}()
}, {
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if (this.props.viewMediaClientConfig !== nextProps.viewMediaClientConfig) {
this.checkVideoFile(nextProps.viewMediaClientConfig);
}
}
}, {
key: "wrappedLayout",
get: function get() {
return _ui.wrappedLayouts.indexOf(this.props.layout) > -1;
}
}, {
key: "pos",
get: function get() {
if (typeof this.props.getPos !== 'function') {
return null;
}
var pos = this.props.getPos();
if (Number.isNaN(pos) || typeof pos !== 'number') {
return null;
}
return pos;
}
}, {
key: "$pos",
get: function get() {
var pos = this.pos;
// need to pass view because we may not get updated props in time
return pos === null ? pos : this.props.view.state.doc.resolve(pos);
}
}, {
key: "aspectRatio",
get: function get() {
var _this$props6 = this.props,
width = _this$props6.width,
height = _this$props6.height;
if (width) {
return width / height;
}
// TODO handle this case
return 1;
}
}, {
key: "insideInlineLike",
get: function get() {
var $pos = this.$pos;
if (!$pos) {
return false;
}
var listItem = this.props.view.state.schema.nodes.listItem;
return !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [listItem]);
}
}, {
key: "insideLayout",
get: function get() {
var $pos = this.$pos;
if (!$pos) {
return false;
}
var layoutColumn = this.props.view.state.schema.nodes.layoutColumn;
return !!(0, _utils2.findParentNodeOfTypeClosestToPos)($pos, [layoutColumn]);
}
}, {
key: "isGuidelineEnabled",
get: function get() {
var _this$props$pluginInj3;
return !!((_this$props$pluginInj3 = this.props.pluginInjectionApi) !== null && _this$props$pluginInj3 !== void 0 && _this$props$pluginInj3.guideline);
}
// check if is inside of layout, table, expand, nestedExpand and list item
}, {
key: "isNestedNode",
value: function isNestedNode() {
var $pos = this.$pos;
return !!($pos && $pos.depth !== 0);
}
}, {
key: "getDefaultGuidelines",
value: function getDefaultGuidelines() {
var _this$props7 = this.props,
lineLength = _this$props7.lineLength,
containerWidth = _this$props7.containerWidth,
fullWidthMode = _this$props7.fullWidthMode;
// disable guidelines for nested media single node
return this.isNestedNode() ? [] : (0, _guideline.generateDefaultGuidelines)(lineLength, containerWidth, fullWidthMode);
}
}, {
key: "checkVideoFile",
value: function () {
var _checkVideoFile = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(viewMediaClientConfig) {
var mediaNode, mediaType, isVideoFile;
return _regenerator.default.wrap(function _callee2$(_context2) {
while (1) switch (_context2.prev = _context2.next) {
case 0:
if (!(this.pos === null || !viewMediaClientConfig)) {
_context2.next = 2;
break;
}
return _context2.abrupt("return");
case 2:
mediaNode = this.props.view.state.doc.nodeAt(this.pos + 1);
if (!mediaNode) {
_context2.next = 9;
break;
}
_context2.next = 6;
return (0, _checkMediaType.checkMediaType)(mediaNode, viewMediaClientConfig);
case 6:
_context2.t0 = _context2.sent;
_context2.next = 10;
break;
case 9:
_context2.t0 = undefined;
case 10:
mediaType = _context2.t0;
isVideoFile = mediaType !== 'external' && mediaType !== 'image';
if (this.state.isVideoFile !== isVideoFile) {
this.setState({
isVideoFile: isVideoFile
});
}
case 13:
case "end":
return _context2.stop();
}
}, _callee2, this);
}));
function checkVideoFile(_x) {
return _checkVideoFile.apply(this, arguments);
}
return checkVideoFile;
}()
}, {
key: "render",
value: function render() {
var _this2 = this;
var _this$props8 = this.props,
origWidth = _this$props8.width,
layout = _this$props8.layout,
containerWidth = _this$props8.containerWidth,
fullWidthMode = _this$props8.fullWidthMode,
selected = _this$props8.selected,
children = _this$props8.children,
lineLength = _this$props8.lineLength,
showLegacyNotification = _this$props8.showLegacyNotification;
var _this$state = this.state,
isResizing = _this$state.isResizing,
size = _this$state.size,
isVideoFile = _this$state.isVideoFile;
var enable = {};
_ui.handleSides.forEach(function (side) {
var oppositeSide = side === 'left' ? 'right' : 'left';
enable[side] = _utils.nonWrappedLayouts.concat("wrap-".concat(oppositeSide)).concat("align-".concat(_ui.imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
if (side === 'left' && _this2.insideInlineLike) {
enable[side] = false;
}
});
// TODO: Clean up where this lives and how it gets generated
var className = (0, _classnames.default)(_styles.richMediaClassName, "image-".concat(layout), isResizing ? 'is-resizing' : 'not-resizing', this.props.className, {
'richMedia-selected': selected,
'rich-media-wrapped': layout === 'wrap-left' || layout === 'wrap-right'
});
var resizerNextClassName = (0, _classnames.default)(className, _styles.resizerStyles);
var isNestedNode = this.isNestedNode();
var maxWidth = !isResizing && isNestedNode ?
// set undefined to fall back to 100%
undefined : this.calcMaxWidth(lineLength, containerWidth, fullWidthMode);
var minWidth = this.calcMinWidth(isVideoFile, 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%)");
return (0, _react2.jsx)("div", {
css: (0, _styled.wrapperStyle)({
layout: layout,
containerWidth: containerWidth || origWidth,
fullWidthMode: fullWidthMode,
mediaSingleWidth: this.state.size.width,
isNestedNode: isNestedNode,
isExtendedResizeExperienceOn: true
})
}, (0, _react2.jsx)(_resizer.ResizerNext, {
minWidth: minViewWidth,
maxWidth: maxWidth,
className: resizerNextClassName,
snapGap: _mediaSingle.MEDIA_SINGLE_SNAP_GAP,
enable: enable,
width: size.width,
handleResizeStart: this.handleResizeStart,
handleResize: this.handleResize,
handleResizeStop: this.handleResizeStop,
snap: this.state.snaps,
resizeRatio: _utils.nonWrappedLayouts.includes(layout) ? 2 : 1,
"data-testid": resizerNextTestId,
isHandleVisible: selected,
handlePositioning: isNestedNode ? 'adjacent' : undefined,
handleHighlight: "full-height"
}, children, showLegacyNotification && (0, _react2.jsx)(_ResizableMediaMigrationNotification.ResizableMediaMigrationNotification, null)));
}
}]);
return ResizableMediaSingleNext;
}(_react.default.Component);
var _default = exports.default = ResizableMediaSingleNext;