@atlaskit/editor-core 202.3.2 → 202.3.4
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 +16 -0
- package/dist/cjs/ui/ContentStyles/layout.js +14 -4
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/ContentStyles/layout.js +68 -19
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/ContentStyles/layout.js +15 -5
- package/dist/esm/version-wrapper.js +1 -1
- package/package.json +11 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 202.3.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#168706](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168706)
|
|
8
|
+
[`b1eef0648c061`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b1eef0648c061) -
|
|
9
|
+
[ED-25767] Fix responsiveness difference in editor vs renderer
|
|
10
|
+
|
|
11
|
+
## 202.3.3
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [#168832](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168832)
|
|
16
|
+
[`6a5261e14e959`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6a5261e14e959) -
|
|
17
|
+
[ux] ED-25834 allow comment on inline node selection
|
|
18
|
+
|
|
3
19
|
## 202.3.2
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -25,7 +25,7 @@ var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
|
|
|
25
25
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
26
26
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
27
27
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
28
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
28
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13; // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
29
29
|
var isPreRelease2 = function isPreRelease2() {
|
|
30
30
|
return (0, _experiments.editorExperiment)('advanced_layouts', true) || (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_pre_release_2');
|
|
31
31
|
};
|
|
@@ -58,15 +58,25 @@ var columnSeparatorStyles = function columnSeparatorStyles(viewMode) {
|
|
|
58
58
|
};
|
|
59
59
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
60
60
|
var rowSeparatorStyles = function rowSeparatorStyles(viewMode) {
|
|
61
|
-
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\twidth: calc(100% - 32px);\n\t\tmargin-top: -13px;\n\t}\n"])), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
|
|
61
|
+
return (0, _react.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid\n\t\t\t", ";\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"])), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
|
|
62
|
+
};
|
|
63
|
+
var layoutWithSeparatorBorderResponsiveStyles = function layoutWithSeparatorBorderResponsiveStyles(breakpoint, viewMode
|
|
64
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
65
|
+
) {
|
|
66
|
+
return (0, _react.css)(_templateObject10 || (_templateObject10 = (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", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "@container editor-area (max-width:".concat(breakpoint, "px)") : "@media screen and (max-width: ".concat(_editorSharedStyles.gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode));
|
|
62
67
|
};
|
|
63
68
|
|
|
64
69
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
65
70
|
var layoutWithSeparatorBorderStyles = function layoutWithSeparatorBorderStyles(viewMode) {
|
|
66
|
-
return (0, _react.css)(
|
|
71
|
+
return (0, _react.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n\t&.selected [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\n\t\t", " {\n\t\tbackground-color: ", ";\n\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\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)\n\t\t", " {\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\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"])), columnSeparatorStyles(viewMode), (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, _editorSharedStyles.akEditorDeleteBorder, columnSeparatorStyles(viewMode), _editorSharedStyles.akEditorSelectedNodeClassName, (0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", viewMode === 'view' ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.Blanket]), columnSeparatorStyles(viewMode));
|
|
72
|
+
};
|
|
73
|
+
var layoutResponsiveStyles = function layoutResponsiveStyles(viewMode) {
|
|
74
|
+
return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
75
|
+
(0, _react.css)(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n\t\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t\t/* not resized layout in full-width editor */\n\t\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:854px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* not resized layout in fixed-width editor */\n\t\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:918px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* resized layout in full/fixed-width editor */\n\t\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t\t.layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:950px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), layoutWithSeparatorBorderResponsiveStyles(854, viewMode), layoutWithSeparatorBorderResponsiveStyles(918, viewMode), layoutWithSeparatorBorderResponsiveStyles(950, viewMode))
|
|
76
|
+
);
|
|
67
77
|
};
|
|
68
78
|
|
|
69
79
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
70
80
|
var layoutStyles = exports.layoutStyles = function layoutStyles(viewMode) {
|
|
71
|
-
return (0, _react.css)(
|
|
81
|
+
return (0, _react.css)(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\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\t", "\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 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 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.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, _editorSharedStyles.akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', (0, _platformFeatureFlags.fg)('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' || (0, _experiments.editorExperiment)('advanced_layouts', true) ? 0 : _editorSharedStyles.akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", _styles.LAYOUT_COLUMN_PADDING, _styles.LAYOUT_COLUMN_PADDING + ((0, _experiments.editorExperiment)('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), (0, _experiments.editorExperiment)('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), (0, _experiments.editorExperiment)('advanced_layouts', true) && layoutResponsiveStyles(viewMode), _types.TableCssClassName.TABLE_CONTAINER, _consts.tableMarginFullWidthMode, (0, _experiments.editorExperiment)('nested-dnd', true) && !(0, _platformFeatureFlags.fg)('platform_editor_advanced_layouts_breakout_resizing') && ".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}"));
|
|
72
82
|
};
|
|
@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
|
|
|
3
3
|
import { columnLayoutResponsiveSharedStyle, columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
|
|
4
4
|
import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
|
|
5
5
|
import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
|
|
6
|
-
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth,
|
|
6
|
+
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
7
7
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
8
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
9
9
|
export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
|
|
@@ -160,6 +160,25 @@ const rowSeparatorStyles = viewMode => css`
|
|
|
160
160
|
position: absolute;
|
|
161
161
|
width: calc(100% - 32px);
|
|
162
162
|
margin-top: -13px;
|
|
163
|
+
|
|
164
|
+
/* clear styles for column separator */
|
|
165
|
+
border-left: unset;
|
|
166
|
+
margin-left: unset;
|
|
167
|
+
height: unset;
|
|
168
|
+
}
|
|
169
|
+
`;
|
|
170
|
+
const layoutWithSeparatorBorderResponsiveStyles = (breakpoint, viewMode
|
|
171
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
172
|
+
) => css`
|
|
173
|
+
&.selected,
|
|
174
|
+
&:hover,
|
|
175
|
+
&.selected.danger,
|
|
176
|
+
&.${akEditorSelectedNodeClassName}:not(.danger) {
|
|
177
|
+
[data-layout-column]:not(:first-of-type) {
|
|
178
|
+
${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container editor-area (max-width:${breakpoint}px)` : `@media screen and (max-width: ${gridMediumMaxWidth - 1}px)`} {
|
|
179
|
+
${rowSeparatorStyles(viewMode)}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
163
182
|
}
|
|
164
183
|
`;
|
|
165
184
|
|
|
@@ -167,12 +186,7 @@ const rowSeparatorStyles = viewMode => css`
|
|
|
167
186
|
const layoutWithSeparatorBorderStyles = viewMode => css`
|
|
168
187
|
&.selected [data-layout-column]:not(:first-of-type),
|
|
169
188
|
&:hover [data-layout-column]:not(:first-of-type) {
|
|
170
|
-
${
|
|
171
|
-
${columnSeparatorStyles(viewMode)}
|
|
172
|
-
}
|
|
173
|
-
${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)` : `@media screen and (max-width: ${gridMediumMaxWidth - 1}px)`} {
|
|
174
|
-
${rowSeparatorStyles(viewMode)}
|
|
175
|
-
}
|
|
189
|
+
${columnSeparatorStyles(viewMode)}
|
|
176
190
|
}
|
|
177
191
|
|
|
178
192
|
&.selected.danger
|
|
@@ -183,12 +197,7 @@ const layoutWithSeparatorBorderStyles = viewMode => css`
|
|
|
183
197
|
${akEditorDeleteBorder};
|
|
184
198
|
border-radius: 4px;
|
|
185
199
|
[data-layout-column]:not(:first-of-type) {
|
|
186
|
-
${
|
|
187
|
-
${columnSeparatorStyles(viewMode)}
|
|
188
|
-
}
|
|
189
|
-
${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)` : `@media screen and (max-width: ${gridMediumMaxWidth - 1}px)`} {
|
|
190
|
-
${rowSeparatorStyles(viewMode)}
|
|
191
|
-
}
|
|
200
|
+
${columnSeparatorStyles(viewMode)}
|
|
192
201
|
}
|
|
193
202
|
}
|
|
194
203
|
|
|
@@ -206,15 +215,53 @@ const layoutWithSeparatorBorderStyles = viewMode => css`
|
|
|
206
215
|
}
|
|
207
216
|
}
|
|
208
217
|
[data-layout-column]:not(:first-of-type) {
|
|
209
|
-
${
|
|
210
|
-
${columnSeparatorStyles(viewMode)}
|
|
211
|
-
}
|
|
212
|
-
${fg('platform_editor_advanced_layouts_breakout_resizing') ? `@container layout-area (max-width:${layoutBreakpointWidth.MEDIUM - 1}px)` : `@media screen and (max-width: ${gridMediumMaxWidth - 1}px)`} {
|
|
213
|
-
${rowSeparatorStyles(viewMode)}
|
|
214
|
-
}
|
|
218
|
+
${columnSeparatorStyles(viewMode)}
|
|
215
219
|
}
|
|
216
220
|
}
|
|
217
221
|
`;
|
|
222
|
+
const layoutResponsiveStyles = viewMode =>
|
|
223
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
224
|
+
css`
|
|
225
|
+
/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */
|
|
226
|
+
/* not resized layout in full-width editor */
|
|
227
|
+
.fabric-editor--full-width-mode .ProseMirror {
|
|
228
|
+
> .layoutSectionView-content-wrap {
|
|
229
|
+
[data-layout-section] {
|
|
230
|
+
@container editor-area (max-width:854px) {
|
|
231
|
+
flex-direction: column;
|
|
232
|
+
}
|
|
233
|
+
}
|
|
234
|
+
|
|
235
|
+
${layoutWithSeparatorBorderResponsiveStyles(854, viewMode)}
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
|
|
239
|
+
/* not resized layout in fixed-width editor */
|
|
240
|
+
.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {
|
|
241
|
+
> .layoutSectionView-content-wrap {
|
|
242
|
+
[data-layout-section] {
|
|
243
|
+
@container editor-area (max-width:918px) {
|
|
244
|
+
flex-direction: column;
|
|
245
|
+
}
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
${layoutWithSeparatorBorderResponsiveStyles(918, viewMode)}
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
/* resized layout in full/fixed-width editor */
|
|
253
|
+
.ProseMirror .fabric-editor-breakout-mark {
|
|
254
|
+
.layoutSectionView-content-wrap {
|
|
255
|
+
[data-layout-section] {
|
|
256
|
+
@container editor-area (max-width:950px) {
|
|
257
|
+
flex-direction: column;
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
${layoutWithSeparatorBorderResponsiveStyles(950, viewMode)}
|
|
262
|
+
}
|
|
263
|
+
}
|
|
264
|
+
`;
|
|
218
265
|
|
|
219
266
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
220
267
|
export const layoutStyles = viewMode => css`
|
|
@@ -307,6 +354,8 @@ export const layoutStyles = viewMode => css`
|
|
|
307
354
|
}
|
|
308
355
|
}
|
|
309
356
|
|
|
357
|
+
${editorExperiment('advanced_layouts', true) && layoutResponsiveStyles(viewMode)}
|
|
358
|
+
|
|
310
359
|
.fabric-editor--full-width-mode .ProseMirror {
|
|
311
360
|
[data-layout-section] {
|
|
312
361
|
.${TableCssClassName.TABLE_CONTAINER} {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export const name = "@atlaskit/editor-core";
|
|
2
|
-
export const version = "202.3.
|
|
2
|
+
export const version = "202.3.4";
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
|
|
2
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
|
|
2
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
|
|
3
3
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
4
4
|
import { css } from '@emotion/react';
|
|
5
5
|
import { columnLayoutResponsiveSharedStyle, columnLayoutSharedStyle, LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN } from '@atlaskit/editor-common/styles';
|
|
6
6
|
import { TableCssClassName } from '@atlaskit/editor-plugins/table/types';
|
|
7
7
|
import { tableMarginFullWidthMode } from '@atlaskit/editor-plugins/table/ui/consts';
|
|
8
|
-
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth,
|
|
8
|
+
import { akEditorDeleteBackground, akEditorDeleteBorder, akEditorSelectedBorderSize, akEditorSelectedNodeClassName, akEditorSwoopCubicBezier, akLayoutGutterOffset, getSelectionStyles, gridMediumMaxWidth, SelectionStyle } from '@atlaskit/editor-shared-styles';
|
|
9
9
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
10
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
11
11
|
export { LAYOUT_COLUMN_PADDING, LAYOUT_SECTION_MARGIN };
|
|
@@ -41,15 +41,25 @@ var columnSeparatorStyles = function columnSeparatorStyles(viewMode) {
|
|
|
41
41
|
};
|
|
42
42
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
43
43
|
var rowSeparatorStyles = function rowSeparatorStyles(viewMode) {
|
|
44
|
-
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid\n\t\t\t", ";\n\t\tposition: absolute;\n\t\twidth: calc(100% - 32px);\n\t\tmargin-top: -13px;\n\t}\n"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
|
|
44
|
+
return css(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n\t[data-layout-content]::before {\n\t\tcontent: '';\n\t\tborder-top: ", "px solid\n\t\t\t", ";\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"])), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)");
|
|
45
|
+
};
|
|
46
|
+
var layoutWithSeparatorBorderResponsiveStyles = function layoutWithSeparatorBorderResponsiveStyles(breakpoint, viewMode
|
|
47
|
+
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
48
|
+
) {
|
|
49
|
+
return css(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\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", " {\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t}\n"])), akEditorSelectedNodeClassName, fg('platform_editor_advanced_layouts_breakout_resizing') ? "@container editor-area (max-width:".concat(breakpoint, "px)") : "@media screen and (max-width: ".concat(gridMediumMaxWidth - 1, "px)"), rowSeparatorStyles(viewMode));
|
|
45
50
|
};
|
|
46
51
|
|
|
47
52
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
48
53
|
var layoutWithSeparatorBorderStyles = function layoutWithSeparatorBorderStyles(viewMode) {
|
|
49
|
-
return css(
|
|
54
|
+
return css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n\t&.selected [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\n\t\t", " {\n\t\tbackground-color: ", ";\n\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\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)\n\t\t", " {\n\t\tbox-shadow: 0 0 0 ", "px\n\t\t\t", ";\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"])), columnSeparatorStyles(viewMode), fg('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", "var(--ds-background-danger, ".concat(akEditorDeleteBackground, ")"), viewMode === 'view' ? 0 : akEditorSelectedBorderSize, akEditorDeleteBorder, columnSeparatorStyles(viewMode), akEditorSelectedNodeClassName, fg('platform_editor_advanced_layouts_breakout_resizing') ? "[data-layout-section]" : "", viewMode === 'view' ? 0 : akEditorSelectedBorderSize, "var(--ds-border-selected, #0C66E4)", "var(--ds-background-selected, #E9F2FF)", getSelectionStyles([SelectionStyle.Blanket]), columnSeparatorStyles(viewMode));
|
|
55
|
+
};
|
|
56
|
+
var layoutResponsiveStyles = function layoutResponsiveStyles(viewMode) {
|
|
57
|
+
return (// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression
|
|
58
|
+
css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n\t\t/* chosen breakpoints in container queries are to make sure layout responsiveness in editor aligns with renderer */\n\t\t/* not resized layout in full-width editor */\n\t\t.fabric-editor--full-width-mode .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:854px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* not resized layout in fixed-width editor */\n\t\t.ak-editor-content-area:not(.fabric-editor--full-width-mode) .ProseMirror {\n\t\t\t> .layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:918px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\n\t\t/* resized layout in full/fixed-width editor */\n\t\t.ProseMirror .fabric-editor-breakout-mark {\n\t\t\t.layoutSectionView-content-wrap {\n\t\t\t\t[data-layout-section] {\n\t\t\t\t\t@container editor-area (max-width:950px) {\n\t\t\t\t\t\tflex-direction: column;\n\t\t\t\t\t}\n\t\t\t\t}\n\n\t\t\t\t", "\n\t\t\t}\n\t\t}\n\t"])), layoutWithSeparatorBorderResponsiveStyles(854, viewMode), layoutWithSeparatorBorderResponsiveStyles(918, viewMode), layoutWithSeparatorBorderResponsiveStyles(950, viewMode))
|
|
59
|
+
);
|
|
50
60
|
};
|
|
51
61
|
|
|
52
62
|
// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- Needs manual remediation
|
|
53
63
|
export var layoutStyles = function layoutStyles(viewMode) {
|
|
54
|
-
return css(
|
|
64
|
+
return css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n\t.ProseMirror {\n\t\t", "\n\t\t[data-layout-section] {\n\t\t\t// TODO: Migrate away from gridSize\n\t\t\t// Recommendation: Replace directly with 7px\n\t\t\tmargin: ", " -", "px 0;\n\t\t\ttransition: border-color 0.3s ", ";\n\t\t\tcursor: ", ";\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\t", "\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 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 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.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)", akLayoutGutterOffset, akEditorSwoopCubicBezier, viewMode === 'view' ? 'default' : 'pointer', fg('platform_editor_drag_and_drop_target_v2') ? 'position: relative;' : '', viewMode === 'view' || editorExperiment('advanced_layouts', true) ? 0 : akEditorSelectedBorderSize, "var(--ds-border, #091E4224)", LAYOUT_COLUMN_PADDING, LAYOUT_COLUMN_PADDING + (editorExperiment('nested-dnd', true) ? 8 : 0), firstNodeWithNotMarginTop(), layoutColumnStyles(), editorExperiment('advanced_layouts', true) ? layoutWithSeparatorBorderStyles(viewMode) : layoutBorderStyles(viewMode), editorExperiment('advanced_layouts', true) && layoutResponsiveStyles(viewMode), TableCssClassName.TABLE_CONTAINER, tableMarginFullWidthMode, editorExperiment('nested-dnd', true) && !fg('platform_editor_advanced_layouts_breakout_resizing') && ".ak-editor-content-area.appearance-full-page .ProseMirror [data-layout-section] {\n\t\t\t\tmargin: ".concat("var(--ds-space-100, 8px)", " -", akLayoutGutterOffset + 8, "px 0;\n\t\t\t\t}"));
|
|
55
65
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export var name = "@atlaskit/editor-core";
|
|
2
|
-
export var version = "202.3.
|
|
2
|
+
export var version = "202.3.4";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-core",
|
|
3
|
-
"version": "202.3.
|
|
3
|
+
"version": "202.3.4",
|
|
4
4
|
"description": "A package contains Atlassian editor core functionality",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@atlaskit/editor-common": "^95.6.0",
|
|
47
47
|
"@atlaskit/editor-json-transformer": "^8.21.0",
|
|
48
48
|
"@atlaskit/editor-plugin-quick-insert": "1.7.1",
|
|
49
|
-
"@atlaskit/editor-plugins": "^5.
|
|
49
|
+
"@atlaskit/editor-plugins": "^5.7.0",
|
|
50
50
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
51
51
|
"@atlaskit/editor-shared-styles": "^3.2.0",
|
|
52
52
|
"@atlaskit/emoji": "^67.11.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@atlaskit/mention": "^23.4.0",
|
|
56
56
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
57
57
|
"@atlaskit/task-decision": "^17.11.0",
|
|
58
|
-
"@atlaskit/tmp-editor-statsig": "^2.
|
|
58
|
+
"@atlaskit/tmp-editor-statsig": "^2.21.0",
|
|
59
59
|
"@atlaskit/tokens": "^2.3.0",
|
|
60
60
|
"@atlaskit/tooltip": "^18.9.0",
|
|
61
61
|
"@atlaskit/width-detector": "^4.3.0",
|
|
@@ -82,9 +82,9 @@
|
|
|
82
82
|
"@af/editor-libra": "*",
|
|
83
83
|
"@af/visual-regression": "*",
|
|
84
84
|
"@atlaskit/adf-utils": "^19.13.0",
|
|
85
|
-
"@atlaskit/analytics-listeners": "^8.
|
|
86
|
-
"@atlaskit/collab-provider": "10.1.
|
|
87
|
-
"@atlaskit/editor-plugin-annotation": "1.25.
|
|
85
|
+
"@atlaskit/analytics-listeners": "^8.13.0",
|
|
86
|
+
"@atlaskit/collab-provider": "10.1.2",
|
|
87
|
+
"@atlaskit/editor-plugin-annotation": "1.25.2",
|
|
88
88
|
"@atlaskit/editor-plugin-card": "^4.4.0",
|
|
89
89
|
"@atlaskit/editor-plugin-list": "^3.9.0",
|
|
90
90
|
"@atlaskit/editor-plugin-paste": "^2.0.0",
|
|
@@ -96,7 +96,7 @@
|
|
|
96
96
|
"@atlaskit/modal-dialog": "^12.17.0",
|
|
97
97
|
"@atlaskit/primitives": "^13.2.0",
|
|
98
98
|
"@atlaskit/renderer": "^112.6.0",
|
|
99
|
-
"@atlaskit/smart-card": "^
|
|
99
|
+
"@atlaskit/smart-card": "^31.0.0",
|
|
100
100
|
"@atlaskit/synchrony-test-helpers": "^3.0.0",
|
|
101
101
|
"@atlaskit/toggle": "^13.4.0",
|
|
102
102
|
"@atlaskit/util-data-test": "^17.13.0",
|
|
@@ -352,6 +352,10 @@
|
|
|
352
352
|
"platform_editor_elements_dnd_ed_23674": {
|
|
353
353
|
"type": "boolean",
|
|
354
354
|
"referenceOnly": true
|
|
355
|
+
},
|
|
356
|
+
"platform_inline_node_as_valid_annotation_selection": {
|
|
357
|
+
"type": "boolean",
|
|
358
|
+
"referenceOnly": true
|
|
355
359
|
}
|
|
356
360
|
},
|
|
357
361
|
"stricter": {
|