@atlaskit/editor-core 208.3.2 → 208.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 +19 -0
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +334 -7
- package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js +2 -189
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +329 -8
- package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js +2 -180
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +335 -8
- package/dist/esm/ui/Appearance/FullPage/StyledComponents.js +2 -187
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts +0 -7
- package/dist/types-ts4.5/ui/Appearance/FullPage/StyledComponents.d.ts +0 -7
- package/package.json +6 -13
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-core
|
|
2
2
|
|
|
3
|
+
## 208.3.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#173360](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/173360)
|
|
8
|
+
[`e424271b7afc6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e424271b7afc6) -
|
|
9
|
+
[ED-28169] Refactor FullPageContentArea dynamic styles to static emotion
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 208.3.3
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#176094](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/176094)
|
|
17
|
+
[`09e338a3d7dab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/09e338a3d7dab) -
|
|
18
|
+
[ED-28357] move find&replace work from behind feature gates to the new experiment
|
|
19
|
+
platform_editor_find_and_replace_improvements
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 208.3.2
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -6,15 +6,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports.ScrollContainer = exports.FullPageContentArea = exports.EDITOR_CONTAINER = exports.CONTENT_AREA_TEST_ID = void 0;
|
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
10
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
10
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
11
12
|
var _react2 = require("@emotion/react");
|
|
12
13
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
14
|
var _reactIntlNext = require("react-intl-next");
|
|
15
|
+
var _adfSchema = require("@atlaskit/adf-schema");
|
|
14
16
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
17
|
+
var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
|
|
18
|
+
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
15
19
|
var _scrollbar = require("@atlaskit/editor-shared-styles/scrollbar");
|
|
16
20
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
17
21
|
var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
|
|
22
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
23
|
+
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
18
24
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
19
25
|
var _ClickAreaBlock = _interopRequireDefault(require("../../Addon/ClickAreaBlock"));
|
|
20
26
|
var _contentComponentWrapper = require("../../Addon/ClickAreaBlock/contentComponentWrapper");
|
|
@@ -34,6 +40,317 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
|
|
|
34
40
|
// Ignored via go/ees005
|
|
35
41
|
// eslint-disable-next-line import/no-named-as-default
|
|
36
42
|
|
|
43
|
+
var akEditorFullWidthLayoutWidth = 1800;
|
|
44
|
+
var akEditorSwoopCubicBezier = "cubic-bezier(0.15, 1, 0.3, 1)";
|
|
45
|
+
var tableMarginFullWidthMode = 2;
|
|
46
|
+
var akLayoutGutterOffset = 12;
|
|
47
|
+
var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
|
|
48
|
+
var AK_NESTED_DND_GUTTER_OFFSET = 8;
|
|
49
|
+
var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT = "var(--ds-space-500, 40px)";
|
|
50
|
+
var FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE = '2.188rem';
|
|
51
|
+
var getTotalPadding = function getTotalPadding() {
|
|
52
|
+
return (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
// old styles - to be deleted when cleaning up experiment `platform_editor_core_static_emotion_non_central`
|
|
56
|
+
var editorContentAreaStyle = function editorContentAreaStyle(_ref) {
|
|
57
|
+
var layoutMaxWidth = _ref.layoutMaxWidth,
|
|
58
|
+
fullWidthMode = _ref.fullWidthMode,
|
|
59
|
+
isEditorToolbarHidden = _ref.isEditorToolbarHidden;
|
|
60
|
+
return [editorContentArea, editorContentAreaProsemirrorStyle, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
|
|
61
|
+
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
62
|
+
(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle()].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') ? [] : [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
|
|
63
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
64
|
+
contentAreaReducedHeaderSpace, isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
|
|
65
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
66
|
+
contentAreaReservedPrimaryToolbarSpace]));
|
|
67
|
+
};
|
|
68
|
+
var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(layoutMaxWidth) {
|
|
69
|
+
return (0, _react2.css)({
|
|
70
|
+
// this restricts max width
|
|
71
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
72
|
+
maxWidth: "".concat(layoutMaxWidth + getTotalPadding(), "px")
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
|
|
76
|
+
/* Prevent horizontal scroll on page in full width mode */
|
|
77
|
+
var editorContentAreaContainerStyleExcludeCodeBlock = function editorContentAreaContainerStyleExcludeCodeBlock() {
|
|
78
|
+
return (0, _react2.css)({
|
|
79
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
80
|
+
'.fabric-editor--full-width-mode': {
|
|
81
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
82
|
+
'.extension-container, .multiBodiedExtension--container': {
|
|
83
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
84
|
+
maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
|
|
85
|
+
},
|
|
86
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
87
|
+
'.extension-container.inline': {
|
|
88
|
+
maxWidth: '100%'
|
|
89
|
+
},
|
|
90
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
91
|
+
'td .extension-container.inline': {
|
|
92
|
+
maxWidth: 'inherit'
|
|
93
|
+
},
|
|
94
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
95
|
+
'[data-layout-section]': {
|
|
96
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
97
|
+
maxWidth: "calc(100% + ".concat((akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2, "px)")
|
|
98
|
+
}
|
|
99
|
+
}
|
|
100
|
+
});
|
|
101
|
+
};
|
|
102
|
+
|
|
103
|
+
/* Prevent horizontal scroll on page in full width mode */
|
|
104
|
+
var editorContentAreaContainerStyle = function editorContentAreaContainerStyle() {
|
|
105
|
+
return (0, _react2.css)({
|
|
106
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
107
|
+
'.fabric-editor--full-width-mode': {
|
|
108
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
109
|
+
'.code-block, .extension-container, .multiBodiedExtension--container': {
|
|
110
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
111
|
+
maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
|
|
112
|
+
},
|
|
113
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
114
|
+
'.extension-container.inline': {
|
|
115
|
+
maxWidth: '100%'
|
|
116
|
+
},
|
|
117
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
118
|
+
'td .extension-container.inline': {
|
|
119
|
+
maxWidth: 'inherit'
|
|
120
|
+
},
|
|
121
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
122
|
+
'[data-layout-section]': {
|
|
123
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
124
|
+
maxWidth: "calc(100% + ".concat((akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2, "px)")
|
|
125
|
+
}
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
};
|
|
129
|
+
var editorContentArea = (0, _react2.css)({
|
|
130
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
131
|
+
lineHeight: '24px',
|
|
132
|
+
paddingTop: "var(--ds-space-600, 48px)",
|
|
133
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
134
|
+
'.ak-editor-content-area-no-toolbar &': {
|
|
135
|
+
// When the toolbar is hidden, we don't want content to jump up
|
|
136
|
+
// the extra 1px is to account for the border on the toolbar
|
|
137
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
138
|
+
paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(), " + 1px)")
|
|
139
|
+
},
|
|
140
|
+
paddingBottom: "var(--ds-space-600, 48px)",
|
|
141
|
+
height: 'calc( 100% - 105px )',
|
|
142
|
+
width: '100%',
|
|
143
|
+
margin: 'auto',
|
|
144
|
+
flexDirection: 'column',
|
|
145
|
+
flexGrow: 1,
|
|
146
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
147
|
+
maxWidth: "".concat(akEditorFullWidthLayoutWidth + getTotalPadding(), "px"),
|
|
148
|
+
transition: "max-width ".concat(SWOOP_ANIMATION)
|
|
149
|
+
},
|
|
150
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
151
|
+
_commonStyles.tableFullPageEditorStyles);
|
|
152
|
+
var editorContentAreaProsemirrorStyle = (0, _react2.css)({
|
|
153
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
154
|
+
'& .ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
155
|
+
flexGrow: 1,
|
|
156
|
+
boxSizing: 'border-box',
|
|
157
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
158
|
+
'& > *': {
|
|
159
|
+
clear: 'both'
|
|
160
|
+
}
|
|
161
|
+
}, "> p, > ul, > ol:not(".concat(_adfSchema.taskListSelector, "):not(").concat(_adfSchema.decisionListSelector, "), > h1, > h2, > h3, > h4, > h5, > h6"), {
|
|
162
|
+
clear: 'none'
|
|
163
|
+
}), '> p:last-child', {
|
|
164
|
+
marginBottom: "var(--ds-space-300, 24px)"
|
|
165
|
+
})
|
|
166
|
+
});
|
|
167
|
+
var fullWidthModeBreakoutBlockTableStyle = (0, _react2.css)({
|
|
168
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
169
|
+
'.fabric-editor--full-width-mode': {
|
|
170
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
171
|
+
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
172
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
173
|
+
width: '100% !important'
|
|
174
|
+
},
|
|
175
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
176
|
+
'.fabric-editor-breakout-mark': {
|
|
177
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
178
|
+
marginLeft: 'unset !important',
|
|
179
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
180
|
+
transform: 'none !important'
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
var fullWidthNonChromelessBreakoutBlockTableStyle = (0, _react2.css)({
|
|
185
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
186
|
+
'.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
|
|
187
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
188
|
+
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
189
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
190
|
+
width: '100% !important'
|
|
191
|
+
},
|
|
192
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
193
|
+
'.fabric-editor-breakout-mark': {
|
|
194
|
+
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
195
|
+
marginLeft: 'unset !important',
|
|
196
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
197
|
+
transform: 'none !important'
|
|
198
|
+
}
|
|
199
|
+
}
|
|
200
|
+
});
|
|
201
|
+
|
|
202
|
+
// An additional spacing applied at the top of the content area reserving space when the primary toolbar
|
|
203
|
+
// is hidden – this avoids layout shift when the toolbar is toggled under the editor controls feature
|
|
204
|
+
var contentAreaReservedPrimaryToolbarSpace = (0, _react2.css)({
|
|
205
|
+
// extra 1px to account for the bottom border on the toolbar
|
|
206
|
+
marginTop: "calc(".concat("var(--ds-space-500, 40px)", " + 1px)")
|
|
207
|
+
});
|
|
208
|
+
|
|
209
|
+
// A reduced top spacing applied to the content area to compensate for the reserved space at the top
|
|
210
|
+
// of the page when the primary toolbar is hidden under the editor controls feature
|
|
211
|
+
var contentAreaReducedHeaderSpace = (0, _react2.css)({
|
|
212
|
+
paddingTop: "var(--ds-space-400, 32px)"
|
|
213
|
+
});
|
|
214
|
+
var editorContentGutterStyle = function editorContentGutterStyle() {
|
|
215
|
+
return (0, _react2.css)({
|
|
216
|
+
boxSizing: 'border-box',
|
|
217
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
218
|
+
padding: "0 ".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px")
|
|
219
|
+
});
|
|
220
|
+
};
|
|
221
|
+
|
|
222
|
+
// new styles
|
|
223
|
+
var editorContentAreaNoToolbarLivePageJumpMitigation = (0, _react2.css)({
|
|
224
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
225
|
+
'.ak-editor-content-area-no-toolbar &': {
|
|
226
|
+
paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE, " + 1px)")
|
|
227
|
+
}
|
|
228
|
+
});
|
|
229
|
+
var editorContentAreaNoToolbarControls = (0, _react2.css)({
|
|
230
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
231
|
+
'.ak-editor-content-area-no-toolbar &': {
|
|
232
|
+
paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, " + 1px)")
|
|
233
|
+
}
|
|
234
|
+
});
|
|
235
|
+
var editorContentAreaNew = (0, _react2.css)({
|
|
236
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
237
|
+
lineHeight: '24px',
|
|
238
|
+
paddingTop: "var(--ds-space-600, 48px)",
|
|
239
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
240
|
+
'.ak-editor-content-area-no-toolbar &': {
|
|
241
|
+
// When the toolbar is hidden, we don't want content to jump up
|
|
242
|
+
// the extra 1px is to account for the border on the toolbar
|
|
243
|
+
paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, " + 1px)")
|
|
244
|
+
},
|
|
245
|
+
paddingBottom: "var(--ds-space-600, 48px)",
|
|
246
|
+
height: 'calc( 100% - 105px )',
|
|
247
|
+
width: '100%',
|
|
248
|
+
margin: 'auto',
|
|
249
|
+
flexDirection: 'column',
|
|
250
|
+
flexGrow: 1,
|
|
251
|
+
maxWidth: 'var(--ak-editor-content-area-max-width)',
|
|
252
|
+
transition: "max-width ".concat(SWOOP_ANIMATION)
|
|
253
|
+
});
|
|
254
|
+
var tableFullPageEditorStylesNew = (0, _react2.css)({
|
|
255
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
256
|
+
'.ProseMirror .pm-table-wrapper > table': {
|
|
257
|
+
marginLeft: 0,
|
|
258
|
+
/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */
|
|
259
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
260
|
+
marginRight: '-1px',
|
|
261
|
+
width: '100%'
|
|
262
|
+
}
|
|
263
|
+
});
|
|
264
|
+
var editorContentAreaContainerNestedDndStyle = (0, _react2.css)({
|
|
265
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
266
|
+
'.fabric-editor--full-width-mode': {
|
|
267
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
268
|
+
'[data-layout-section]': {
|
|
269
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
270
|
+
maxWidth: "calc(100% + ".concat((akLayoutGutterOffset + AK_NESTED_DND_GUTTER_OFFSET) * 2, "px)")
|
|
271
|
+
}
|
|
272
|
+
}
|
|
273
|
+
});
|
|
274
|
+
|
|
275
|
+
/* Prevent horizontal scroll on page in full width mode */
|
|
276
|
+
var editorContentAreaContainerStyleExcludeCodeBlockNew = (0, _react2.css)({
|
|
277
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
278
|
+
'.fabric-editor--full-width-mode': {
|
|
279
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
280
|
+
'.extension-container, .multiBodiedExtension--container': {
|
|
281
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
282
|
+
maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
|
|
283
|
+
},
|
|
284
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
285
|
+
'.extension-container.inline': {
|
|
286
|
+
maxWidth: '100%'
|
|
287
|
+
},
|
|
288
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
289
|
+
'td .extension-container.inline': {
|
|
290
|
+
maxWidth: 'inherit'
|
|
291
|
+
},
|
|
292
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
293
|
+
'[data-layout-section]': {
|
|
294
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
295
|
+
maxWidth: "calc(100% + ".concat(akLayoutGutterOffset * 2, "px)")
|
|
296
|
+
}
|
|
297
|
+
}
|
|
298
|
+
});
|
|
299
|
+
|
|
300
|
+
/* Prevent horizontal scroll on page in full width mode */
|
|
301
|
+
var editorContentAreaContainerStyleNew = (0, _react2.css)({
|
|
302
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
303
|
+
'.fabric-editor--full-width-mode': {
|
|
304
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
305
|
+
'.code-block, .extension-container, .multiBodiedExtension--container': {
|
|
306
|
+
maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
|
|
307
|
+
},
|
|
308
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
309
|
+
'.extension-container.inline': {
|
|
310
|
+
maxWidth: '100%'
|
|
311
|
+
},
|
|
312
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
313
|
+
'td .extension-container.inline': {
|
|
314
|
+
maxWidth: 'inherit'
|
|
315
|
+
},
|
|
316
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
317
|
+
'[data-layout-section]': {
|
|
318
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
319
|
+
maxWidth: "calc(100% + ".concat(akLayoutGutterOffset * 2, "px)")
|
|
320
|
+
}
|
|
321
|
+
}
|
|
322
|
+
});
|
|
323
|
+
var editorContentGutterStyleFG = (0, _react2.css)({
|
|
324
|
+
padding: '0 72px'
|
|
325
|
+
});
|
|
326
|
+
var editorContentGutterStyles = (0, _react2.css)({
|
|
327
|
+
boxSizing: 'border-box',
|
|
328
|
+
padding: '0 52px'
|
|
329
|
+
});
|
|
330
|
+
var contentAreaNew = (0, _react2.css)({
|
|
331
|
+
display: 'flex',
|
|
332
|
+
flexDirection: 'row',
|
|
333
|
+
height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, ")"),
|
|
334
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
335
|
+
'&.ak-editor-content-area-no-toolbar': {
|
|
336
|
+
// The editor toolbar height is 1px off (from the border) -- so we need to add 1px to the height
|
|
337
|
+
// to match the toolbar height
|
|
338
|
+
height: "calc(100% + 1px)"
|
|
339
|
+
},
|
|
340
|
+
boxSizing: 'border-box',
|
|
341
|
+
margin: 0,
|
|
342
|
+
padding: 0,
|
|
343
|
+
transition: "padding 0ms ".concat(akEditorSwoopCubicBezier)
|
|
344
|
+
});
|
|
345
|
+
var contentAreaHeightLivePageJumpMitigation = (0, _react2.css)({
|
|
346
|
+
height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT_LIVE_PAGE, ")")
|
|
347
|
+
});
|
|
348
|
+
var contentAreaHeightControls = (0, _react2.css)({
|
|
349
|
+
height: "calc(100% - ".concat(FULL_PAGE_EDITOR_TOOLBAR_HEIGHT, ")")
|
|
350
|
+
});
|
|
351
|
+
var contentAreaHeightNoToolbar = (0, _react2.css)({
|
|
352
|
+
height: '100%'
|
|
353
|
+
});
|
|
37
354
|
var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
38
355
|
var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
|
|
39
356
|
var scrollStyles = (0, _react2.css)({
|
|
@@ -87,13 +404,13 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
87
404
|
return (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
|
|
88
405
|
};
|
|
89
406
|
return (0, _react2.jsx)("div", {
|
|
90
|
-
css: [
|
|
407
|
+
css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [contentAreaNew, (0, _platformFeatureFlags.fg)('live_pages_content_jump_mitigation') && contentAreaHeightLivePageJumpMitigation, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
|
|
408
|
+
exposure: true
|
|
409
|
+
}) && contentAreaHeightControls, props.isEditorToolbarHidden && contentAreaHeightNoToolbar] : [
|
|
91
410
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
92
411
|
_StyledComponents.contentArea,
|
|
93
412
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
94
|
-
props.isEditorToolbarHidden &&
|
|
95
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
96
|
-
_StyledComponents.contentAreaHeightNoToolbar],
|
|
413
|
+
props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
|
|
97
414
|
"data-testid": CONTENT_AREA_TEST_ID,
|
|
98
415
|
ref: containerRef
|
|
99
416
|
}, (0, _react2.jsx)("div", {
|
|
@@ -115,11 +432,18 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
115
432
|
editorView: props.editorView,
|
|
116
433
|
editorDisabled: props.disabled
|
|
117
434
|
}, (0, _react2.jsx)("div", {
|
|
118
|
-
css: (0,
|
|
435
|
+
css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentAreaNew, editorContentAreaProsemirrorStyle, tableFullPageEditorStylesNew, (0, _platformFeatureFlags.fg)('live_pages_content_jump_mitigation') && editorContentAreaNoToolbarLivePageJumpMitigation, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1', {
|
|
436
|
+
exposure: true
|
|
437
|
+
}) && editorContentAreaNoToolbarControls, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle,
|
|
438
|
+
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
439
|
+
(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace] : (0, _toConsumableArray2.default)(editorContentAreaStyle({
|
|
119
440
|
fullWidthMode: fullWidthMode,
|
|
120
441
|
layoutMaxWidth: theme.layoutMaxWidth,
|
|
121
442
|
isEditorToolbarHidden: props.isEditorToolbarHidden
|
|
122
|
-
}))
|
|
443
|
+
})),
|
|
444
|
+
style: {
|
|
445
|
+
'--ak-editor-content-area-max-width': !fullWidthMode ? "".concat(theme.layoutMaxWidth + getTotalPadding(), "px") : "".concat(akEditorFullWidthLayoutWidth + getTotalPadding(), "px")
|
|
446
|
+
}
|
|
123
447
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
124
448
|
,
|
|
125
449
|
className: "ak-editor-content-area-region",
|
|
@@ -129,8 +453,11 @@ var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
|
129
453
|
"aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
|
|
130
454
|
ref: contentAreaRef
|
|
131
455
|
}, (0, _react2.jsx)("div", {
|
|
456
|
+
css: (0, _expValEquals.expValEquals)('platform_editor_core_static_emotion_non_central', 'isEnabled', true) ? [editorContentGutterStyles,
|
|
457
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
458
|
+
(0, _platformFeatureFlags.fg)('platform_editor_controls_increase_full_page_gutter') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && editorContentGutterStyleFG] : [
|
|
132
459
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
133
|
-
|
|
460
|
+
editorContentGutterStyle()]
|
|
134
461
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
135
462
|
,
|
|
136
463
|
className: (0, _platformFeatureFlags.fg)('platform_editor_no_cursor_on_live_doc_init') ? (0, _classnames.default)('ak-editor-content-area', 'appearance-full-page', {
|
|
@@ -1,29 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports.sidebarArea = exports.fullPageEditorWrapper = exports.
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
6
|
+
exports.sidebarArea = exports.fullPageEditorWrapper = exports.editorContentAreaHideContainer = exports.contentAreaWrapper = exports.contentArea = void 0;
|
|
10
7
|
var _react = require("@emotion/react");
|
|
11
|
-
var _adfSchema = require("@atlaskit/adf-schema");
|
|
12
|
-
var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
|
|
13
|
-
var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
|
|
14
8
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
15
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
|
-
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
17
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
18
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
19
10
|
|
|
20
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
21
|
-
var SWOOP_ANIMATION = "0.5s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier);
|
|
22
|
-
var getTotalPadding = function getTotalPadding() {
|
|
23
|
-
return (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
|
|
24
|
-
};
|
|
25
|
-
var AK_NESTED_DND_GUTTER_OFFSET = 8;
|
|
26
|
-
|
|
27
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
28
12
|
var fullPageEditorWrapper = exports.fullPageEditorWrapper = (0, _react.css)({
|
|
29
13
|
minWidth: '340px',
|
|
@@ -33,6 +17,7 @@ var fullPageEditorWrapper = exports.fullPageEditorWrapper = (0, _react.css)({
|
|
|
33
17
|
boxSizing: 'border-box'
|
|
34
18
|
});
|
|
35
19
|
|
|
20
|
+
// delete when cleaning up experiment `platform_editor_core_static_emotion_non_central`
|
|
36
21
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
37
22
|
var contentArea = exports.contentArea = function contentArea() {
|
|
38
23
|
var editorToolbarHeight = (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)();
|
|
@@ -68,11 +53,6 @@ var contentAreaWrapper = exports.contentAreaWrapper = (0, _react.css)({
|
|
|
68
53
|
contain: 'layout style inline-size'
|
|
69
54
|
});
|
|
70
55
|
|
|
71
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
72
|
-
var contentAreaHeightNoToolbar = exports.contentAreaHeightNoToolbar = (0, _react.css)({
|
|
73
|
-
height: '100%'
|
|
74
|
-
});
|
|
75
|
-
|
|
76
56
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
77
57
|
var sidebarArea = exports.sidebarArea = (0, _react.css)({
|
|
78
58
|
height: '100%',
|
|
@@ -105,171 +85,4 @@ var editorContentAreaHideContainer = exports.editorContentAreaHideContainer = (0
|
|
|
105
85
|
display: 'none'
|
|
106
86
|
}
|
|
107
87
|
}
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
/* Prevent horizontal scroll on page in full width mode */
|
|
111
|
-
var editorContentAreaContainerStyle = function editorContentAreaContainerStyle() {
|
|
112
|
-
return (0, _react.css)({
|
|
113
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
114
|
-
'.fabric-editor--full-width-mode': {
|
|
115
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
116
|
-
'.code-block, .extension-container, .multiBodiedExtension--container': {
|
|
117
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
118
|
-
maxWidth: "calc(100% - ".concat(_consts.tableMarginFullWidthMode * 2, "px)")
|
|
119
|
-
},
|
|
120
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
121
|
-
'.extension-container.inline': {
|
|
122
|
-
maxWidth: '100%'
|
|
123
|
-
},
|
|
124
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
125
|
-
'td .extension-container.inline': {
|
|
126
|
-
maxWidth: 'inherit'
|
|
127
|
-
},
|
|
128
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
129
|
-
'[data-layout-section]': {
|
|
130
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
131
|
-
maxWidth: "calc(100% + ".concat((_editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2, "px)")
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
});
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
/* Prevent horizontal scroll on page in full width mode */
|
|
138
|
-
var editorContentAreaContainerStyleExcludeCodeBlock = function editorContentAreaContainerStyleExcludeCodeBlock() {
|
|
139
|
-
return (0, _react.css)({
|
|
140
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
141
|
-
'.fabric-editor--full-width-mode': {
|
|
142
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
143
|
-
'.extension-container, .multiBodiedExtension--container': {
|
|
144
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
145
|
-
maxWidth: "calc(100% - ".concat(_consts.tableMarginFullWidthMode * 2, "px)")
|
|
146
|
-
},
|
|
147
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
148
|
-
'.extension-container.inline': {
|
|
149
|
-
maxWidth: '100%'
|
|
150
|
-
},
|
|
151
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
152
|
-
'td .extension-container.inline': {
|
|
153
|
-
maxWidth: 'inherit'
|
|
154
|
-
},
|
|
155
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
156
|
-
'[data-layout-section]': {
|
|
157
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
158
|
-
maxWidth: "calc(100% + ".concat((_editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2, "px)")
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
});
|
|
162
|
-
};
|
|
163
|
-
var editorContentAreaStyle = exports.editorContentAreaStyle = function editorContentAreaStyle(_ref) {
|
|
164
|
-
var layoutMaxWidth = _ref.layoutMaxWidth,
|
|
165
|
-
fullWidthMode = _ref.fullWidthMode,
|
|
166
|
-
isEditorToolbarHidden = _ref.isEditorToolbarHidden;
|
|
167
|
-
return [editorContentArea, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
|
|
168
|
-
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
169
|
-
(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle()].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') ? [] : [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
|
|
170
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
171
|
-
contentAreaReducedHeaderSpace, isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
|
|
172
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
173
|
-
contentAreaReservedPrimaryToolbarSpace]));
|
|
174
|
-
};
|
|
175
|
-
var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(layoutMaxWidth) {
|
|
176
|
-
return (0, _react.css)({
|
|
177
|
-
// this restricts max width
|
|
178
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
179
|
-
maxWidth: "".concat(layoutMaxWidth + getTotalPadding(), "px")
|
|
180
|
-
});
|
|
181
|
-
};
|
|
182
|
-
var fullWidthModeBreakoutBlockTableStyle = (0, _react.css)({
|
|
183
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
184
|
-
'.fabric-editor--full-width-mode': {
|
|
185
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
186
|
-
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
187
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
188
|
-
width: '100% !important'
|
|
189
|
-
},
|
|
190
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
191
|
-
'.fabric-editor-breakout-mark': {
|
|
192
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
193
|
-
marginLeft: 'unset !important',
|
|
194
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
195
|
-
transform: 'none !important'
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
});
|
|
199
|
-
var fullWidthNonChromelessBreakoutBlockTableStyle = (0, _react.css)({
|
|
200
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
201
|
-
'.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
|
|
202
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
203
|
-
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
204
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
205
|
-
width: '100% !important'
|
|
206
|
-
},
|
|
207
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
208
|
-
'.fabric-editor-breakout-mark': {
|
|
209
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
210
|
-
marginLeft: 'unset !important',
|
|
211
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
212
|
-
transform: 'none !important'
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
});
|
|
216
|
-
var editorContentArea = (0, _react.css)({
|
|
217
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
218
|
-
lineHeight: '24px',
|
|
219
|
-
paddingTop: "var(--ds-space-600, 48px)",
|
|
220
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
221
|
-
'.ak-editor-content-area-no-toolbar &': {
|
|
222
|
-
// When the toolbar is hidden, we don't want content to jump up
|
|
223
|
-
// the extra 1px is to account for the border on the toolbar
|
|
224
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
225
|
-
paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(), " + 1px)")
|
|
226
|
-
},
|
|
227
|
-
paddingBottom: "var(--ds-space-600, 48px)",
|
|
228
|
-
height: 'calc( 100% - 105px )',
|
|
229
|
-
width: '100%',
|
|
230
|
-
margin: 'auto',
|
|
231
|
-
flexDirection: 'column',
|
|
232
|
-
flexGrow: 1,
|
|
233
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
234
|
-
maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth + getTotalPadding(), "px"),
|
|
235
|
-
transition: "max-width ".concat(SWOOP_ANIMATION),
|
|
236
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
237
|
-
'& .ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
238
|
-
flexGrow: 1,
|
|
239
|
-
boxSizing: 'border-box',
|
|
240
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
241
|
-
'& > *': {
|
|
242
|
-
clear: 'both'
|
|
243
|
-
}
|
|
244
|
-
}, "> p, > ul, > ol:not(".concat(_adfSchema.taskListSelector, "):not(").concat(_adfSchema.decisionListSelector, "), > h1, > h2, > h3, > h4, > h5, > h6"), {
|
|
245
|
-
clear: 'none'
|
|
246
|
-
}), '> p:last-child', {
|
|
247
|
-
marginBottom: "var(--ds-space-300, 24px)"
|
|
248
|
-
})
|
|
249
|
-
},
|
|
250
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
251
|
-
_commonStyles.tableFullPageEditorStyles);
|
|
252
|
-
|
|
253
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
254
|
-
var editorContentGutterStyle = exports.editorContentGutterStyle = function editorContentGutterStyle() {
|
|
255
|
-
return (0, _react.css)({
|
|
256
|
-
boxSizing: 'border-box',
|
|
257
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
258
|
-
padding: "0 ".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px")
|
|
259
|
-
});
|
|
260
|
-
};
|
|
261
|
-
|
|
262
|
-
// An additional spacing applied at the top of the content area reserving space when the primary toolbar
|
|
263
|
-
// is hidden – this avoids layout shift when the toolbar is toggled under the editor controls feature
|
|
264
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
265
|
-
var contentAreaReservedPrimaryToolbarSpace = (0, _react.css)({
|
|
266
|
-
// extra 1px to account for the bottom border on the toolbar
|
|
267
|
-
marginTop: "calc(".concat("var(--ds-space-500, 40px)", " + 1px)")
|
|
268
|
-
});
|
|
269
|
-
|
|
270
|
-
// A reduced top spacing applied to the content area to compensate for the reserved space at the top
|
|
271
|
-
// of the page when the primary toolbar is hidden under the editor controls feature
|
|
272
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
273
|
-
var contentAreaReducedHeaderSpace = (0, _react.css)({
|
|
274
|
-
paddingTop: "var(--ds-space-400, 32px)"
|
|
275
88
|
});
|