@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
101 lines (100 loc) • 6.22 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.sharedExpandStyles = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _templateObject; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
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(_editorSharedStyles.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 (0, _react.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(_editorSharedStyles.akEditorSwoopCubicBezier, ", border-color 0.3s ").concat(_editorSharedStyles.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
(0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 (0, _react.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: (0, _editorSharedStyles.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: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? 1 : _editorSharedStyles.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 (0, _react.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: (0, _editorSharedStyles.relativeFontSizeToBase16)(14),
width: '100%',
color: "var(--ds-text-subtle, #44546F)",
overflow: 'hidden',
cursor: 'pointer',
'&:focus': {
outline: 0
}
});
};
var sharedExpandStyles = exports.sharedExpandStyles = {
titleInputStyles: titleInputStyles,
titleContainerStyles: titleContainerStyles,
containerStyles: containerStyles,
contentStyles: contentStyles
};