@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
73 lines (72 loc) • 2.79 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { Fragment } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { jsx } from '@emotion/react';
import classnames from 'classnames';
import { akEditorGutterPaddingDynamic } from '@atlaskit/editor-shared-styles';
import { useSharedPluginState } from '../../../hooks';
import { createWidthContext, WidthContext } from '../../../ui';
import ExtensionLozenge from '../Lozenge';
import { overlay } from '../styles';
import { inlineWrapperStyles, wrapperStyle } from './styles';
const InlineExtension = props => {
const {
node,
pluginInjectionApi,
macroInteractionDesignFeatureFlags,
isNodeSelected,
children,
isNodeHovered,
setIsNodeHovered
} = props;
const {
showMacroInteractionDesignUpdates
} = macroInteractionDesignFeatureFlags || {};
const {
widthState
} = useSharedPluginState(pluginInjectionApi, ['width']);
const hasChildren = !!children;
const classNames = classnames('extension-container', 'inline', {
'with-overlay': !showMacroInteractionDesignUpdates,
'with-children': hasChildren,
'with-danger-overlay': showMacroInteractionDesignUpdates,
'with-hover-border': showMacroInteractionDesignUpdates && isNodeHovered
});
const rendererContainerWidth = widthState ? widthState.width - akEditorGutterPaddingDynamic() * 2 : 0;
const handleMouseEvent = didHover => {
if (setIsNodeHovered) {
setIsNodeHovered(didHover);
}
};
const inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
node: node,
isNodeSelected: isNodeSelected,
isNodeHovered: isNodeHovered,
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
setIsNodeHovered: setIsNodeHovered
}), jsx("div", {
"data-testid": "inline-extension-wrapper"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
,
css: [wrapperStyle, inlineWrapperStyles]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: classNames,
onMouseEnter: () => handleMouseEvent(true),
onMouseLeave: () => handleMouseEvent(false)
}, jsx("div", {
css: overlay,
className: "extension-overlay"
}), children ? children : jsx(ExtensionLozenge, {
node: node,
isNodeSelected: isNodeSelected,
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
})));
return jsx(WidthContext.Provider, {
value: createWidthContext(rendererContainerWidth)
}, inlineExtensionInternal);
};
export default InlineExtension;