@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
64 lines • 2.69 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';
var InlineExtension = function InlineExtension(props) {
var node = props.node,
pluginInjectionApi = props.pluginInjectionApi,
showMacroInteractionDesignUpdates = props.showMacroInteractionDesignUpdates,
isNodeSelected = props.isNodeSelected,
children = props.children,
isNodeHovered = props.isNodeHovered,
setIsNodeHovered = props.setIsNodeHovered;
var _useSharedPluginState = useSharedPluginState(pluginInjectionApi, ['width']),
widthState = _useSharedPluginState.widthState;
var hasChildren = !!children;
var classNames = classnames('extension-container', 'inline', 'with-overlay', {
'with-children': hasChildren,
'with-danger-overlay': showMacroInteractionDesignUpdates
});
var rendererContainerWidth = widthState ? widthState.width - akEditorGutterPadding * 2 : 0;
var extendedInlineExtension = getBooleanFF('platform.editor.inline_extension.extended_lcqdn') || false;
var handleMouseEvent = function handleMouseEvent(didHover) {
if (setIsNodeHovered) {
setIsNodeHovered(didHover);
}
};
var 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: function onMouseEnter() {
return handleMouseEvent(true);
},
onMouseLeave: function onMouseLeave() {
return 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;