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