@atlaskit/editor-core 221.3.2 → 221.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 +14 -0
- package/dist/cjs/ui/Appearance/Comment/Comment.js +344 -6
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +402 -10
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/Appearance/Comment/Comment.js +337 -4
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +400 -8
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/Appearance/Comment/Comment.js +339 -6
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +398 -10
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/Appearance/Comment/Comment.d.ts +20 -2
- package/dist/types/ui/Appearance/FullPage/FullPageContentArea.d.ts +54 -6
- package/package.json +7 -7
- package/dist/cjs/ui/Appearance/Comment/Comment-compiled.compiled.css +0 -30
- package/dist/cjs/ui/Appearance/Comment/Comment-compiled.js +0 -275
- package/dist/cjs/ui/Appearance/Comment/Comment-emotion.js +0 -357
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea-compiled.compiled.css +0 -96
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea-compiled.js +0 -190
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea-emotion.js +0 -413
- package/dist/es2019/ui/Appearance/Comment/Comment-compiled.compiled.css +0 -30
- package/dist/es2019/ui/Appearance/Comment/Comment-compiled.js +0 -262
- package/dist/es2019/ui/Appearance/Comment/Comment-emotion.js +0 -344
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea-compiled.compiled.css +0 -96
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea-compiled.js +0 -179
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea-emotion.js +0 -405
- package/dist/esm/ui/Appearance/Comment/Comment-compiled.compiled.css +0 -30
- package/dist/esm/ui/Appearance/Comment/Comment-compiled.js +0 -268
- package/dist/esm/ui/Appearance/Comment/Comment-emotion.js +0 -346
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea-compiled.compiled.css +0 -96
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea-compiled.js +0 -183
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea-emotion.js +0 -403
- package/dist/types/ui/Appearance/Comment/Comment-compiled.d.ts +0 -30
- package/dist/types/ui/Appearance/Comment/Comment-emotion.d.ts +0 -20
- package/dist/types/ui/Appearance/FullPage/FullPageContentArea-compiled.d.ts +0 -56
- package/dist/types/ui/Appearance/FullPage/FullPageContentArea-emotion.d.ts +0 -56
|
@@ -1,405 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
|
|
6
|
-
import React, { useImperativeHandle, useRef } from 'react';
|
|
7
|
-
|
|
8
|
-
/* eslint-disable @atlaskit/ui-styling-standard/use-compiled, @typescript-eslint/consistent-type-imports -- Ignored via go/DSP-18766; jsx required at runtime for @jsxRuntime classic */
|
|
9
|
-
import { css, jsx, useTheme } from '@emotion/react';
|
|
10
|
-
import classnames from 'classnames';
|
|
11
|
-
import { injectIntl } from 'react-intl';
|
|
12
|
-
import { decisionListSelector, taskListSelector } from '@atlaskit/adf-schema';
|
|
13
|
-
import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
|
|
14
|
-
import { fullPageMessages as messages } from '@atlaskit/editor-common/messages';
|
|
15
|
-
import { akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorDefaultLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
16
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
17
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
18
|
-
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
19
|
-
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
20
|
-
// Ignored via go/ees005
|
|
21
|
-
// eslint-disable-next-line import/no-named-as-default
|
|
22
|
-
import ClickAreaBlock from '../../Addon/ClickAreaBlock';
|
|
23
|
-
import { contentComponentClickWrapper } from '../../Addon/ClickAreaBlock/contentComponentWrapper';
|
|
24
|
-
import { ContextPanel } from '../../ContextPanel';
|
|
25
|
-
import EditorContentContainer from '../../EditorContentContainer/EditorContentContainer';
|
|
26
|
-
import PluginSlot from '../../PluginSlot';
|
|
27
|
-
import { contentAreaWrapper, sidebarArea } from './StyledComponents';
|
|
28
|
-
const akEditorFullWidthLayoutWidth = 1800;
|
|
29
|
-
const akEditorUltraWideLayoutWidth = 4000;
|
|
30
|
-
const akEditorSwoopCubicBezier = `cubic-bezier(0.15, 1, 0.3, 1)`;
|
|
31
|
-
const tableMarginFullWidthMode = 2;
|
|
32
|
-
const akLayoutGutterOffset = 12;
|
|
33
|
-
const SWOOP_ANIMATION = `0.5s ${akEditorSwoopCubicBezier}`;
|
|
34
|
-
const AK_NESTED_DND_GUTTER_OFFSET = 8;
|
|
35
|
-
const getTotalPadding = () => akEditorGutterPaddingDynamic() * 2;
|
|
36
|
-
const editorContentAreaProsemirrorStyle = css({
|
|
37
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
38
|
-
'& .ProseMirror': {
|
|
39
|
-
flexGrow: 1,
|
|
40
|
-
boxSizing: 'border-box',
|
|
41
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
42
|
-
'& > *': {
|
|
43
|
-
clear: 'both'
|
|
44
|
-
},
|
|
45
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
46
|
-
[`> p, > ul, > ol:not(${taskListSelector}):not(${decisionListSelector}), > h1, > h2, > h3, > h4, > h5, > h6`]: {
|
|
47
|
-
clear: 'none'
|
|
48
|
-
},
|
|
49
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
|
|
50
|
-
'> p:last-child': {
|
|
51
|
-
marginBottom: "var(--ds-space-300, 24px)"
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
/*
|
|
57
|
-
EDITOR-7249: Scope to the main editor's ProseMirror (direct child) so nested
|
|
58
|
-
editors like the footer page-comment composer aren't hidden in Syntax view.
|
|
59
|
-
*/
|
|
60
|
-
const hideEditorContentAreaProsemirrorWithAttributeStyle = css({
|
|
61
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
62
|
-
'&[data-markdown-mode-hide-prosemirror="true"] > .ak-editor-content-area > .ProseMirror': {
|
|
63
|
-
display: 'none'
|
|
64
|
-
}
|
|
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
|
-
});
|
|
75
|
-
const fullWidthNonChromelessBreakoutBlockTableStyle = css({
|
|
76
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
77
|
-
'.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
|
|
78
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
79
|
-
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
80
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
81
|
-
width: '100% !important'
|
|
82
|
-
},
|
|
83
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
84
|
-
'.fabric-editor-breakout-mark': {
|
|
85
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
86
|
-
marginLeft: 'unset !important',
|
|
87
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
88
|
-
transform: 'none !important'
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
|
|
93
|
-
// An additional spacing applied at the top of the content area reserving space when the primary toolbar
|
|
94
|
-
// is hidden – this avoids layout shift when the toolbar is toggled under the editor controls feature
|
|
95
|
-
const contentAreaReservedPrimaryToolbarSpace = css({
|
|
96
|
-
// extra 1px to account for the bottom border on the toolbar
|
|
97
|
-
marginTop: `calc(${"var(--ds-space-500, 40px)"} + 1px)`
|
|
98
|
-
});
|
|
99
|
-
|
|
100
|
-
// A reduced top spacing applied to the content area to compensate for the reserved space at the top
|
|
101
|
-
// of the page when the primary toolbar is hidden under the editor controls feature
|
|
102
|
-
const contentAreaReducedHeaderSpace = css({
|
|
103
|
-
paddingTop: "var(--ds-space-400, 32px)"
|
|
104
|
-
});
|
|
105
|
-
|
|
106
|
-
// new styles
|
|
107
|
-
const editorContentAreaNew = css({
|
|
108
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
109
|
-
lineHeight: '24px',
|
|
110
|
-
paddingTop: "var(--ds-space-600, 48px)",
|
|
111
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
112
|
-
'.ak-editor-content-area-no-toolbar &': {
|
|
113
|
-
// When the toolbar is hidden, we don't want content to jump up
|
|
114
|
-
// the extra 1px is to account for the border on the toolbar
|
|
115
|
-
paddingTop: `calc(${"var(--ds-space-600, 48px)"} + var(--ak-editor-fullpage-toolbar-height) + 1px)`
|
|
116
|
-
},
|
|
117
|
-
paddingBottom: "var(--ds-space-600, 48px)",
|
|
118
|
-
height: 'calc( 100% - 105px )',
|
|
119
|
-
width: '100%',
|
|
120
|
-
margin: 'auto',
|
|
121
|
-
flexDirection: 'column',
|
|
122
|
-
flexGrow: 1,
|
|
123
|
-
maxWidth: 'var(--ak-editor-content-area-max-width)',
|
|
124
|
-
transition: `max-width ${SWOOP_ANIMATION}`
|
|
125
|
-
});
|
|
126
|
-
const tableFullPageEditorStylesNew = css({
|
|
127
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
128
|
-
'.ProseMirror .pm-table-wrapper > table': {
|
|
129
|
-
marginLeft: 0,
|
|
130
|
-
/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */
|
|
131
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
132
|
-
marginRight: '-1px',
|
|
133
|
-
width: '100%'
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
const editorContentAreaContainerNestedDndStyle = css({
|
|
137
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
138
|
-
'.fabric-editor--full-width-mode': {
|
|
139
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
140
|
-
'[data-layout-section]': {
|
|
141
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
142
|
-
maxWidth: `calc(100% + ${(akLayoutGutterOffset + AK_NESTED_DND_GUTTER_OFFSET) * 2}px)`
|
|
143
|
-
}
|
|
144
|
-
}
|
|
145
|
-
});
|
|
146
|
-
|
|
147
|
-
/* Prevent horizontal scroll on page in full width mode */
|
|
148
|
-
const editorContentAreaContainerStyleExcludeCodeBlockNew = css({
|
|
149
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
150
|
-
'.fabric-editor--full-width-mode': {
|
|
151
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
152
|
-
'.extension-container, .multiBodiedExtension--container': {
|
|
153
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
154
|
-
maxWidth: `calc(100% - ${tableMarginFullWidthMode * 2}px)`
|
|
155
|
-
},
|
|
156
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
157
|
-
'.extension-container.inline': {
|
|
158
|
-
maxWidth: '100%'
|
|
159
|
-
},
|
|
160
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
161
|
-
'td .extension-container.inline': {
|
|
162
|
-
maxWidth: 'inherit'
|
|
163
|
-
},
|
|
164
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
165
|
-
'[data-layout-section]': {
|
|
166
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
167
|
-
maxWidth: `calc(100% + ${akLayoutGutterOffset * 2}px)`
|
|
168
|
-
}
|
|
169
|
-
}
|
|
170
|
-
});
|
|
171
|
-
|
|
172
|
-
/* Prevent horizontal scroll on page in full width mode */
|
|
173
|
-
const editorContentAreaContainerStyleNew = css({
|
|
174
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
175
|
-
'.fabric-editor--full-width-mode': {
|
|
176
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
177
|
-
'.code-block, .extension-container, .multiBodiedExtension--container': {
|
|
178
|
-
maxWidth: `calc(100% - ${tableMarginFullWidthMode * 2}px)`
|
|
179
|
-
},
|
|
180
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
181
|
-
'.extension-container.inline': {
|
|
182
|
-
maxWidth: '100%'
|
|
183
|
-
},
|
|
184
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
185
|
-
'td .extension-container.inline': {
|
|
186
|
-
maxWidth: 'inherit'
|
|
187
|
-
},
|
|
188
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
189
|
-
'[data-layout-section]': {
|
|
190
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
191
|
-
maxWidth: `calc(100% + ${akLayoutGutterOffset * 2}px)`
|
|
192
|
-
}
|
|
193
|
-
}
|
|
194
|
-
});
|
|
195
|
-
const editorContentGutterStyleFG = css({
|
|
196
|
-
padding: '0 72px'
|
|
197
|
-
});
|
|
198
|
-
const editorContentGutterStyles = css({
|
|
199
|
-
boxSizing: 'border-box',
|
|
200
|
-
padding: '0 52px'
|
|
201
|
-
});
|
|
202
|
-
const editorContentReducedGutterStyles = css({
|
|
203
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-container-queries, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
204
|
-
[`@container editor-area (max-width: ${akEditorFullPageNarrowBreakout}px)`]: {
|
|
205
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
206
|
-
padding: `0 ${akEditorGutterPaddingReduced}px`
|
|
207
|
-
}
|
|
208
|
-
});
|
|
209
|
-
const contentAreaNew = css({
|
|
210
|
-
display: 'flex',
|
|
211
|
-
flexDirection: 'row',
|
|
212
|
-
height: `calc(100% - var(--ak-editor-fullpage-toolbar-height))`,
|
|
213
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
214
|
-
'&.ak-editor-content-area-no-toolbar': {
|
|
215
|
-
// The editor toolbar height is 1px off (from the border) -- so we need to add 1px to the height
|
|
216
|
-
// to match the toolbar height
|
|
217
|
-
height: `calc(100% + 1px)`
|
|
218
|
-
},
|
|
219
|
-
boxSizing: 'border-box',
|
|
220
|
-
margin: 0,
|
|
221
|
-
padding: 0,
|
|
222
|
-
transition: `padding 0ms ${akEditorSwoopCubicBezier}`
|
|
223
|
-
});
|
|
224
|
-
const contentAreaHeightNoToolbar = css({
|
|
225
|
-
height: '100%'
|
|
226
|
-
});
|
|
227
|
-
|
|
228
|
-
// When the markdown source view is shown (markdown mode toggled on and not in
|
|
229
|
-
// the WYSIWYG "preview" view) we tint the whole editor container with the
|
|
230
|
-
// sunken surface so the source editor reads as a distinct, inset surface.
|
|
231
|
-
const markdownModeContainerBackgroundStyle = css({
|
|
232
|
-
backgroundColor: "var(--ds-surface-sunken, #F8F8F8)"
|
|
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
|
-
});
|
|
266
|
-
export const CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
267
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
268
|
-
export const EDITOR_CONTAINER = 'ak-editor-container';
|
|
269
|
-
const Content = /*#__PURE__*/React.forwardRef((props, ref) => {
|
|
270
|
-
var _props$editorAPI, _props$editorAPI$base, _props$editorAPI$base2, _props$editorAPI$bloc, _props$editorAPI2, _props$editorAPI2$blo, _props$editorAPI2$blo2, _props$editorAPI2$blo3, _contentAreaRef$curre, _allowScrollGutter$gu, _allowScrollGutter$gu2;
|
|
271
|
-
const theme = useTheme();
|
|
272
|
-
const fullWidthMode = props.appearance === 'full-width';
|
|
273
|
-
const maxWidthMode = props.appearance === 'max';
|
|
274
|
-
const scrollContainerRef = useRef(null);
|
|
275
|
-
const contentAreaRef = useRef(null);
|
|
276
|
-
const containerRef = useRef(null);
|
|
277
|
-
const allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 ? void 0 : (_props$editorAPI$base = _props$editorAPI.base) === null || _props$editorAPI$base === void 0 ? void 0 : (_props$editorAPI$base2 = _props$editorAPI$base.sharedState.currentState()) === null || _props$editorAPI$base2 === void 0 ? void 0 : _props$editorAPI$base2.allowScrollGutter;
|
|
278
|
-
const contentAreaMaxWidth = getTotalPadding() + (!fullWidthMode ? maxWidthMode ? akEditorUltraWideLayoutWidth : expValEquals('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || expValEquals('platform_editor_core_static_css', 'isEnabled', true) ? akEditorDefaultLayoutWidth : theme.layoutMaxWidth : akEditorFullWidthLayoutWidth);
|
|
279
|
-
|
|
280
|
-
// Get useStandardNodeWidth from block menu plugin shared state
|
|
281
|
-
// Only access editorAPI when the experiment is enabled to avoid performance impact
|
|
282
|
-
const useStandardNodeWidth = editorExperiment('platform_editor_controls', 'variant1') && ((_props$editorAPI$bloc = (_props$editorAPI2 = props.editorAPI) === null || _props$editorAPI2 === void 0 ? void 0 : (_props$editorAPI2$blo = _props$editorAPI2.blockMenu) === null || _props$editorAPI2$blo === void 0 ? void 0 : (_props$editorAPI2$blo2 = _props$editorAPI2$blo.sharedState) === null || _props$editorAPI2$blo2 === void 0 ? void 0 : (_props$editorAPI2$blo3 = _props$editorAPI2$blo2.currentState()) === null || _props$editorAPI2$blo3 === void 0 ? void 0 : _props$editorAPI2$blo3.useStandardNodeWidth) !== null && _props$editorAPI$bloc !== void 0 ? _props$editorAPI$bloc : false);
|
|
283
|
-
useImperativeHandle(ref, () => ({
|
|
284
|
-
get scrollContainer() {
|
|
285
|
-
return scrollContainerRef.current;
|
|
286
|
-
},
|
|
287
|
-
get contentArea() {
|
|
288
|
-
return contentAreaRef.current;
|
|
289
|
-
},
|
|
290
|
-
get containerArea() {
|
|
291
|
-
return containerRef.current;
|
|
292
|
-
}
|
|
293
|
-
}), []);
|
|
294
|
-
const markdownPluginCurrentView = useSharedPluginStateWithSelector(props.editorAPI, ['markdownMode'], states => {
|
|
295
|
-
var _states$markdownModeS;
|
|
296
|
-
return (_states$markdownModeS = states.markdownModeState) === null || _states$markdownModeS === void 0 ? void 0 : _states$markdownModeS.view;
|
|
297
|
-
});
|
|
298
|
-
const markdownPluginCurrentIsMarkdownMode = useSharedPluginStateWithSelector(props.editorAPI, ['markdownMode'], states => {
|
|
299
|
-
var _states$markdownModeS2;
|
|
300
|
-
return (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.isMarkdownMode;
|
|
301
|
-
});
|
|
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');
|
|
306
|
-
return jsx("div", {
|
|
307
|
-
css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
|
|
308
|
-
"data-testid": CONTENT_AREA_TEST_ID,
|
|
309
|
-
ref: containerRef
|
|
310
|
-
}, jsx("div", {
|
|
311
|
-
css: [
|
|
312
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
313
|
-
contentAreaWrapper, shouldUseMarkdownModeMvpLayout && markdownModeContainerBackgroundStyle],
|
|
314
|
-
"data-testid": EDITOR_CONTAINER,
|
|
315
|
-
"data-editor-container": 'true'
|
|
316
|
-
}, jsx(EditorContentContainer
|
|
317
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
318
|
-
, {
|
|
319
|
-
className: "fabric-editor-popup-scroll-parent",
|
|
320
|
-
featureFlags: props.featureFlags,
|
|
321
|
-
ref: scrollContainerRef,
|
|
322
|
-
viewMode: props === null || props === void 0 ? void 0 : props.viewMode,
|
|
323
|
-
isScrollable: true,
|
|
324
|
-
appearance: props.appearance,
|
|
325
|
-
contentMode: props.contentMode,
|
|
326
|
-
useStandardNodeWidth: useStandardNodeWidth
|
|
327
|
-
}, jsx(ClickAreaBlock, {
|
|
328
|
-
editorView: props.editorView,
|
|
329
|
-
editorDisabled: props.disabled
|
|
330
|
-
}, jsx("div", {
|
|
331
|
-
"data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode ? 'true' : undefined,
|
|
332
|
-
"data-markdown-mode-hide-scroll-gutter": shouldHideScrollGutterForMarkdownMode ? 'true' : undefined,
|
|
333
|
-
css: [editorContentAreaNew, editorContentAreaProsemirrorStyle,
|
|
334
|
-
// EDITOR-6558: hide ProseMirror when the markdown-mode plugin
|
|
335
|
-
// reports a non-WYSIWYG view.
|
|
336
|
-
shouldHideProseMirrorForMarkdownMode && hideEditorContentAreaProsemirrorWithAttributeStyle, shouldHideScrollGutterForMarkdownMode && hideEditorContentAreaScrollGutterWithAttributeStyle, shouldUseMarkdownModeMvpLayout && markdownModeContentAreaStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
|
|
337
|
-
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
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],
|
|
339
|
-
style: {
|
|
340
|
-
'--ak-editor-content-area-max-width': `${contentAreaMaxWidth}px`
|
|
341
|
-
}
|
|
342
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
343
|
-
,
|
|
344
|
-
className: "ak-editor-content-area-region",
|
|
345
|
-
"data-editor-editable-content": true,
|
|
346
|
-
role: "region",
|
|
347
|
-
"aria-label": props.intl.formatMessage(messages.editableContentLabel),
|
|
348
|
-
ref: contentAreaRef,
|
|
349
|
-
"data-vc": "editor-content-area-region"
|
|
350
|
-
}, jsx("div", {
|
|
351
|
-
css: [editorContentGutterStyles,
|
|
352
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
353
|
-
fg('platform_editor_controls_increase_full_page_gutter') && editorExperiment('platform_editor_controls', 'variant1') && editorContentGutterStyleFG, editorExperiment('platform_editor_preview_panel_responsiveness', true, {
|
|
354
|
-
exposure: true
|
|
355
|
-
}) && editorContentReducedGutterStyles]
|
|
356
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
357
|
-
,
|
|
358
|
-
className: classnames('ak-editor-content-area', 'appearance-full-page', {
|
|
359
|
-
'fabric-editor--full-width-mode': fullWidthMode,
|
|
360
|
-
'fabric-editor--max-width-mode': Boolean(maxWidthMode)
|
|
361
|
-
}),
|
|
362
|
-
ref: contentAreaRef
|
|
363
|
-
}, !!props.customContentComponents && 'before' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.before) : contentComponentClickWrapper(props.customContentComponents), jsx(PluginSlot, {
|
|
364
|
-
editorView: props.editorView,
|
|
365
|
-
editorActions: props.editorActions,
|
|
366
|
-
eventDispatcher: props.eventDispatcher,
|
|
367
|
-
providerFactory: props.providerFactory,
|
|
368
|
-
appearance: props.appearance,
|
|
369
|
-
items: props.contentComponents,
|
|
370
|
-
pluginHooks: props.pluginHooks,
|
|
371
|
-
contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
|
|
372
|
-
popupsMountPoint: props.popupsMountPoint,
|
|
373
|
-
popupsBoundariesElement: props.popupsBoundariesElement,
|
|
374
|
-
popupsScrollableElement: props.popupsScrollableElement,
|
|
375
|
-
disabled: !!props.disabled,
|
|
376
|
-
containerElement: scrollContainerRef.current,
|
|
377
|
-
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
|
|
378
|
-
wrapperElement: props.wrapperElement
|
|
379
|
-
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? contentComponentClickWrapper(props.customContentComponents.after) : null, allowScrollGutter && (editorExperiment('platform_editor_blocks', true) ? jsx("div", {
|
|
380
|
-
id: "editor-scroll-gutter",
|
|
381
|
-
css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
|
|
382
|
-
style: {
|
|
383
|
-
paddingBottom: `${(_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120'}px`
|
|
384
|
-
},
|
|
385
|
-
"data-vc": "scroll-gutter",
|
|
386
|
-
"data-editor-scroll-gutter": "true"
|
|
387
|
-
}) : jsx("div", {
|
|
388
|
-
id: "editor-scroll-gutter",
|
|
389
|
-
css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
|
|
390
|
-
style: {
|
|
391
|
-
paddingBottom: `${(_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120'}px`
|
|
392
|
-
},
|
|
393
|
-
"data-vc": "scroll-gutter"
|
|
394
|
-
}))))))), jsx("div", {
|
|
395
|
-
css: sidebarArea
|
|
396
|
-
}, props.contextPanel || jsx(ContextPanel, {
|
|
397
|
-
editorAPI: props.editorAPI,
|
|
398
|
-
visible: false
|
|
399
|
-
})));
|
|
400
|
-
});
|
|
401
|
-
|
|
402
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
403
|
-
export const FullPageContentAreaEmotion = injectIntl(Content, {
|
|
404
|
-
forwardRef: true
|
|
405
|
-
});
|
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
._19itno8c{border:var(--ds-border-width,1px) solid var(--ds-border-input,#8c8f97)}
|
|
3
|
-
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
4
|
-
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
5
|
-
._2rkopb1k{border-radius:var(--ds-radius-xlarge,9pt)}._13dfutpp .less-margin>.ProseMirror{margin-top:var(--ds-space-150,9pt)}
|
|
6
|
-
._16jlkb7n{flex-grow:1}
|
|
7
|
-
._18m91wug{overflow-y:auto}
|
|
8
|
-
._19bvv77o{padding-left:var(--ds-space-025,2px)}
|
|
9
|
-
._1bahesu3{justify-content:flex-end}
|
|
10
|
-
._1e0c1txw{display:flex}
|
|
11
|
-
._1ul9clpc{min-width:17pc}
|
|
12
|
-
._2lx21bp4{flex-direction:column}
|
|
13
|
-
._4cvr1h6o{align-items:center}
|
|
14
|
-
._4t3i1wug{height:auto}
|
|
15
|
-
._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
|
|
16
|
-
._c71lmz22{max-height:var(--comment-editor-max-height)}
|
|
17
|
-
._ca0qutpp{padding-top:var(--ds-space-150,9pt)}
|
|
18
|
-
._ghozu2gc .less-margin>.ProseMirror{margin-bottom:var(--ds-space-100,8px)}
|
|
19
|
-
._gzr8u2gc .less-margin>.ProseMirror{margin-right:var(--ds-space-100,8px)}
|
|
20
|
-
._n3tdutpp{padding-bottom:var(--ds-space-150,9pt)}
|
|
21
|
-
._oafwu2gc .less-margin>.ProseMirror{margin-left:var(--ds-space-100,8px)}
|
|
22
|
-
._p12f1kw7{max-width:inherit}
|
|
23
|
-
._p7r11txw >div{display:flex}
|
|
24
|
-
._slp31hna{word-wrap:break-word}
|
|
25
|
-
._t1edidpf >div{flex-shrink:0}
|
|
26
|
-
._u5f3idpf{padding-right:0}
|
|
27
|
-
._u5f3v47k{padding-right:var(--ds-space-250,20px)}
|
|
28
|
-
._u5f3v77o{padding-right:var(--ds-space-025,2px)}
|
|
29
|
-
._vchhusvi{box-sizing:border-box}
|
|
30
|
-
@media (max-width:490px){._xugcidpf{padding-right:0}}
|