@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
211 lines (203 loc) • 11.2 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.MediaWrapper = exports.MediaSingleDimensionHelper = exports.MediaBorderGapFiller = void 0;
exports.calcLegacyWidth = calcLegacyWidth;
exports.calcLegacyWidthForInline = calcLegacyWidthForInline;
exports.calcResizedWidth = calcResizedWidth;
exports.mediaWrapperStyle = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _utils = require("../../utils");
var _breakout = require("../../utils/breakout");
var _excluded = ["children"];
var _templateObject, _templateObject2, _templateObject3;
/** @jsx jsx */
function float(layout) {
switch (layout) {
case 'wrap-right':
return 'right';
case 'wrap-left':
return 'left';
default:
return 'none';
}
}
function getWidthIfFullWidthMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
if (isInsideOfInlineExtension) {
return originalWidth > _editorSharedStyles.akEditorFullWidthLayoutWidth ? "".concat(Math.min(containerWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth), "px") : "".concat(originalWidth, "px");
}
return originalWidth > _editorSharedStyles.akEditorFullWidthLayoutWidth ? '100%' : "".concat(originalWidth, "px");
}
function getWidthIfDefaultMode(originalWidth, containerWidth, isInsideOfInlineExtension) {
if (isInsideOfInlineExtension) {
return originalWidth > _editorSharedStyles.akEditorFullPageMaxWidth ? "".concat(Math.min(containerWidth, _editorSharedStyles.akEditorDefaultLayoutWidth), "px") : "".concat(originalWidth, "px");
}
return originalWidth > _editorSharedStyles.akEditorFullPageMaxWidth ? '100%' : "".concat(originalWidth, "px");
}
/**
* Calculates the image width for non-resized images.
*
* If an image has not been resized using the pctWidth attribute,
* then an image in wide or full-width can not be wider than the image's
* original width.
*/
function calcLegacyWidth(layout, width) {
var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var fullWidthMode = arguments.length > 3 ? arguments[3] : undefined;
var isResized = arguments.length > 4 ? arguments[4] : undefined;
var isInsideOfInlineExtension = arguments.length > 5 ? arguments[5] : undefined;
switch (layout) {
case 'align-start':
case 'align-end':
case 'wrap-right':
case 'wrap-left':
return width > containerWidth / 2 ? 'calc(50% - 12px)' : "".concat(width, "px");
case 'wide':
return isInsideOfInlineExtension ? (0, _breakout.calcWideWidth)(containerWidth, Infinity, "".concat(containerWidth, "px")) : (0, _breakout.calcWideWidth)(containerWidth);
case 'full-width':
return (0, _breakout.calcBreakoutWidth)(layout, containerWidth);
default:
return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth, isInsideOfInlineExtension) : getWidthIfDefaultMode(width, containerWidth, isInsideOfInlineExtension);
}
}
/**
* Calculates the image width for non-resized images.
*
* If an image has not been resized using the pctWidth attribute,
* then an image in wide or full-width can not be wider than the image's
* original width.
*/
function calcLegacyWidthForInline(layout, width) {
var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
var fullWidthMode = arguments.length > 3 ? arguments[3] : undefined;
var isResized = arguments.length > 4 ? arguments[4] : undefined;
switch (layout) {
case 'align-start':
case 'align-end':
case 'wrap-right':
case 'wrap-left':
return width > containerWidth / 2 ? 'calc(50% - 12px)' : "".concat(width, "px");
case 'wide':
return (0, _breakout.calcWideWidth)(containerWidth, Infinity, "".concat(containerWidth, "px"));
case 'full-width':
return (0, _breakout.calcBreakoutWidth)(layout, containerWidth);
default:
return isResized ? "".concat(width, "px") : fullWidthMode ? getWidthIfFullWidthMode(width, containerWidth) : getWidthIfDefaultMode(width, containerWidth);
}
}
/**
* Calculates the image width for previously resized images.
*
* Wide and full-width images are always that size (960px and 100%); there is
* no distinction between max-width and width.
*/
function calcResizedWidth(layout, width) {
var containerWidth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
switch (layout) {
case 'wide':
return (0, _breakout.calcWideWidth)(containerWidth);
case 'full-width':
return (0, _breakout.calcBreakoutWidth)(layout, containerWidth);
default:
return "".concat(width, "px");
}
}
function calcMaxWidth(layout, containerWidth) {
switch (layout) {
case 'wide':
return (0, _breakout.calcWideWidth)(containerWidth);
case 'full-width':
return (0, _breakout.calcBreakoutWidth)(layout, containerWidth);
default:
return '100%';
}
}
function calcMargin(layout) {
switch (layout) {
case 'wrap-right':
return '12px auto 12px 12px';
case 'wrap-left':
return '12px 12px 12px auto';
default:
return '24px auto';
}
}
function isImageAligned(layout) {
switch (layout) {
case 'align-end':
return 'margin-right: 0';
case 'align-start':
return 'margin-left: 0';
default:
return '';
}
}
/**
* Can't use `.attrs` to handle highly dynamic styles because we are still
* supporting `styled-components` v1.
*/
var MediaSingleDimensionHelper = exports.MediaSingleDimensionHelper = function MediaSingleDimensionHelper(_ref) {
var _ref$containerWidth = _ref.containerWidth,
containerWidth = _ref$containerWidth === void 0 ? 0 : _ref$containerWidth,
fullWidthMode = _ref.fullWidthMode,
isResized = _ref.isResized,
layout = _ref.layout,
mediaSingleWidth = _ref.mediaSingleWidth,
width = _ref.width,
isExtendedResizeExperienceOn = _ref.isExtendedResizeExperienceOn,
_ref$isNestedNode = _ref.isNestedNode,
isNestedNode = _ref$isNestedNode === void 0 ? false : _ref$isNestedNode,
_ref$isInsideOfInline = _ref.isInsideOfInlineExtension,
isInsideOfInlineExtension = _ref$isInsideOfInline === void 0 ? false : _ref$isInsideOfInline;
return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
(0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n /* For nested rich media items, set max-width to 100% */\n tr &,\n [data-layout-column] &,\n [data-node-type='expand'] &,\n [data-panel-type] &,\n li & {\n max-width: 100%;\n }\n\n width: ", ";\n ", "\n max-width: ", ";\n\n ", "\n\n &:not(.is-resizing) {\n transition: width 100ms ease-in;\n }\n\n float: ", ";\n margin: ", ";\n\n &[class*='not-resizing'] {\n ", "\n }\n\n ", ";\n "])), isExtendedResizeExperienceOn ? "".concat(mediaSingleWidth || width, "px") : mediaSingleWidth ? calcResizedWidth(layout, width || 0, containerWidth) : calcLegacyWidth(layout, width || 0, containerWidth, fullWidthMode, isResized, isInsideOfInlineExtension), layout === 'full-width' &&
/* This causes issues for new experience where we don't strip layout attributes
when copying top-level node and pasting into a table/layout,
because full-width layout will remain, causing node to be edge-to-edge */
!isExtendedResizeExperienceOn && (0, _react2.css)({
minWidth: '100%'
}), isExtendedResizeExperienceOn ? "".concat(containerWidth, "px") : calcMaxWidth(layout, containerWidth), isExtendedResizeExperienceOn && "&[class*='is-resizing'] {\n .new-file-experience-wrapper {\n box-shadow: none !important;\n }\n\n ".concat(!isNestedNode && _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n transform: translateX(-50%);", "\n }"), float(layout), calcMargin(layout), isNestedNode ? /* Make nested node appear responsive when resizing table cell */"max-width: 100%;" : _utils.nonWrappedLayouts.includes(layout) && "margin-left: 50%;\n transform: translateX(-50%);", isImageAligned(layout))
);
};
var RenderFallbackContainer = function RenderFallbackContainer(_ref2) {
var hasFallbackContainer = _ref2.hasFallbackContainer,
paddingBottom = _ref2.paddingBottom,
height = _ref2.height;
return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
(0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n "])), hasFallbackContainer ? "\n &::after {\n content: '';\n display: block;\n ".concat(height ? "height: ".concat(height, "px;") : paddingBottom ? "padding-bottom: ".concat(paddingBottom, ";") : '', "\n\n /* Fixes extra padding problem in Firefox */\n font-size: 0;\n line-height: 0;\n }\n ") : '')
);
};
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
var mediaWrapperStyle = exports.mediaWrapperStyle = function mediaWrapperStyle(props) {
return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n\n ", "\n\n /* Editor */\n & > figure {\n position: ", ";\n height: 100%;\n width: 100%;\n }\n\n & > div {\n position: ", ";\n height: 100%;\n width: 100%;\n }\n\n &[data-node-type='embedCard'] > div {\n width: 100%;\n }\n\n /* Renderer */\n [data-node-type='media'] {\n position: static !important;\n\n > div {\n position: absolute;\n height: 100%;\n }\n }\n"])), RenderFallbackContainer(props), props.hasFallbackContainer ? 'absolute' : 'relative', props.hasFallbackContainer ? 'absolute' : 'relative');
};
var MediaWrapper = exports.MediaWrapper = function MediaWrapper(_ref3) {
var children = _ref3.children,
rest = (0, _objectWithoutProperties2.default)(_ref3, _excluded);
return (0, _react2.jsx)("div", {
css: mediaWrapperStyle(rest)
}, children);
};
MediaWrapper.displayName = 'WrapperMediaSingle';
/*
There was an issue with a small, intermittent white gap appearing between the images due to a small pixel difference in browser rendering.
The solution implemented below was adapted from: https://stackoverflow.com/a/68885576
It suggests adding an absolute div on top which matches the width and height and setting the border on that div.
*/
var MediaBorderGapFiller = exports.MediaBorderGapFiller = function MediaBorderGapFiller(_ref4) {
var borderColor = _ref4.borderColor;
return (0, _react2.jsx)("div", {
style: {
position: 'absolute',
inset: '0px',
border: "0.5px solid ".concat(borderColor),
borderRadius: '1px'
}
});
};