@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
83 lines (82 loc) • 4.07 kB
JavaScript
/**
* @jsxRuntime classic
* @jsx jsx
* @jsxFrag React.Fragment
*/
import React 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
import { ZERO_WIDTH_SPACE } from '../whitespace';
import { ExtensionSSRReactContextsProvider } from './ExtensionSSRReactContextsProvider';
var styles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.inline-extension': {
display: 'inline-block'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'&.relative': {
position: 'relative'
}
});
var hoverStyles = css({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
':has(.extension-label:hover) .extension-container, :has(.extension-edit-toggle-container:hover) .extension-container': {
boxShadow: "0 0 0 1px ".concat("var(--ds-border-input, #8C8F97)")
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
':has(.extension-container:hover) .extension-label, :has(.extension-edit-toggle-container:hover) .extension-label, .extension-label:hover': {
opacity: 1,
backgroundColor: "var(--ds-background-accent-gray-subtlest, #F0F1F2)",
boxShadow: 'none',
cursor: 'pointer',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.always-hide-label': {
opacity: 0,
cursor: 'auto'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
'&.with-bodied-macro-live-page-styles': {
backgroundColor: "var(--ds-background-input, #FFFFFF)",
boxShadow: "0 0 0 1px ".concat("var(--ds-border, #0B120E24)")
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
':has(.extension-label:hover) .extension-icon, :has(.extension-container:hover) .extension-icon, :has(.extension-edit-toggle-container:hover) .extension-icon': {
display: 'inline'
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
':has(.extension-label:hover) .extension-edit-toggle-container, :has(.extension-container:hover) .extension-edit-toggle-container, .extension-edit-toggle-container:hover': {
opacity: 1
}
});
/**
* If inlineExtension, add zero width space to the end of the nodes and wrap with span;
* Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
* else wrap with a div (for multi bodied extensions)
*
* @param param0
* @returns
*/
export var ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
var children = _ref.children,
nodeType = _ref.nodeType,
macroInteractionDesignFeatureFlags = _ref.macroInteractionDesignFeatureFlags,
intl = _ref.intl;
var _ref2 = macroInteractionDesignFeatureFlags || {},
showMacroInteractionDesignUpdates = _ref2.showMacroInteractionDesignUpdates;
var wrapperClassNames = classnames({
'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
relative: showMacroInteractionDesignUpdates
});
return jsx(ExtensionSSRReactContextsProvider, {
intl: intl
}, jsx("span", {
"data-testid": "extension-node-wrapper"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
,
className: wrapperClassNames,
css: [styles, expValEquals('cc_editor_ttvc_release_bundle_one', 'extensionHoverRefactor', true) && hoverStyles]
}, children, nodeType === 'inlineExtension' && ZERO_WIDTH_SPACE));
};