@atlaskit/editor-core 207.2.0 → 207.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +29 -0
- package/dist/cjs/ui/Appearance/Chromeless.js +27 -11
- package/dist/cjs/ui/Appearance/Comment/Comment.js +25 -5
- package/dist/cjs/ui/Appearance/FullPage/FullPage.js +26 -4
- package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js +2 -2
- package/dist/cjs/ui/ContentStyles/layout.js +2 -2
- package/dist/cjs/ui/ContextPanel/index.js +10 -4
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +29 -234
- package/dist/cjs/ui/EditorContentContainer/styles/ai-panel.js +97 -0
- package/dist/cjs/ui/EditorContentContainer/styles/annotationStyles.js +45 -0
- package/dist/cjs/ui/EditorContentContainer/styles/embedCardStyles.js +34 -0
- package/dist/cjs/ui/EditorContentContainer/styles/layout.js +126 -0
- package/dist/cjs/ui/EditorContentContainer/styles/link.js +32 -0
- package/dist/cjs/ui/EditorContentContainer/styles/rule.js +29 -0
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/Appearance/Chromeless.js +28 -10
- package/dist/es2019/ui/Appearance/Comment/Comment.js +24 -3
- package/dist/es2019/ui/Appearance/FullPage/FullPage.js +24 -2
- package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js +2 -2
- package/dist/es2019/ui/ContentStyles/layout.js +3 -2
- package/dist/es2019/ui/ContextPanel/index.js +11 -5
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +23 -773
- package/dist/es2019/ui/EditorContentContainer/styles/ai-panel.js +213 -0
- package/dist/es2019/ui/EditorContentContainer/styles/annotationStyles.js +47 -0
- package/dist/es2019/ui/EditorContentContainer/styles/embedCardStyles.js +27 -0
- package/dist/es2019/ui/EditorContentContainer/styles/layout.js +517 -0
- package/dist/es2019/ui/EditorContentContainer/styles/link.js +26 -0
- package/dist/es2019/ui/EditorContentContainer/styles/rule.js +22 -0
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/Appearance/Chromeless.js +28 -12
- package/dist/esm/ui/Appearance/Comment/Comment.js +26 -6
- package/dist/esm/ui/Appearance/FullPage/FullPage.js +27 -5
- package/dist/esm/ui/Appearance/FullPage/StyledComponents.js +2 -2
- package/dist/esm/ui/ContentStyles/layout.js +2 -2
- package/dist/esm/ui/ContextPanel/index.js +11 -5
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +31 -237
- package/dist/esm/ui/EditorContentContainer/styles/ai-panel.js +91 -0
- package/dist/esm/ui/EditorContentContainer/styles/annotationStyles.js +37 -0
- package/dist/esm/ui/EditorContentContainer/styles/embedCardStyles.js +27 -0
- package/dist/esm/ui/EditorContentContainer/styles/layout.js +120 -0
- package/dist/esm/ui/EditorContentContainer/styles/link.js +26 -0
- package/dist/esm/ui/EditorContentContainer/styles/rule.js +21 -0
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/Appearance/Chromeless.d.ts +0 -4
- package/dist/types/ui/Appearance/FullPage/FullPage.d.ts +1 -1
- package/dist/types/ui/Appearance/FullPage/getEditorViewModeSync.d.ts +1 -1
- package/dist/types/ui/EditorContentContainer/EditorContentContainer.d.ts +0 -11
- package/dist/types/ui/EditorContentContainer/styles/ai-panel.d.ts +2 -0
- package/dist/types/ui/EditorContentContainer/styles/annotationStyles.d.ts +1 -0
- package/dist/types/ui/EditorContentContainer/styles/embedCardStyles.d.ts +1 -0
- package/dist/types/ui/EditorContentContainer/styles/layout.d.ts +2 -0
- package/dist/types/ui/EditorContentContainer/styles/link.d.ts +2 -0
- package/dist/types/ui/EditorContentContainer/styles/rule.d.ts +1 -0
- package/dist/types-ts4.5/ui/Appearance/Chromeless.d.ts +0 -4
- package/dist/types-ts4.5/ui/Appearance/FullPage/FullPage.d.ts +1 -1
- package/dist/types-ts4.5/ui/Appearance/FullPage/getEditorViewModeSync.d.ts +1 -1
- package/dist/types-ts4.5/ui/EditorContentContainer/EditorContentContainer.d.ts +0 -11
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/ai-panel.d.ts +2 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/annotationStyles.d.ts +1 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/embedCardStyles.d.ts +1 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/layout.d.ts +2 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/link.d.ts +2 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/rule.d.ts +1 -0
- package/package.json +2 -2
|
@@ -4,8 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.placeholderStyles = exports.
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
7
|
+
exports.placeholderStyles = exports.fixBlockControlStylesSSR = exports.default = void 0;
|
|
9
8
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
10
9
|
var _react = _interopRequireDefault(require("react"));
|
|
11
10
|
var _react2 = require("@emotion/react");
|
|
@@ -20,9 +19,7 @@ var _styles2 = require("@atlaskit/editor-plugins/block-type/styles");
|
|
|
20
19
|
var _styles3 = require("@atlaskit/editor-plugins/find-replace/styles");
|
|
21
20
|
var _styles4 = require("@atlaskit/editor-plugins/paste-options-toolbar/styles");
|
|
22
21
|
var _styles5 = require("@atlaskit/editor-plugins/placeholder-text/styles");
|
|
23
|
-
var _types = require("@atlaskit/editor-plugins/table/types");
|
|
24
22
|
var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
|
|
25
|
-
var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
|
|
26
23
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
27
24
|
var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
|
|
28
25
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
@@ -37,8 +34,14 @@ var _media = require("../ContentStyles/media");
|
|
|
37
34
|
var _panel2 = require("../ContentStyles/panel");
|
|
38
35
|
var _status = require("../ContentStyles/status");
|
|
39
36
|
var _tasksAndDecisions = require("../ContentStyles/tasks-and-decisions");
|
|
37
|
+
var _aiPanel = require("./styles/ai-panel");
|
|
38
|
+
var _annotationStyles = require("./styles/annotationStyles");
|
|
40
39
|
var _backgroundColorStyles = require("./styles/backgroundColorStyles");
|
|
41
|
-
var
|
|
40
|
+
var _embedCardStyles = require("./styles/embedCardStyles");
|
|
41
|
+
var _layout = require("./styles/layout");
|
|
42
|
+
var _link = require("./styles/link");
|
|
43
|
+
var _rule = require("./styles/rule");
|
|
44
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
|
|
42
45
|
/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
|
|
43
46
|
/* eslint-disable react-hooks/rules-of-hooks */
|
|
44
47
|
/* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression -- Requires manual remediation over time due to use of unsafe nested mixins */
|
|
@@ -47,13 +50,6 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
|
|
|
47
50
|
* @jsx jsx
|
|
48
51
|
*/
|
|
49
52
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
50
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
51
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
52
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
53
|
-
var linkStyles = exports.linkStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t}\n"])), (0, _styles.linkSharedStyle)());
|
|
54
|
-
var ruleStyles = function ruleStyles() {
|
|
55
|
-
return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", ";\n\n\t\thr {\n\t\t\tcursor: pointer;\n\t\t\tpadding: ", " 0;\n\t\t\tmargin: ", " 0;\n\t\t\tbackground-clip: content-box;\n\n\t\t\t&.", " {\n\t\t\t\toutline: none;\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), (0, _styles.ruleSharedStyles)(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(_editorSharedStyles.akEditorSelectedBorderColor, ")"));
|
|
56
|
-
};
|
|
57
53
|
var vanillaMentionsStyles = (0, _react2.css)({
|
|
58
54
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
59
55
|
'.editor-mention-primitive': {
|
|
@@ -98,11 +94,11 @@ var vanillaMentionsStyles = (0, _react2.css)({
|
|
|
98
94
|
}
|
|
99
95
|
}
|
|
100
96
|
});
|
|
101
|
-
var vanillaSelectionStyles = (0, _react2.css)(
|
|
102
|
-
var mentionsStyles = (0, _react2.css)(
|
|
103
|
-
var listsStyles = (0, _react2.css)(
|
|
104
|
-
var reactEmojiStyles = (0, _react2.css)(
|
|
105
|
-
var emojiStyles = (0, _react2.css)(
|
|
97
|
+
var vanillaSelectionStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.danger {\n\t\t.editor-mention-primitive {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t}\n\n\t.", " > .editor-mention-primitive,\n\t.", " > .editor-mention-primitive.mention-self,\n\t.", " > .editor-mention-primitive.mention-restricted {\n\t\t", "\n\t\t/* need to specify dark text colour because personal mentions\n\t\t (in dark blue) have white text by default */\n\t\tcolor: ", "\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)");
|
|
98
|
+
var mentionsStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\t&.", " [data-mention-id] > span {\n\t\t\t", "\n\n\t\t\t/* need to specify dark text colour because personal mentions\n\t\t (in dark blue) have white text by default */\n\t color: ", ";\n\t\t}\n\t}\n\n\t.danger {\n\t\t.", ".", "\n\t\t\t> span\n\t\t\t> span\n\t\t\t> span {\n\t\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\t\tbackground-color: ", ";\n\t\t}\n\t\t.", " > span > span > span {\n\t\t\tbackground-color: ", ";\n\t\t\tcolor: ", ";\n\t\t}\n\t}\n"])), _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow, _editorSharedStyles.SelectionStyle.Background]), "var(--ds-text-subtle, #44546F)", _mention.MentionSharedCssClassName.MENTION_CONTAINER, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackgroundWithOpacity, ")"), _mention.MentionSharedCssClassName.MENTION_CONTAINER, "var(--ds-background-neutral, #091E420F)", "var(--ds-text-subtle, #44546F)");
|
|
99
|
+
var listsStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\tli {\n\t\t\tposition: relative;\n\n\t\t\t> p:not(:first-child) {\n\t\t\t\tmargin: ", " 0 0 0;\n\t\t\t}\n\n\t\t\t// In SSR the above rule will apply to all p tags because first-child would be a style tag.\n\t\t\t// The following rule resets the first p tag back to its original margin\n\t\t\t// defined in packages/editor/editor-common/src/styles/shared/paragraph.ts\n\t\t\t> style:first-child + p {\n\t\t\t\tmargin-top: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:not([data-node-type='decisionList']) > li,\n\t// This prevents https://product-fabric.atlassian.net/browse/ED-20924\n\t&:not(.", ") > li {\n\t\t\t", "\n\t\t}\n\t}\n"])), "var(--ds-space-050, 4px)", _editorSharedStyles.blockNodesVerticalMargin, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _browser.browser.safari ? _styles.codeBlockInListSafariFix : '');
|
|
100
|
+
var reactEmojiStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\tdisplay: inline-block;\n\n\t\t.", " {\n\t\t\tcursor: pointer;\n\n\t\t\t&.", " > span {\n\t\t\t\t/** needed for selection style to cover custom emoji image properly */\n\t\t\t\tdisplay: flex;\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_NODE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
|
|
101
|
+
var emojiStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-prosemirror-node-view-type='vanilla'] {\n\t\t.", " {\n\t\t\tdisplay: inline-block;\n\t\t}\n\n\t\t.", ", .", " {\n\t\t\tbackground: no-repeat transparent;\n\t\t\tdisplay: inline-block;\n\t\t\theight: ", "px;\n\t\t\tmax-height: ", "px;\n\t\t\tcursor: pointer;\n\t\t\tvertical-align: middle;\n\t\t\tuser-select: all;\n\t\t}\n\n\t\t&.", " {\n\t\t\t.", ", .", " {\n\t\t\t\tborder-radius: 2px;\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _emoji.EmojiSharedCssClassName.EMOJI_CONTAINER, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, _emoji.defaultEmojiHeight, _emoji.defaultEmojiHeight, _editorSharedStyles.akEditorSelectedNodeClassName, _emoji.EmojiSharedCssClassName.EMOJI_SPRITE, _emoji.EmojiSharedCssClassName.EMOJI_IMAGE, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket, _editorSharedStyles.SelectionStyle.BoxShadow]));
|
|
106
102
|
|
|
107
103
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
108
104
|
var placeholderStyles = exports.placeholderStyles = (0, _react2.css)({
|
|
@@ -137,228 +133,27 @@ var placeholderWrapStyles = (0, _react2.css)({
|
|
|
137
133
|
whiteSpace: 'nowrap'
|
|
138
134
|
}
|
|
139
135
|
});
|
|
140
|
-
var firstBlockNodeStyles = (0, _react2.css)(
|
|
141
|
-
var firstBlockNodeStylesNew = (0, _react2.css)(
|
|
136
|
+
var firstBlockNodeStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
|
|
137
|
+
var firstBlockNodeStylesNew = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> .", ",\n\t\t\t> div[data-task-list-local-id],\n\t\t> div[data-layout-section],\n\t\t> .", " {\n\t\t\t&:first-child {\n\t\t\t\tmargin-top: 0;\n\t\t\t}\n\t\t}\n\n\t\t> hr:first-child,\n\t\t> .ProseMirror-widget:first-child + hr {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n"])), _panel.PanelSharedCssClassName.prefix, _styles.CodeBlockSharedCssClassName.CODEBLOCK_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.expandClassNames.prefix);
|
|
142
138
|
var fixBlockControlStylesSSR = exports.fixBlockControlStylesSSR = function fixBlockControlStylesSSR() {
|
|
143
139
|
if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_6')) {
|
|
144
140
|
return firstBlockNodeStylesNew;
|
|
145
141
|
}
|
|
146
142
|
return firstBlockNodeStyles;
|
|
147
143
|
};
|
|
148
|
-
var columnLayoutSharedStyle = (0, _react2.css)({
|
|
149
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
150
|
-
'[data-layout-section]': (0, _defineProperty2.default)({
|
|
151
|
-
position: 'relative',
|
|
152
|
-
display: 'flex',
|
|
153
|
-
flexDirection: 'row',
|
|
154
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
155
|
-
'& > *': {
|
|
156
|
-
flex: 1,
|
|
157
|
-
minWidth: 0
|
|
158
|
-
},
|
|
159
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
160
|
-
'& > .unsupportedBlockView-content-wrap': {
|
|
161
|
-
minWidth: 'initial'
|
|
162
|
-
}
|
|
163
|
-
}, "@media screen and (max-width: ".concat(_editorSharedStyles.gridMediumMaxWidth, "px)"), {
|
|
164
|
-
flexDirection: 'column'
|
|
165
|
-
})
|
|
166
|
-
});
|
|
167
|
-
var columnLayoutResponsiveSharedStyle = (0, _react2.css)({
|
|
168
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
169
|
-
'[data-layout-section]': {
|
|
170
|
-
display: 'flex',
|
|
171
|
-
flexDirection: 'row',
|
|
172
|
-
gap: "var(--ds-space-100, 8px)",
|
|
173
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
174
|
-
'& > *': {
|
|
175
|
-
flex: 1,
|
|
176
|
-
minWidth: 0
|
|
177
|
-
},
|
|
178
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
179
|
-
'& > .unsupportedBlockView-content-wrap': {
|
|
180
|
-
minWidth: 'initial'
|
|
181
|
-
}
|
|
182
|
-
},
|
|
183
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
184
|
-
'.layout-section-container': {
|
|
185
|
-
containerType: 'inline-size',
|
|
186
|
-
containerName: 'layout-area'
|
|
187
|
-
}
|
|
188
|
-
});
|
|
189
|
-
|
|
190
|
-
/**
|
|
191
|
-
* layout styles
|
|
192
|
-
* was imported from packages/editor/editor-core/src/ui/ContentStyles/layout.ts
|
|
193
|
-
* @example
|
|
194
|
-
* @returns {string}
|
|
195
|
-
*/
|
|
196
|
-
var firstNodeWithNotMarginTop = function firstNodeWithNotMarginTop() {
|
|
197
|
-
return (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
198
|
-
(0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :nth-child(1 of :not(style, .ProseMirror-gapcursor, .ProseMirror-widget, span)) {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"]))) : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
199
|
-
(0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> :not(style):first-child,\n\t\t\t\t> style:first-child + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + *,\n\t\t\t\t> style:first-child + .ProseMirror-gapcursor + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\n\t\t\t\t> .ProseMirror-gapcursor:first-child + span + * {\n\t\t\t\t\tmargin-top: 0;\n\t\t\t\t}\n\t\t\t"])));
|
|
200
|
-
};
|
|
201
|
-
var layoutColumnStyles = function layoutColumnStyles() {
|
|
202
|
-
return (0, _experiments.editorExperiment)('advanced_layouts', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
203
|
-
(0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t> [data-layout-column] {\n\t\t\t\t\tmargin: 0 ", "px;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:first-of-type {\n\t\t\t\t\tmargin-left: 0;\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column]:last-of-type {\n\t\t\t\t\tmargin-right: 0;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t> [data-layout-column].", ":not(.danger) {\n\t\t\t\t\t", ";\n\t\t\t\t\t/* layout column selection shorter after layout border has been removed */\n\t\t\t\t\t::before {\n\t\t\t\t\t\twidth: calc(100% - 8px);\n\t\t\t\t\t\tleft: 4px;\n\t\t\t\t\t\tborder-radius: ", ";\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN / 2, _editorSharedStyles.gridMediumMaxWidth, _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), "var(--ds-border-radius, 3px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
204
|
-
(0, _react2.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\tmargin-left: ", "px;\n\t\t\t\t}\n\n\t\t\t\t@media screen and (max-width: ", "px) {\n\t\t\t\t\t[data-layout-column] + [data-layout-column] {\n\t\t\t\t\t\tmargin-left: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), _styles.LAYOUT_SECTION_MARGIN, _editorSharedStyles.gridMediumMaxWidth);
|
|
205
|
-
};
|
|
206
|
-
var layoutSectionStyles = function layoutSectionStyles() {
|
|
207
|
-
return (0, _experiments.editorExperiment)('advanced_layouts', true) ? // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
208
|
-
(0, _react2.css)(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t", ";\n\t\t\t\t.layout-section-container [data-layout-section] {\n\t\t\t\t\t> .ProseMirror-widget {\n\t\t\t\t\t\tflex: none;\n\t\t\t\t\t\tdisplay: contents !important;\n\n\t\t\t\t\t\t&[data-blocks-drag-handle-container] div {\n\t\t\t\t\t\t\tdisplay: contents !important;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t&[data-blocks-drop-target-container] {\n\t\t\t\t\t\t\tdisplay: block !important;\n\t\t\t\t\t\t\tmargin: ", ";\n\n\t\t\t\t\t\t\t[data-drop-target-for-element] {\n\t\t\t\t\t\t\t\tposition: absolute;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\t& + [data-layout-column] {\n\t\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\n\t\t\t\t\t> [data-layout-column] {\n\t\t\t\t\t\tmargin: 0;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"])), columnLayoutResponsiveSharedStyle, "var(--ds-space-negative-050, -4px)") : // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
209
|
-
(0, _react2.css)(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t", "\n\t\t\t"])), columnLayoutSharedStyle);
|
|
210
|
-
};
|
|
211
|
-
|
|
212
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
213
|
-
var layoutBorderBaseStyles = (0, _react2.css)(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n\t/* TODO: Remove the border styles below once design tokens have been enabled and fallbacks are no longer triggered.\n\tThis is because the default state already uses the same token and, as such, the hover style won't change anything.\n\thttps://product-fabric.atlassian.net/browse/DSP-4441 */\n\t/* Shows the border when cursor is inside a layout */\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: ", "px solid ", ";\n\t}\n\n\t&.selected.danger [data-layout-column] {\n\t\tbackground-color: ", ";\n\t\tborder-color: ", ";\n\t}\n\n\t&.", ":not(.danger) {\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\t::after {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Border, _editorSharedStyles.SelectionStyle.Blanket]));
|
|
214
|
-
|
|
215
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
216
|
-
var layoutBorderViewStyles = (0, _react2.css)(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected [data-layout-column],\n\t&:hover [data-layout-column] {\n\t\tborder: 0;\n\t}\n"])));
|
|
217
|
-
|
|
218
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
219
|
-
var columnSeparatorBaseStyles = (0, _react2.css)(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-left: ", "px solid ", ";\n\t\tposition: absolute;\n\t\theight: calc(100% - 24px);\n\t\tmargin-left: -25px;\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
|
|
220
|
-
|
|
221
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
222
|
-
var columnSeparatorViewStyles = (0, _react2.css)(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tborder-left: 0;\n\t}\n"])));
|
|
223
|
-
|
|
224
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
225
|
-
var rowSeparatorBaseStyles = (0, _react2.css)(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid ", ";\n\t\tposition: absolute;\n\t\twidth: calc(100% - 32px);\n\t\tmargin-top: -13px;\n\n\t\t/* clear styles for column separator */\n\t\tborder-left: unset;\n\t\tmargin-left: unset;\n\t\theight: unset;\n\t}\n"])), _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
|
|
226
|
-
|
|
227
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
228
|
-
var rowSeparatorViewStyles = (0, _react2.css)(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tborder-top: 0;\n\t}\n"])));
|
|
229
|
-
|
|
230
|
-
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
231
|
-
var layoutWithSeparatorBorderResponsiveBaseStyles = function layoutWithSeparatorBorderResponsiveBaseStyles(breakpoint
|
|
232
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
233
|
-
) {
|
|
234
|
-
return (0, _react2.css)(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected,\n\t&:hover,\n\t&.selected.danger,\n\t&.", ":not(.danger) {\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t@container editor-area (max-width:", "px) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, breakpoint, rowSeparatorBaseStyles);
|
|
235
|
-
};
|
|
236
|
-
|
|
237
|
-
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
238
|
-
var layoutWithSeparatorBorderResponsiveViewStyles = function layoutWithSeparatorBorderResponsiveViewStyles(breakpoint
|
|
239
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
240
|
-
) {
|
|
241
|
-
return (0, _react2.css)(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected,\n\t&:hover,\n\t&.selected.danger,\n\t&.", ":not(.danger) {\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t@container editor-area (max-width:", "px) {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, breakpoint, rowSeparatorViewStyles);
|
|
242
|
-
};
|
|
243
|
-
|
|
244
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
245
|
-
var layoutWithSeparatorBorderBaseStyles = (0, _react2.css)(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected [data-layout-column]:not(:first-of-type),\n\t[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),\n\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t", "\n\t}\n\n\t&.selected.danger [data-layout-section] {\n\t\tbackground-color: ", ";\n\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder-radius: 4px;\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&.", ":not(.danger) [data-layout-section] {\n\t\tbox-shadow: 0 0 0 ", "px ", ";\n\t\tborder-radius: 4px;\n\t\tbackground-color: ", ";\n\t\t[data-layout-column] {\n\t\t\t", "\n\t\t\tborder: 0px;\n\t\t\t::before {\n\t\t\t\tbackground-color: transparent;\n\t\t\t}\n\t\t}\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n"])), columnSeparatorBaseStyles, "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, columnSeparatorBaseStyles, _editorSharedStyles.akEditorSelectedNodeClassName, _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), columnSeparatorBaseStyles);
|
|
246
|
-
|
|
247
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
248
|
-
var layoutWithSeparatorBorderViewStyles = (0, _react2.css)(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected [data-layout-column]:not(:first-of-type),\n\t[data-empty-layout='true'] [data-layout-column]:not(:first-of-type),\n\t&:hover [data-layout-column]:not(:first-of-type) {\n\t\t", "\n\t}\n\n\t&.selected.danger [data-layout-section] {\n\t\tbox-shadow: 0 0 0 0 ", ";\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n\n\t&.", ":not(.danger) [data-layout-section] {\n\t\tbox-shadow: 0 0 0 0 ", ";\n\t\t[data-layout-column]:not(:first-of-type) {\n\t\t\t", "\n\t\t}\n\t}\n"])), columnSeparatorViewStyles, _editorSharedStyles.akEditorDeleteBorder, columnSeparatorViewStyles, _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, #0C66E4)", columnSeparatorViewStyles);
|
|
249
|
-
|
|
250
|
-
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
251
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
252
|
-
var layoutResponsiveBaseStyles = (0, _react2.css)(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2.default)(["\n\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t/* not resized layout in full-width editor */\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t[data-layout-section] {\n\t\t\t\t@container editor-area (max-width:724px) {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* not resized layout in fixed-width editor */\n\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t[data-layout-section] {\n\t\t\t\t@container editor-area (max-width:788px) {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* resized layout in full/fixed-width editor */\n\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t.layoutSectionView-content-wrap {\n\t\t\t[data-layout-section] {\n\t\t\t\t@container editor-area (max-width:820px) {\n\t\t\t\t\tflex-direction: column;\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\t}\n"])), layoutWithSeparatorBorderResponsiveBaseStyles(724), layoutWithSeparatorBorderResponsiveBaseStyles(788), layoutWithSeparatorBorderResponsiveBaseStyles(820));
|
|
253
|
-
|
|
254
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
255
|
-
var layoutResponsiveViewStyles = (0, _react2.css)(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2.default)(["\n\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t/* not resized layout in full-width editor */\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* not resized layout in fixed-width editor */\n\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t> .layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t/* resized layout in full/fixed-width editor */\n\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n"])), layoutWithSeparatorBorderResponsiveViewStyles(724), layoutWithSeparatorBorderResponsiveViewStyles(788), layoutWithSeparatorBorderResponsiveViewStyles(820));
|
|
256
|
-
|
|
257
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
258
|
-
var layoutBaseStyles = function layoutBaseStyles() {
|
|
259
|
-
return (0, _react2.css)(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t/* Ignored via go/ees007\n\t\t\tTODO: Migrate away from gridSize\n\t\t\tRecommendation: Replace directly with 7px */\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: pointer;\n\n\t\t\t/* Inner cursor located 26px from left */\n\t\t\t[data-layout-column] {\n\t\t\t\tflex: 1;\n\t\t\t\tposition: relative;\n\n\t\t\t\tmin-width: 0;\n\t\t\t\t/* disable 4 borders when in view mode and advanced layouts is on */\n\t\t\t\tborder: ", "px\n\t\t\t\t\tsolid ", ";\n\t\t\t\tborder-radius: 4px;\n\t\t\t\tpadding: ", "px\n\t\t\t\t\t", "px;\n\t\t\t\tbox-sizing: border-box;\n\n\t\t\t\t> div {\n\t\t\t\t\t", "\n\n\t\t\t\t\t> .embedCardView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .mediaSingleView-content-wrap:first-of-type .rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-child\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor.-right\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> .ProseMirror-gapcursor.-right:first-of-type\n\t\t\t\t\t\t+ .embedCardView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t> .ProseMirror-gapcursor:first-child\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item,\n\t\t\t\t\t> style:first-child\n\t\t\t\t\t\t+ .ProseMirror-gapcursor\n\t\t\t\t\t\t+ span\n\t\t\t\t\t\t+ .mediaSingleView-content-wrap\n\t\t\t\t\t\t.rich-media-item {\n\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t}\n\n\t\t\t\t\t/* Prevent first DecisionWrapper's margin-top: 8px from shifting decisions down\n\t\t\t and shrinking layout's node selectable area (leniency margin) */\n\t\t\t\t\t> [data-node-type='decisionList'] {\n\t\t\t\t\t\tli:first-of-type [data-decision-wrapper] {\n\t\t\t\t\t\t\tmargin-top: 0;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t/* Make the 'content' fill the entire height of the layout column to allow click\n\t\t handler of layout section nodeview to target only data-layout-column */\n\t\t\t\t[data-layout-content] {\n\t\t\t\t\theight: 100%;\n\t\t\t\t\tcursor: text;\n\t\t\t\t\t.mediaGroupView-content-wrap {\n\t\t\t\t\t\tclear: both;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\n\t\t\t", "\n\t\t}\n\n\t\t/* styles to support borders for layout */\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n\n\t/* hide separator when element is dragging on top of a layout column */\n\t[data-blocks-drop-target-container] ~ [data-layout-column] > [data-layout-content]::before {\n\t\tdisplay: none;\n\t}\n\n\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t[data-layout-section] {\n\t\t\t.", " {\n\t\t\t\tmargin: 0 ", "px;\n\t\t\t}\n\t\t}\n\t}\n\n\t", "\n"])), layoutSectionStyles(), "var(--ds-space-100, 8px)", _editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? 8 : 0), _editorSharedStyles.akEditorSwoopCubicBezier, (0, _experiments.editorExperiment)('advanced_layouts', true) ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderBaseStyles : layoutBorderBaseStyles, (0, _experiments.editorExperiment)('advanced_layouts', true) && layoutResponsiveBaseStyles, _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode, (0, _experiments.editorExperiment)('advanced_layouts', false) && (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", _editorSharedStyles.akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
|
|
260
|
-
};
|
|
261
|
-
|
|
262
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
263
|
-
var layoutViewStyles = (0, _react2.css)(_templateObject29 || (_templateObject29 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t[data-layout-section] {\n\t\t\tcursor: default;\n\t\t\t[data-layout-column] {\n\t\t\t\tborder: 0;\n\t\t\t}\n\t\t}\n\t\t[data-layout-section],\n\t\t.layoutSectionView-content-wrap {\n\t\t\t", "\n\t\t}\n\t}\n\n\t", "\n"])), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderViewStyles : layoutBorderViewStyles, (0, _experiments.editorExperiment)('advanced_layouts', true) && layoutResponsiveViewStyles);
|
|
264
|
-
|
|
265
|
-
/**
|
|
266
|
-
* aiPanelStyles
|
|
267
|
-
* was imported from packages/editor/editor-core/src/ui/ContentStyles/ai-panels.ts
|
|
268
|
-
*/
|
|
269
|
-
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
270
|
-
var rotationAnimation = (0, _react2.keyframes)({
|
|
271
|
-
'0%': _objectSpread({
|
|
272
|
-
'--panel-gradient-angle': '0deg'
|
|
273
|
-
}, isFirefox ? {
|
|
274
|
-
backgroundPosition: '100%'
|
|
275
|
-
} : {}),
|
|
276
|
-
'100%': _objectSpread({
|
|
277
|
-
'--panel-gradient-angle': '360deg'
|
|
278
|
-
}, isFirefox ? {
|
|
279
|
-
backgroundPosition: '-100%'
|
|
280
|
-
} : {})
|
|
281
|
-
});
|
|
282
|
-
var aiPrismColor = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, 'prism.border.step.1', {
|
|
283
|
-
light: '#0065FF',
|
|
284
|
-
dark: '#0065FF80'
|
|
285
|
-
}), 'prism.border.step.2', {
|
|
286
|
-
light: '#0469FF',
|
|
287
|
-
dark: '#0469FF80'
|
|
288
|
-
}), 'prism.border.step.3', {
|
|
289
|
-
light: '#BF63F3',
|
|
290
|
-
dark: '#BF63F380'
|
|
291
|
-
}), 'prism.border.step.4', {
|
|
292
|
-
light: '#FFA900',
|
|
293
|
-
dark: '#FFA90080'
|
|
294
|
-
});
|
|
295
|
-
var prismBorderAnimationStyles = (0, _react2.css)({
|
|
296
|
-
'&::before, &::after': _objectSpread(_objectSpread({
|
|
297
|
-
animationName: rotationAnimation,
|
|
298
|
-
animationDuration: '2s',
|
|
299
|
-
animationTimingFunction: 'linear',
|
|
300
|
-
animationIterationCount: 'infinite'
|
|
301
|
-
}, isFirefox ? {
|
|
302
|
-
animationDirection: 'normal',
|
|
303
|
-
animationDuration: '1s'
|
|
304
|
-
} : {}), {}, {
|
|
305
|
-
'@media (prefers-reduced-motion)': {
|
|
306
|
-
animation: 'none'
|
|
307
|
-
}
|
|
308
|
-
})
|
|
309
|
-
});
|
|
310
|
-
var prismBorderBaseStyles = (0, _react2.css)(_objectSpread({
|
|
311
|
-
content: "''",
|
|
312
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
313
|
-
position: 'absolute',
|
|
314
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
315
|
-
zIndex: -1,
|
|
316
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
317
|
-
width: "calc(100% + 2px)",
|
|
318
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
319
|
-
height: "calc(100% + 2px)",
|
|
320
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
321
|
-
top: "-1px",
|
|
322
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
323
|
-
left: "-1px",
|
|
324
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
325
|
-
borderRadius: "calc(".concat("var(--ds-border-radius-100, 3px)", " + 1px)"),
|
|
326
|
-
transform: 'translate3d(0, 0, 0)'
|
|
327
|
-
}, isFirefox ? {
|
|
328
|
-
background: "linear-gradient(90deg,\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1']['light'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['light'], " 12%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['light'], " 24%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4']['light'], " 48%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['light'], " 64%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['light'], " 80%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1']['light'], " 100%\n\t\t\t\t\t\t\t)"),
|
|
329
|
-
backgroundSize: '200%'
|
|
330
|
-
} : {
|
|
331
|
-
background: "conic-gradient(\n\t\t\t\t\t\t\t\tfrom var(--panel-gradient-angle, 270deg),\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1']['light'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['light'], " 20%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['light'], " 50%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4']['light'], " 56%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1']['light'], " 100%\n\t\t\t\t\t\t\t)")
|
|
332
|
-
}));
|
|
333
|
-
var prismBorderDarkStyles = (0, _react2.css)(_objectSpread({}, isFirefox ? {
|
|
334
|
-
background: "linear-gradient(90deg,\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1']['dark'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['dark'], " 12%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['dark'], " 24%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4']['dark'], " 48%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['dark'], " 64%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['dark'], " 80%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1']['dark'], " 100%\n\t\t\t\t\t\t\t)"),
|
|
335
|
-
backgroundSize: '200%'
|
|
336
|
-
} : {
|
|
337
|
-
background: "conic-gradient(\n\t\t\t\t\t\t\t\tfrom var(--panel-gradient-angle, 270deg),\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1']['dark'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['dark'], " 20%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['dark'], " 50%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4']['dark'], " 56%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1']['dark'], " 100%\n\t\t\t\t\t\t\t)")
|
|
338
|
-
}));
|
|
339
|
-
var prismBorderHoverStyles = (0, _react2.css)({
|
|
340
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
341
|
-
background: "var(--ds-border-input, #8590A2)"
|
|
342
|
-
});
|
|
343
|
-
|
|
344
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
|
|
345
|
-
var aiPanelBaseStyles = (0, _react2.css)(_templateObject30 || (_templateObject30 = (0, _taggedTemplateLiteral2.default)(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value: 270deg;\n\t\tinherits: false;\n\t}\n\n\tdiv[extensionType='com.atlassian.ai-blocks'] {\n\t\t/* This hides the label for the extension */\n\t\t.extension-label {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t/* This styles the ai panel correctly when its just sitting on the page and there\n\t\tis no user interaction */\n\t\t.extension-container {\n\t\t\tposition: relative;\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\tbackground-color: ", " !important;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t&.with-hover-border {\n\t\t\t\t&::before,\n\t\t\t\t&::after {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t\t& .with-margin-styles {\n\t\t\t\tbackground-color: ", " !important;\n\t\t\t\tborder-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* This styles the ai panel correctly when its streaming */\n\tdiv[extensionType='com.atlassian.ai-blocks']:has(.streaming) {\n\t\t.extension-container {\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\t", "\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t/* This styles the ai panel correctly when a user is hovering over the delete button in the floating panel */\n\tdiv[extensionType='com.atlassian.ai-blocks'].danger {\n\t\t.extension-container {\n\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t}\n\t}\n\n\t/* This removes the margin from the action list when inside an ai panel */\n\tdiv[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {\n\t\tdiv[data-node-type='actionList'] {\n\t\t\tmargin: 0 !important;\n\t\t}\n\t}\n"])), "var(--ds-surface, #FFFFFF)", prismBorderBaseStyles, prismBorderHoverStyles, "var(--ds-surface, #FFFFFF)", "var(--ds-border-radius-100, 3px)", prismBorderAnimationStyles, prismBorderBaseStyles, "var(--ds-border-danger, #E2483D)");
|
|
346
|
-
|
|
347
|
-
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
|
|
348
|
-
var aiPanelDarkStyles = (0, _react2.css)(_templateObject31 || (_templateObject31 = (0, _taggedTemplateLiteral2.default)(["\n\tdiv[extensionType='com.atlassian.ai-blocks'] {\n\t\t.extension-container {\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t/* This styles the ai panel correctly when its streaming */\n\tdiv[extensionType='com.atlassian.ai-blocks']:has(.streaming) {\n\t\t.extension-container {\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), prismBorderDarkStyles, prismBorderDarkStyles);
|
|
349
144
|
|
|
350
145
|
// The breakpoint for small devices is 1266px, copied from getBreakpoint in platform/packages/editor/editor-common/src/ui/WidthProvider/index.tsx
|
|
351
146
|
var akEditorBreakpointForSmallDevice = "1266px";
|
|
352
147
|
|
|
353
148
|
// jest warning: JSDOM version (22) doesn't support the new @container CSS rule
|
|
354
149
|
var contentStyles = function contentStyles() {
|
|
355
|
-
return (0, _react2.css)(
|
|
150
|
+
return (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: var(--ak-editor-base-font-size);\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\n\t\t", ";\n\t}\n\n\t", "\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\n\t", "\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n ", ";\n\n\t", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n // Switch between the two icons based on the visual refresh feature gate\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n\t", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t// For FullPage only when inside a table\n\t// Related code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\t// In the \"editorContentAreaContainerStyle\" function\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n\t is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('editor_request_to_edit_task') ? null : (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror[contenteditable='false'] .taskItemView-content-wrap {\n\t\t\t\t\tpointer-events: none;\n\t\t\t\t\topacity: 0.7;\n\t\t\t\t}\n\t\t\t"]))), (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", _styles5.placeholderTextStyles, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, _backgroundColorStyles.backgroundColorStyles, listsStyles, _rule.ruleStyles, (0, _media.mediaStyles)(), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
356
151
|
exposure: false
|
|
357
152
|
}) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
358
153
|
exposure: false
|
|
359
154
|
}) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
360
155
|
exposure: false
|
|
361
|
-
}) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles,
|
|
156
|
+
}) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
362
157
|
exposure: false
|
|
363
158
|
}) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
364
159
|
exposure: false
|
|
@@ -366,7 +161,7 @@ var contentStyles = function contentStyles() {
|
|
|
366
161
|
exposure: false
|
|
367
162
|
}) && (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithVisualRefresh, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
368
163
|
exposure: false
|
|
369
|
-
}) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null,
|
|
164
|
+
}) && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _tasksAndDecisions.vanillaTaskDecisionIconWithoutVisualRefresh, _status.statusStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? (0, _status.vanillaStatusStyles)() : null, _annotationStyles.annotationStyles, (0, _styles.smartCardStyles)(), (0, _platformFeatureFlags.fg)('platform-linking-visual-refresh-v1') ? (0, _styles.getSmartCardSharedStyles)() : _styles.smartCardSharedStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true) ? _date.dateVanillaStyles : null, _date.dateStyles, _embedCardStyles.embedCardStyles, _styles.unsupportedStyles, _styles.resizerStyles, (0, _styles.pragmaticResizerStyles)(), fixBlockControlStylesSSR(), _styles.MediaSharedClassNames.FLOATING_TOOLBAR_COMPONENT, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _react2.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.hyperlink-open-link {\n\t\t\t\t\tmin-width: 24px;\n\t\t\t\t\tsvg {\n\t\t\t\t\t\tmax-width: 18px;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t"]))) : null);
|
|
370
165
|
};
|
|
371
166
|
var CommentEditorMargin = 14;
|
|
372
167
|
|
|
@@ -416,18 +211,8 @@ var listLayoutShiftFix = (0, _react2.css)({
|
|
|
416
211
|
* EditorContentStyles is a wrapper component that applies styles to its children
|
|
417
212
|
* based on the provided feature flags, view mode, and other props.
|
|
418
213
|
* It uses Emotion for styling and supports scrollable content.
|
|
419
|
-
* The component is memoized to optimize performance.
|
|
420
214
|
*
|
|
421
215
|
* This will be used in near future to replace the current editor content styles from index.tsx
|
|
422
|
-
*
|
|
423
|
-
* @param {EditorContentContainerProps} props - The props for the component.
|
|
424
|
-
* @param {string} props.className - Additional class name for the component.
|
|
425
|
-
* @param {React.ReactNode} props.children - The content to be rendered inside the component.
|
|
426
|
-
* @param {FeatureFlags} props.featureFlags - Feature flags to control the styles.
|
|
427
|
-
* @param {'view' | 'edit'} props.viewMode - The view mode of the editor.
|
|
428
|
-
* @param {boolean} props.isScrollable - Whether the content is scrollable.
|
|
429
|
-
* @param {'full-page' | 'full-width' | 'comment' | 'chromeless'} props.appearance - The appearance of the editor.
|
|
430
|
-
* @returns {JSX.Element} The styled content component.
|
|
431
216
|
*/
|
|
432
217
|
var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
433
218
|
var className = props.className,
|
|
@@ -444,7 +229,17 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
444
229
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
445
230
|
className: className,
|
|
446
231
|
ref: ref,
|
|
447
|
-
css: [contentStyles(),
|
|
232
|
+
css: [contentStyles(),
|
|
233
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
234
|
+
(0, _layout.layoutBaseStyles)(),
|
|
235
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
236
|
+
(0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') ? _link.linkStyles : _link.linkStylesOld,
|
|
237
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
238
|
+
_aiPanel.aiPanelBaseStyles,
|
|
239
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
240
|
+
colorMode === 'dark' && _aiPanel.aiPanelDarkStyles,
|
|
241
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
242
|
+
viewMode === 'view' && _layout.layoutViewStyles, isComment && commentEditorStyles, isFullPage && fullPageEditorStyles, (0, _platformFeatureFlags.fg)('platform_editor_ssr_fix_lists') && listLayoutShiftFix],
|
|
448
243
|
"data-editor-scroll-container": isScrollable ? 'true' : undefined,
|
|
449
244
|
"data-testid": "editor-content-container",
|
|
450
245
|
style: {
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.aiPanelDarkStyles = exports.aiPanelBaseStyles = void 0;
|
|
8
|
+
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
+
var _react = require("@emotion/react");
|
|
11
|
+
var _templateObject, _templateObject2;
|
|
12
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
13
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
14
|
+
/**
|
|
15
|
+
* aiPanelStyles
|
|
16
|
+
* was imported from packages/editor/editor-core/src/ui/ContentStyles/ai-panels.ts
|
|
17
|
+
*/
|
|
18
|
+
var isFirefox = typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
19
|
+
var rotationAnimation = (0, _react.keyframes)({
|
|
20
|
+
'0%': _objectSpread({
|
|
21
|
+
'--panel-gradient-angle': '0deg'
|
|
22
|
+
}, isFirefox ? {
|
|
23
|
+
backgroundPosition: '100%'
|
|
24
|
+
} : {}),
|
|
25
|
+
'100%': _objectSpread({
|
|
26
|
+
'--panel-gradient-angle': '360deg'
|
|
27
|
+
}, isFirefox ? {
|
|
28
|
+
backgroundPosition: '-100%'
|
|
29
|
+
} : {})
|
|
30
|
+
});
|
|
31
|
+
var aiPrismColor = (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, 'prism.border.step.1', {
|
|
32
|
+
light: '#0065FF',
|
|
33
|
+
dark: '#0065FF80'
|
|
34
|
+
}), 'prism.border.step.2', {
|
|
35
|
+
light: '#0469FF',
|
|
36
|
+
dark: '#0469FF80'
|
|
37
|
+
}), 'prism.border.step.3', {
|
|
38
|
+
light: '#BF63F3',
|
|
39
|
+
dark: '#BF63F380'
|
|
40
|
+
}), 'prism.border.step.4', {
|
|
41
|
+
light: '#FFA900',
|
|
42
|
+
dark: '#FFA90080'
|
|
43
|
+
});
|
|
44
|
+
var prismBorderAnimationStyles = (0, _react.css)({
|
|
45
|
+
'&::before, &::after': _objectSpread(_objectSpread({
|
|
46
|
+
animationName: rotationAnimation,
|
|
47
|
+
animationDuration: '2s',
|
|
48
|
+
animationTimingFunction: 'linear',
|
|
49
|
+
animationIterationCount: 'infinite'
|
|
50
|
+
}, isFirefox ? {
|
|
51
|
+
animationDirection: 'normal',
|
|
52
|
+
animationDuration: '1s'
|
|
53
|
+
} : {}), {}, {
|
|
54
|
+
'@media (prefers-reduced-motion)': {
|
|
55
|
+
animation: 'none'
|
|
56
|
+
}
|
|
57
|
+
})
|
|
58
|
+
});
|
|
59
|
+
var prismBorderBaseStyles = (0, _react.css)(_objectSpread({
|
|
60
|
+
content: "''",
|
|
61
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
62
|
+
position: 'absolute',
|
|
63
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
64
|
+
zIndex: -1,
|
|
65
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
66
|
+
width: "calc(100% + 2px)",
|
|
67
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
68
|
+
height: "calc(100% + 2px)",
|
|
69
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
70
|
+
top: "-1px",
|
|
71
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
72
|
+
left: "-1px",
|
|
73
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
74
|
+
borderRadius: "calc(".concat("var(--ds-border-radius-100, 3px)", " + 1px)"),
|
|
75
|
+
transform: 'translate3d(0, 0, 0)'
|
|
76
|
+
}, isFirefox ? {
|
|
77
|
+
background: "linear-gradient(90deg,\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1']['light'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['light'], " 12%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['light'], " 24%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4']['light'], " 48%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['light'], " 64%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['light'], " 80%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1']['light'], " 100%\n\t\t\t\t\t\t\t)"),
|
|
78
|
+
backgroundSize: '200%'
|
|
79
|
+
} : {
|
|
80
|
+
background: "conic-gradient(\n\t\t\t\t\t\t\t\tfrom var(--panel-gradient-angle, 270deg),\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1']['light'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['light'], " 20%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['light'], " 50%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4']['light'], " 56%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1']['light'], " 100%\n\t\t\t\t\t\t\t)")
|
|
81
|
+
}));
|
|
82
|
+
var prismBorderDarkStyles = (0, _react.css)(_objectSpread({}, isFirefox ? {
|
|
83
|
+
background: "linear-gradient(90deg,\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1']['dark'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['dark'], " 12%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['dark'], " 24%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4']['dark'], " 48%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['dark'], " 64%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['dark'], " 80%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1']['dark'], " 100%\n\t\t\t\t\t\t\t)"),
|
|
84
|
+
backgroundSize: '200%'
|
|
85
|
+
} : {
|
|
86
|
+
background: "conic-gradient(\n\t\t\t\t\t\t\t\tfrom var(--panel-gradient-angle, 270deg),\n\t\t\t\t\t\t\t\t".concat(aiPrismColor['prism.border.step.1']['dark'], " 0%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.2']['dark'], " 20%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.3']['dark'], " 50%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.4']['dark'], " 56%,\n\t\t\t\t\t\t\t\t").concat(aiPrismColor['prism.border.step.1']['dark'], " 100%\n\t\t\t\t\t\t\t)")
|
|
87
|
+
}));
|
|
88
|
+
var prismBorderHoverStyles = (0, _react.css)({
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
90
|
+
background: "var(--ds-border-input, #8590A2)"
|
|
91
|
+
});
|
|
92
|
+
|
|
93
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
94
|
+
var aiPanelBaseStyles = exports.aiPanelBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t@property --panel-gradient-angle {\n\t\tsyntax: '<angle>';\n\t\tinitial-value: 270deg;\n\t\tinherits: false;\n\t}\n\n\tdiv[extensionType='com.atlassian.ai-blocks'] {\n\t\t/* This hides the label for the extension */\n\t\t.extension-label {\n\t\t\tdisplay: none;\n\t\t}\n\n\t\t/* This styles the ai panel correctly when its just sitting on the page and there\n\t\tis no user interaction */\n\t\t.extension-container {\n\t\t\tposition: relative;\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\tbackground-color: ", " !important;\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t\t&.with-hover-border {\n\t\t\t\t&::before,\n\t\t\t\t&::after {\n\t\t\t\t\t", "\n\t\t\t\t}\n\t\t\t}\n\t\t\t& .with-margin-styles {\n\t\t\t\tbackground-color: ", " !important;\n\t\t\t\tborder-radius: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t/* This styles the ai panel correctly when its streaming */\n\tdiv[extensionType='com.atlassian.ai-blocks']:has(.streaming) {\n\t\t.extension-container {\n\t\t\tbox-shadow: none;\n\t\t\toverflow: unset;\n\t\t\t", "\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t/* This styles the ai panel correctly when a user is hovering over the delete button in the floating panel */\n\tdiv[extensionType='com.atlassian.ai-blocks'].danger {\n\t\t.extension-container {\n\t\t\tbox-shadow: 0 0 0 1px ", ";\n\t\t}\n\t}\n\n\t/* This removes the margin from the action list when inside an ai panel */\n\tdiv[extensiontype='com.atlassian.ai-blocks'][extensionkey='ai-action-items-block:aiActionItemsBodiedExtension'] {\n\t\tdiv[data-node-type='actionList'] {\n\t\t\tmargin: 0 !important;\n\t\t}\n\t}\n"])), "var(--ds-surface, #FFFFFF)", prismBorderBaseStyles, prismBorderHoverStyles, "var(--ds-surface, #FFFFFF)", "var(--ds-border-radius-100, 3px)", prismBorderAnimationStyles, prismBorderBaseStyles, "var(--ds-border-danger, #E2483D)");
|
|
95
|
+
|
|
96
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
97
|
+
var aiPanelDarkStyles = exports.aiPanelDarkStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tdiv[extensionType='com.atlassian.ai-blocks'] {\n\t\t.extension-container {\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n\n\t/* This styles the ai panel correctly when its streaming */\n\tdiv[extensionType='com.atlassian.ai-blocks']:has(.streaming) {\n\t\t.extension-container {\n\t\t\t&::before,\n\t\t\t&::after {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), prismBorderDarkStyles, prismBorderDarkStyles);
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.annotationStyles = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _react = require("@emotion/react");
|
|
10
|
+
var _styles = require("@atlaskit/editor-common/styles");
|
|
11
|
+
// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
|
|
12
|
+
|
|
13
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
14
|
+
var annotationStyles = exports.annotationStyles = (0, _react.css)({
|
|
15
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
16
|
+
'.ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_styles.AnnotationSharedClassNames.blur, ", .").concat(_styles.AnnotationSharedClassNames.focus, ", .").concat(_styles.AnnotationSharedClassNames.draft, ", .").concat(_styles.AnnotationSharedClassNames.hover), {
|
|
17
|
+
borderBottom: '2px solid transparent',
|
|
18
|
+
cursor: 'pointer',
|
|
19
|
+
padding: '1px 0 2px',
|
|
20
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
21
|
+
'&:has(.card), &:has([data-inline-card])': {
|
|
22
|
+
padding: '5px 0 3px 0'
|
|
23
|
+
},
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
25
|
+
'&:has(.date-lozenger-container)': {
|
|
26
|
+
paddingTop: "var(--ds-space-025, 2px)"
|
|
27
|
+
}
|
|
28
|
+
}), ".".concat(_styles.AnnotationSharedClassNames.focus), {
|
|
29
|
+
background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
|
|
30
|
+
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
|
|
31
|
+
boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
|
|
32
|
+
}), ".".concat(_styles.AnnotationSharedClassNames.draft), {
|
|
33
|
+
background: "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)",
|
|
34
|
+
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
|
|
35
|
+
boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)",
|
|
36
|
+
cursor: 'initial'
|
|
37
|
+
}), ".".concat(_styles.AnnotationSharedClassNames.blur), {
|
|
38
|
+
background: "var(--ds-background-accent-yellow-subtlest, #FFF7D6)",
|
|
39
|
+
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)"
|
|
40
|
+
}), ".".concat(_styles.AnnotationSharedClassNames.hover), {
|
|
41
|
+
background: "var(--ds-background-accent-yellow-subtlest-hovered, #F8E6A0)",
|
|
42
|
+
borderBottomColor: "var(--ds-border-accent-yellow, #B38600)",
|
|
43
|
+
boxShadow: "var(--ds-shadow-raised, 0px 1px 1px #091E4240, 0px 0px 1px #091E424f)"
|
|
44
|
+
})
|
|
45
|
+
});
|