@atlaskit/editor-plugin-media
Version:
Media plugin for @atlaskit/editor-core
227 lines (225 loc) • 12.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.prepareWrapperContentDOM = exports.mediaWidthCSSCalc = exports.mediaSingleSpecWithFixedToDOM = exports.mediaProportionalWidthCSSCalc = exports.mediaJustifyContentCSS = exports.mediaContentWrapperWidthCSSCalc = exports.getToDom = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _adfSchema = require("@atlaskit/adf-schema");
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _toDOMAttrs = require("./toDOMAttrs");
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; }
var WRAPPED_LAYOUTS = ['wrap-left', 'wrap-right'];
var ALIGNED_LAYOUTS = ['align-end', 'align-start'];
var LEGACY_LAYOUTS = ['full-width', 'wide'];
var DEFAULT_IMAGE_WIDTH = 250;
var DEFAULT_IMAGE_HEIGHT = 200;
var GUTTER_SIZE = '24px';
var HALF_GUTTER_SIZE = '12px';
var mediaWidthCSSCalc = exports.mediaWidthCSSCalc = function mediaWidthCSSCalc(_ref) {
var mediaSingleDimensionWidth = _ref.mediaSingleDimensionWidth,
layout = _ref.layout,
baseWidth = _ref.baseWidth,
isPixelWidth = _ref.isPixelWidth,
isExtendedResizeExperience = _ref.isExtendedResizeExperience;
var hasMediaDimensionWidth = typeof mediaSingleDimensionWidth === 'number';
var isMediaWrapped = WRAPPED_LAYOUTS.includes(layout);
var isMediaAligned = ALIGNED_LAYOUTS.includes(layout);
var isMediaLegacyLayout = LEGACY_LAYOUTS.includes(layout);
var shouldUseAlignedLayoutCalc = isMediaAligned && !hasMediaDimensionWidth;
var shouldUseWrappedLayoutCalc = isMediaWrapped && !hasMediaDimensionWidth;
var shouldUseBreakoutWideLogic = layout === 'wide';
var shouldUseBreakoutFullWidthLogic = layout === 'full-width';
var shouldUseProportionalCalc = !isExtendedResizeExperience && !isPixelWidth && hasMediaDimensionWidth && !isMediaLegacyLayout && !isMediaWrapped;
var shouldUseHalfContainerCalc = shouldUseProportionalCalc && isMediaAligned && mediaSingleDimensionWidth >= 100;
var shouldHardCodePixelWidth = isExtendedResizeExperience && isPixelWidth && hasMediaDimensionWidth;
var containerWidthPlusGutter = "(min(100cqw, 100%) + ".concat(GUTTER_SIZE, ")");
var fullContainerWidth = 'var(--ak-editor-max-container-width, 100cqw)';
var applyContainerWidthBoundaries = function applyContainerWidthBoundaries(calc) {
// Safe measure to avoid bleeding
return "min(".concat(calc, ", ").concat(fullContainerWidth, ")");
};
var cssCalc = '';
if (shouldUseAlignedLayoutCalc) {
cssCalc = "min(calc(".concat(containerWidthPlusGutter, " * 0.5 - ").concat(GUTTER_SIZE, "), ").concat(baseWidth, "px)");
} else if (shouldUseWrappedLayoutCalc) {
cssCalc = "100%";
} else if (shouldUseHalfContainerCalc) {
cssCalc = "min(min(".concat(baseWidth, "px, calc(50cqw - ").concat(HALF_GUTTER_SIZE, ")), 100%)");
} else if (shouldUseProportionalCalc) {
cssCalc = "calc(".concat(containerWidthPlusGutter, " * var(--ak-editor-media-single--proportion, 1px) - ").concat(GUTTER_SIZE, ")");
} else if (shouldHardCodePixelWidth) {
cssCalc = "min(".concat(mediaSingleDimensionWidth, "px, ").concat(fullContainerWidth, ")");
} else if (shouldUseBreakoutWideLogic) {
if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), var(--ak-editor-max-container-width)))";
} else {
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--breakout-wide-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
}
} else if (shouldUseBreakoutFullWidthLogic) {
if ((0, _expValEquals.expValEquals)('platform_editor_media_vc_fixes', 'isEnabled', true)) {
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), var(--ak-editor-max-container-width)))";
} else {
cssCalc = "max(var(--ak-editor--line-length), min(var(--ak-editor--full-width-layout-width), calc(100cqw - var(--ak-editor--breakout-full-page-guttering-padding))))";
}
} else {
cssCalc = "max(min(".concat(baseWidth, "px, min(100cqw, 100%)), ").concat(GUTTER_SIZE, ")");
}
return applyContainerWidthBoundaries(cssCalc);
};
var mediaContentWrapperWidthCSSCalc = exports.mediaContentWrapperWidthCSSCalc = function mediaContentWrapperWidthCSSCalc(_ref2) {
var isMediaWrapped = _ref2.isMediaWrapped,
isExternalMedia = _ref2.isExternalMedia,
isPixelWidth = _ref2.isPixelWidth,
childMediaWidth = _ref2.childMediaWidth,
mediaSingleDimensionWidth = _ref2.mediaSingleDimensionWidth;
if (isExternalMedia || !isMediaWrapped) {
return 'unset';
}
var hasMediaDimensionWidth = typeof mediaSingleDimensionWidth === 'number';
if (!hasMediaDimensionWidth) {
return "calc((100% / 2) - ".concat(HALF_GUTTER_SIZE, ")");
}
if (isPixelWidth) {
return "min(calc((var(--ak-editor-max-container-width, 100%) / 2) - ".concat(HALF_GUTTER_SIZE, "), ").concat(mediaSingleDimensionWidth, "px)");
}
var hasChildMediaWidth = typeof childMediaWidth === 'number';
if (hasChildMediaWidth) {
return "min(calc(100% * (".concat(mediaSingleDimensionWidth, " / 100) - ").concat(HALF_GUTTER_SIZE, "), ").concat(childMediaWidth, "px)");
}
return "calc(100% * (".concat(mediaSingleDimensionWidth, " / 100) - ").concat(HALF_GUTTER_SIZE, ")");
};
var mediaProportionalWidthCSSCalc = exports.mediaProportionalWidthCSSCalc = function mediaProportionalWidthCSSCalc(_ref3) {
var isPixelWidth = _ref3.isPixelWidth,
isExtendedResizeExperience = _ref3.isExtendedResizeExperience,
mediaSingleDimensionWidth = _ref3.mediaSingleDimensionWidth,
isMediaWrapped = _ref3.isMediaWrapped;
var hasMediaWidth = typeof mediaSingleDimensionWidth === 'number';
if (isPixelWidth || isExtendedResizeExperience || !hasMediaWidth) {
return 'unset';
}
if (isMediaWrapped) {
return mediaSingleDimensionWidth >= 50 ? '1' : "".concat(1 - mediaSingleDimensionWidth / 100);
}
return "".concat(mediaSingleDimensionWidth / 100);
};
var mediaJustifyContentCSS = exports.mediaJustifyContentCSS = function mediaJustifyContentCSS(_ref4) {
var layout = _ref4.layout;
switch (layout) {
case 'align-end':
case 'wrap-right':
return 'end';
case 'align-start':
case 'wrap-left':
return 'start';
default:
return 'center';
}
};
var prepareWrapperContentDOM = exports.prepareWrapperContentDOM = function prepareWrapperContentDOM(_ref5) {
var layout = _ref5.layout,
dataAttrs = _ref5.dataAttrs,
childMediaWidth = _ref5.childMediaWidth,
childMediaHeight = _ref5.childMediaHeight,
mediaSingleDimensionWidth = _ref5.mediaSingleDimensionWidth,
isPixelWidth = _ref5.isPixelWidth,
isExtendedResizeExperience = _ref5.isExtendedResizeExperience;
var layoutStyleJustifyContent = mediaJustifyContentCSS({
layout: layout
});
var mediaWidthCalc = mediaWidthCSSCalc({
layout: layout,
mediaSingleDimensionWidth: mediaSingleDimensionWidth,
baseWidth: childMediaWidth,
isPixelWidth: isPixelWidth,
isExtendedResizeExperience: isExtendedResizeExperience
});
var paddingBottom = "calc((".concat(childMediaHeight, " / ").concat(childMediaWidth, ") * 100%)");
return ['div', _objectSpread({
class: "rich-media-item mediaSingleView-content-wrap image-".concat(layout),
style: (0, _lazyNodeView.convertToInlineCss)({
display: 'flex',
justifyContent: layoutStyleJustifyContent,
transform: 'unset',
marginLeft: '0'
})
}, dataAttrs), ['div', {
style: (0, _lazyNodeView.convertToInlineCss)({
borderRadius: "var(--ds-radius-small, 3px)",
width: mediaWidthCalc,
minWidth: mediaWidthCalc,
color: "var(--ds-icon, #292A2E)"
})
}, ['figure', {
class: 'media-single-node',
style: (0, _lazyNodeView.convertToInlineCss)({
'--ak-editor-media-padding-bottom': paddingBottom,
margin: '0px'
})
}, ['div', {}, ['div', {
class: 'media-content-wrap'
}, 0]]]]];
};
var getToDom = exports.getToDom = function getToDom(allowPixelResizing) {
return function (node) {
var _mediaSingleAttrs$lay;
var mediaSingleAttrs = node.attrs;
var isPixelWidth = (mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.widthType) === 'pixel';
var layout = (_mediaSingleAttrs$lay = mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.layout) !== null && _mediaSingleAttrs$lay !== void 0 ? _mediaSingleAttrs$lay : 'center';
var childNode = node.firstChild;
var isExternalMedia = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.type) === 'external';
var childMediaWidth = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.width) || DEFAULT_IMAGE_WIDTH;
var childMediaHeight = (childNode === null || childNode === void 0 ? void 0 : childNode.attrs.height) || DEFAULT_IMAGE_HEIGHT;
var dataAttrs = (0, _toDOMAttrs.getAttrsFromNodeMediaSingle)(true, node);
var content = prepareWrapperContentDOM({
layout: layout,
dataAttrs: dataAttrs,
childMediaWidth: childMediaWidth,
childMediaHeight: childMediaHeight,
mediaSingleDimensionWidth: mediaSingleAttrs.width,
isPixelWidth: isPixelWidth,
isExtendedResizeExperience: allowPixelResizing
});
var isMediaWrapped = WRAPPED_LAYOUTS.includes(layout);
var proportionCalc = mediaProportionalWidthCSSCalc({
isPixelWidth: isPixelWidth,
isMediaWrapped: isMediaWrapped,
mediaSingleDimensionWidth: mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width,
isExtendedResizeExperience: allowPixelResizing
});
var contentWrapperWidth = mediaContentWrapperWidthCSSCalc({
isMediaWrapped: isMediaWrapped,
isExternalMedia: isExternalMedia,
isPixelWidth: isPixelWidth,
childMediaWidth: childMediaWidth,
mediaSingleDimensionWidth: mediaSingleAttrs === null || mediaSingleAttrs === void 0 ? void 0 : mediaSingleAttrs.width
});
return ['div', {
class: 'mediaSingleView-content-wrap',
layout: layout,
'data-media-vc-wrapper': 'true',
style: (0, _lazyNodeView.convertToInlineCss)({
'--ak-editor-media-single--proportion': proportionCalc,
'--ak-editor-media-card-display': 'block',
'--ak-editor-media-single--gutter-size': GUTTER_SIZE,
'--ak-editor-media-margin-right': '0',
'--ak-editor-media-card-background-color': "var(--ds-background-neutral, #0515240F)",
marginTop: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
marginBottom: isMediaWrapped ? HALF_GUTTER_SIZE : "var(--ds-space-300, 24px)",
marginRight: isMediaWrapped ? layout === 'wrap-right' ? 'auto' : HALF_GUTTER_SIZE : 0,
marginLeft: isMediaWrapped ? layout === 'wrap-left' ? 'auto' : HALF_GUTTER_SIZE : 0,
width: contentWrapperWidth
})
}, content];
};
};
// @nodeSpecException:toDOM patch
var mediaSingleSpecWithFixedToDOM = exports.mediaSingleSpecWithFixedToDOM = function mediaSingleSpecWithFixedToDOM(mediaSingleOption) {
var mediaSingleNode = (0, _adfSchema.mediaSingleSpec)(mediaSingleOption);
var toDOM = getToDom(mediaSingleOption.withExtendedWidthTypes);
return _objectSpread(_objectSpread({}, mediaSingleNode), {}, {
toDOM: toDOM
});
};