@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
195 lines (194 loc) • 8.17 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css, jsx } from '@emotion/react';
import classnames from 'classnames';
import { defineMessages, FormattedMessage } from 'react-intl-next';
import CustomizeIcon from '@atlaskit/icon/core/customize';
import { Box, xcss } from '@atlaskit/primitives';
import Tooltip from '@atlaskit/tooltip';
const containerStyles = 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)"
}
});
const labelStyles = 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 ${"var(--ds-border, #091E4224)"}`
},
minHeight: "var(--ds-space-300, 24px)",
alignItems: 'center',
borderRadius: "var(--ds-border-radius, 3px)",
paddingLeft: "var(--ds-space-100, 8px)",
paddingRight: "var(--ds-space-100, 8px)",
color: "var(--ds-text-subtle, #44546F)",
backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
// 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 ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"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-neutral-subtle, #00000000)",
boxShadow: `0 0 0 1px ${"var(--ds-border, #091E4224)"}`
}
});
const spacerStyles = xcss({
height: 'space.200',
position: 'absolute',
width: '100%'
});
const iconStyles = 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'
}
});
const i18n = 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.'
}
});
export const getShouldShowBodiedMacroLabel = (isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI
// Ignored via go/ees005
// eslint-disable-next-line @typescript-eslint/max-params
) => {
// 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
};
export const ExtensionLabel = ({
text,
extensionName,
isNodeHovered,
customContainerStyles,
isNodeNested,
setIsNodeHovered,
isBodiedMacro,
showUpdatedLivePages1PBodiedExtensionUI,
showLivePagesBodiedMacrosRendererView,
showBodiedExtensionRendererView
}) => {
const isInlineExtension = extensionName === 'inlineExtension';
const showDefaultBodiedStyles = isBodiedMacro && !isNodeHovered;
const shouldShowBodiedMacroLabel = getShouldShowBodiedMacroLabel(isBodiedMacro, isNodeHovered, showLivePagesBodiedMacrosRendererView, showBodiedExtensionRendererView, showUpdatedLivePages1PBodiedExtensionUI);
const containerClassNames = classnames({
bodied: isBodiedMacro
});
const labelClassNames = classnames('extension-label', {
nested: isNodeNested,
inline: isInlineExtension,
bodied: isBodiedMacro,
'bodied-border': showDefaultBodiedStyles,
'bodied-background': showDefaultBodiedStyles,
'show-label': 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
});
const iconClassNames = classnames({
'hide-icon': isBodiedMacro && !isNodeHovered
});
return (
// eslint-disable-next-line jsx-a11y/no-static-element-interactions
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
// eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
,
onMouseOver: () => {
setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
},
onMouseLeave: () => {
setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
},
"data-testid": "new-lozenge-container"
}, jsx(Tooltip, {
content: jsx(FormattedMessage
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, _extends({}, i18n.configure, {
values: {
macroName: text
}
})),
position: "top"
}, tooltipProps => jsx("span", _extends({
"data-testid": "new-lozenge-button"
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, tooltipProps, {
css: labelStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: labelClassNames
}), text, jsx("span", {
css: iconStyles,
className: iconClassNames,
"data-testid": "config-icon"
}, jsx(CustomizeIcon, {
label: ""
})))), jsx(Box, {
xcss: spacerStyles
}))
);
};