@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
63 lines • 2.38 kB
JavaScript
/** @jsx jsx */
import React, { Fragment } from 'react';
import { jsx } from '@emotion/react';
import classnames from 'classnames';
import { akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
import { useSharedPluginState } from '../../../hooks';
import { createWidthContext, WidthContext } from '../../../ui';
import ExtensionLozenge from '../Lozenge';
import { overlay } from '../styles';
import { inlineWrapperStyels, wrapperStyle } from './styles';
const InlineExtension = props => {
const {
node,
pluginInjectionApi,
showMacroInteractionDesignUpdates,
isNodeSelected,
children,
isNodeHovered,
setIsNodeHovered
} = props;
const {
widthState
} = useSharedPluginState(pluginInjectionApi, ['width']);
const hasChildren = !!children;
const classNames = classnames('extension-container', 'inline', 'with-overlay', {
'with-children': hasChildren,
'with-danger-overlay': showMacroInteractionDesignUpdates
});
const rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
const extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
const handleMouseEvent = didHover => {
if (setIsNodeHovered) {
setIsNodeHovered(didHover);
}
};
const inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && jsx(ExtensionLozenge, {
node: node,
isNodeSelected: isNodeSelected,
isNodeHovered: isNodeHovered,
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates
}), jsx("div", {
"data-testid": "inline-extension-wrapper",
css: [wrapperStyle, extendedInlineExtension && inlineWrapperStyels],
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
})));
if (extendedInlineExtension) {
return jsx(WidthContext.Provider, {
value: createWidthContext(rendererContainerWidth)
}, inlineExtensionInternal);
}
return inlineExtensionInternal;
};
export default InlineExtension;