@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
95 lines • 5.8 kB
JavaScript
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _templateObject;
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
import { css } from '@emotion/react';
import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import { fg } from '@atlaskit/platform-feature-flags';
var BORDER_RADIUS = "var(--ds-border-radius-100, 4px)";
var EXPAND_COLLAPSED_BACKGROUND = "var(--ds-background-neutral-subtle, transparent)";
var EXPAND_SELECTED_BACKGROUND = "var(--ds-surface, rgba(255, 255, 255, 0.6))";
var EXPAND_FOCUSED_BORDER_COLOR = "var(--ds-border-focused, #388BFF)";
var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
var EXPAND_EXPANDED_BORDER_COLOR = "var(--ds-border, #091E4224)";
var containerStyles = function containerStyles(styleProps) {
var expanded = styleProps.expanded,
focused = styleProps.focused;
var marginTop = "var(--ds-space-050, 0.25rem)";
var marginBottom = 0;
// Only only these margins if the expand isn't editable
// and is the root level expand.
var marginHorizontal = styleProps['data-node-type'] === 'expand' ? "-".concat(akLayoutGutterOffset, "px") : 0;
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
return function () {
return css({
borderWidth: '1px',
borderStyle: 'solid',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
borderColor: focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR,
borderRadius: BORDER_RADIUS,
minHeight: '25px',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
background: !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND,
margin: margin,
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
transition: "background 0.3s ".concat(akEditorSwoopCubicBezier, ", border-color 0.3s ").concat(akEditorSwoopCubicBezier),
padding: "var(--ds-space-100, 8px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
'td > :not(style):first-child, td > style:first-child + *': {
marginTop: 0
}
});
};
};
var contentStyles = function contentStyles(styleProps) {
return function () {
return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\t\tpadding-top: ", ";\n\t\tpadding-right: ", ";\n\t\tpadding-left: ", ";\n\t\tmargin-left: ", ";\n\t\tdisplay: flow-root;\n\n\t\t// The follow rules inside @supports block are added as a part of ED-8893\n\t\t// The fix is targeting mobile bridge on iOS 12 or below,\n\t\t// We should consider remove this fix when we no longer support iOS 12\n\t\t@supports not (display: flow-root) {\n\t\t\twidth: 100%;\n\t\t\tbox-sizing: border-box;\n\t\t}\n\n\t\t", "\n\t"])), styleProps.expanded ? "var(--ds-space-100, 8px)" : "var(--ds-space-0, 0px)", "var(--ds-space-100, 8px)", "var(--ds-space-300, 24px)", "var(--ds-space-050, 4px)", !styleProps.expanded ? "\n .expand-content-wrapper, .nestedExpand-content-wrapper {\n /* We visually hide the content here to preserve the content during copy+paste */\n /* Do not add text nowrap here because inline comment navigation depends on the location of the text */\n width: 100%;\n display: block;\n height: 0;\n overflow: hidden;\n clip: rect(1px, 1px, 1px, 1px);\n user-select: none;\n }\n " : '')
);
};
};
var titleInputStyles = function titleInputStyles() {
return css({
outline: 'none',
border: 'none',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
fontSize: relativeFontSizeToBase16(14),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
lineHeight: fg('platform-visual-refresh-icons') ? 1 : akEditorLineHeight,
fontWeight: "var(--ds-font-weight-regular, 400)",
color: "var(--ds-text-subtlest, #626F86)",
background: 'transparent',
display: 'flex',
flex: 1,
padding: "0 0 0 ".concat("var(--ds-space-050, 4px)"),
width: '100%',
'&::placeholder': {
opacity: 1,
color: "var(--ds-text-subtlest, #626F86)"
}
});
};
var titleContainerStyles = function titleContainerStyles() {
return css({
padding: 0,
display: 'flex',
alignItems: 'flex-start',
background: 'none',
border: 'none',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
fontSize: relativeFontSizeToBase16(14),
width: '100%',
color: "var(--ds-text-subtle, #44546F)",
overflow: 'hidden',
cursor: 'pointer',
'&:focus': {
outline: 0
}
});
};
export var sharedExpandStyles = {
titleInputStyles: titleInputStyles,
titleContainerStyles: titleContainerStyles,
containerStyles: containerStyles,
contentStyles: contentStyles
};