@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
230 lines (229 loc) • 12.4 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 _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _file = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file"));
var _hooks = require("../../hooks");
var _MultiBodiedExtension = require("../../ui/MultiBodiedExtension");
var _utils = require("../../utils");
var _Lozenge = _interopRequireDefault(require("../Extension/Lozenge"));
var _actionApi = require("./action-api");
var _styles = require("./styles");
var _excluded = ["url"];
/* eslint-disable @atlaskit/design-system/prefer-primitives */
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
var getContainerCssExtendedStyles = function getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates) {
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
(0, _react2.css)(_MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeExtensionContainer, (0, _defineProperty2.default)({}, ".multiBodiedExtension-content-dom-wrapper > [data-extension-frame='true']:nth-of-type(".concat(activeChildIndex + 1
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
, ")"), (0, _react2.css)(
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
_MultiBodiedExtension.sharedMultiBodiedExtensionStyles.extensionFrameContent,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
showMacroInteractionDesignUpdates && _MultiBodiedExtension.removeMarginsAndBorder)))
);
};
var imageStyles = (0, _react2.css)({
maxHeight: '24px',
maxWidth: '24px'
});
// Similar to the one in platform/packages/editor/editor-common/src/extensibility/Extension/Lozenge.tsx
var getWrapperTitleContent = function getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates) {
if (showMacroInteractionDesignUpdates) {
return null;
}
if (imageData) {
var url = imageData.url,
rest = (0, _objectWithoutProperties2.default)(imageData, _excluded);
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
className: "extension-title"
}, (0, _react2.jsx)("img", (0, _extends2.default)({
css: imageStyles,
src: url
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, rest, {
alt: title
})), title)
);
}
return (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "extension-title",
"data-testid": 'multiBodiedExtension-default-lozenge'
}, (0, _react2.jsx)(_file.default, {
label: title
}), title);
};
var MultiBodiedExtensionWithWidth = function MultiBodiedExtensionWithWidth(_ref) {
var node = _ref.node,
handleContentDOMRef = _ref.handleContentDOMRef,
getPos = _ref.getPos,
tryExtensionHandler = _ref.tryExtensionHandler,
editorView = _ref.editorView,
eventDispatcher = _ref.eventDispatcher,
widthState = _ref.widthState,
editorAppearance = _ref.editorAppearance,
macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags,
isNodeSelected = _ref.isNodeSelected,
isNodeHovered = _ref.isNodeHovered,
isNodeNested = _ref.isNodeNested,
setIsNodeHovered = _ref.setIsNodeHovered;
var _ref2 = macroInteractionDesignFeatureFlags || {},
showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
var _node$attrs = node.attrs,
parameters = _node$attrs.parameters,
extensionKey = _node$attrs.extensionKey;
var title = parameters && parameters.extensionTitle || parameters && parameters.macroMetadata && parameters.macroMetadata.title || extensionKey || node.type.name;
var imageData = (0, _utils.getExtensionLozengeData)({
node: node,
type: 'image'
});
var _useState = (0, _react.useState)(0),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
activeChildIndex = _useState2[0],
setActiveChildIndex = _useState2[1];
// Adding to avoid aliasing `this` for the callbacks
var updateActiveChild = _react.default.useCallback(function (index) {
if (typeof index !== 'number') {
setActiveChildIndex(0);
throw new Error('Index is not valid');
}
setActiveChildIndex(index);
return true;
}, [setActiveChildIndex]);
var actions = (0, _actionApi.useMultiBodiedExtensionActions)({
updateActiveChild: updateActiveChild,
editorView: editorView,
getPos: getPos,
eventDispatcher: eventDispatcher,
node: node
});
var extensionHandlerResult = _react.default.useMemo(function () {
return tryExtensionHandler(actions);
}, [tryExtensionHandler, actions]);
var articleRef = _react.default.useCallback(function (node) {
return handleContentDOMRef(node);
}, [handleContentDOMRef]);
var shouldBreakout =
// Extension should breakout when the layout is set to 'full-width' or 'wide'.
['full-width', 'wide'].includes(node.attrs.layout) &&
// Extension breakout state should not be respected when the editor appearance is full-width mode
editorAppearance !== 'full-width';
var mbeWrapperStyles = {};
if (shouldBreakout) {
var _calculateBreakoutSty = (0, _utils.calculateBreakoutStyles)({
mode: node.attrs.layout,
widthStateLineLength: widthState === null || widthState === void 0 ? void 0 : widthState.lineLength,
widthStateWidth: widthState === null || widthState === void 0 ? void 0 : widthState.width
}),
breakoutStyles = (0, _extends2.default)({}, ((0, _objectDestructuringEmpty2.default)(_calculateBreakoutSty), _calculateBreakoutSty));
mbeWrapperStyles = breakoutStyles;
}
var wrapperClassNames = (0, _classnames.default)('multiBodiedExtension--wrapper', 'extension-container', 'block', {
'with-border': showMacroInteractionDesignUpdates,
'with-danger-overlay': showMacroInteractionDesignUpdates,
'with-padding-background-styles': showMacroInteractionDesignUpdates,
'with-margin-styles': showMacroInteractionDesignUpdates && !isNodeNested,
'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
});
var containerClassNames = (0, _classnames.default)('multiBodiedExtension--container', {
'remove-padding': showMacroInteractionDesignUpdates
});
var navigationClassNames = (0, _classnames.default)('multiBodiedExtension--navigation', {
'remove-margins': showMacroInteractionDesignUpdates,
'remove-border': showMacroInteractionDesignUpdates
});
var overlayClassNames = (0, _classnames.default)('multiBodiedExtension--overlay', {
'with-margin': showMacroInteractionDesignUpdates
});
var handleMouseEvent = function handleMouseEvent(didHover) {
if (setIsNodeHovered) {
setIsNodeHovered(didHover);
}
};
return (0, _react2.jsx)(_react.Fragment, null, showMacroInteractionDesignUpdates && (0, _react2.jsx)(_Lozenge.default, {
isNodeSelected: isNodeSelected,
node: node,
showMacroInteractionDesignUpdates: true,
customContainerStyles: mbeWrapperStyles,
isNodeHovered: isNodeHovered,
isNodeNested: isNodeNested,
setIsNodeHovered: setIsNodeHovered,
isBodiedMacro: true
}), (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: wrapperClassNames
// 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: _styles.mbeExtensionWrapperCSSStyles,
"data-testid": "multiBodiedExtension--wrapper"
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: mbeWrapperStyles,
onMouseEnter: function onMouseEnter() {
return handleMouseEvent(true);
},
onMouseLeave: function onMouseLeave() {
return handleMouseEvent(false);
}
}, (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: _styles.overlayStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: overlayClassNames,
"data-testid": "multiBodiedExtension--overlay"
}), getWrapperTitleContent(imageData, title, showMacroInteractionDesignUpdates), (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: containerClassNames
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
,
css: getContainerCssExtendedStyles(activeChildIndex, showMacroInteractionDesignUpdates),
"data-testid": "multiBodiedExtension--container",
"data-active-child-index": activeChildIndex
}, (0, _react2.jsx)("nav", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: navigationClassNames
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
,
css: _MultiBodiedExtension.sharedMultiBodiedExtensionStyles.mbeNavigation,
"data-testid": "multiBodiedExtension-navigation"
}, extensionHandlerResult), (0, _react2.jsx)("article", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
className: "multiBodiedExtension--frames",
"data-testid": "multiBodiedExtension--frames",
ref: articleRef
}))));
};
var MultiBodiedExtension = function MultiBodiedExtension(props) {
var pluginInjectionApi = props.pluginInjectionApi;
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(pluginInjectionApi, ['width']),
widthState = _useSharedPluginState.widthState;
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
return (0, _react2.jsx)(MultiBodiedExtensionWithWidth, (0, _extends2.default)({
widthState: widthState
}, props));
};
var _default = exports.default = MultiBodiedExtension;