@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
132 lines (130 loc) • 5.89 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useCallback } from 'react';
// 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
import { css, jsx } from '@emotion/react';
import { defineMessages, useIntl } from 'react-intl';
import CheckMarkIcon from '@atlaskit/icon/core/check-mark';
import EditIcon from '@atlaskit/icon/core/edit';
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
import { Flex, xcss } from '@atlaskit/primitives';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
var buttonContainerStyles = css({
opacity: 0,
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 1,
position: 'absolute',
width: 'max-content',
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
top: '-28px',
display: 'inline-flex',
justifyContent: 'flex-end',
color: "var(--ds-text-subtle, #505258)"
});
var buttonStyles = css({
display: 'flex',
alignItems: 'center',
cursor: 'pointer',
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)"),
minHeight: "var(--ds-space-300, 24px)",
borderRadius: "var(--ds-radius-small, 4px)",
paddingLeft: "var(--ds-space-150, 12px)",
paddingRight: "var(--ds-space-150, 12px)",
font: "var(--ds-font-body, normal 400 14px/20px \"Atlassian Sans\", ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
'&:hover': {
backgroundColor: "var(--ds-background-input-hovered, #F8F8F8)"
},
outlineColor: "var(--ds-border-focused, #4688EC)",
border: 'none',
backgroundColor: "var(--ds-background-input, #FFFFFF)",
color: "var(--ds-text-subtle, #505258)"
});
var showButtonContainerStyle = css({
opacity: 1
});
var iconStyles = xcss({
marginRight: 'space.075'
});
var i18n = defineMessages({
doneEditing: {
id: 'editor-common-extensibility-extension-lozenge-editToggle.done.editing',
defaultMessage: 'Done editing',
description: 'Text in button when on click switches back to view mode of a macro'
},
makeEdits: {
id: 'editor-common-extensibility-extension-lozenge-editToggle.make.edits',
defaultMessage: 'Make edits',
description: 'Text in button when on click switches back to edit mode of a macro'
}
});
// Used to toggle between edit and renderer mode for bodied macros in live pages
export var EditToggle = function EditToggle(_ref) {
var isNodeHovered = _ref.isNodeHovered,
customContainerStyles = _ref.customContainerStyles,
setIsNodeHovered = _ref.setIsNodeHovered,
showBodiedExtensionRendererView = _ref.showBodiedExtensionRendererView,
setShowBodiedExtensionRendererView = _ref.setShowBodiedExtensionRendererView;
var intl = useIntl();
var text = showBodiedExtensionRendererView ? intl.formatMessage(i18n.makeEdits) : intl.formatMessage(i18n.doneEditing);
var icon = showBodiedExtensionRendererView ? jsx(EditIcon, {
testId: "edit-icon",
label: ""
}) : jsx(CheckMarkIcon, {
testId: "check-mark-icon",
label: ""
});
var handleClick = useCallback(function () {
setShowBodiedExtensionRendererView === null || setShowBodiedExtensionRendererView === void 0 || setShowBodiedExtensionRendererView(!showBodiedExtensionRendererView);
}, [showBodiedExtensionRendererView, setShowBodiedExtensionRendererView]);
var handleKeyDown = useCallback(function (event) {
if (event.key === 'Enter') {
handleClick();
}
}, [handleClick]);
return jsx("div", {
"data-testid": "extension-edit-toggle-container"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
css: [buttonContainerStyles, expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? null : isNodeHovered && showButtonContainerStyle]
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
,
style: customContainerStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "extension-edit-toggle-container",
onMouseOver: function onMouseOver() {
return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
}
// @atlassian/a11y/mouse-events-have-key-events: keyboard focus is already handled by the
// inner <button>'s onFocus/onBlur. No-ops here satisfy the rule without duplicating state updates.
,
onFocus: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined,
onMouseLeave: function onMouseLeave() {
return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
},
onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? function () {} : undefined,
tabIndex: -1
}, jsx("button", {
type: "button",
"data-testid": "edit-toggle"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
css: buttonStyles
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "extension-edit-toggle",
onClick: handleClick,
onKeyDown: handleKeyDown,
onFocus: function onFocus() {
return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(true);
},
onBlur: function onBlur() {
return setIsNodeHovered === null || setIsNodeHovered === void 0 ? void 0 : setIsNodeHovered(false);
}
}, jsx(Flex, {
as: "span",
xcss: iconStyles
}, icon), text));
};