@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
287 lines (285 loc) • 16.6 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.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _classnames3 = _interopRequireDefault(require("classnames"));
var _reResizable = require("re-resizable");
var _reactIntl = require("react-intl");
var _primitives = require("@atlaskit/primitives");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _breakout = require("../messages/breakout");
var _resizer = require("../styles/shared/resizer");
var _excluded = ["width", "height", "children", "handleClassName", "className", "handleResize", "handleResizeStart", "handleResizeStop", "handleSize", "handleAlignmentMethod", "handlePositioning", "appearance", "handleStyles", "resizeRatio", "snap", "snapGap", "isHandleVisible", "handleHighlight", "handleTooltipContent", "needExtendedResizeZone", "childrenDOMRef", "labelComponent"]; // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
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; }
var resizerLabelStyles = (0, _primitives.xcss)({
position: 'absolute',
bottom: "var(--ds-space-0, 0px)",
width: '100%',
overflow: 'visible',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
height: "var(--ds-space-0, 0px)",
zIndex: 'layer' // 400 same z-index as the floating toolbar
});
var SUPPORTED_HANDLES = ['left', 'right'];
var SUPPORTED_HANDLES_FOR_VERTICAL_RESIZE = ['left', 'right', 'bottom'];
var inheritedCSS = {
position: 'inherit',
height: 'inherit',
width: 'inherit',
display: 'inherit',
flexDirection: 'inherit',
justifyContent: 'inherit',
alignItems: 'inherit'
};
var ResizerNext = function ResizerNext(props, ref) {
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
isResizing = _useState2[0],
setIsResizing = _useState2[1];
var resizable = (0, _react.useRef)(null);
var resizeHandleThumbRef = (0, _react.useRef)(null);
(0, _react.useImperativeHandle)(ref, function () {
return {
getResizerThumbEl: function getResizerThumbEl() {
return resizeHandleThumbRef.current;
}
};
}, [resizeHandleThumbRef]);
var width = props.width,
height = props.height,
children = props.children,
handleClassName = props.handleClassName,
className = props.className,
handleResize = props.handleResize,
handleResizeStart = props.handleResizeStart,
handleResizeStop = props.handleResizeStop,
_props$handleSize = props.handleSize,
handleSize = _props$handleSize === void 0 ? 'medium' : _props$handleSize,
_props$handleAlignmen = props.handleAlignmentMethod,
handleAlignmentMethod = _props$handleAlignmen === void 0 ? 'center' : _props$handleAlignmen,
_props$handlePosition = props.handlePositioning,
handlePositioning = _props$handlePosition === void 0 ? 'overlap' : _props$handlePosition,
appearance = props.appearance,
handleStyles = props.handleStyles,
_props$resizeRatio = props.resizeRatio,
resizeRatio = _props$resizeRatio === void 0 ? 1 : _props$resizeRatio,
snap = props.snap,
snapGap = props.snapGap,
_props$isHandleVisibl = props.isHandleVisible,
isHandleVisible = _props$isHandleVisibl === void 0 ? false : _props$isHandleVisibl,
_props$handleHighligh = props.handleHighlight,
handleHighlight = _props$handleHighligh === void 0 ? 'none' : _props$handleHighligh,
handleTooltipContent = props.handleTooltipContent,
_props$needExtendedRe = props.needExtendedResizeZone,
needExtendedResizeZone = _props$needExtendedRe === void 0 ? true : _props$needExtendedRe,
childrenDOMRef = props.childrenDOMRef,
labelComponent = props.labelComponent,
otherProps = (0, _objectWithoutProperties2.default)(props, _excluded);
var supportedHandles = (0, _expValEquals.expValEquals)('databases-native-embeds-v2', 'isEnabled', true) ? SUPPORTED_HANDLES_FOR_VERTICAL_RESIZE : SUPPORTED_HANDLES;
var onResizeStart = (0, _react.useCallback)(function (event) {
// prevent creating a drag event on Firefox
event.preventDefault();
setIsResizing(true);
handleResizeStart();
}, [handleResizeStart]);
var onResize = (0, _react.useCallback)(function (_event, direction, _elementRef, delta) {
if (!handleResize) {
return;
}
var resizableCurrent = resizable.current;
if (!resizableCurrent || !resizableCurrent.state.original) {
return;
}
var originalState = {
x: resizableCurrent.state.original.x,
y: resizableCurrent.state.original.y,
width: resizableCurrent.state.original.width,
height: resizableCurrent.state.original.height
};
if ((0, _expValEquals.expValEquals)('databases-native-embeds-v2', 'isEnabled', true)) {
handleResize(originalState, delta, direction);
} else {
handleResize(originalState, delta);
}
}, [handleResize]);
var onResizeStop = (0, _react.useCallback)(function (_event, direction, _elementRef, delta) {
var resizableCurrent = resizable.current;
if (!resizableCurrent || !resizableCurrent.state.original) {
return;
}
var originalState = {
x: resizableCurrent.state.original.x,
y: resizableCurrent.state.original.y,
width: resizableCurrent.state.original.width,
height: resizableCurrent.state.original.height
};
setIsResizing(false);
if ((0, _expValEquals.expValEquals)('databases-native-embeds-v2', 'isEnabled', true)) {
handleResizeStop(originalState, delta, direction);
} else {
handleResizeStop(originalState, delta);
}
}, [handleResizeStop]);
var handles = (0, _react.useMemo)(function () {
return supportedHandles.reduce(function (result, position) {
return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, (0, _classnames3.default)(handleClassName !== null && handleClassName !== void 0 ? handleClassName : _resizer.resizerHandleClassName, position, handleSize, position === 'bottom' && (0, _expValEquals.expValEquals)('databases-native-embeds-v2', 'isEnabled', true) ? undefined : handleAlignmentMethod)));
}, {});
}, [handleClassName, handleSize, handleAlignmentMethod, supportedHandles]);
var handleWidth = handlePositioning === 'adjacent' ? "var(--ds-space-100, 8px)" : "var(--ds-space-300, 24px)";
var baseHorizontalHandleStyles = {
width: handleWidth,
zIndex: _resizer.resizerHandleZIndex,
pointerEvents: 'auto',
alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
};
var baseBottomHandleStyles = {
height: handleWidth,
zIndex: _resizer.resizerHandleZIndex,
pointerEvents: 'auto',
justifyContent: handlePositioning === 'adjacent' ? 'center' : undefined
};
var memoizedBaseHorizontalHandleStyles = (0, _react.useMemo)(function () {
return {
width: handleWidth,
zIndex: _resizer.resizerHandleZIndex,
pointerEvents: 'auto',
alignItems: handlePositioning === 'adjacent' ? 'center' : undefined
};
}, [handleWidth, handlePositioning]);
var memoizedBaseBottomHandleStyles = (0, _react.useMemo)(function () {
return {
height: handleWidth,
zIndex: _resizer.resizerHandleZIndex,
pointerEvents: 'auto',
justifyContent: handlePositioning === 'adjacent' ? 'center' : undefined
};
}, [handleWidth, handlePositioning]);
var offset = handlePositioning === 'adjacent' ? "calc(".concat(handleWidth, " * -1)") : "calc(".concat(handleWidth, " * -0.5)");
var memoizedNextHandleStyles = (0, _react.useMemo)(function () {
return supportedHandles.reduce(function (result, position) {
return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, _objectSpread(_objectSpread({}, position === 'bottom' ? memoizedBaseBottomHandleStyles : memoizedBaseHorizontalHandleStyles), {}, (0, _defineProperty2.default)({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
}, {});
}, [memoizedBaseBottomHandleStyles, memoizedBaseHorizontalHandleStyles, offset, handleStyles, supportedHandles]);
var nextHandleStyles = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedNextHandleStyles :
// eslint-disable-next-line @atlassian/perf-linting/no-expensive-computations-in-render -- intentional fallback for experiment off path
supportedHandles.reduce(function (result, position) {
return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, _objectSpread(_objectSpread({}, position === 'bottom' ? baseBottomHandleStyles : baseHorizontalHandleStyles), {}, (0, _defineProperty2.default)({}, position, offset), handleStyles === null || handleStyles === void 0 ? void 0 : handleStyles[position])));
}, {});
var resizerClassName = (0, _classnames3.default)(className, _resizer.resizerItemClassName, (0, _defineProperty2.default)({
'is-resizing': isResizing,
'display-handle': isHandleVisible
}, _resizer.resizerDangerClassName, appearance === 'danger'));
var resizerZoneClassName = (0, _classnames3.default)(_resizer.resizerHoverZoneClassName, (0, _defineProperty2.default)({}, _resizer.resizerExtendedZone, needExtendedResizeZone));
var _useIntl = (0, _reactIntl.useIntl)(),
formatMessage = _useIntl.formatMessage;
var handleComponent = (0, _react.useMemo)(function () {
return supportedHandles.reduce(function (result, position) {
var thumb = /*#__PURE__*/_react.default.createElement("button", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: _resizer.resizerHandleThumbClassName,
"data-testid": "resizer-handle-".concat(position, "-thumb"),
"aria-label": formatMessage(_breakout.messages.resizeHandle),
contentEditable: false,
ref: resizeHandleThumbRef,
type: "button",
tabIndex: -1 //We want to control focus on this button ourselves
});
if ((!handleHighlight || handleHighlight === 'none') && !handleTooltipContent) {
return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position, thumb));
}
var thumbWithTrack =
/*#__PURE__*/
//It's important to have {thumb} element before the div, the thumb element is the one that gets focus and only the 1st element recives aria-descibedby attribute which is important for screen reader users
_react.default.createElement(_react.default.Fragment, null, thumb, /*#__PURE__*/_react.default.createElement("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: (0, _classnames3.default)(_resizer.resizerHandleTrackClassName, handleHighlight),
"data-testid": "resizer-handle-".concat(position, "-track")
}));
if (!!handleTooltipContent) {
return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position,
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
_react.default.createElement("div", {
contentEditable: false,
style: inheritedCSS
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
content: handleTooltipContent,
hideTooltipOnClick: true,
position: "mouse",
mousePosition: "auto-start",
testId: "resizer-handle-".concat(position, "-tooltip")
}, thumbWithTrack))));
}
return _objectSpread(_objectSpread({}, result), {}, (0, _defineProperty2.default)({}, position,
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
_react.default.createElement("div", {
contentEditable: false,
style: inheritedCSS
}, thumbWithTrack)));
}, {});
}, [handleHighlight, handleTooltipContent, formatMessage, supportedHandles]);
// snapGap is usually a constant, if snap.x?.length is 0 and snapGap has a value resizer cannot be resized
var snapGapActual = (0, _react.useMemo)(function () {
var _snap$x, _snap$y;
if (!snap || ((_snap$x = snap.x) === null || _snap$x === void 0 ? void 0 : _snap$x.length) === 0 && ((_snap$y = snap.y) === null || _snap$y === void 0 ? void 0 : _snap$y.length) === 0) {
return undefined;
}
return snapGap;
}, [snap, snapGap]);
var resolvedHeight = (0, _expValEquals.expValEquals)('databases-native-embeds-v2', 'isEnabled', true) ? height !== null && height !== void 0 ? height : 'auto' : 'auto';
var resizerAutoSize = (0, _react.useMemo)(function () {
return {
width: width !== null && width !== void 0 ? width : 'auto',
height: resolvedHeight
};
}, [resolvedHeight, width]);
var resizerSize = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? resizerAutoSize :
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- intentional fallback for experiment off path
{
width: width !== null && width !== void 0 ? width : 'auto',
height: resolvedHeight
};
return /*#__PURE__*/_react.default.createElement(_reResizable.Resizable, (0, _extends2.default)({
ref: resizable,
size: resizerSize
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: resizerClassName,
handleClasses: handles,
handleWrapperClass: _resizer.handleWrapperClass,
handleStyles: nextHandleStyles,
onResizeStart: onResizeStart,
onResize: onResize,
onResizeStop: onResizeStop,
resizeRatio: resizeRatio,
snapGap: snapGapActual,
snap: snap,
handleComponent: handleComponent
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, otherProps), /*#__PURE__*/_react.default.createElement("span", {
className: resizerZoneClassName,
ref: function ref(_ref) {
return childrenDOMRef && childrenDOMRef(_ref);
}
}, children), labelComponent && (0, _experiments.editorExperiment)('single_column_layouts', true) && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
xcss: resizerLabelStyles
}, labelComponent));
};
var _default_1 = /*#__PURE__*/(0, _react.forwardRef)(ResizerNext);
var _default = exports.default = _default_1;