@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
32 lines • 1.1 kB
JavaScript
import React from 'react';
import { SpotlightCard } from '@atlaskit/onboarding';
import { Popper } from '@atlaskit/popper';
/*
* ButtonSpotlightCard is an editor custom spotlight that renders next to a floating toolbar button.
* It is built on top of the SpotlightCard component from @atlaskit/onboarding.
* It avoids the issue of the native atlaskit Spotlight component rendering outside the editor bounds and takes focus away from the editor.
*/
export const ButtonSpotlightCard = props => {
const {
referenceElement,
placement = 'top-start',
...spotlightCardProps
} = props;
return /*#__PURE__*/React.createElement(Popper, {
referenceElement: referenceElement,
placement: placement,
strategy: "absolute"
}, ({
ref,
style
}) =>
/*#__PURE__*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
React.createElement("div", {
ref: ref,
style: style
}, /*#__PURE__*/React.createElement(SpotlightCard
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
, spotlightCardProps)));
};