@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
95 lines (94 loc) • 7.78 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
var _excluded = ["children"];
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
/** @jsx jsx */
import React, { forwardRef } from 'react';
import { css, jsx } from '@emotion/react';
import { defineMessages } from 'react-intl-next';
import { akEditorLineHeight, akEditorSwoopCubicBezier, akLayoutGutterOffset, relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
import { B300, N200, N200A, N300A, N30A, N40A, N50A, N90 } from '@atlaskit/theme/colors';
// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
import { fontSize } from '@atlaskit/theme/constants';
export var messages = defineMessages({
collapseNode: {
id: 'fabric.editor.collapseNode',
defaultMessage: 'Collapse content',
description: 'Collapse the node'
},
expandDefaultTitle: {
id: 'fabric.editor.expandDefaultTitle',
defaultMessage: 'Click here to expand...',
description: 'Placeholder text for an expand node'
},
expandNode: {
id: 'fabric.editor.expandNode',
defaultMessage: 'Expand content',
description: 'Expand the node'
},
expandPlaceholderText: {
id: 'fabric.editor.expandPlaceholder',
defaultMessage: 'Give this expand a title...',
description: 'Placeholder text for an expand node title input field'
}
});
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, ".concat(B300, ")");
var EXPAND_COLLAPSED_BORDER_COLOR = 'transparent';
var EXPAND_EXPANDED_BORDER_COLOR = "var(--ds-border, ".concat(N40A, ")");
export var ExpandIconWrapper = function ExpandIconWrapper(_ref) {
var children = _ref.children,
expanded = _ref.expanded;
return jsx("div", {
css: function css() {
return expanded ? [expandIconWrapperStyle(), expandIconWrapperExpandedStyle] : expandIconWrapperStyle();
}
}, children);
};
var expandIconWrapperStyle = function expandIconWrapperStyle() {
return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n cursor: pointer;\n display: flex;\n color: ", ";\n border-radius: ", ";\n width: 24px;\n height: 24px;\n\n &:hover {\n background: ", ";\n }\n\n svg {\n transition: transform 0.2s ", ";\n }\n"])), "var(--ds-icon, ".concat(N90, ")"), "var(--ds-border-radius-100, 4px)", "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")"), akEditorSwoopCubicBezier);
};
var expandIconWrapperExpandedStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n svg {\n transform: rotate(90deg);\n }\n"])));
export var expandLayoutWrapperStyle = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n width: ", ";\n height: ", ";\n"])), "var(--ds-space-300, 24px)", "var(--ds-space-300, 24px)");
export var ExpandLayoutWrapperWithRef = /*#__PURE__*/forwardRef(function (props, ref) {
var children = props.children,
rest = _objectWithoutProperties(props, _excluded);
return jsx("div", _extends({
css: expandLayoutWrapperStyle
}, rest, {
ref: ref
}), children);
});
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;
var margin = "".concat(marginTop, " ").concat(marginHorizontal, " ").concat(marginBottom);
return function () {
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n border-width: 1px;\n border-style: solid;\n border-color: ", ";\n border-radius: ", ";\n min-height: 25px;\n background: ", ";\n margin: ", ";\n\n transition: background 0.3s ", ",\n border-color 0.3s ", ";\n padding: ", ";\n\n &:hover {\n // TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n // This is because the default state already uses the same token and, as such, the hover style won't change anything.\n // https://product-fabric.atlassian.net/browse/DSP-4152\n border: 1px solid ", ";\n background: ", ";\n }\n\n td > :not(style):first-child,\n td > style:first-child + * {\n margin-top: 0;\n }\n "])), focused ? EXPAND_FOCUSED_BORDER_COLOR : expanded ? EXPAND_EXPANDED_BORDER_COLOR : EXPAND_COLLAPSED_BORDER_COLOR, BORDER_RADIUS, !expanded ? EXPAND_COLLAPSED_BACKGROUND : EXPAND_SELECTED_BACKGROUND, margin, akEditorSwoopCubicBezier, akEditorSwoopCubicBezier, "var(--ds-space-100, 8px)", "var(--ds-border, ".concat(N50A, ")"), EXPAND_SELECTED_BACKGROUND);
};
};
var contentStyles = function contentStyles(styleProps) {
return function () {
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding-top: ", ";\n padding-right: ", ";\n padding-left: ", ";\n margin-left: ", ";\n display: flow-root;\n\n // The follow rules inside @supports block are added as a part of ED-8893\n // The fix is targeting mobile bridge on iOS 12 or below,\n // We should consider remove this fix when we no longer support iOS 12\n @supports not (display: flow-root) {\n width: 100%;\n box-sizing: border-box;\n }\n\n ", "\n "])), 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(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n outline: none;\n border: none;\n font-size: ", ";\n line-height: ", ";\n font-weight: normal;\n color: ", ";\n background: transparent;\n display: flex;\n flex: 1;\n padding: 0 0 0 ", ";\n width: 100%;\n\n &::placeholder {\n opacity: 1;\n color: ", ";\n }\n"])), relativeFontSizeToBase16(fontSize()), akEditorLineHeight, "var(--ds-text-subtlest, ".concat(N200A, ")"), "var(--ds-space-050, 4px)", "var(--ds-text-subtlest, ".concat(N200, ")"));
};
var titleContainerStyles = function titleContainerStyles() {
return css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n padding: 0;\n display: flex;\n align-items: flex-start;\n background: none;\n border: none;\n font-size: ", ";\n width: 100%;\n color: ", ";\n overflow: hidden;\n cursor: pointer;\n\n &:focus {\n outline: 0;\n }\n"])), relativeFontSizeToBase16(fontSize()), "var(--ds-text-subtle, ".concat(N300A, ")"));
};
export var sharedExpandStyles = {
titleInputStyles: titleInputStyles,
titleContainerStyles: titleContainerStyles,
containerStyles: containerStyles,
contentStyles: contentStyles
};