@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
|
@@ -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,
|
|
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:
|
|
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
|
-
|
|
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 {
|
|
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.
|
|
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;
|