@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
230 lines (226 loc) • 11.7 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.getShouldShowBodiedMacroLabel = exports.ExtensionLabel = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = require("react");
var _react2 = require("@emotion/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _reactIntl = require("react-intl");
var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
var _primitives = require("@atlaskit/primitives");
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
var containerStyles = (0, _react2.css)({
textAlign: 'left',
zIndex: 1,
position: 'relative',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.bodied': {
marginTop: "var(--ds-space-300, 24px)"
}
});
var showLabelStyles = (0, _react2.css)({
opacity: 1
});
var hideLabelStyles = (0, _react2.css)({
opacity: 0
});
var labelStyles = (0, _react2.css)({
opacity: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 1,
display: 'inline-flex',
justifyContent: 'left',
position: 'absolute',
width: 'max-content',
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: '-28px',
// When updating this value, make sure to also update the value in EditToggle.tsx, buttonContainerStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.show-label': {
cursor: 'pointer',
opacity: 1
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.nested': {
// Need to add indent if the node is nested since we removed previous indentation styles to make it fit properly
// in the nested component
marginLeft: "var(--ds-space-150, 12px)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.inline': {
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: '-27px'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.bodied-background': {
background: "var(--ds-surface, #FFFFFF)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.bodied-border': {
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
},
minHeight: "var(--ds-space-300, 24px)",
alignItems: 'center',
borderRadius: "var(--ds-radius-small, 3px)",
paddingLeft: "var(--ds-space-100, 8px)",
paddingRight: "var(--ds-space-100, 8px)",
color: "var(--ds-text-subtle, #505258)",
backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.remove-left-margin': {
marginLeft: "var(--ds-space-negative-150, -12px)"
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.remove-nested-left-margin': {
marginLeft: 0
},
font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.with-bodied-macro-live-page-styles': {
backgroundColor: "var(--ds-background-input, #FFFFFF)",
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
}
});
var spacerStyles = (0, _primitives.xcss)({
height: 'space.200',
position: 'absolute',
width: '100%'
});
var iconStyles = (0, _react2.css)({
marginLeft: "var(--ds-space-075, 6px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.hide-icon': {
display: 'none'
}
});
var bodiedMacroIconStyles = (0, _react2.css)({
display: 'none'
});
var i18n = (0, _reactIntl.defineMessages)({
configure: {
id: 'editor-common-extensibility.macro.button.configure',
defaultMessage: 'Configure {macroName}',
description: 'Text in tooltip that tells user they can configure the specific macro.'
}
});
var getShouldShowBodiedMacroLabel = exports.getShouldShowBodiedMacroLabel = function getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI) {
// Bodied macros show the label by default except for the new live pages 1P bodied macro experience where we only show it on hover
if (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) {
return isNodeHovered;
}
if (!showLivePagesBodiedMacrosRendererView) {
return true;
} // Keep showing labels as usual for default experience for bodied macros
return !!(isNodeHovered && !showBodiedExtensionRendererView); // For the new live pages bodied macro experience, we only show the label on hover in the "edit" view
};
var ExtensionLabel = exports.ExtensionLabel = function ExtensionLabel(_ref) {
var text = _ref.text,
extensionName = _ref.extensionName,
isNodeHovered = _ref.isNodeHovered,
customContainerStyles = _ref.customContainerStyles,
isNodeNested = _ref.isNodeNested,
setIsNodeHovered = _ref.setIsNodeHovered,
isBodiedMacro = _ref.isBodiedMacro,
showUpdatedLivePages1PBodiedExtensionUI = _ref.showUpdatedLivePages1PBodiedExtensionUI,
showLivePagesBodiedMacrosRendererView = _ref.showLivePagesBodiedMacrosRendererView,
showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
_pluginInjectionApi = _ref.pluginInjectionApi;
var isInlineExtension = extensionName === 'inlineExtension';
var showDefaultBodiedStyles = (0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'isEnabled', true) ? isBodiedMacro : isBodiedMacro && !isNodeHovered;
var shouldShowBodiedMacroLabel = getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI);
var containerClassNames = (0, _classnames.default)({
bodied: isBodiedMacro
});
var labelClassNames = (0, _classnames.default)('extension-label', {
nested: isNodeNested,
inline: isInlineExtension,
bodied: isBodiedMacro,
'bodied-border': showDefaultBodiedStyles,
'bodied-background': showDefaultBodiedStyles,
'show-label': (0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : shouldShowBodiedMacroLabel,
'with-bodied-macro-live-page-styles': isBodiedMacro && showLivePagesBodiedMacrosRendererView,
'always-hide-label': isBodiedMacro && showBodiedExtensionRendererView,
// Need this separate class since we don't ever want to show the label during view mode
'remove-left-margin': !isBodiedMacro && !isInlineExtension && !isNodeNested,
'remove-nested-left-margin': isNodeNested && !isBodiedMacro && !isInlineExtension
});
var iconClassNames = (0, _classnames.default)({
'hide-icon': (0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : isBodiedMacro && !isNodeHovered,
'extension-icon': (0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true)
});
var memoizedTooltipValues = (0, _react.useMemo)(function () {
return {
macroName: text
};
}, [text]);
var tooltipValues = (0, _expValEquals.expValEquals)('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? memoizedTooltipValues : {
macroName: text
};
return (
// eslint-disable-next-line @atlassian/a11y/no-static-element-interactions, @atlassian/a11y/click-events-have-key-events, @atlassian/a11y/interactive-element-not-keyboard-focusable
(0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
css: containerStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: containerClassNames
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: customContainerStyles,
onMouseOver: function onMouseOver() {
setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(true);
}
// @atlassian/a11y/mouse-events-have-key-events: label visibility on keyboard focus is already
// handled via the .ak-editor-selected-node CSS class applied by ProseMirror on node selection.
// No-ops here satisfy the rule.
,
onFocus: (0, _expValEquals.expValEquals)('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined,
onMouseLeave: function onMouseLeave() {
setIsNodeHovered === null || setIsNodeHovered === void 0 || setIsNodeHovered(false);
},
onBlur: (0, _expValEquals.expValEquals)('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined,
"data-testid": "new-lozenge-container",
contentEditable: false
}, (0, _react2.jsx)(_tooltip.default, {
content: (0, _react2.jsx)(_reactIntl.FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, (0, _extends2.default)({}, i18n.configure, {
values: tooltipValues
})),
position: "top"
}, function (tooltipProps) {
return (0, _react2.jsx)("span", (0, _extends2.default)({
"data-testid": "new-lozenge-button"
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, tooltipProps, {
css: [labelStyles].concat((0, _toConsumableArray2.default)((0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? [!showLivePagesBodiedMacrosRendererView && showLabelStyles, (!isBodiedMacro || showUpdatedLivePages1PBodiedExtensionUI) && hideLabelStyles] : []))
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: labelClassNames
}), text, (0, _react2.jsx)("span", {
css: [iconStyles, isBodiedMacro && (0, _expValEquals.expValEquals)('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && bodiedMacroIconStyles]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: iconClassNames,
"data-testid": "config-icon"
}, (0, _react2.jsx)(_customize.default, {
label: ""
})));
}), (0, _react2.jsx)(_primitives.Box, {
xcss: spacerStyles
}))
);
};