@atlaskit/editor-core 221.2.1 → 221.3.1
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 +26 -0
- package/afm-cc/tsconfig.json +3 -0
- package/afm-products/tsconfig.json +3 -0
- package/dist/cjs/create-editor/ReactEditorView.js +66 -9
- package/dist/cjs/ui/Appearance/FullPage/FullPage.js +1 -1
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +50 -3
- package/dist/cjs/ui/Appearance/FullPage/FullPageToolbarNext.js +21 -2
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer-compiled.js +2 -2
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer-emotion.js +2 -2
- package/dist/cjs/ui/EditorContentContainer/styles/expandStyles.js +2 -2
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/create-editor/ReactEditorView.js +60 -9
- package/dist/es2019/ui/Appearance/FullPage/FullPage.js +1 -1
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +50 -3
- package/dist/es2019/ui/Appearance/FullPage/FullPageToolbarNext.js +21 -2
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer-compiled.js +2 -2
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer-emotion.js +3 -3
- package/dist/es2019/ui/EditorContentContainer/styles/expandStyles.js +1 -1
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/create-editor/ReactEditorView.js +66 -9
- package/dist/esm/ui/Appearance/FullPage/FullPage.js +1 -1
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +50 -3
- package/dist/esm/ui/Appearance/FullPage/FullPageToolbarNext.js +21 -2
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer-compiled.js +2 -2
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer-emotion.js +3 -3
- package/dist/esm/ui/EditorContentContainer/styles/expandStyles.js +1 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/EditorContentContainer/styles/expandStyles.d.ts +1 -1
- package/package.json +10 -10
|
@@ -63,6 +63,15 @@ const hideEditorContentAreaProsemirrorWithAttributeStyle = css({
|
|
|
63
63
|
display: 'none'
|
|
64
64
|
}
|
|
65
65
|
});
|
|
66
|
+
const hideEditorContentAreaScrollGutterWithAttributeStyle = css({
|
|
67
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
68
|
+
'&[data-markdown-mode-hide-scroll-gutter="true"] > .ak-editor-content-area > [data-vc="scroll-gutter"]': {
|
|
69
|
+
display: 'none'
|
|
70
|
+
}
|
|
71
|
+
});
|
|
72
|
+
const hideEditorScrollGutterStyle = css({
|
|
73
|
+
display: 'none'
|
|
74
|
+
});
|
|
66
75
|
const fullWidthNonChromelessBreakoutBlockTableStyle = css({
|
|
67
76
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
68
77
|
'.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
|
|
@@ -222,6 +231,38 @@ const contentAreaHeightNoToolbar = css({
|
|
|
222
231
|
const markdownModeContainerBackgroundStyle = css({
|
|
223
232
|
backgroundColor: "var(--ds-surface-sunken, #F8F8F8)"
|
|
224
233
|
});
|
|
234
|
+
const markdownModeContentAreaStyle = css({
|
|
235
|
+
boxSizing: 'border-box',
|
|
236
|
+
height: '100%',
|
|
237
|
+
margin: 0,
|
|
238
|
+
maxWidth: 'none',
|
|
239
|
+
minWidth: 0,
|
|
240
|
+
paddingBottom: 0,
|
|
241
|
+
paddingTop: 0,
|
|
242
|
+
width: '100%',
|
|
243
|
+
// The markdown source view is rendered through PluginSlot. Stretch those
|
|
244
|
+
// intermediate wrappers so its in-flow footer can sit at the bottom without
|
|
245
|
+
// overlaying the CodeMirror scrollbar.
|
|
246
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
247
|
+
'> .ak-editor-content-area': {
|
|
248
|
+
boxSizing: 'border-box',
|
|
249
|
+
display: 'flex',
|
|
250
|
+
flexDirection: 'column',
|
|
251
|
+
height: '100%',
|
|
252
|
+
minHeight: 0,
|
|
253
|
+
minWidth: 0,
|
|
254
|
+
padding: 0,
|
|
255
|
+
width: '100%'
|
|
256
|
+
},
|
|
257
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
258
|
+
'> .ak-editor-content-area > [data-testid="plugins-components-wrapper"]': {
|
|
259
|
+
display: 'flex',
|
|
260
|
+
flex: '1 1 auto',
|
|
261
|
+
minHeight: 0,
|
|
262
|
+
minWidth: 0,
|
|
263
|
+
width: '100%'
|
|
264
|
+
}
|
|
265
|
+
});
|
|
225
266
|
export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
226
267
|
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
227
268
|
export const EDITOR_CONTAINER = 'ak-editor-container';
|
|
@@ -258,7 +299,10 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
258
299
|
var _states$markdownModeS2;
|
|
259
300
|
return (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.isMarkdownMode;
|
|
260
301
|
});
|
|
261
|
-
const
|
|
302
|
+
const isMarkdownModeExperimentEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true);
|
|
303
|
+
const shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
|
|
304
|
+
const shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
|
|
305
|
+
const shouldUseMarkdownModeMvpLayout = shouldHideProseMirrorForMarkdownMode && fg('platform_editor_md_mvp_layout');
|
|
262
306
|
return jsx("div", {
|
|
263
307
|
css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
|
|
264
308
|
"data-testid": CONTENT_AREA_TEST_ID,
|
|
@@ -266,7 +310,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
266
310
|
}, jsx("div", {
|
|
267
311
|
css: [
|
|
268
312
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
269
|
-
contentAreaWrapper,
|
|
313
|
+
contentAreaWrapper, shouldUseMarkdownModeMvpLayout && markdownModeContainerBackgroundStyle],
|
|
270
314
|
"data-testid": EDITOR_CONTAINER,
|
|
271
315
|
"data-editor-container": 'true'
|
|
272
316
|
}, jsx(EditorContentContainer
|
|
@@ -285,10 +329,11 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
285
329
|
editorDisabled: props.disabled
|
|
286
330
|
}, jsx("div", {
|
|
287
331
|
"data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode ? 'true' : undefined,
|
|
332
|
+
"data-markdown-mode-hide-scroll-gutter": shouldHideScrollGutterForMarkdownMode ? 'true' : undefined,
|
|
288
333
|
css: [editorContentAreaNew, editorContentAreaProsemirrorStyle,
|
|
289
334
|
// EDITOR-6558: hide ProseMirror when the markdown-mode plugin
|
|
290
335
|
// reports a non-WYSIWYG view.
|
|
291
|
-
shouldHideProseMirrorForMarkdownMode && hideEditorContentAreaProsemirrorWithAttributeStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
|
|
336
|
+
shouldHideProseMirrorForMarkdownMode && hideEditorContentAreaProsemirrorWithAttributeStyle, shouldHideScrollGutterForMarkdownMode && hideEditorContentAreaScrollGutterWithAttributeStyle, shouldUseMarkdownModeMvpLayout && markdownModeContentAreaStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
|
|
292
337
|
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
293
338
|
expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) ? 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],
|
|
294
339
|
style: {
|
|
@@ -333,6 +378,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
333
378
|
wrapperElement: props.wrapperElement
|
|
334
379
|
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, allowScrollGutter && (editorExperiment('platform_editor_blocks', true) ? jsx("div", {
|
|
335
380
|
id: "editor-scroll-gutter",
|
|
381
|
+
css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
|
|
336
382
|
style: {
|
|
337
383
|
paddingBottom: `${(_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120'}px`
|
|
338
384
|
},
|
|
@@ -340,6 +386,7 @@ const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
|
340
386
|
"data-editor-scroll-gutter": "true"
|
|
341
387
|
}) : jsx("div", {
|
|
342
388
|
id: "editor-scroll-gutter",
|
|
389
|
+
css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
|
|
343
390
|
style: {
|
|
344
391
|
paddingBottom: `${(_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120'}px`
|
|
345
392
|
},
|
|
@@ -116,7 +116,12 @@ export const FullPageToolbarNext = ({
|
|
|
116
116
|
// - primary toolbar isn't registered
|
|
117
117
|
// - no custom primary toolbar components to render
|
|
118
118
|
// note: primary toolbar must render if toolbar docking preference is set to "controlled" to avoid SSR conflicts
|
|
119
|
-
|
|
119
|
+
// note(platform_editor_ssr_toolbar_optimistic): On the SSR and CSR, the toolbar plugin may be registered in the
|
|
120
|
+
// injection API but its components not yet populated. Bypass the early-return
|
|
121
|
+
// so the toolbar chrome stays mounted for layout stability; ToolbarNext renders
|
|
122
|
+
// null inside it until components arrive.
|
|
123
|
+
const isAwaitingToolbarComponents = expValEquals('platform_editor_ssr_toolbar_optimistic', 'isEnabled', true) && !Boolean(editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.toolbar);
|
|
124
|
+
if (!isAwaitingToolbarComponents && !shouldShowToolbarContainer(toolbar, customPrimaryToolbarComponents)) {
|
|
120
125
|
return /*#__PURE__*/React.createElement(ToolbarPortal, null, null);
|
|
121
126
|
}
|
|
122
127
|
return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, ({
|
|
@@ -132,7 +137,21 @@ export const FullPageToolbarNext = ({
|
|
|
132
137
|
showKeyline: showKeyline || ContextPanelWidth > 0
|
|
133
138
|
}, beforeIcon && /*#__PURE__*/React.createElement("div", {
|
|
134
139
|
className: ax([styles.mainToolbarIconBefore, styles.mainToolbarIconBeforeNew])
|
|
135
|
-
}, beforeIcon), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstChildWrapper, null, expValEquals('
|
|
140
|
+
}, beforeIcon), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstChildWrapper, null, expValEquals('platform_editor_ssr_toolbar_optimistic', 'isEnabled', true) ?
|
|
141
|
+
// optimistic toolbar — render immediately on both SSR and CSR with items enabled.
|
|
142
|
+
// Clicks are noops until editorView mounts.
|
|
143
|
+
primaryToolbarDockingConfigEnabled && (components && visibleToolbarComponents && isToolbar(toolbar) ? /*#__PURE__*/React.createElement(ToolbarNext, {
|
|
144
|
+
toolbar: toolbar,
|
|
145
|
+
components: visibleToolbarComponents,
|
|
146
|
+
editorView: editorView,
|
|
147
|
+
editorAPI: editorAPI,
|
|
148
|
+
popupsMountPoint: mountPoint,
|
|
149
|
+
editorAppearance: "full-page",
|
|
150
|
+
isDisabled: disabled,
|
|
151
|
+
disabledWithoutInteractionLogic: false
|
|
152
|
+
}) :
|
|
153
|
+
// toolbar plugin not yet registered — render nothing inside the chrome for layout stability
|
|
154
|
+
null) : expValEquals('platform_editor_default_toolbar_state', 'isEnabled', true) ? primaryToolbarDockingConfigEnabled && components && visibleToolbarComponents && isToolbar(toolbar) && /*#__PURE__*/React.createElement(ToolbarNext, {
|
|
136
155
|
toolbar: toolbar,
|
|
137
156
|
components: visibleToolbarComponents,
|
|
138
157
|
editorView: editorView,
|
|
@@ -236,7 +236,7 @@ const editorContentStyles = {
|
|
|
236
236
|
emojiDenseStyles: "_2f9he0wb _gof5e0wb _1kube0wb _1jg61osq _ik5u1osq _7vzk1f51 _1n9bv47k _7pqpv47k",
|
|
237
237
|
expandStyles: "_1fkbxmi2 _vx27xmi2 _1n9xxmi2 _1oymxmi2",
|
|
238
238
|
expandStylesBase: "_1dcv12b0 _vir8sm61 _nshtskji _1ffuu2gc _eyk7fyzg _1ia1h2mm _ullp1kdv _1ci8stnw _14zzb3bt _1psiidpf _9apoidpf _t1ygidpf _1dr7idpf _py7e1osq _q9kpglyw _2jyr1ial _1tv57wq0 _63an1j28 _g5xu1j28 _5u1u1j28 _1oif1j28 _age41gly _1ymq1bqt _v5bbe4h9 _1husnqa1 _1xt11j28 _1t5a10yn _o7hy9c8s _1rdsfs2f _1kd91qdr _1x8yidpf _3tz5idpf _1b7utlke _1vuvusvi _372tidpf _g7u3dgkc _8va114w8 _bc4d1r31 _1d0tglyw _4fj21o36 _1fbsglyw _1p5p1j28 _1gxpkb7n _1245kb7n _1fmjf1ug _ig0i4w17 _18mboxwj _1ev778tn _15uri7a9 _caue1rpy _149p1txw _u29r1osq _1icakb7n _hiyf1rpy _oemsidpf _ux5uidpf _im3nidpf _4uf1idpf _8q99glyw _2gbkglyw _wn6j1r31 _m5xjglyw _eu2zidpf _11pmewfl _oi2iewfl _1otu1txw _rrwboxwj _ikp21osq _txkaazsu _1wtktlke _ar4h1h6o _3emmglyw _14wj12b0 _18x1sm61 _qg62idpf _3dscidpf _1xnzidpf _1l2jidpf _1aljidpf _kb94idpf _bqovidpf _1dx5idpf _sma4dfik _1slov77o _wo9i1dpa _bj9o180e _1rrkdgkc _m4h31ul7 _zsbmglyw _upeu1ejb _1hr01ejb _13mr1txw _a0pq1h6o _1gdo1h6o _kinytlke _wyq613gf _hl71sm61 _n4fm1l7x _sv44u2gc _2xjk14w8 _czgd1txw _1i7i15vq _1pnt15vq _wz3i15vq _1g6m15vq _9s8f1osq _10zo1osq _1ish1ule _zkn71ule _19mvidpf _vkxwidpf _ay4r7mnp _1m2q7mnp _1io9glyw _1gwnglyw _vgp2ze3t _svkwu2gc _157n1ejb _1c011b66 _1dwdj4ch _fqkm1osq _9n6nusvi _1xgj1kdv _70nuglyw _11qn1osq _1q2615vq _vffj15vq _o1nxstnw _1j9kt94y _1u1ft94y _1s0y7mnp _17sv1q9c _1a5m1j28 _317nsm61 _1srh1l7x _kh951j28 _19lwdgkc _194h1ul7",
|
|
239
|
-
|
|
239
|
+
expandStylesMixin_chromeless_expand_fix: "_mklmidpf _nnniidpf",
|
|
240
240
|
expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes: "_109wc7mi _vx27c7mi _15klc7mi _1oymc7mi _smy6idpf _g8xr1b66",
|
|
241
241
|
expandStylesMixin_fg_platform_visual_refresh_icons: "_1ev7kb7n _1ocgttxp",
|
|
242
242
|
expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes: "_1w8qq98m _omzvglyw _bqvk1osq _1h9p16ux _19lestnw _14j01n1a _1pm0idpf _1p3gidpf _1d9kt94y _113e1o8l",
|
|
@@ -451,7 +451,7 @@ export const EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef((pro
|
|
|
451
451
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
452
452
|
expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) && isDense && editorContentStyles.tasksAndDecisionsDenseStyles, editorContentStyles.gridStyles, editorContentStyles.blockMarksStyles, editorContentStyles.dateStyles, editorContentStyles.extensionStyles, (contentMode === 'compact' && expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) && editorContentStyles.extensionStylesDense, contentMode === 'compact' && expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && !expValEquals('confluence_compact_text_format', 'isEnabled', true) && !fg('platform_editor_content_mode_button_mvp') && editorContentStyles.extensionStylesLegacyDense, expValEquals('platform_editor_bodiedextension_layoutshift_fix', 'isEnabled', true) && editorContentStyles.bodiedExtensionLayoutShiftFix, editorContentStyles.extensionDiffStyles, editorContentStyles.expandStylesBase, !useStandardNodeWidth && editorContentStyles.expandStyles, contentMode === 'compact' && (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
|
|
453
453
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
454
|
-
expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) && isDense && editorContentStyles.expandDenseStyles, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes : editorContentStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, editorContentStyles.expandStylesMixin_fg_platform_visual_refresh_icons, isChromeless &&
|
|
454
|
+
expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) && isDense && editorContentStyles.expandDenseStyles, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes : editorContentStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, editorContentStyles.expandStylesMixin_fg_platform_visual_refresh_icons, isChromeless && editorContentStyles.expandStylesMixin_chromeless_expand_fix, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.findReplaceStylesNewWithA11Y : editorContentStyles.findReplaceStyles, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && editorContentStyles.findReplaceStylesNewWithCodeblockColorContrastFix, !expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && editorContentStyles.findReplaceStylesWithCodeblockColorContrastFix, editorExperiment('platform_synced_block', true) && editorContentStyles.findReplaceStylesWithRefSyncBlock, editorContentStyles.textHighlightStyle, editorContentStyles.decisionStyles, expValEqualsNoExposure('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true) ? editorContentStyles.taskItemStylesWithBlockTaskItem : editorContentStyles.taskItemStyles, editorContentStyles.taskItemCheckboxStyles, editorContentStyles.decisionIconWithVisualRefresh, editorContentStyles.statusStyles, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? editorContentStyles.statusStylesTeam26 : fg('platform-component-visual-refresh') ? expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.statusStylesMixin_fg_platform_component_visual_refresh_with_search_match : editorContentStyles.statusStylesMixin_fg_platform_component_visual_refresh : expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.statusStylesMixin_without_fg_platform_component_visual_refresh_with_search_match : editorContentStyles.statusStylesMixin_without_fg_platform_component_visual_refresh, colorMode === 'dark' && fg('platform-dst-lozenge-tag-badge-visual-uplifts') && editorContentStyles.statusStylesTeam26DarkMode, editorContentStyles.annotationStyles, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorExperiment('platform_editor_block_menu', true) ? editorContentStyles.smartCardStylesWithSearchMatchAndBlockMenuDangerStyles : editorContentStyles.smartCardStylesWithSearchMatch : editorContentStyles.smartCardStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorContentStyles.smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, (expValEqualsNoExposure('platform_editor_controls', 'cohort', 'variant1') || editorExperiment('platform_editor_preview_panel_linking_exp', true)) && editorContentStyles.editorControlsSmartCardStyles, editorContentStyles.embedCardStyles, editorContentStyles.unsupportedStyles, editorContentStyles.resizerStyles, expValEqualsNoExposure('cc-maui-experiment', 'isEnabled', true) && expValEquals('databases-native-embeds-v2', 'isEnabled', true) && editorContentStyles.resizerBottomHandleStyles, editorContentStyles.layoutBaseStyles, expValEquals('platform_editor_table_excerpts_fix', 'isEnabled', true) && editorContentStyles.layoutBaseStylesWithTableExcerptsFix, fg('platform_editor_fix_media_in_renderer') && editorContentStyles.alignMultipleWrappedImageInLayoutStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockStylesBase, editorExperiment('platform_synced_block', true) &&
|
|
455
455
|
// Apply sync block delta styles conditionally based on useStandardNodeWidth (negative margins or not)
|
|
456
456
|
!useStandardNodeWidth && editorContentStyles.syncBlockStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockFirstNodeStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_14') && editorContentStyles.syncBlockTextSelectionStyles, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutBaseStylesAdvanced, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutSectionStylesAdvanced : editorContentStyles.layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && editorContentStyles.layoutColumnDividerStyles, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutColumnDividerStylesNestedDnD, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutColumnStylesAdvanced : editorContentStyles.layoutColumnStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && editorContentStyles.layoutColumnResizeStyles, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutSelectedStylesAdvanced : editorContentStyles.layoutSelectedStylesNotAdvanced, editorExperiment('platform_synced_block', true) && editorContentStyles.layoutSelectedStylesAdvancedFix, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutColumnResponsiveStyles, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutResponsiveBaseStyles, editorExperiment('platform_synced_block', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync, !editorExperiment('platform_synced_block', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutBaseStylesFixesUnderNestedDnDFG, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.layoutColumnMartinTopFixesNew : editorContentStyles.layoutColumnMartinTopFixesOld, editorContentStyles.smartLinksInLivePagesStyles, editorContentStyles.linkingVisualRefreshV1Styles, editorContentStyles.dateVanillaStyles, fg('platform_editor_typography_ugc') ? contentMode === 'compact' && (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
|
|
457
457
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
@@ -30,7 +30,7 @@ import { dangerDateStyles, dateStyles, dateVanillaStyles } from './styles/dateSt
|
|
|
30
30
|
import { editorUGCSmallText, editorUGCTokensDefault, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
|
|
31
31
|
import { embedCardStyles } from './styles/embedCardStyles';
|
|
32
32
|
import { emojiDangerStyles, emojiStyles, getDenseEmojiStyles, getScaledDenseEmojiStyles, scaledEmojiStyles } from './styles/emoji';
|
|
33
|
-
import { expandStyles, expandStylesBase,
|
|
33
|
+
import { expandStyles, expandStylesBase, expandStylesMixin_chromeless_expand_fix, expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, expandStylesMixin_fg_platform_visual_refresh_icons, expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, getDenseExpandTitleStyles } from './styles/expandStyles';
|
|
34
34
|
import { extensionDiffStyles, getExtensionStyles } from './styles/extensionStyles';
|
|
35
35
|
import { findReplaceStyles, findReplaceStylesNewWithA11Y, findReplaceStylesNewWithCodeblockColorContrastFix, findReplaceStylesWithCodeblockColorContrastFix, findReplaceStylesWithRefSyncBlock } from './styles/findReplaceStyles';
|
|
36
36
|
import { firstBlockNodeStyles } from './styles/firstBlockNodeStyles';
|
|
@@ -319,9 +319,9 @@ export const EditorContentContainerEmotion = /*#__PURE__*/React.forwardRef((prop
|
|
|
319
319
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
320
320
|
expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
|
|
321
321
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
322
|
-
expandStylesMixin_fg_platform_visual_refresh_icons, isChromeless &&
|
|
322
|
+
expandStylesMixin_fg_platform_visual_refresh_icons, isChromeless &&
|
|
323
323
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
324
|
-
|
|
324
|
+
expandStylesMixin_chromeless_expand_fix, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
|
|
325
325
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
326
326
|
findReplaceStylesNewWithA11Y :
|
|
327
327
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -340,7 +340,7 @@ export const expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes = cs
|
|
|
340
340
|
* See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
|
|
341
341
|
*/
|
|
342
342
|
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
343
|
-
export const
|
|
343
|
+
export const expandStylesMixin_chromeless_expand_fix = css({
|
|
344
344
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
345
345
|
'.ProseMirror > .ak-editor-expand': {
|
|
346
346
|
marginLeft: 0,
|
|
@@ -29,6 +29,8 @@ import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
|
29
29
|
import { EditorState, Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
30
30
|
import { EditorView } from '@atlaskit/editor-prosemirror/view';
|
|
31
31
|
import { EditorSSRRenderer } from '@atlaskit/editor-ssr-renderer';
|
|
32
|
+
import { createSSREditorState } from '@atlaskit/editor-ssr-renderer/create-ssr-editor-state';
|
|
33
|
+
import { createSSRPMPlugins } from '@atlaskit/editor-ssr-renderer/create-ssr-pm-plugins';
|
|
32
34
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
33
35
|
import { getInteractionId } from '@atlaskit/react-ufo/interaction-id-context';
|
|
34
36
|
import { abortAll, getActiveInteraction } from '@atlaskit/react-ufo/interaction-metrics';
|
|
@@ -105,7 +107,12 @@ export function ReactEditorView(props) {
|
|
|
105
107
|
__livePage = _props$editorProps.__livePage,
|
|
106
108
|
onEditorCreated = props.onEditorCreated,
|
|
107
109
|
onEditorDestroyed = props.onEditorDestroyed;
|
|
108
|
-
|
|
110
|
+
|
|
111
|
+
// Holds the best available EditorState before the ProseMirror EditorView has mounted.
|
|
112
|
+
// On SSR: set to the SSR-rendered state so toolbar plugins can read it via getEditorState().
|
|
113
|
+
// On client first render: set to initialEditorState for the same reason.
|
|
114
|
+
// Cleared to undefined once createEditorView runs and viewRef.current becomes available.
|
|
115
|
+
var preMountEditorStateRef = useRef(undefined);
|
|
109
116
|
var editorRef = useRef(null);
|
|
110
117
|
var viewRef = useRef();
|
|
111
118
|
var focusTimeoutId = useRef();
|
|
@@ -133,8 +140,8 @@ export function ReactEditorView(props) {
|
|
|
133
140
|
return createFeatureFlagsFromProps(editorPropFeatureFlags);
|
|
134
141
|
}, [editorPropFeatureFlags]);
|
|
135
142
|
var getEditorState = useCallback(function () {
|
|
136
|
-
var
|
|
137
|
-
return (
|
|
143
|
+
var _preMountEditorStateR, _viewRef$current;
|
|
144
|
+
return (_preMountEditorStateR = preMountEditorStateRef.current) !== null && _preMountEditorStateR !== void 0 ? _preMountEditorStateR : (_viewRef$current = viewRef.current) === null || _viewRef$current === void 0 ? void 0 : _viewRef$current.state;
|
|
138
145
|
}, []);
|
|
139
146
|
var getEditorView = useCallback(function () {
|
|
140
147
|
return viewRef.current;
|
|
@@ -257,12 +264,17 @@ export function ReactEditorView(props) {
|
|
|
257
264
|
// so we can save some CPU time here.
|
|
258
265
|
return undefined;
|
|
259
266
|
}
|
|
260
|
-
|
|
267
|
+
var state = createEditorState({
|
|
261
268
|
props: props,
|
|
262
269
|
doc: defaultValue,
|
|
263
270
|
// ED-4759: Don't set selection at end for full-page editor - should be at start.
|
|
264
271
|
selectionAtStart: isFullPage(nextAppearance)
|
|
265
272
|
});
|
|
273
|
+
if (expValEquals('platform_editor_ssr_toolbar_optimistic', 'isEnabled', true)) {
|
|
274
|
+
// CSR only, synchronously set preMountEditorStateRef so it's ready to be consumed by children including toolbar
|
|
275
|
+
preMountEditorStateRef.current = state;
|
|
276
|
+
}
|
|
277
|
+
return state;
|
|
266
278
|
},
|
|
267
279
|
// This is only used for the initial state - afterwards we will have `viewRef` available for use
|
|
268
280
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
@@ -663,6 +675,10 @@ export function ReactEditorView(props) {
|
|
|
663
675
|
mount: node
|
|
664
676
|
}, getDirectEditorProps());
|
|
665
677
|
viewRef.current = view;
|
|
678
|
+
if (expValEquals('platform_editor_ssr_toolbar_optimistic', 'isEnabled', true)) {
|
|
679
|
+
// clears pre-mount state as soon as the final view is mounted
|
|
680
|
+
preMountEditorStateRef.current = undefined;
|
|
681
|
+
}
|
|
666
682
|
measureRender(measurements.PROSEMIRROR_RENDERED, function (_ref3) {
|
|
667
683
|
var duration = _ref3.duration,
|
|
668
684
|
startTime = _ref3.startTime,
|
|
@@ -1028,17 +1044,56 @@ export function ReactEditorView(props) {
|
|
|
1028
1044
|
return buildDoc(schema);
|
|
1029
1045
|
};
|
|
1030
1046
|
var doc = profileSSROperation("".concat(SSR_TRACE_SEGMENT_NAME, "/buildDoc"), doBuildDoc, onSSRMeasure);
|
|
1047
|
+
|
|
1048
|
+
// When the platform_editor_ssr_toolbar_optimistic is on, we create SSR-safe PM plugins and EditorState
|
|
1049
|
+
// HERE in ssrDeps — before any children render — so that FullPageToolbarNext can read correct
|
|
1050
|
+
// plugin state via useSharedPluginStateWithSelector → currentState() → getEditorState().
|
|
1051
|
+
//
|
|
1052
|
+
// We also pass these pre-built pmPlugins and editorState to EditorSSRRenderer so it can
|
|
1053
|
+
// skip redundant creation (avoids double createPluginsList + EditorState.create).
|
|
1054
|
+
if (expValEquals('platform_editor_ssr_toolbar_optimistic', 'isEnabled', true)) {
|
|
1055
|
+
var ssrPMPlugins = profileSSROperation("".concat(SSR_TRACE_SEGMENT_NAME, "/createSSRPMPlugins"), function () {
|
|
1056
|
+
return createSSRPMPlugins({
|
|
1057
|
+
plugins: plugins,
|
|
1058
|
+
schema: schema,
|
|
1059
|
+
portalProviderAPI: props.portalProviderAPI,
|
|
1060
|
+
getIntl: function getIntl() {
|
|
1061
|
+
return props.intl;
|
|
1062
|
+
}
|
|
1063
|
+
});
|
|
1064
|
+
}, onSSRMeasure);
|
|
1065
|
+
var ssrState = profileSSROperation("".concat(SSR_TRACE_SEGMENT_NAME, "/createSSREditorState"), function () {
|
|
1066
|
+
return createSSREditorState({
|
|
1067
|
+
doc: doc,
|
|
1068
|
+
schema: schema,
|
|
1069
|
+
pmPlugins: ssrPMPlugins
|
|
1070
|
+
});
|
|
1071
|
+
}, onSSRMeasure);
|
|
1072
|
+
return {
|
|
1073
|
+
plugins: plugins,
|
|
1074
|
+
schema: schema,
|
|
1075
|
+
doc: doc,
|
|
1076
|
+
ssrPMPlugins: ssrPMPlugins,
|
|
1077
|
+
ssrEditorState: ssrState
|
|
1078
|
+
};
|
|
1079
|
+
}
|
|
1031
1080
|
return {
|
|
1032
1081
|
plugins: plugins,
|
|
1033
1082
|
schema: schema,
|
|
1034
|
-
doc: doc
|
|
1083
|
+
doc: doc,
|
|
1084
|
+
ssrPMPlugins: undefined,
|
|
1085
|
+
ssrEditorState: undefined
|
|
1035
1086
|
};
|
|
1036
|
-
}, [allowBlockType, buildDoc, props.preset, onSSRMeasure]);
|
|
1087
|
+
}, [allowBlockType, buildDoc, props.preset, onSSRMeasure, props.portalProviderAPI, props.intl]);
|
|
1088
|
+
// SSR only, synchronously set preMountEditorStateRef so it's ready to be consumed by children including toolbar
|
|
1089
|
+
if (ssrDeps !== null && ssrDeps !== void 0 && ssrDeps.ssrEditorState) {
|
|
1090
|
+
preMountEditorStateRef.current = ssrDeps.ssrEditorState;
|
|
1091
|
+
}
|
|
1037
1092
|
var _props$editorProps3 = props.editorProps,
|
|
1038
1093
|
assistiveLabel = _props$editorProps3.assistiveLabel,
|
|
1039
1094
|
assistiveDescribedBy = _props$editorProps3.assistiveDescribedBy;
|
|
1040
1095
|
var handleSsrEditorStateChanged = useCallback(function (state) {
|
|
1041
|
-
|
|
1096
|
+
preMountEditorStateRef.current = state;
|
|
1042
1097
|
// Notify listeners about the initial SSR state
|
|
1043
1098
|
pluginInjectionAPI.current.onEditorViewUpdated({
|
|
1044
1099
|
newEditorState: state,
|
|
@@ -1085,11 +1140,13 @@ export function ReactEditorView(props) {
|
|
|
1085
1140
|
id: EDIT_AREA_ID,
|
|
1086
1141
|
"aria-describedby": assistiveDescribedBy,
|
|
1087
1142
|
"data-editor-id": editorId.current,
|
|
1088
|
-
onSSRMeasure: onSSRMeasure
|
|
1143
|
+
onSSRMeasure: onSSRMeasure,
|
|
1144
|
+
prebuiltPMPlugins: ssrDeps.ssrPMPlugins,
|
|
1145
|
+
prebuiltEditorState: ssrDeps.ssrEditorState
|
|
1089
1146
|
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
|
|
1090
1147
|
,
|
|
1091
1148
|
onEditorStateChanged: expValEquals('platform_editor_perf_lint_cleanup', 'isEnabled', true) ? handleSsrEditorStateChanged : function (state) {
|
|
1092
|
-
|
|
1149
|
+
preMountEditorStateRef.current = state;
|
|
1093
1150
|
// Notify listeners about the initial SSR state
|
|
1094
1151
|
pluginInjectionAPI.current.onEditorViewUpdated({
|
|
1095
1152
|
newEditorState: state,
|
|
@@ -161,7 +161,7 @@ export var FullPageEditor = function FullPageEditor(props) {
|
|
|
161
161
|
FULL_PAGE_EDITOR_TOOLBAR_HEIGHT(isToolbarAIFCEnabled)
|
|
162
162
|
}
|
|
163
163
|
}, !isEditorToolbarHidden && (isToolbarAIFCEnabled ? /*#__PURE__*/React.createElement(FullPageToolbarNext, {
|
|
164
|
-
disabled: !!props.disabled || !hasHadInteraction && expValEquals('platform_editor_default_toolbar_state', 'isEnabled', true),
|
|
164
|
+
disabled: expValEquals('platform_editor_ssr_toolbar_optimistic', 'isEnabled', true) ? !hasHadInteraction ? false : !!props.disabled : !!props.disabled || !hasHadInteraction && expValEquals('platform_editor_default_toolbar_state', 'isEnabled', true),
|
|
165
165
|
disabledWithoutInteractionLogic: !!props.disabled,
|
|
166
166
|
toolbarDockingPosition: toolbarDockingPosition !== null && toolbarDockingPosition !== void 0 ? toolbarDockingPosition : toolbarDocking,
|
|
167
167
|
beforeIcon: props.primaryToolbarIconBefore,
|
|
@@ -62,6 +62,15 @@ var hideEditorContentAreaProsemirrorWithAttributeStyle = css({
|
|
|
62
62
|
display: 'none'
|
|
63
63
|
}
|
|
64
64
|
});
|
|
65
|
+
var hideEditorContentAreaScrollGutterWithAttributeStyle = css({
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
67
|
+
'&[data-markdown-mode-hide-scroll-gutter="true"] > .ak-editor-content-area > [data-vc="scroll-gutter"]': {
|
|
68
|
+
display: 'none'
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
var hideEditorScrollGutterStyle = css({
|
|
72
|
+
display: 'none'
|
|
73
|
+
});
|
|
65
74
|
var fullWidthNonChromelessBreakoutBlockTableStyle = css({
|
|
66
75
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
67
76
|
'.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
|
|
@@ -218,6 +227,38 @@ var contentAreaHeightNoToolbar = css({
|
|
|
218
227
|
var markdownModeContainerBackgroundStyle = css({
|
|
219
228
|
backgroundColor: "var(--ds-surface-sunken, #F8F8F8)"
|
|
220
229
|
});
|
|
230
|
+
var markdownModeContentAreaStyle = css({
|
|
231
|
+
boxSizing: 'border-box',
|
|
232
|
+
height: '100%',
|
|
233
|
+
margin: 0,
|
|
234
|
+
maxWidth: 'none',
|
|
235
|
+
minWidth: 0,
|
|
236
|
+
paddingBottom: 0,
|
|
237
|
+
paddingTop: 0,
|
|
238
|
+
width: '100%',
|
|
239
|
+
// The markdown source view is rendered through PluginSlot. Stretch those
|
|
240
|
+
// intermediate wrappers so its in-flow footer can sit at the bottom without
|
|
241
|
+
// overlaying the CodeMirror scrollbar.
|
|
242
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
243
|
+
'> .ak-editor-content-area': {
|
|
244
|
+
boxSizing: 'border-box',
|
|
245
|
+
display: 'flex',
|
|
246
|
+
flexDirection: 'column',
|
|
247
|
+
height: '100%',
|
|
248
|
+
minHeight: 0,
|
|
249
|
+
minWidth: 0,
|
|
250
|
+
padding: 0,
|
|
251
|
+
width: '100%'
|
|
252
|
+
},
|
|
253
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
254
|
+
'> .ak-editor-content-area > [data-testid="plugins-components-wrapper"]': {
|
|
255
|
+
display: 'flex',
|
|
256
|
+
flex: '1 1 auto',
|
|
257
|
+
minHeight: 0,
|
|
258
|
+
minWidth: 0,
|
|
259
|
+
width: '100%'
|
|
260
|
+
}
|
|
261
|
+
});
|
|
221
262
|
export var CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
222
263
|
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
223
264
|
export var EDITOR_CONTAINER = 'ak-editor-container';
|
|
@@ -256,7 +297,10 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
256
297
|
var _states$markdownModeS2;
|
|
257
298
|
return (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.isMarkdownMode;
|
|
258
299
|
});
|
|
259
|
-
var
|
|
300
|
+
var isMarkdownModeExperimentEnabled = expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true);
|
|
301
|
+
var shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
|
|
302
|
+
var shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
|
|
303
|
+
var shouldUseMarkdownModeMvpLayout = shouldHideProseMirrorForMarkdownMode && fg('platform_editor_md_mvp_layout');
|
|
260
304
|
return jsx("div", {
|
|
261
305
|
css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
|
|
262
306
|
"data-testid": CONTENT_AREA_TEST_ID,
|
|
@@ -264,7 +308,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
264
308
|
}, jsx("div", {
|
|
265
309
|
css: [
|
|
266
310
|
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
267
|
-
contentAreaWrapper,
|
|
311
|
+
contentAreaWrapper, shouldUseMarkdownModeMvpLayout && markdownModeContainerBackgroundStyle],
|
|
268
312
|
"data-testid": EDITOR_CONTAINER,
|
|
269
313
|
"data-editor-container": 'true'
|
|
270
314
|
}, jsx(EditorContentContainer
|
|
@@ -283,10 +327,11 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
283
327
|
editorDisabled: props.disabled
|
|
284
328
|
}, jsx("div", {
|
|
285
329
|
"data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode ? 'true' : undefined,
|
|
330
|
+
"data-markdown-mode-hide-scroll-gutter": shouldHideScrollGutterForMarkdownMode ? 'true' : undefined,
|
|
286
331
|
css: [editorContentAreaNew, editorContentAreaProsemirrorStyle,
|
|
287
332
|
// EDITOR-6558: hide ProseMirror when the markdown-mode plugin
|
|
288
333
|
// reports a non-WYSIWYG view.
|
|
289
|
-
shouldHideProseMirrorForMarkdownMode && hideEditorContentAreaProsemirrorWithAttributeStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
|
|
334
|
+
shouldHideProseMirrorForMarkdownMode && hideEditorContentAreaProsemirrorWithAttributeStyle, shouldHideScrollGutterForMarkdownMode && hideEditorContentAreaScrollGutterWithAttributeStyle, shouldUseMarkdownModeMvpLayout && markdownModeContentAreaStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
|
|
290
335
|
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
291
336
|
expValEqualsNoExposure('platform_editor_breakout_resizing', 'isEnabled', true) ? 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],
|
|
292
337
|
style: {
|
|
@@ -331,6 +376,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
331
376
|
wrapperElement: props.wrapperElement
|
|
332
377
|
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, allowScrollGutter && (editorExperiment('platform_editor_blocks', true) ? jsx("div", {
|
|
333
378
|
id: "editor-scroll-gutter",
|
|
379
|
+
css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
|
|
334
380
|
style: {
|
|
335
381
|
paddingBottom: "".concat((_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120', "px")
|
|
336
382
|
},
|
|
@@ -338,6 +384,7 @@ var Content = /*#__PURE__*/React.forwardRef(function (props, ref) {
|
|
|
338
384
|
"data-editor-scroll-gutter": "true"
|
|
339
385
|
}) : jsx("div", {
|
|
340
386
|
id: "editor-scroll-gutter",
|
|
387
|
+
css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
|
|
341
388
|
style: {
|
|
342
389
|
paddingBottom: "".concat((_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120', "px")
|
|
343
390
|
},
|
|
@@ -117,7 +117,12 @@ export var FullPageToolbarNext = function FullPageToolbarNext(_ref4) {
|
|
|
117
117
|
// - primary toolbar isn't registered
|
|
118
118
|
// - no custom primary toolbar components to render
|
|
119
119
|
// note: primary toolbar must render if toolbar docking preference is set to "controlled" to avoid SSR conflicts
|
|
120
|
-
|
|
120
|
+
// note(platform_editor_ssr_toolbar_optimistic): On the SSR and CSR, the toolbar plugin may be registered in the
|
|
121
|
+
// injection API but its components not yet populated. Bypass the early-return
|
|
122
|
+
// so the toolbar chrome stays mounted for layout stability; ToolbarNext renders
|
|
123
|
+
// null inside it until components arrive.
|
|
124
|
+
var isAwaitingToolbarComponents = expValEquals('platform_editor_ssr_toolbar_optimistic', 'isEnabled', true) && !Boolean(editorAPI === null || editorAPI === void 0 ? void 0 : editorAPI.toolbar);
|
|
125
|
+
if (!isAwaitingToolbarComponents && !shouldShowToolbarContainer(toolbar, customPrimaryToolbarComponents)) {
|
|
121
126
|
return /*#__PURE__*/React.createElement(ToolbarPortal, null, null);
|
|
122
127
|
}
|
|
123
128
|
return /*#__PURE__*/React.createElement(ContextPanelConsumer, null, function (_ref6) {
|
|
@@ -133,7 +138,21 @@ export var FullPageToolbarNext = function FullPageToolbarNext(_ref4) {
|
|
|
133
138
|
showKeyline: showKeyline || ContextPanelWidth > 0
|
|
134
139
|
}, beforeIcon && /*#__PURE__*/React.createElement("div", {
|
|
135
140
|
className: ax([styles.mainToolbarIconBefore, styles.mainToolbarIconBeforeNew])
|
|
136
|
-
}, beforeIcon), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstChildWrapper, null, expValEquals('
|
|
141
|
+
}, beforeIcon), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FirstChildWrapper, null, expValEquals('platform_editor_ssr_toolbar_optimistic', 'isEnabled', true) ?
|
|
142
|
+
// optimistic toolbar — render immediately on both SSR and CSR with items enabled.
|
|
143
|
+
// Clicks are noops until editorView mounts.
|
|
144
|
+
primaryToolbarDockingConfigEnabled && (components && visibleToolbarComponents && isToolbar(toolbar) ? /*#__PURE__*/React.createElement(ToolbarNext, {
|
|
145
|
+
toolbar: toolbar,
|
|
146
|
+
components: visibleToolbarComponents,
|
|
147
|
+
editorView: editorView,
|
|
148
|
+
editorAPI: editorAPI,
|
|
149
|
+
popupsMountPoint: mountPoint,
|
|
150
|
+
editorAppearance: "full-page",
|
|
151
|
+
isDisabled: disabled,
|
|
152
|
+
disabledWithoutInteractionLogic: false
|
|
153
|
+
}) :
|
|
154
|
+
// toolbar plugin not yet registered — render nothing inside the chrome for layout stability
|
|
155
|
+
null) : expValEquals('platform_editor_default_toolbar_state', 'isEnabled', true) ? primaryToolbarDockingConfigEnabled && components && visibleToolbarComponents && isToolbar(toolbar) && /*#__PURE__*/React.createElement(ToolbarNext, {
|
|
137
156
|
toolbar: toolbar,
|
|
138
157
|
components: visibleToolbarComponents,
|
|
139
158
|
editorView: editorView,
|
|
@@ -183,7 +183,7 @@ var editorContentStyles = {
|
|
|
183
183
|
emojiDenseStyles: "_2f9he0wb _gof5e0wb _1kube0wb _1jg61osq _ik5u1osq _7vzk1f51 _1n9bv47k _7pqpv47k",
|
|
184
184
|
expandStyles: "_1fkbxmi2 _vx27xmi2 _1n9xxmi2 _1oymxmi2",
|
|
185
185
|
expandStylesBase: "_1dcv12b0 _vir8sm61 _nshtskji _1ffuu2gc _eyk7fyzg _1ia1h2mm _ullp1kdv _1ci8stnw _14zzb3bt _1psiidpf _9apoidpf _t1ygidpf _1dr7idpf _py7e1osq _q9kpglyw _2jyr1ial _1tv57wq0 _63an1j28 _g5xu1j28 _5u1u1j28 _1oif1j28 _age41gly _1ymq1bqt _v5bbe4h9 _1husnqa1 _1xt11j28 _1t5a10yn _o7hy9c8s _1rdsfs2f _1kd91qdr _1x8yidpf _3tz5idpf _1b7utlke _1vuvusvi _372tidpf _g7u3dgkc _8va114w8 _bc4d1r31 _1d0tglyw _4fj21o36 _1fbsglyw _1p5p1j28 _1gxpkb7n _1245kb7n _1fmjf1ug _ig0i4w17 _18mboxwj _1ev778tn _15uri7a9 _caue1rpy _149p1txw _u29r1osq _1icakb7n _hiyf1rpy _oemsidpf _ux5uidpf _im3nidpf _4uf1idpf _8q99glyw _2gbkglyw _wn6j1r31 _m5xjglyw _eu2zidpf _11pmewfl _oi2iewfl _1otu1txw _rrwboxwj _ikp21osq _txkaazsu _1wtktlke _ar4h1h6o _3emmglyw _14wj12b0 _18x1sm61 _qg62idpf _3dscidpf _1xnzidpf _1l2jidpf _1aljidpf _kb94idpf _bqovidpf _1dx5idpf _sma4dfik _1slov77o _wo9i1dpa _bj9o180e _1rrkdgkc _m4h31ul7 _zsbmglyw _upeu1ejb _1hr01ejb _13mr1txw _a0pq1h6o _1gdo1h6o _kinytlke _wyq613gf _hl71sm61 _n4fm1l7x _sv44u2gc _2xjk14w8 _czgd1txw _1i7i15vq _1pnt15vq _wz3i15vq _1g6m15vq _9s8f1osq _10zo1osq _1ish1ule _zkn71ule _19mvidpf _vkxwidpf _ay4r7mnp _1m2q7mnp _1io9glyw _1gwnglyw _vgp2ze3t _svkwu2gc _157n1ejb _1c011b66 _1dwdj4ch _fqkm1osq _9n6nusvi _1xgj1kdv _70nuglyw _11qn1osq _1q2615vq _vffj15vq _o1nxstnw _1j9kt94y _1u1ft94y _1s0y7mnp _17sv1q9c _1a5m1j28 _317nsm61 _1srh1l7x _kh951j28 _19lwdgkc _194h1ul7",
|
|
186
|
-
|
|
186
|
+
expandStylesMixin_chromeless_expand_fix: "_mklmidpf _nnniidpf",
|
|
187
187
|
expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes: "_109wc7mi _vx27c7mi _15klc7mi _1oymc7mi _smy6idpf _g8xr1b66",
|
|
188
188
|
expandStylesMixin_fg_platform_visual_refresh_icons: "_1ev7kb7n _1ocgttxp",
|
|
189
189
|
expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes: "_1w8qq98m _omzvglyw _bqvk1osq _1h9p16ux _19lestnw _14j01n1a _1pm0idpf _1p3gidpf _1d9kt94y _113e1o8l",
|
|
@@ -393,7 +393,7 @@ export var EditorContentContainerCompiled = /*#__PURE__*/React.forwardRef(functi
|
|
|
393
393
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
394
394
|
expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) && isDense && editorContentStyles.tasksAndDecisionsDenseStyles, editorContentStyles.gridStyles, editorContentStyles.blockMarksStyles, editorContentStyles.dateStyles, editorContentStyles.extensionStyles, (contentMode === 'compact' && expValEquals('confluence_compact_text_format', 'isEnabled', true) || expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) && editorContentStyles.extensionStylesDense, contentMode === 'compact' && expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && !expValEquals('confluence_compact_text_format', 'isEnabled', true) && !fg('platform_editor_content_mode_button_mvp') && editorContentStyles.extensionStylesLegacyDense, expValEquals('platform_editor_bodiedextension_layoutshift_fix', 'isEnabled', true) && editorContentStyles.bodiedExtensionLayoutShiftFix, editorContentStyles.extensionDiffStyles, editorContentStyles.expandStylesBase, !useStandardNodeWidth && editorContentStyles.expandStyles, contentMode === 'compact' && (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
|
|
395
395
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
396
|
-
expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) && isDense && editorContentStyles.expandDenseStyles, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes : editorContentStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, editorContentStyles.expandStylesMixin_fg_platform_visual_refresh_icons, isChromeless &&
|
|
396
|
+
expValEquals('cc_editor_ai_content_mode', 'variant', 'test') && fg('platform_editor_content_mode_button_mvp')) && isDense && editorContentStyles.expandDenseStyles, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes : editorContentStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, editorContentStyles.expandStylesMixin_fg_platform_visual_refresh_icons, isChromeless && editorContentStyles.expandStylesMixin_chromeless_expand_fix, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.findReplaceStylesNewWithA11Y : editorContentStyles.findReplaceStyles, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && editorContentStyles.findReplaceStylesNewWithCodeblockColorContrastFix, !expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) && editorContentStyles.findReplaceStylesWithCodeblockColorContrastFix, editorExperiment('platform_synced_block', true) && editorContentStyles.findReplaceStylesWithRefSyncBlock, editorContentStyles.textHighlightStyle, editorContentStyles.decisionStyles, expValEqualsNoExposure('platform_editor_blocktaskitem_node_tenantid', 'isEnabled', true) ? editorContentStyles.taskItemStylesWithBlockTaskItem : editorContentStyles.taskItemStyles, editorContentStyles.taskItemCheckboxStyles, editorContentStyles.decisionIconWithVisualRefresh, editorContentStyles.statusStyles, fg('platform-dst-lozenge-tag-badge-visual-uplifts') ? editorContentStyles.statusStylesTeam26 : fg('platform-component-visual-refresh') ? expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.statusStylesMixin_fg_platform_component_visual_refresh_with_search_match : editorContentStyles.statusStylesMixin_fg_platform_component_visual_refresh : expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorContentStyles.statusStylesMixin_without_fg_platform_component_visual_refresh_with_search_match : editorContentStyles.statusStylesMixin_without_fg_platform_component_visual_refresh, colorMode === 'dark' && fg('platform-dst-lozenge-tag-badge-visual-uplifts') && editorContentStyles.statusStylesTeam26DarkMode, editorContentStyles.annotationStyles, expValEqualsNoExposure('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? editorExperiment('platform_editor_block_menu', true) ? editorContentStyles.smartCardStylesWithSearchMatchAndBlockMenuDangerStyles : editorContentStyles.smartCardStylesWithSearchMatch : editorContentStyles.smartCardStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorContentStyles.smartCardStylesWithSearchMatchAndPreviewPanelResponsiveness, (expValEqualsNoExposure('platform_editor_controls', 'cohort', 'variant1') || editorExperiment('platform_editor_preview_panel_linking_exp', true)) && editorContentStyles.editorControlsSmartCardStyles, editorContentStyles.embedCardStyles, editorContentStyles.unsupportedStyles, editorContentStyles.resizerStyles, expValEqualsNoExposure('cc-maui-experiment', 'isEnabled', true) && expValEquals('databases-native-embeds-v2', 'isEnabled', true) && editorContentStyles.resizerBottomHandleStyles, editorContentStyles.layoutBaseStyles, expValEquals('platform_editor_table_excerpts_fix', 'isEnabled', true) && editorContentStyles.layoutBaseStylesWithTableExcerptsFix, fg('platform_editor_fix_media_in_renderer') && editorContentStyles.alignMultipleWrappedImageInLayoutStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockStylesBase, editorExperiment('platform_synced_block', true) &&
|
|
397
397
|
// Apply sync block delta styles conditionally based on useStandardNodeWidth (negative margins or not)
|
|
398
398
|
!useStandardNodeWidth && editorContentStyles.syncBlockStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockOverflowStyles, editorExperiment('platform_synced_block', true) && editorContentStyles.syncBlockFirstNodeStyles, editorExperiment('platform_synced_block', true) && fg('platform_synced_block_patch_14') && editorContentStyles.syncBlockTextSelectionStyles, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutBaseStylesAdvanced, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutSectionStylesAdvanced : editorContentStyles.layoutSectionStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && editorContentStyles.layoutColumnDividerStyles, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutColumnDividerStylesNestedDnD, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutColumnStylesAdvanced : editorContentStyles.layoutColumnStylesNotAdvanced, editorExperiment('advanced_layouts', true) && editorExperiment('platform_editor_layout_column_resize_handle', true) && editorContentStyles.layoutColumnResizeStyles, editorExperiment('advanced_layouts', true) ? editorContentStyles.layoutSelectedStylesAdvanced : editorContentStyles.layoutSelectedStylesNotAdvanced, editorExperiment('platform_synced_block', true) && editorContentStyles.layoutSelectedStylesAdvancedFix, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutColumnResponsiveStyles, editorExperiment('advanced_layouts', true) && editorContentStyles.layoutResponsiveBaseStyles, editorExperiment('platform_synced_block', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutBaseStylesFixesUnderNestedDnDFGExcludingBodiedSync, !editorExperiment('platform_synced_block', true) && fg('platform_editor_nested_dnd_styles_changes') && editorContentStyles.layoutBaseStylesFixesUnderNestedDnDFG, fg('platform_editor_nested_dnd_styles_changes') ? editorContentStyles.layoutColumnMartinTopFixesNew : editorContentStyles.layoutColumnMartinTopFixesOld, editorContentStyles.smartLinksInLivePagesStyles, editorContentStyles.linkingVisualRefreshV1Styles, editorContentStyles.dateVanillaStyles, fg('platform_editor_typography_ugc') ? contentMode === 'compact' && (expValEquals('confluence_compact_text_format', 'isEnabled', true) ||
|
|
399
399
|
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
@@ -33,7 +33,7 @@ import { dangerDateStyles, dateStyles, dateVanillaStyles } from './styles/dateSt
|
|
|
33
33
|
import { editorUGCSmallText, editorUGCTokensDefault, editorUGCTokensRefreshed } from './styles/editorUGCTokenStyles';
|
|
34
34
|
import { embedCardStyles } from './styles/embedCardStyles';
|
|
35
35
|
import { emojiDangerStyles, emojiStyles, getDenseEmojiStyles, getScaledDenseEmojiStyles, scaledEmojiStyles } from './styles/emoji';
|
|
36
|
-
import { expandStyles, expandStylesBase,
|
|
36
|
+
import { expandStyles, expandStylesBase, expandStylesMixin_chromeless_expand_fix, expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes, expandStylesMixin_fg_platform_visual_refresh_icons, expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes, getDenseExpandTitleStyles } from './styles/expandStyles';
|
|
37
37
|
import { extensionDiffStyles, getExtensionStyles } from './styles/extensionStyles';
|
|
38
38
|
import { findReplaceStyles, findReplaceStylesNewWithA11Y, findReplaceStylesNewWithCodeblockColorContrastFix, findReplaceStylesWithCodeblockColorContrastFix, findReplaceStylesWithRefSyncBlock } from './styles/findReplaceStyles';
|
|
39
39
|
import { firstBlockNodeStyles } from './styles/firstBlockNodeStyles';
|
|
@@ -312,9 +312,9 @@ export var EditorContentContainerEmotion = /*#__PURE__*/React.forwardRef(functio
|
|
|
312
312
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
313
313
|
expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
|
|
314
314
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
315
|
-
expandStylesMixin_fg_platform_visual_refresh_icons, isChromeless &&
|
|
315
|
+
expandStylesMixin_fg_platform_visual_refresh_icons, isChromeless &&
|
|
316
316
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
317
|
-
|
|
317
|
+
expandStylesMixin_chromeless_expand_fix, expValEquals('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
|
|
318
318
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
319
319
|
findReplaceStylesNewWithA11Y :
|
|
320
320
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -340,7 +340,7 @@ export var expandStylesMixin_fg_platform_editor_nested_dnd_styles_changes = css(
|
|
|
340
340
|
* See EDITOR-7600 for more details: https://hello.jira.atlassian.cloud/jira/browse/EDITOR-7600
|
|
341
341
|
*/
|
|
342
342
|
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
343
|
-
export var
|
|
343
|
+
export var expandStylesMixin_chromeless_expand_fix = css({
|
|
344
344
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
345
345
|
'.ProseMirror > .ak-editor-expand': {
|
|
346
346
|
marginLeft: 0,
|