@atlaskit/editor-plugin-card
Version:
Card plugin for @atlaskit/editor-core
62 lines (61 loc) • 2.07 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import { useCallback, useState } from 'react';
// not permitted to migrate atlaskit packages to compiled yet, see https://hello.atlassian.net/wiki/spaces/UAF/pages/3006969423/Migrating+AFM+platform+components+to+Compiled+a+guide
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports
import { css, jsx } from '@emotion/react';
import { OverlayButton } from '@atlaskit/editor-common/link';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
const ConfigureOverlayWrapperStyles = css({
position: 'relative',
left: "var(--ds-space-025, 2px)"
});
const OverlayWrapper = ({
view,
targetElementPos,
children,
isHoveredCallback: hoverCallback,
onOpenLinkClick
}) => {
const [showConfigureButton, setShowConfigureButton] = useState(false);
const [dropdownOpen, setDropdownOpen] = useState(false);
const onDropdownChange = useCallback(isOpen => {
setDropdownOpen(isOpen);
if (!isOpen) {
setShowConfigureButton(false);
}
}, []);
return jsx("span", {
onMouseEnter: () => {
setShowConfigureButton(true);
hoverCallback(true);
},
onMouseLeave: () => {
if (!dropdownOpen) {
setShowConfigureButton(false);
hoverCallback(false);
}
},
onFocus: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? () => {
setShowConfigureButton(true);
hoverCallback(true);
} : undefined,
onBlur: expValEquals('platform_editor_a11y_eslint_fix', 'isEnabled', true) ? () => {
if (!dropdownOpen) {
setShowConfigureButton(false);
hoverCallback(false);
}
} : undefined,
"data-testid": "inline-card-overlay-wrapper"
}, jsx("span", {
css: ConfigureOverlayWrapperStyles
}, showConfigureButton && jsx(OverlayButton, {
editorView: view,
targetElementPos: targetElementPos,
onDropdownChange: onDropdownChange,
onOpenLinkClick: onOpenLinkClick
})), children);
};
export default OverlayWrapper;