@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
114 lines (113 loc) • 4.94 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
*/
import React, { Fragment } from 'react';
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic
import { css, jsx } from '@emotion/react';
import classnames from 'classnames';
import { akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
import { useSharedPluginStateWithSelector } from '../../../hooks';
import { createWidthContext, WidthContext } from '../../../ui';
import ExtensionLozenge from '../Lozenge';
import { overlay } from '../styles';
import { wrapperStyle } from './styles';
const inlineWrapperStyles = css({
maxWidth: '100%',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'tr &': {
maxWidth: 'inherit'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.rich-media-item': {
maxWidth: '100%'
}
});
const hoverStyles = css({
'&:hover': {
boxShadow: `0 0 0 1px ${"var(--ds-border-input, #8C8F97)"}`
}
});
const InlineExtension = props => {
const {
node,
pluginInjectionApi,
macroInteractionDesignFeatureFlags,
isNodeSelected,
children,
isNodeHovered,
setIsNodeHovered,
isLivePageViewMode
} = props;
const {
showMacroInteractionDesignUpdates
} = macroInteractionDesignFeatureFlags || {};
const {
width
} = useSharedPluginStateWithSelector(pluginInjectionApi, ['width'], states => {
var _states$widthState;
return {
width: (_states$widthState = states.widthState) === null || _states$widthState === void 0 ? void 0 : _states$widthState.width
};
});
const hasChildren = !!children;
const classNames = classnames('extension-container', 'inline', {
'with-overlay': !showMacroInteractionDesignUpdates,
'with-children': hasChildren,
'with-danger-overlay': showMacroInteractionDesignUpdates,
'with-hover-border': expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) ? false : showMacroInteractionDesignUpdates && isNodeHovered
});
let rendererContainerWidth = 0;
if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
exposure: true
})) {
if (width) {
const padding = width > akEditorFullPageNarrowBreakout ? akEditorGutterPaddingDynamic() : akEditorGutterPaddingReduced;
rendererContainerWidth = width - padding * 2;
}
} else {
rendererContainerWidth = width ? width - akEditorGutterPaddingDynamic() * 2 : 0;
}
const handleMouseEvent = didHover => {
if (setIsNodeHovered) {
setIsNodeHovered(didHover);
}
};
const inlineExtensionInternal = jsx(Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
node: node,
isNodeSelected: isNodeSelected,
isNodeHovered: isNodeHovered,
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
setIsNodeHovered: setIsNodeHovered,
pluginInjectionApi: pluginInjectionApi
}), jsx("div", {
"data-testid": "inline-extension-wrapper",
css: [
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
wrapperStyle, inlineWrapperStyles, showMacroInteractionDesignUpdates && !isLivePageViewMode && expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: classNames,
onMouseEnter: () => handleMouseEvent(true)
// @atlassian/a11y/mouse-events-have-key-events: hover border is also accessible via keyboard selection.
// No-ops here satisfy the rule without duplicating state updates.
,
onFocus: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? () => {} : undefined,
onMouseLeave: () => handleMouseEvent(false),
onBlur: expValEquals('editor_a11y__enghealth-46814_fy26', 'isEnabled', true) ? () => {} : undefined
}, jsx("div", {
css: overlay,
className: "extension-overlay"
}), children ? children : jsx(ExtensionLozenge, {
node: node,
isNodeSelected: isNodeSelected,
showMacroInteractionDesignUpdates: showMacroInteractionDesignUpdates,
pluginInjectionApi: pluginInjectionApi
})));
return jsx(WidthContext.Provider, {
value: createWidthContext(rendererContainerWidth)
}, inlineExtensionInternal);
};
export default InlineExtension;