@atlaskit/editor-core 217.10.1 → 217.11.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 +12 -0
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +8 -2
- package/dist/cjs/ui/EditorContentContainer/styles/extensionStyles.js +2 -2
- package/dist/cjs/ui/EditorContentContainer/styles/layout.js +98 -11
- package/dist/cjs/ui/EditorContentContainer/styles/resizerStyles.js +3 -0
- package/dist/cjs/ui/EditorContentContainer/styles/smartCardStyles.js +36 -14
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +9 -3
- package/dist/es2019/ui/EditorContentContainer/styles/extensionStyles.js +2 -2
- package/dist/es2019/ui/EditorContentContainer/styles/layout.js +119 -0
- package/dist/es2019/ui/EditorContentContainer/styles/resizerStyles.js +3 -0
- package/dist/es2019/ui/EditorContentContainer/styles/smartCardStyles.js +42 -12
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +9 -3
- package/dist/esm/ui/EditorContentContainer/styles/extensionStyles.js +2 -2
- package/dist/esm/ui/EditorContentContainer/styles/layout.js +97 -10
- package/dist/esm/ui/EditorContentContainer/styles/resizerStyles.js +3 -0
- package/dist/esm/ui/EditorContentContainer/styles/smartCardStyles.js +36 -14
- package/dist/types/ui/EditorContentContainer/styles/layout.d.ts +15 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/layout.d.ts +15 -0
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 217.11.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`fb96753c1753e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/fb96753c1753e) -
|
|
8
|
+
[ux] Introduce adjustable layout column drag handle and update logic behind
|
|
9
|
+
platform_editor_layout_column_resize_handle experiment
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
3
15
|
## 217.10.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
|
@@ -393,11 +393,17 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
393
393
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
394
394
|
_layout.layoutSectionStylesAdvanced :
|
|
395
395
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
396
|
-
_layout.layoutSectionStylesNotAdvanced, (0, _experiments.editorExperiment)('advanced_layouts', true)
|
|
396
|
+
_layout.layoutSectionStylesNotAdvanced, (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) &&
|
|
397
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
398
|
+
_layout.layoutColumnDividerStyles, (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) && (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') &&
|
|
399
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
400
|
+
_layout.layoutColumnDividerStylesNestedDnD, (0, _experiments.editorExperiment)('advanced_layouts', true) ?
|
|
397
401
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
398
402
|
_layout.layoutColumnStylesAdvanced :
|
|
399
403
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
400
|
-
_layout.layoutColumnStylesNotAdvanced,
|
|
404
|
+
_layout.layoutColumnStylesNotAdvanced, (0, _experiments.editorExperiment)('advanced_layouts', true) && (0, _experiments.editorExperiment)('platform_editor_layout_column_resize_handle', true) &&
|
|
405
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
406
|
+
_layout.layoutColumnResizeStyles,
|
|
401
407
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
402
408
|
(0, _experiments.editorExperiment)('advanced_layouts', true) ?
|
|
403
409
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -431,6 +431,6 @@ var getExtensionStyles = exports.getExtensionStyles = function getExtensionStyle
|
|
|
431
431
|
};
|
|
432
432
|
|
|
433
433
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
434
|
-
var extensionDiffStyles = exports.extensionDiffStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".show-diff-changed-decoration-node > span
|
|
435
|
-
boxShadow: "0 0 0 1px var(--diff-decoration-marker-color)"
|
|
434
|
+
var extensionDiffStyles = exports.extensionDiffStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".show-diff-changed-decoration-node > span .extension-container", {
|
|
435
|
+
boxShadow: "0 0 0 var(--diff-decoration-marker-ring-width, 1px) var(--diff-decoration-marker-color)"
|
|
436
436
|
}));
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.layoutStylesForView = exports.layoutSelectedStylesNotAdvanced = exports.layoutSelectedStylesForViewNotAdvanced = exports.layoutSelectedStylesForViewAdvanced = exports.layoutSelectedStylesAdvancedFix = exports.layoutSelectedStylesAdvanced = exports.layoutSectionStylesNotAdvanced = exports.layoutSectionStylesAdvanced = exports.layoutResponsiveStylesForView = exports.layoutResponsiveBaseStyles = exports.layoutColumnStylesNotAdvanced = exports.layoutColumnStylesAdvanced = exports.layoutColumnResponsiveStyles = exports.layoutColumnMartinTopFixesOld = exports.layoutColumnMartinTopFixesNew = exports.layoutBaseStylesWithTableExcerptsFix = exports.layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync = exports.layoutBaseStylesFixesUnderNestedDnDFG = exports.layoutBaseStylesAdvanced = exports.layoutBaseStyles = void 0;
|
|
7
|
+
exports.layoutStylesForView = exports.layoutSelectedStylesNotAdvanced = exports.layoutSelectedStylesForViewNotAdvanced = exports.layoutSelectedStylesForViewAdvanced = exports.layoutSelectedStylesAdvancedFix = exports.layoutSelectedStylesAdvanced = exports.layoutSectionStylesNotAdvanced = exports.layoutSectionStylesAdvanced = exports.layoutResponsiveStylesForView = exports.layoutResponsiveBaseStyles = exports.layoutColumnStylesNotAdvanced = exports.layoutColumnStylesAdvanced = exports.layoutColumnResponsiveStyles = exports.layoutColumnResizeStyles = exports.layoutColumnMartinTopFixesOld = exports.layoutColumnMartinTopFixesNew = exports.layoutColumnDividerStylesNestedDnD = exports.layoutColumnDividerStyles = exports.layoutBaseStylesWithTableExcerptsFix = exports.layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync = exports.layoutBaseStylesFixesUnderNestedDnDFG = exports.layoutBaseStylesAdvanced = exports.layoutBaseStyles = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _selectionStyles = require("./selectionStyles");
|
|
@@ -12,6 +12,63 @@ var _selectionStyles = require("./selectionStyles");
|
|
|
12
12
|
|
|
13
13
|
var gridMediumMaxWidth = 1024;
|
|
14
14
|
var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
|
|
15
|
+
|
|
16
|
+
// Class names for the column resize divider widget — must stay in sync with main.ts in editor-plugin-layout
|
|
17
|
+
var layoutColumnDividerClassName = 'layout-column-divider';
|
|
18
|
+
var layoutColumnDividerRailClassName = 'layout-column-divider-rail';
|
|
19
|
+
var layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
|
|
20
|
+
|
|
21
|
+
/**
|
|
22
|
+
* Styles for the column resize divider widget DOM elements.
|
|
23
|
+
* Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
|
|
24
|
+
* Applied only when advanced_layouts experiment is on.
|
|
25
|
+
*/
|
|
26
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
27
|
+
var layoutColumnDividerStyles = exports.layoutColumnDividerStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(layoutColumnDividerClassName), (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
28
|
+
// Negative margin removes the applied 'gap' from the parent's flex box
|
|
29
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
30
|
+
marginInline: '-15px 0px',
|
|
31
|
+
flexShrink: 0,
|
|
32
|
+
boxSizing: 'content-box',
|
|
33
|
+
cursor: 'col-resize',
|
|
34
|
+
position: 'relative',
|
|
35
|
+
zIndex: 2,
|
|
36
|
+
alignSelf: 'stretch',
|
|
37
|
+
display: 'flex',
|
|
38
|
+
alignItems: 'center',
|
|
39
|
+
justifyContent: 'center'
|
|
40
|
+
}, "&:hover .".concat(layoutColumnDividerRailClassName), {
|
|
41
|
+
background: "var(--ds-background-selected, #E9F2FE)"
|
|
42
|
+
}), "&:hover .".concat(layoutColumnDividerThumbClassName), {
|
|
43
|
+
background: "var(--ds-border-focused, #4688EC)"
|
|
44
|
+
})), ".".concat(layoutColumnDividerRailClassName), {
|
|
45
|
+
width: 7,
|
|
46
|
+
height: '100%',
|
|
47
|
+
display: 'flex',
|
|
48
|
+
alignItems: 'center',
|
|
49
|
+
justifyContent: 'center',
|
|
50
|
+
borderRadius: "var(--ds-radius-small, 4px)",
|
|
51
|
+
transition: 'background-color 0.2s',
|
|
52
|
+
pointerEvents: 'none'
|
|
53
|
+
}), ".".concat(layoutColumnDividerThumbClassName), {
|
|
54
|
+
minWidth: 3,
|
|
55
|
+
height: 'clamp(27px, calc(100% - 32px), 96px)',
|
|
56
|
+
background: "var(--ds-border, #0B120E24)",
|
|
57
|
+
borderRadius: "var(--ds-radius-medium, 6px)",
|
|
58
|
+
pointerEvents: 'none',
|
|
59
|
+
position: 'sticky',
|
|
60
|
+
top: "var(--ds-space-150, 12px)",
|
|
61
|
+
bottom: "var(--ds-space-150, 12px)"
|
|
62
|
+
}));
|
|
63
|
+
/**
|
|
64
|
+
* Override divider marginInline when platform_editor_nested_dnd_styles_changes is on,
|
|
65
|
+
* since the layout section/column spacing changes.
|
|
66
|
+
*/
|
|
67
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
68
|
+
var layoutColumnDividerStylesNestedDnD = exports.layoutColumnDividerStylesNestedDnD = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(layoutColumnDividerClassName), {
|
|
69
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
70
|
+
marginInline: '0 -7px'
|
|
71
|
+
}));
|
|
15
72
|
var selectorForNotResizedLayoutInFulllWidthEditor = '.fabric-editor--full-width-mode .ProseMirror > .layoutSectionView-content-wrap';
|
|
16
73
|
var selectorForNotResizedLayoutInFixedWidthEditor = '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror > .layoutSectionView-content-wrap';
|
|
17
74
|
var selectorForResizedLayoutInFullOrFixedWidthEditor = '.ProseMirror .fabric-editor-breakout-mark .layoutSectionView-content-wrap';
|
|
@@ -56,6 +113,25 @@ var layoutColumnStylesAdvanced = exports.layoutColumnStylesAdvanced = (0, _react
|
|
|
56
113
|
}])
|
|
57
114
|
});
|
|
58
115
|
|
|
116
|
+
/**
|
|
117
|
+
* Layout column resize styles for the platform_editor_layout_column_resize_handle experiment
|
|
118
|
+
*/
|
|
119
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
120
|
+
var layoutColumnResizeStyles = exports.layoutColumnResizeStyles = (0, _react.css)({
|
|
121
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
122
|
+
'.ProseMirror [data-layout-section]': {
|
|
123
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
124
|
+
'> [data-layout-column][style*="--column-width"]': {
|
|
125
|
+
// Support CSS custom property for smooth resizing during drag
|
|
126
|
+
// When --column-resize-width is set, use it; otherwise fall back to the original flex-basis
|
|
127
|
+
// Using attribute selector for higher specificity than inline styles
|
|
128
|
+
flexBasis: 'var(--column-resize-width, var(--column-width))',
|
|
129
|
+
// Also ensure flex-grow and flex-shrink are reset when using custom width
|
|
130
|
+
flex: 'var(--column-resize-flex, 1)'
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
});
|
|
134
|
+
|
|
59
135
|
/**
|
|
60
136
|
* Layout columns styles when advanced layouts experiment is off
|
|
61
137
|
*/
|
|
@@ -107,11 +183,11 @@ var layoutColumnResponsiveStyles = exports.layoutColumnResponsiveStyles = (0, _r
|
|
|
107
183
|
* Layout section styles when advanced layouts experiment is on
|
|
108
184
|
*/
|
|
109
185
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-exported-styles
|
|
110
|
-
var layoutSectionStylesAdvanced = exports.layoutSectionStylesAdvanced = (0, _react.css)({
|
|
186
|
+
var layoutSectionStylesAdvanced = exports.layoutSectionStylesAdvanced = (0, _react.css)((0, _defineProperty2.default)({
|
|
111
187
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
112
188
|
'.ProseMirror .layout-section-container [data-layout-section]': {
|
|
113
189
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
114
|
-
'> .ProseMirror-widget': {
|
|
190
|
+
'> .ProseMirror-widget': (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
115
191
|
flex: 'none',
|
|
116
192
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
117
193
|
display: 'contents !important',
|
|
@@ -129,18 +205,27 @@ var layoutSectionStylesAdvanced = exports.layoutSectionStylesAdvanced = (0, _rea
|
|
|
129
205
|
'[data-drop-target-for-element]': {
|
|
130
206
|
position: 'absolute'
|
|
131
207
|
}
|
|
132
|
-
},
|
|
133
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
134
|
-
'& + [data-layout-column]': {
|
|
135
|
-
margin: 0
|
|
136
208
|
}
|
|
137
|
-
},
|
|
209
|
+
}, "&.".concat(layoutColumnDividerClassName), {
|
|
210
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
211
|
+
display: 'block !important',
|
|
212
|
+
flex: 'none',
|
|
213
|
+
opacity: 0,
|
|
214
|
+
transition: 'opacity 0.2s'
|
|
215
|
+
}), '& + [data-layout-column]', {
|
|
216
|
+
margin: 0
|
|
217
|
+
}),
|
|
138
218
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
139
219
|
'> [data-layout-column]': {
|
|
140
220
|
margin: 0
|
|
141
221
|
}
|
|
142
222
|
}
|
|
143
|
-
})
|
|
223
|
+
}, ".ProseMirror .layoutSectionView-content-wrap:hover .layout-section-container [data-layout-section]", (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "> .ProseMirror-widget.".concat(layoutColumnDividerClassName), {
|
|
224
|
+
opacity: 1
|
|
225
|
+
}), "> .ProseMirror-widget.".concat(layoutColumnDividerClassName, " ~ [data-layout-column] [data-layout-content]::before"), {
|
|
226
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
227
|
+
display: 'none !important'
|
|
228
|
+
})));
|
|
144
229
|
|
|
145
230
|
/**
|
|
146
231
|
* Layout section styles when advanced layouts experiment is off
|
|
@@ -148,7 +233,7 @@ var layoutSectionStylesAdvanced = exports.layoutSectionStylesAdvanced = (0, _rea
|
|
|
148
233
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
149
234
|
var layoutSectionStylesNotAdvanced = exports.layoutSectionStylesNotAdvanced = (0, _react.css)({
|
|
150
235
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
151
|
-
'.ProseMirror [data-layout-section]': (0, _defineProperty2.default)({
|
|
236
|
+
'.ProseMirror [data-layout-section]': (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
152
237
|
position: 'relative',
|
|
153
238
|
display: 'flex',
|
|
154
239
|
flexDirection: 'row',
|
|
@@ -161,7 +246,9 @@ var layoutSectionStylesNotAdvanced = exports.layoutSectionStylesNotAdvanced = (0
|
|
|
161
246
|
'& > .unsupportedBlockView-content-wrap': {
|
|
162
247
|
minWidth: 'initial'
|
|
163
248
|
}
|
|
164
|
-
}, "
|
|
249
|
+
}, "& > .".concat(layoutColumnDividerClassName), {
|
|
250
|
+
flex: 'none'
|
|
251
|
+
}), "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
|
|
165
252
|
flexDirection: 'column'
|
|
166
253
|
})
|
|
167
254
|
});
|
|
@@ -322,6 +322,9 @@ var pragmaticResizerStyles = exports.pragmaticResizerStyles = (0, _react.css)({
|
|
|
322
322
|
'.pm-breakout-resize-handle-container--right': {
|
|
323
323
|
justifySelf: 'end'
|
|
324
324
|
},
|
|
325
|
+
// Rail and thumb styles intentionally mirror the layout column divider
|
|
326
|
+
// (see layoutColumnDividerRailClassName and layoutColumnDividerThumbClassName in layout.ts).
|
|
327
|
+
// If updating these styles, consider keeping both in sync.
|
|
325
328
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
326
329
|
'.pm-breakout-resize-handle-rail': {
|
|
327
330
|
position: 'relative',
|
|
@@ -34,12 +34,12 @@ var editorControlsSmartCardStyles = exports.editorControlsSmartCardStyles = (0,
|
|
|
34
34
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
35
35
|
var smartCardDiffStyles = exports.smartCardDiffStyles = (0, _react.css)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)({}, "&[data-testid=\"show-diff-changed-decoration-node\"] .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
36
36
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
37
|
-
boxShadow: "0 0 0 1px var(--diff-decoration-marker-color)",
|
|
37
|
+
boxShadow: "0 0 0 var(--diff-decoration-marker-ring-width, 1px) var(--diff-decoration-marker-color)",
|
|
38
38
|
borderColor: 'transparent'
|
|
39
39
|
})));
|
|
40
40
|
|
|
41
41
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
42
|
-
var showDiffDeletedNodeStyles = exports.showDiffDeletedNodeStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
42
|
+
var showDiffDeletedNodeStyles = exports.showDiffDeletedNodeStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
43
43
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
44
44
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
|
|
45
45
|
borderColor: 'transparent'
|
|
@@ -47,13 +47,17 @@ var showDiffDeletedNodeStyles = exports.showDiffDeletedNodeStyles = (0, _react.c
|
|
|
47
47
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
48
48
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
49
49
|
borderColor: 'transparent'
|
|
50
|
+
}), "&.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
51
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
52
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
|
|
53
|
+
borderColor: 'transparent'
|
|
50
54
|
}), "&.show-diff-deleted-node-traditional.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
51
55
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
52
|
-
boxShadow: "0 0 0
|
|
56
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
53
57
|
borderColor: 'transparent'
|
|
54
58
|
}), "&.show-diff-deleted-node.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
55
59
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
56
|
-
boxShadow: "0 0 0
|
|
60
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
57
61
|
borderColor: 'transparent'
|
|
58
62
|
}), "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER), {
|
|
59
63
|
opacity: 0.6
|
|
@@ -72,18 +76,25 @@ var showDiffDeletedNodeStyles = exports.showDiffDeletedNodeStyles = (0, _react.c
|
|
|
72
76
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
73
77
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
74
78
|
}
|
|
79
|
+
}), '.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .media-card-wrapper', {
|
|
80
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
81
|
+
'& > div': {
|
|
82
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
83
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
|
|
84
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
85
|
+
}
|
|
75
86
|
}), '.show-diff-deleted-node-traditional.show-diff-deleted-active .media-card-wrapper', {
|
|
76
87
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
77
88
|
'& > div': {
|
|
78
89
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
79
|
-
boxShadow: "0 0 0
|
|
90
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
80
91
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
81
92
|
}
|
|
82
93
|
}), '.show-diff-deleted-node.show-diff-deleted-active .media-card-wrapper', {
|
|
83
94
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
84
95
|
'& > div': {
|
|
85
96
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
86
|
-
boxShadow: "0 0 0
|
|
97
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
87
98
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
88
99
|
opacity: 0.6
|
|
89
100
|
}
|
|
@@ -98,21 +109,25 @@ var showDiffDeletedNodeStyles = exports.showDiffDeletedNodeStyles = (0, _react.c
|
|
|
98
109
|
}));
|
|
99
110
|
|
|
100
111
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
101
|
-
var showDiffDeletedNodeStylesNew = exports.showDiffDeletedNodeStylesNew = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
112
|
+
var showDiffDeletedNodeStylesNew = exports.showDiffDeletedNodeStylesNew = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
102
113
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
103
|
-
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-
|
|
114
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
104
115
|
borderColor: 'transparent'
|
|
105
116
|
}), "&.show-diff-deleted-node-traditional .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
106
117
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
107
118
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
108
119
|
borderColor: 'transparent'
|
|
120
|
+
}), "&.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
121
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
122
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
|
|
123
|
+
borderColor: 'transparent'
|
|
109
124
|
}), "&.show-diff-deleted-node-traditional.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
110
125
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
111
|
-
boxShadow: "0 0 0
|
|
126
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
112
127
|
borderColor: 'transparent'
|
|
113
128
|
}), "&.show-diff-deleted-node.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
114
129
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
115
|
-
boxShadow: "0 0 0
|
|
130
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
116
131
|
borderColor: 'transparent'
|
|
117
132
|
}), "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER), {
|
|
118
133
|
opacity: 0.8
|
|
@@ -120,7 +135,7 @@ var showDiffDeletedNodeStylesNew = exports.showDiffDeletedNodeStylesNew = (0, _r
|
|
|
120
135
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
121
136
|
'& > div': {
|
|
122
137
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
123
|
-
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-
|
|
138
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
124
139
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
125
140
|
opacity: 0.8
|
|
126
141
|
}
|
|
@@ -128,21 +143,28 @@ var showDiffDeletedNodeStylesNew = exports.showDiffDeletedNodeStylesNew = (0, _r
|
|
|
128
143
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
129
144
|
'& > div': {
|
|
130
145
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
131
|
-
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
146
|
+
boxShadow: "0 0 0 var(--diff-decoration-marker-ring-width, 1px) ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
147
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
148
|
+
}
|
|
149
|
+
}), '.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .media-card-wrapper', {
|
|
150
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
151
|
+
'& > div': {
|
|
152
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
153
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
|
|
132
154
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
133
155
|
}
|
|
134
156
|
}), '.show-diff-deleted-node-traditional.show-diff-deleted-active .media-card-wrapper', {
|
|
135
157
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
136
158
|
'& > div': {
|
|
137
159
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
138
|
-
boxShadow: "0 0 0
|
|
160
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
139
161
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
140
162
|
}
|
|
141
163
|
}), '.show-diff-deleted-node.show-diff-deleted-active .media-card-wrapper', {
|
|
142
164
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
143
165
|
'& > div': {
|
|
144
166
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
145
|
-
boxShadow: "0 0 0
|
|
167
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
146
168
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
147
169
|
opacity: 0.8
|
|
148
170
|
}
|
|
@@ -42,7 +42,7 @@ import { gapCursorStyles, gapCursorStylesVisibilityFix } from './styles/gapCurso
|
|
|
42
42
|
import { gridStyles } from './styles/gridStyles';
|
|
43
43
|
import { indentationStyles } from './styles/indentationStyles';
|
|
44
44
|
import { InlineNodeViewSharedStyles } from './styles/inlineNodeViewSharedStyles';
|
|
45
|
-
import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesWithTableExcerptsFix, layoutBaseStylesFixesUnderNestedDnDFG, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnResponsiveStyles, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutSelectedStylesNotAdvanced, layoutStylesForView, layoutSelectedStylesAdvancedFix, layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync } from './styles/layout';
|
|
45
|
+
import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesWithTableExcerptsFix, layoutBaseStylesFixesUnderNestedDnDFG, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnDividerStyles, layoutColumnDividerStylesNestedDnD, layoutColumnResizeStyles, layoutColumnResponsiveStyles, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutSelectedStylesNotAdvanced, layoutStylesForView, layoutSelectedStylesAdvancedFix, layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync } from './styles/layout';
|
|
46
46
|
import { hyperLinkFloatingToolbarStyles, linkStyles } from './styles/link';
|
|
47
47
|
import { diffListStyles, getDenseListStyles, listItemHiddenMarkerStyles, listsStyles, listsStylesMarginLayoutShiftFix, listsStylesSafariFix } from './styles/list';
|
|
48
48
|
import { mediaAlignmentStyles, mediaCaptionStyles, mediaDangerStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
|
|
@@ -389,11 +389,17 @@ const EditorContentContainer = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
389
389
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
390
390
|
layoutSectionStylesAdvanced :
|
|
391
391
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
392
|
-
layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true)
|
|
392
|
+
layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) &&
|
|
393
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
394
|
+
layoutColumnDividerStyles, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && fg('platform_editor_nested_dnd_styles_changes') &&
|
|
395
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
396
|
+
layoutColumnDividerStylesNestedDnD, editorExperiment('advanced_layouts', true) ?
|
|
393
397
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
394
398
|
layoutColumnStylesAdvanced :
|
|
395
399
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
396
|
-
layoutColumnStylesNotAdvanced,
|
|
400
|
+
layoutColumnStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) &&
|
|
401
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
402
|
+
layoutColumnResizeStyles,
|
|
397
403
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
398
404
|
editorExperiment('advanced_layouts', true) ?
|
|
399
405
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -425,7 +425,7 @@ export const getExtensionStyles = contentMode => {
|
|
|
425
425
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
426
426
|
export const extensionDiffStyles = css({
|
|
427
427
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
428
|
-
[`.show-diff-changed-decoration-node > span
|
|
429
|
-
boxShadow: `0 0 0 1px var(--diff-decoration-marker-color)`
|
|
428
|
+
[`.show-diff-changed-decoration-node > span .extension-container`]: {
|
|
429
|
+
boxShadow: `0 0 0 var(--diff-decoration-marker-ring-width, 1px) var(--diff-decoration-marker-color)`
|
|
430
430
|
}
|
|
431
431
|
});
|
|
@@ -3,6 +3,80 @@ import { css } from '@emotion/react';
|
|
|
3
3
|
import { blanketSelectionStyles, borderSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
|
|
4
4
|
const gridMediumMaxWidth = 1024;
|
|
5
5
|
const akEditorSelectedNodeClassName = 'ak-editor-selected-node';
|
|
6
|
+
|
|
7
|
+
// Class names for the column resize divider widget — must stay in sync with main.ts in editor-plugin-layout
|
|
8
|
+
const layoutColumnDividerClassName = 'layout-column-divider';
|
|
9
|
+
const layoutColumnDividerRailClassName = 'layout-column-divider-rail';
|
|
10
|
+
const layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* Styles for the column resize divider widget DOM elements.
|
|
14
|
+
* Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
|
|
15
|
+
* Applied only when advanced_layouts experiment is on.
|
|
16
|
+
*/
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
18
|
+
export const layoutColumnDividerStyles = css({
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
20
|
+
[`.${layoutColumnDividerClassName}`]: {
|
|
21
|
+
// Negative margin removes the applied 'gap' from the parent's flex box
|
|
22
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
23
|
+
marginInline: '-15px 0px',
|
|
24
|
+
flexShrink: 0,
|
|
25
|
+
boxSizing: 'content-box',
|
|
26
|
+
cursor: 'col-resize',
|
|
27
|
+
position: 'relative',
|
|
28
|
+
zIndex: 2,
|
|
29
|
+
alignSelf: 'stretch',
|
|
30
|
+
display: 'flex',
|
|
31
|
+
alignItems: 'center',
|
|
32
|
+
justifyContent: 'center',
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
34
|
+
[`&:hover .${layoutColumnDividerRailClassName}`]: {
|
|
35
|
+
background: "var(--ds-background-selected, #E9F2FE)"
|
|
36
|
+
},
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
38
|
+
[`&:hover .${layoutColumnDividerThumbClassName}`]: {
|
|
39
|
+
background: "var(--ds-border-focused, #4688EC)"
|
|
40
|
+
}
|
|
41
|
+
},
|
|
42
|
+
// Rail and thumb styles intentionally mirror the breakout resize handle
|
|
43
|
+
// (see .pm-breakout-resize-handle-rail and .pm-breakout-resize-handle-thumb in resizerStyles.ts).
|
|
44
|
+
// If updating these styles, consider keeping both in sync.
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
46
|
+
[`.${layoutColumnDividerRailClassName}`]: {
|
|
47
|
+
width: 7,
|
|
48
|
+
height: '100%',
|
|
49
|
+
display: 'flex',
|
|
50
|
+
alignItems: 'center',
|
|
51
|
+
justifyContent: 'center',
|
|
52
|
+
borderRadius: "var(--ds-radius-small, 4px)",
|
|
53
|
+
transition: 'background-color 0.2s',
|
|
54
|
+
pointerEvents: 'none'
|
|
55
|
+
},
|
|
56
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
57
|
+
[`.${layoutColumnDividerThumbClassName}`]: {
|
|
58
|
+
minWidth: 3,
|
|
59
|
+
height: 'clamp(27px, calc(100% - 32px), 96px)',
|
|
60
|
+
background: "var(--ds-border, #0B120E24)",
|
|
61
|
+
borderRadius: "var(--ds-radius-medium, 6px)",
|
|
62
|
+
pointerEvents: 'none',
|
|
63
|
+
position: 'sticky',
|
|
64
|
+
top: "var(--ds-space-150, 12px)",
|
|
65
|
+
bottom: "var(--ds-space-150, 12px)"
|
|
66
|
+
}
|
|
67
|
+
});
|
|
68
|
+
/**
|
|
69
|
+
* Override divider marginInline when platform_editor_nested_dnd_styles_changes is on,
|
|
70
|
+
* since the layout section/column spacing changes.
|
|
71
|
+
*/
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
73
|
+
export const layoutColumnDividerStylesNestedDnD = css({
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
75
|
+
[`.${layoutColumnDividerClassName}`]: {
|
|
76
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
77
|
+
marginInline: '0 -7px'
|
|
78
|
+
}
|
|
79
|
+
});
|
|
6
80
|
const selectorForNotResizedLayoutInFulllWidthEditor = '.fabric-editor--full-width-mode .ProseMirror > .layoutSectionView-content-wrap';
|
|
7
81
|
const selectorForNotResizedLayoutInFixedWidthEditor = '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror > .layoutSectionView-content-wrap';
|
|
8
82
|
const selectorForResizedLayoutInFullOrFixedWidthEditor = '.ProseMirror .fabric-editor-breakout-mark .layoutSectionView-content-wrap';
|
|
@@ -51,6 +125,25 @@ export const layoutColumnStylesAdvanced = css({
|
|
|
51
125
|
}
|
|
52
126
|
});
|
|
53
127
|
|
|
128
|
+
/**
|
|
129
|
+
* Layout column resize styles for the platform_editor_layout_column_resize_handle experiment
|
|
130
|
+
*/
|
|
131
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
132
|
+
export const layoutColumnResizeStyles = css({
|
|
133
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
134
|
+
'.ProseMirror [data-layout-section]': {
|
|
135
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
136
|
+
'> [data-layout-column][style*="--column-width"]': {
|
|
137
|
+
// Support CSS custom property for smooth resizing during drag
|
|
138
|
+
// When --column-resize-width is set, use it; otherwise fall back to the original flex-basis
|
|
139
|
+
// Using attribute selector for higher specificity than inline styles
|
|
140
|
+
flexBasis: 'var(--column-resize-width, var(--column-width))',
|
|
141
|
+
// Also ensure flex-grow and flex-shrink are reset when using custom width
|
|
142
|
+
flex: 'var(--column-resize-flex, 1)'
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
});
|
|
146
|
+
|
|
54
147
|
/**
|
|
55
148
|
* Layout columns styles when advanced layouts experiment is off
|
|
56
149
|
*/
|
|
@@ -127,6 +220,15 @@ export const layoutSectionStylesAdvanced = css({
|
|
|
127
220
|
position: 'absolute'
|
|
128
221
|
}
|
|
129
222
|
},
|
|
223
|
+
// Column resize divider: always in DOM, hidden via opacity by default
|
|
224
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
225
|
+
[`&.${layoutColumnDividerClassName}`]: {
|
|
226
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
227
|
+
display: 'block !important',
|
|
228
|
+
flex: 'none',
|
|
229
|
+
opacity: 0,
|
|
230
|
+
transition: 'opacity 0.2s'
|
|
231
|
+
},
|
|
130
232
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
131
233
|
'& + [data-layout-column]': {
|
|
132
234
|
margin: 0
|
|
@@ -136,6 +238,19 @@ export const layoutSectionStylesAdvanced = css({
|
|
|
136
238
|
'> [data-layout-column]': {
|
|
137
239
|
margin: 0
|
|
138
240
|
}
|
|
241
|
+
},
|
|
242
|
+
// On hover: fade in drag divider and hide the 1px separator
|
|
243
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
244
|
+
[`.ProseMirror .layoutSectionView-content-wrap:hover .layout-section-container [data-layout-section]`]: {
|
|
245
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
246
|
+
[`> .ProseMirror-widget.${layoutColumnDividerClassName}`]: {
|
|
247
|
+
opacity: 1
|
|
248
|
+
},
|
|
249
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
250
|
+
[`> .ProseMirror-widget.${layoutColumnDividerClassName} ~ [data-layout-column] [data-layout-content]::before`]: {
|
|
251
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
252
|
+
display: 'none !important'
|
|
253
|
+
}
|
|
139
254
|
}
|
|
140
255
|
});
|
|
141
256
|
|
|
@@ -158,6 +273,10 @@ export const layoutSectionStylesNotAdvanced = css({
|
|
|
158
273
|
'& > .unsupportedBlockView-content-wrap': {
|
|
159
274
|
minWidth: 'initial'
|
|
160
275
|
},
|
|
276
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
277
|
+
[`& > .${layoutColumnDividerClassName}`]: {
|
|
278
|
+
flex: 'none'
|
|
279
|
+
},
|
|
161
280
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
162
281
|
[`@media screen and (max-width: ${gridMediumMaxWidth}px)`]: {
|
|
163
282
|
flexDirection: 'column'
|
|
@@ -369,6 +369,9 @@ export const pragmaticResizerStyles = css({
|
|
|
369
369
|
'.pm-breakout-resize-handle-container--right': {
|
|
370
370
|
justifySelf: 'end'
|
|
371
371
|
},
|
|
372
|
+
// Rail and thumb styles intentionally mirror the layout column divider
|
|
373
|
+
// (see layoutColumnDividerRailClassName and layoutColumnDividerThumbClassName in layout.ts).
|
|
374
|
+
// If updating these styles, consider keeping both in sync.
|
|
372
375
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
373
376
|
'.pm-breakout-resize-handle-rail': {
|
|
374
377
|
position: 'relative',
|
|
@@ -32,7 +32,7 @@ export const smartCardDiffStyles = css({
|
|
|
32
32
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
33
33
|
[`&[data-testid="show-diff-changed-decoration-node"] .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
34
34
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
35
|
-
boxShadow: `0 0 0 1px var(--diff-decoration-marker-color)`,
|
|
35
|
+
boxShadow: `0 0 0 var(--diff-decoration-marker-ring-width, 1px) var(--diff-decoration-marker-color)`,
|
|
36
36
|
borderColor: 'transparent'
|
|
37
37
|
}
|
|
38
38
|
}
|
|
@@ -55,15 +55,21 @@ export const showDiffDeletedNodeStyles = css({
|
|
|
55
55
|
borderColor: 'transparent'
|
|
56
56
|
},
|
|
57
57
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
58
|
+
[`&.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
60
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtlest, #FFECEB)"}`,
|
|
61
|
+
borderColor: 'transparent'
|
|
62
|
+
},
|
|
63
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
58
64
|
[`&.show-diff-deleted-node-traditional.show-diff-deleted-active .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
59
65
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
60
|
-
boxShadow: `0 0 0
|
|
66
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
61
67
|
borderColor: 'transparent'
|
|
62
68
|
},
|
|
63
69
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
64
70
|
[`&.show-diff-deleted-node.show-diff-deleted-active .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
65
71
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
66
|
-
boxShadow: `0 0 0
|
|
72
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
67
73
|
borderColor: 'transparent'
|
|
68
74
|
},
|
|
69
75
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -91,11 +97,20 @@ export const showDiffDeletedNodeStyles = css({
|
|
|
91
97
|
}
|
|
92
98
|
},
|
|
93
99
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
100
|
+
'.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .media-card-wrapper': {
|
|
101
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
102
|
+
'& > div': {
|
|
103
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
104
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtlest, #FFECEB)"}`,
|
|
105
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
106
|
+
}
|
|
107
|
+
},
|
|
108
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
94
109
|
'.show-diff-deleted-node-traditional.show-diff-deleted-active .media-card-wrapper': {
|
|
95
110
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
96
111
|
'& > div': {
|
|
97
112
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
98
|
-
boxShadow: `0 0 0
|
|
113
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
99
114
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
100
115
|
}
|
|
101
116
|
},
|
|
@@ -104,7 +119,7 @@ export const showDiffDeletedNodeStyles = css({
|
|
|
104
119
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
105
120
|
'& > div': {
|
|
106
121
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
107
|
-
boxShadow: `0 0 0
|
|
122
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
108
123
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
109
124
|
opacity: 0.6
|
|
110
125
|
}
|
|
@@ -132,7 +147,7 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
132
147
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
133
148
|
[`&.show-diff-deleted-node .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
134
149
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
135
|
-
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-
|
|
150
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
|
|
136
151
|
borderColor: 'transparent'
|
|
137
152
|
},
|
|
138
153
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -142,15 +157,21 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
142
157
|
borderColor: 'transparent'
|
|
143
158
|
},
|
|
144
159
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
160
|
+
[`&.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
161
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
162
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtlest, #FFECEB)"}`,
|
|
163
|
+
borderColor: 'transparent'
|
|
164
|
+
},
|
|
165
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
145
166
|
[`&.show-diff-deleted-node-traditional.show-diff-deleted-active .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
146
167
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
147
|
-
boxShadow: `0 0 0
|
|
168
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
148
169
|
borderColor: 'transparent'
|
|
149
170
|
},
|
|
150
171
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
151
172
|
[`&.show-diff-deleted-node.show-diff-deleted-active .${SmartCardSharedCssClassName.LOADER_WRAPPER} > div::after`]: {
|
|
152
173
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
153
|
-
boxShadow: `0 0 0
|
|
174
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
154
175
|
borderColor: 'transparent'
|
|
155
176
|
},
|
|
156
177
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values,@atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -163,7 +184,7 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
163
184
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
164
185
|
'& > div': {
|
|
165
186
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
166
|
-
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-
|
|
187
|
+
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
|
|
167
188
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
168
189
|
opacity: 0.8
|
|
169
190
|
}
|
|
@@ -173,7 +194,16 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
173
194
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
174
195
|
'& > div': {
|
|
175
196
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
176
|
-
boxShadow: `0 0 0 1px ${"var(--ds-border-accent-red, #E2483D)"}`,
|
|
197
|
+
boxShadow: `0 0 0 var(--diff-decoration-marker-ring-width, 1px) ${"var(--ds-border-accent-red, #E2483D)"}`,
|
|
198
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
199
|
+
}
|
|
200
|
+
},
|
|
201
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
202
|
+
'.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .media-card-wrapper': {
|
|
203
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
204
|
+
'& > div': {
|
|
205
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
206
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtlest, #FFECEB)"}`,
|
|
177
207
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
178
208
|
}
|
|
179
209
|
},
|
|
@@ -182,7 +212,7 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
182
212
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
183
213
|
'& > div': {
|
|
184
214
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
185
|
-
boxShadow: `0 0 0
|
|
215
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
186
216
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
187
217
|
}
|
|
188
218
|
},
|
|
@@ -191,7 +221,7 @@ export const showDiffDeletedNodeStylesNew = css({
|
|
|
191
221
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
192
222
|
'& > div': {
|
|
193
223
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
194
|
-
boxShadow: `0 0 0
|
|
224
|
+
boxShadow: `0 0 0 4px ${"var(--ds-background-accent-red-subtler-pressed, #FD9891)"}`,
|
|
195
225
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
196
226
|
opacity: 0.8
|
|
197
227
|
}
|
|
@@ -43,7 +43,7 @@ import { gapCursorStyles, gapCursorStylesVisibilityFix } from './styles/gapCurso
|
|
|
43
43
|
import { gridStyles } from './styles/gridStyles';
|
|
44
44
|
import { indentationStyles } from './styles/indentationStyles';
|
|
45
45
|
import { InlineNodeViewSharedStyles } from './styles/inlineNodeViewSharedStyles';
|
|
46
|
-
import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesWithTableExcerptsFix, layoutBaseStylesFixesUnderNestedDnDFG, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnResponsiveStyles, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutSelectedStylesNotAdvanced, layoutStylesForView, layoutSelectedStylesAdvancedFix, layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync } from './styles/layout';
|
|
46
|
+
import { layoutBaseStyles, layoutBaseStylesAdvanced, layoutBaseStylesWithTableExcerptsFix, layoutBaseStylesFixesUnderNestedDnDFG, layoutColumnMartinTopFixesNew, layoutColumnMartinTopFixesOld, layoutColumnDividerStyles, layoutColumnDividerStylesNestedDnD, layoutColumnResizeStyles, layoutColumnResponsiveStyles, layoutColumnStylesAdvanced, layoutColumnStylesNotAdvanced, layoutResponsiveBaseStyles, layoutResponsiveStylesForView, layoutSectionStylesAdvanced, layoutSectionStylesNotAdvanced, layoutSelectedStylesAdvanced, layoutSelectedStylesForViewAdvanced, layoutSelectedStylesForViewNotAdvanced, layoutSelectedStylesNotAdvanced, layoutStylesForView, layoutSelectedStylesAdvancedFix, layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync } from './styles/layout';
|
|
47
47
|
import { hyperLinkFloatingToolbarStyles, linkStyles } from './styles/link';
|
|
48
48
|
import { diffListStyles, getDenseListStyles, listItemHiddenMarkerStyles, listsStyles, listsStylesMarginLayoutShiftFix, listsStylesSafariFix } from './styles/list';
|
|
49
49
|
import { mediaAlignmentStyles, mediaCaptionStyles, mediaDangerStyles, mediaGroupStyles, mediaStyles } from './styles/mediaStyles';
|
|
@@ -385,11 +385,17 @@ var EditorContentContainer = /*#__PURE__*/React.forwardRef(function (props, ref)
|
|
|
385
385
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
386
386
|
layoutSectionStylesAdvanced :
|
|
387
387
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
388
|
-
layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true)
|
|
388
|
+
layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) &&
|
|
389
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
390
|
+
layoutColumnDividerStyles, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && fg('platform_editor_nested_dnd_styles_changes') &&
|
|
391
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
392
|
+
layoutColumnDividerStylesNestedDnD, editorExperiment('advanced_layouts', true) ?
|
|
389
393
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
390
394
|
layoutColumnStylesAdvanced :
|
|
391
395
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
392
|
-
layoutColumnStylesNotAdvanced,
|
|
396
|
+
layoutColumnStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) &&
|
|
397
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
398
|
+
layoutColumnResizeStyles,
|
|
393
399
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
394
400
|
editorExperiment('advanced_layouts', true) ?
|
|
395
401
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -424,6 +424,6 @@ export var getExtensionStyles = function getExtensionStyles(contentMode) {
|
|
|
424
424
|
};
|
|
425
425
|
|
|
426
426
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
427
|
-
export var extensionDiffStyles = css(_defineProperty({}, ".show-diff-changed-decoration-node > span
|
|
428
|
-
boxShadow: "0 0 0 1px var(--diff-decoration-marker-color)"
|
|
427
|
+
export var extensionDiffStyles = css(_defineProperty({}, ".show-diff-changed-decoration-node > span .extension-container", {
|
|
428
|
+
boxShadow: "0 0 0 var(--diff-decoration-marker-ring-width, 1px) var(--diff-decoration-marker-color)"
|
|
429
429
|
}));
|
|
@@ -4,6 +4,63 @@ import { css } from '@emotion/react';
|
|
|
4
4
|
import { blanketSelectionStyles, borderSelectionStyles, hideNativeBrowserTextSelectionStyles } from './selectionStyles';
|
|
5
5
|
var gridMediumMaxWidth = 1024;
|
|
6
6
|
var akEditorSelectedNodeClassName = 'ak-editor-selected-node';
|
|
7
|
+
|
|
8
|
+
// Class names for the column resize divider widget — must stay in sync with main.ts in editor-plugin-layout
|
|
9
|
+
var layoutColumnDividerClassName = 'layout-column-divider';
|
|
10
|
+
var layoutColumnDividerRailClassName = 'layout-column-divider-rail';
|
|
11
|
+
var layoutColumnDividerThumbClassName = 'layout-column-divider-thumb';
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* Styles for the column resize divider widget DOM elements.
|
|
15
|
+
* Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
|
|
16
|
+
* Applied only when advanced_layouts experiment is on.
|
|
17
|
+
*/
|
|
18
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
19
|
+
export var layoutColumnDividerStyles = css(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(layoutColumnDividerClassName), _defineProperty(_defineProperty({
|
|
20
|
+
// Negative margin removes the applied 'gap' from the parent's flex box
|
|
21
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
22
|
+
marginInline: '-15px 0px',
|
|
23
|
+
flexShrink: 0,
|
|
24
|
+
boxSizing: 'content-box',
|
|
25
|
+
cursor: 'col-resize',
|
|
26
|
+
position: 'relative',
|
|
27
|
+
zIndex: 2,
|
|
28
|
+
alignSelf: 'stretch',
|
|
29
|
+
display: 'flex',
|
|
30
|
+
alignItems: 'center',
|
|
31
|
+
justifyContent: 'center'
|
|
32
|
+
}, "&:hover .".concat(layoutColumnDividerRailClassName), {
|
|
33
|
+
background: "var(--ds-background-selected, #E9F2FE)"
|
|
34
|
+
}), "&:hover .".concat(layoutColumnDividerThumbClassName), {
|
|
35
|
+
background: "var(--ds-border-focused, #4688EC)"
|
|
36
|
+
})), ".".concat(layoutColumnDividerRailClassName), {
|
|
37
|
+
width: 7,
|
|
38
|
+
height: '100%',
|
|
39
|
+
display: 'flex',
|
|
40
|
+
alignItems: 'center',
|
|
41
|
+
justifyContent: 'center',
|
|
42
|
+
borderRadius: "var(--ds-radius-small, 4px)",
|
|
43
|
+
transition: 'background-color 0.2s',
|
|
44
|
+
pointerEvents: 'none'
|
|
45
|
+
}), ".".concat(layoutColumnDividerThumbClassName), {
|
|
46
|
+
minWidth: 3,
|
|
47
|
+
height: 'clamp(27px, calc(100% - 32px), 96px)',
|
|
48
|
+
background: "var(--ds-border, #0B120E24)",
|
|
49
|
+
borderRadius: "var(--ds-radius-medium, 6px)",
|
|
50
|
+
pointerEvents: 'none',
|
|
51
|
+
position: 'sticky',
|
|
52
|
+
top: "var(--ds-space-150, 12px)",
|
|
53
|
+
bottom: "var(--ds-space-150, 12px)"
|
|
54
|
+
}));
|
|
55
|
+
/**
|
|
56
|
+
* Override divider marginInline when platform_editor_nested_dnd_styles_changes is on,
|
|
57
|
+
* since the layout section/column spacing changes.
|
|
58
|
+
*/
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
60
|
+
export var layoutColumnDividerStylesNestedDnD = css(_defineProperty({}, ".".concat(layoutColumnDividerClassName), {
|
|
61
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
62
|
+
marginInline: '0 -7px'
|
|
63
|
+
}));
|
|
7
64
|
var selectorForNotResizedLayoutInFulllWidthEditor = '.fabric-editor--full-width-mode .ProseMirror > .layoutSectionView-content-wrap';
|
|
8
65
|
var selectorForNotResizedLayoutInFixedWidthEditor = '.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror > .layoutSectionView-content-wrap';
|
|
9
66
|
var selectorForResizedLayoutInFullOrFixedWidthEditor = '.ProseMirror .fabric-editor-breakout-mark .layoutSectionView-content-wrap';
|
|
@@ -48,6 +105,25 @@ export var layoutColumnStylesAdvanced = css({
|
|
|
48
105
|
}])
|
|
49
106
|
});
|
|
50
107
|
|
|
108
|
+
/**
|
|
109
|
+
* Layout column resize styles for the platform_editor_layout_column_resize_handle experiment
|
|
110
|
+
*/
|
|
111
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
112
|
+
export var layoutColumnResizeStyles = css({
|
|
113
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
114
|
+
'.ProseMirror [data-layout-section]': {
|
|
115
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
116
|
+
'> [data-layout-column][style*="--column-width"]': {
|
|
117
|
+
// Support CSS custom property for smooth resizing during drag
|
|
118
|
+
// When --column-resize-width is set, use it; otherwise fall back to the original flex-basis
|
|
119
|
+
// Using attribute selector for higher specificity than inline styles
|
|
120
|
+
flexBasis: 'var(--column-resize-width, var(--column-width))',
|
|
121
|
+
// Also ensure flex-grow and flex-shrink are reset when using custom width
|
|
122
|
+
flex: 'var(--column-resize-flex, 1)'
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
});
|
|
126
|
+
|
|
51
127
|
/**
|
|
52
128
|
* Layout columns styles when advanced layouts experiment is off
|
|
53
129
|
*/
|
|
@@ -99,11 +175,11 @@ export var layoutColumnResponsiveStyles = css({
|
|
|
99
175
|
* Layout section styles when advanced layouts experiment is on
|
|
100
176
|
*/
|
|
101
177
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-exported-styles
|
|
102
|
-
export var layoutSectionStylesAdvanced = css({
|
|
178
|
+
export var layoutSectionStylesAdvanced = css(_defineProperty({
|
|
103
179
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
104
180
|
'.ProseMirror .layout-section-container [data-layout-section]': {
|
|
105
181
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
106
|
-
'> .ProseMirror-widget': {
|
|
182
|
+
'> .ProseMirror-widget': _defineProperty(_defineProperty({
|
|
107
183
|
flex: 'none',
|
|
108
184
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
109
185
|
display: 'contents !important',
|
|
@@ -121,18 +197,27 @@ export var layoutSectionStylesAdvanced = css({
|
|
|
121
197
|
'[data-drop-target-for-element]': {
|
|
122
198
|
position: 'absolute'
|
|
123
199
|
}
|
|
124
|
-
},
|
|
125
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
126
|
-
'& + [data-layout-column]': {
|
|
127
|
-
margin: 0
|
|
128
200
|
}
|
|
129
|
-
},
|
|
201
|
+
}, "&.".concat(layoutColumnDividerClassName), {
|
|
202
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
203
|
+
display: 'block !important',
|
|
204
|
+
flex: 'none',
|
|
205
|
+
opacity: 0,
|
|
206
|
+
transition: 'opacity 0.2s'
|
|
207
|
+
}), '& + [data-layout-column]', {
|
|
208
|
+
margin: 0
|
|
209
|
+
}),
|
|
130
210
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
131
211
|
'> [data-layout-column]': {
|
|
132
212
|
margin: 0
|
|
133
213
|
}
|
|
134
214
|
}
|
|
135
|
-
})
|
|
215
|
+
}, ".ProseMirror .layoutSectionView-content-wrap:hover .layout-section-container [data-layout-section]", _defineProperty(_defineProperty({}, "> .ProseMirror-widget.".concat(layoutColumnDividerClassName), {
|
|
216
|
+
opacity: 1
|
|
217
|
+
}), "> .ProseMirror-widget.".concat(layoutColumnDividerClassName, " ~ [data-layout-column] [data-layout-content]::before"), {
|
|
218
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
|
|
219
|
+
display: 'none !important'
|
|
220
|
+
})));
|
|
136
221
|
|
|
137
222
|
/**
|
|
138
223
|
* Layout section styles when advanced layouts experiment is off
|
|
@@ -140,7 +225,7 @@ export var layoutSectionStylesAdvanced = css({
|
|
|
140
225
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
141
226
|
export var layoutSectionStylesNotAdvanced = css({
|
|
142
227
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
143
|
-
'.ProseMirror [data-layout-section]': _defineProperty({
|
|
228
|
+
'.ProseMirror [data-layout-section]': _defineProperty(_defineProperty({
|
|
144
229
|
position: 'relative',
|
|
145
230
|
display: 'flex',
|
|
146
231
|
flexDirection: 'row',
|
|
@@ -153,7 +238,9 @@ export var layoutSectionStylesNotAdvanced = css({
|
|
|
153
238
|
'& > .unsupportedBlockView-content-wrap': {
|
|
154
239
|
minWidth: 'initial'
|
|
155
240
|
}
|
|
156
|
-
}, "
|
|
241
|
+
}, "& > .".concat(layoutColumnDividerClassName), {
|
|
242
|
+
flex: 'none'
|
|
243
|
+
}), "@media screen and (max-width: ".concat(gridMediumMaxWidth, "px)"), {
|
|
157
244
|
flexDirection: 'column'
|
|
158
245
|
})
|
|
159
246
|
});
|
|
@@ -314,6 +314,9 @@ export var pragmaticResizerStyles = css({
|
|
|
314
314
|
'.pm-breakout-resize-handle-container--right': {
|
|
315
315
|
justifySelf: 'end'
|
|
316
316
|
},
|
|
317
|
+
// Rail and thumb styles intentionally mirror the layout column divider
|
|
318
|
+
// (see layoutColumnDividerRailClassName and layoutColumnDividerThumbClassName in layout.ts).
|
|
319
|
+
// If updating these styles, consider keeping both in sync.
|
|
317
320
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
318
321
|
'.pm-breakout-resize-handle-rail': {
|
|
319
322
|
position: 'relative',
|
|
@@ -26,12 +26,12 @@ export var editorControlsSmartCardStyles = css(_defineProperty({}, ".".concat(Sm
|
|
|
26
26
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
27
27
|
export var smartCardDiffStyles = css(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), _defineProperty({}, "&[data-testid=\"show-diff-changed-decoration-node\"] .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
28
28
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
29
|
-
boxShadow: "0 0 0 1px var(--diff-decoration-marker-color)",
|
|
29
|
+
boxShadow: "0 0 0 var(--diff-decoration-marker-ring-width, 1px) var(--diff-decoration-marker-color)",
|
|
30
30
|
borderColor: 'transparent'
|
|
31
31
|
})));
|
|
32
32
|
|
|
33
33
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
34
|
-
export var showDiffDeletedNodeStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
34
|
+
export var showDiffDeletedNodeStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
35
35
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
36
36
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-gray, #7D818A)"),
|
|
37
37
|
borderColor: 'transparent'
|
|
@@ -39,13 +39,17 @@ export var showDiffDeletedNodeStyles = css(_defineProperty(_defineProperty(_defi
|
|
|
39
39
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
40
40
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
41
41
|
borderColor: 'transparent'
|
|
42
|
+
}), "&.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
43
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
44
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
|
|
45
|
+
borderColor: 'transparent'
|
|
42
46
|
}), "&.show-diff-deleted-node-traditional.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
43
47
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
44
|
-
boxShadow: "0 0 0
|
|
48
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
45
49
|
borderColor: 'transparent'
|
|
46
50
|
}), "&.show-diff-deleted-node.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
47
51
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
48
|
-
boxShadow: "0 0 0
|
|
52
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
49
53
|
borderColor: 'transparent'
|
|
50
54
|
}), "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER), {
|
|
51
55
|
opacity: 0.6
|
|
@@ -64,18 +68,25 @@ export var showDiffDeletedNodeStyles = css(_defineProperty(_defineProperty(_defi
|
|
|
64
68
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
65
69
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
66
70
|
}
|
|
71
|
+
}), '.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .media-card-wrapper', {
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
73
|
+
'& > div': {
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
75
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
|
|
76
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
77
|
+
}
|
|
67
78
|
}), '.show-diff-deleted-node-traditional.show-diff-deleted-active .media-card-wrapper', {
|
|
68
79
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
69
80
|
'& > div': {
|
|
70
81
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
71
|
-
boxShadow: "0 0 0
|
|
82
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
72
83
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
73
84
|
}
|
|
74
85
|
}), '.show-diff-deleted-node.show-diff-deleted-active .media-card-wrapper', {
|
|
75
86
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
76
87
|
'& > div': {
|
|
77
88
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
78
|
-
boxShadow: "0 0 0
|
|
89
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
79
90
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
80
91
|
opacity: 0.6
|
|
81
92
|
}
|
|
@@ -90,21 +101,25 @@ export var showDiffDeletedNodeStyles = css(_defineProperty(_defineProperty(_defi
|
|
|
90
101
|
}));
|
|
91
102
|
|
|
92
103
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
93
|
-
export var showDiffDeletedNodeStylesNew = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
104
|
+
export var showDiffDeletedNodeStylesNew = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(SmartCardSharedCssClassName.EMBED_CARD_CONTAINER), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
94
105
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
95
|
-
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-
|
|
106
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
96
107
|
borderColor: 'transparent'
|
|
97
108
|
}), "&.show-diff-deleted-node-traditional .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
98
109
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
99
110
|
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
100
111
|
borderColor: 'transparent'
|
|
112
|
+
}), "&.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
113
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
114
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
|
|
115
|
+
borderColor: 'transparent'
|
|
101
116
|
}), "&.show-diff-deleted-node-traditional.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
102
117
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
103
|
-
boxShadow: "0 0 0
|
|
118
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
104
119
|
borderColor: 'transparent'
|
|
105
120
|
}), "&.show-diff-deleted-node.show-diff-deleted-active .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER, " > div::after"), {
|
|
106
121
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
107
|
-
boxShadow: "0 0 0
|
|
122
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
108
123
|
borderColor: 'transparent'
|
|
109
124
|
}), "&.show-diff-deleted-node .".concat(SmartCardSharedCssClassName.LOADER_WRAPPER), {
|
|
110
125
|
opacity: 0.8
|
|
@@ -112,7 +127,7 @@ export var showDiffDeletedNodeStylesNew = css(_defineProperty(_defineProperty(_d
|
|
|
112
127
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
113
128
|
'& > div': {
|
|
114
129
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
115
|
-
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-
|
|
130
|
+
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
116
131
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
117
132
|
opacity: 0.8
|
|
118
133
|
}
|
|
@@ -120,21 +135,28 @@ export var showDiffDeletedNodeStylesNew = css(_defineProperty(_defineProperty(_d
|
|
|
120
135
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
121
136
|
'& > div': {
|
|
122
137
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
123
|
-
boxShadow: "0 0 0 1px ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
138
|
+
boxShadow: "0 0 0 var(--diff-decoration-marker-ring-width, 1px) ".concat("var(--ds-border-accent-red, #E2483D)"),
|
|
139
|
+
borderRadius: "var(--ds-radius-small, 4px)"
|
|
140
|
+
}
|
|
141
|
+
}), '.show-diff-deleted-node-traditional.show-diff-deleted-outline-new .media-card-wrapper', {
|
|
142
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
143
|
+
'& > div': {
|
|
144
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
145
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtlest, #FFECEB)"),
|
|
124
146
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
125
147
|
}
|
|
126
148
|
}), '.show-diff-deleted-node-traditional.show-diff-deleted-active .media-card-wrapper', {
|
|
127
149
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
128
150
|
'& > div': {
|
|
129
151
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
130
|
-
boxShadow: "0 0 0
|
|
152
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
131
153
|
borderRadius: "var(--ds-radius-small, 4px)"
|
|
132
154
|
}
|
|
133
155
|
}), '.show-diff-deleted-node.show-diff-deleted-active .media-card-wrapper', {
|
|
134
156
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
135
157
|
'& > div': {
|
|
136
158
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values,@atlaskit/ui-styling-standard/no-unsafe-values
|
|
137
|
-
boxShadow: "0 0 0
|
|
159
|
+
boxShadow: "0 0 0 4px ".concat("var(--ds-background-accent-red-subtler-pressed, #FD9891)"),
|
|
138
160
|
borderRadius: "var(--ds-radius-small, 4px)",
|
|
139
161
|
opacity: 0.8
|
|
140
162
|
}
|
|
@@ -1,8 +1,23 @@
|
|
|
1
1
|
import type { SerializedStyles } from '@emotion/react';
|
|
2
|
+
/**
|
|
3
|
+
* Styles for the column resize divider widget DOM elements.
|
|
4
|
+
* Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
|
|
5
|
+
* Applied only when advanced_layouts experiment is on.
|
|
6
|
+
*/
|
|
7
|
+
export declare const layoutColumnDividerStyles: SerializedStyles;
|
|
8
|
+
/**
|
|
9
|
+
* Override divider marginInline when platform_editor_nested_dnd_styles_changes is on,
|
|
10
|
+
* since the layout section/column spacing changes.
|
|
11
|
+
*/
|
|
12
|
+
export declare const layoutColumnDividerStylesNestedDnD: SerializedStyles;
|
|
2
13
|
/**
|
|
3
14
|
* Layout columns styles when advanced layouts experiment is on
|
|
4
15
|
*/
|
|
5
16
|
export declare const layoutColumnStylesAdvanced: SerializedStyles;
|
|
17
|
+
/**
|
|
18
|
+
* Layout column resize styles for the platform_editor_layout_column_resize_handle experiment
|
|
19
|
+
*/
|
|
20
|
+
export declare const layoutColumnResizeStyles: SerializedStyles;
|
|
6
21
|
/**
|
|
7
22
|
* Layout columns styles when advanced layouts experiment is off
|
|
8
23
|
*/
|
|
@@ -1,8 +1,23 @@
|
|
|
1
1
|
import type { SerializedStyles } from '@emotion/react';
|
|
2
|
+
/**
|
|
3
|
+
* Styles for the column resize divider widget DOM elements.
|
|
4
|
+
* Mirrors the pm-breakout-resize-handle-* pattern from resizerStyles.ts.
|
|
5
|
+
* Applied only when advanced_layouts experiment is on.
|
|
6
|
+
*/
|
|
7
|
+
export declare const layoutColumnDividerStyles: SerializedStyles;
|
|
8
|
+
/**
|
|
9
|
+
* Override divider marginInline when platform_editor_nested_dnd_styles_changes is on,
|
|
10
|
+
* since the layout section/column spacing changes.
|
|
11
|
+
*/
|
|
12
|
+
export declare const layoutColumnDividerStylesNestedDnD: SerializedStyles;
|
|
2
13
|
/**
|
|
3
14
|
* Layout columns styles when advanced layouts experiment is on
|
|
4
15
|
*/
|
|
5
16
|
export declare const layoutColumnStylesAdvanced: SerializedStyles;
|
|
17
|
+
/**
|
|
18
|
+
* Layout column resize styles for the platform_editor_layout_column_resize_handle experiment
|
|
19
|
+
*/
|
|
20
|
+
export declare const layoutColumnResizeStyles: SerializedStyles;
|
|
6
21
|
/**
|
|
7
22
|
* Layout columns styles when advanced layouts experiment is off
|
|
8
23
|
*/
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "217.
|
|
3
|
+
"version": "217.11.0",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@atlaskit/editor-plugins": "^13.0.0",
|
|
55
55
|
"@atlaskit/editor-prosemirror": "^7.3.0",
|
|
56
56
|
"@atlaskit/editor-shared-styles": "^3.10.0",
|
|
57
|
-
"@atlaskit/editor-ssr-renderer": "^3.
|
|
57
|
+
"@atlaskit/editor-ssr-renderer": "^3.2.0",
|
|
58
58
|
"@atlaskit/editor-toolbar": "^0.20.0",
|
|
59
59
|
"@atlaskit/editor-toolbar-model": "^0.4.0",
|
|
60
60
|
"@atlaskit/emoji": "^69.10.0",
|
|
@@ -65,9 +65,9 @@
|
|
|
65
65
|
"@atlaskit/mention": "^24.6.0",
|
|
66
66
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
67
67
|
"@atlaskit/platform-feature-flags-react": "^0.4.0",
|
|
68
|
-
"@atlaskit/react-ufo": "^5.
|
|
68
|
+
"@atlaskit/react-ufo": "^5.11.0",
|
|
69
69
|
"@atlaskit/task-decision": "^19.3.0",
|
|
70
|
-
"@atlaskit/tmp-editor-statsig": "^54.
|
|
70
|
+
"@atlaskit/tmp-editor-statsig": "^54.4.0",
|
|
71
71
|
"@atlaskit/tokens": "^11.4.0",
|
|
72
72
|
"@atlaskit/tooltip": "^21.1.0",
|
|
73
73
|
"@atlaskit/width-detector": "^5.0.0",
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
"uuid": "^3.1.0"
|
|
85
85
|
},
|
|
86
86
|
"peerDependencies": {
|
|
87
|
-
"@atlaskit/editor-common": "^112.
|
|
87
|
+
"@atlaskit/editor-common": "^112.18.0",
|
|
88
88
|
"@atlaskit/link-provider": "^4.3.0",
|
|
89
89
|
"@atlaskit/media-core": "^37.0.0",
|
|
90
90
|
"react": "^18.2.0",
|