@atlaskit/editor-core 221.3.2 → 221.3.3
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 +8 -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 +3 -3
- 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,413 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
-
Object.defineProperty(exports, "__esModule", {
|
|
6
|
-
value: true
|
|
7
|
-
});
|
|
8
|
-
exports.FullPageContentAreaEmotion = exports.EDITOR_CONTAINER = exports.CONTENT_AREA_TEST_ID = void 0;
|
|
9
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
-
var _react = _interopRequireWildcard(require("react"));
|
|
11
|
-
var _react2 = require("@emotion/react");
|
|
12
|
-
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
-
var _reactIntl = require("react-intl");
|
|
14
|
-
var _adfSchema = require("@atlaskit/adf-schema");
|
|
15
|
-
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
16
|
-
var _messages = require("@atlaskit/editor-common/messages");
|
|
17
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
18
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
20
|
-
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
21
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
22
|
-
var _ClickAreaBlock = _interopRequireDefault(require("../../Addon/ClickAreaBlock"));
|
|
23
|
-
var _contentComponentWrapper = require("../../Addon/ClickAreaBlock/contentComponentWrapper");
|
|
24
|
-
var _ContextPanel = require("../../ContextPanel");
|
|
25
|
-
var _EditorContentContainer = _interopRequireDefault(require("../../EditorContentContainer/EditorContentContainer"));
|
|
26
|
-
var _PluginSlot = _interopRequireDefault(require("../../PluginSlot"));
|
|
27
|
-
var _StyledComponents = require("./StyledComponents");
|
|
28
|
-
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
29
|
-
/**
|
|
30
|
-
* @jsxRuntime classic
|
|
31
|
-
* @jsx jsx
|
|
32
|
-
*/
|
|
33
|
-
|
|
34
|
-
/* 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 */
|
|
35
|
-
|
|
36
|
-
// Ignored via go/ees005
|
|
37
|
-
// eslint-disable-next-line import/no-named-as-default
|
|
38
|
-
|
|
39
|
-
var akEditorFullWidthLayoutWidth = 1800;
|
|
40
|
-
var akEditorUltraWideLayoutWidth = 4000;
|
|
41
|
-
var akEditorSwoopCubicBezier = "cubic-bezier(0.15, 1, 0.3, 1)";
|
|
42
|
-
var tableMarginFullWidthMode = 2;
|
|
43
|
-
var akLayoutGutterOffset = 12;
|
|
44
|
-
var SWOOP_ANIMATION = "0.5s ".concat(akEditorSwoopCubicBezier);
|
|
45
|
-
var AK_NESTED_DND_GUTTER_OFFSET = 8;
|
|
46
|
-
var getTotalPadding = function getTotalPadding() {
|
|
47
|
-
return (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
|
|
48
|
-
};
|
|
49
|
-
var editorContentAreaProsemirrorStyle = (0, _react2.css)({
|
|
50
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
51
|
-
'& .ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
52
|
-
flexGrow: 1,
|
|
53
|
-
boxSizing: 'border-box',
|
|
54
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
55
|
-
'& > *': {
|
|
56
|
-
clear: 'both'
|
|
57
|
-
}
|
|
58
|
-
}, "> p, > ul, > ol:not(".concat(_adfSchema.taskListSelector, "):not(").concat(_adfSchema.decisionListSelector, "), > h1, > h2, > h3, > h4, > h5, > h6"), {
|
|
59
|
-
clear: 'none'
|
|
60
|
-
}), '> p:last-child', {
|
|
61
|
-
marginBottom: "var(--ds-space-300, 24px)"
|
|
62
|
-
})
|
|
63
|
-
});
|
|
64
|
-
|
|
65
|
-
/*
|
|
66
|
-
EDITOR-7249: Scope to the main editor's ProseMirror (direct child) so nested
|
|
67
|
-
editors like the footer page-comment composer aren't hidden in Syntax view.
|
|
68
|
-
*/
|
|
69
|
-
var hideEditorContentAreaProsemirrorWithAttributeStyle = (0, _react2.css)({
|
|
70
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
71
|
-
'&[data-markdown-mode-hide-prosemirror="true"] > .ak-editor-content-area > .ProseMirror': {
|
|
72
|
-
display: 'none'
|
|
73
|
-
}
|
|
74
|
-
});
|
|
75
|
-
var hideEditorContentAreaScrollGutterWithAttributeStyle = (0, _react2.css)({
|
|
76
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
77
|
-
'&[data-markdown-mode-hide-scroll-gutter="true"] > .ak-editor-content-area > [data-vc="scroll-gutter"]': {
|
|
78
|
-
display: 'none'
|
|
79
|
-
}
|
|
80
|
-
});
|
|
81
|
-
var hideEditorScrollGutterStyle = (0, _react2.css)({
|
|
82
|
-
display: 'none'
|
|
83
|
-
});
|
|
84
|
-
var fullWidthNonChromelessBreakoutBlockTableStyle = (0, _react2.css)({
|
|
85
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
86
|
-
'.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
|
|
87
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
88
|
-
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
89
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
90
|
-
width: '100% !important'
|
|
91
|
-
},
|
|
92
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
93
|
-
'.fabric-editor-breakout-mark': {
|
|
94
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
95
|
-
marginLeft: 'unset !important',
|
|
96
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
97
|
-
transform: 'none !important'
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
});
|
|
101
|
-
|
|
102
|
-
// An additional spacing applied at the top of the content area reserving space when the primary toolbar
|
|
103
|
-
// is hidden – this avoids layout shift when the toolbar is toggled under the editor controls feature
|
|
104
|
-
var contentAreaReservedPrimaryToolbarSpace = (0, _react2.css)({
|
|
105
|
-
// extra 1px to account for the bottom border on the toolbar
|
|
106
|
-
marginTop: "calc(".concat("var(--ds-space-500, 40px)", " + 1px)")
|
|
107
|
-
});
|
|
108
|
-
|
|
109
|
-
// A reduced top spacing applied to the content area to compensate for the reserved space at the top
|
|
110
|
-
// of the page when the primary toolbar is hidden under the editor controls feature
|
|
111
|
-
var contentAreaReducedHeaderSpace = (0, _react2.css)({
|
|
112
|
-
paddingTop: "var(--ds-space-400, 32px)"
|
|
113
|
-
});
|
|
114
|
-
|
|
115
|
-
// new styles
|
|
116
|
-
var editorContentAreaNew = (0, _react2.css)({
|
|
117
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
118
|
-
lineHeight: '24px',
|
|
119
|
-
paddingTop: "var(--ds-space-600, 48px)",
|
|
120
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
121
|
-
'.ak-editor-content-area-no-toolbar &': {
|
|
122
|
-
// When the toolbar is hidden, we don't want content to jump up
|
|
123
|
-
// the extra 1px is to account for the border on the toolbar
|
|
124
|
-
paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + var(--ak-editor-fullpage-toolbar-height) + 1px)")
|
|
125
|
-
},
|
|
126
|
-
paddingBottom: "var(--ds-space-600, 48px)",
|
|
127
|
-
height: 'calc( 100% - 105px )',
|
|
128
|
-
width: '100%',
|
|
129
|
-
margin: 'auto',
|
|
130
|
-
flexDirection: 'column',
|
|
131
|
-
flexGrow: 1,
|
|
132
|
-
maxWidth: 'var(--ak-editor-content-area-max-width)',
|
|
133
|
-
transition: "max-width ".concat(SWOOP_ANIMATION)
|
|
134
|
-
});
|
|
135
|
-
var tableFullPageEditorStylesNew = (0, _react2.css)({
|
|
136
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
137
|
-
'.ProseMirror .pm-table-wrapper > table': {
|
|
138
|
-
marginLeft: 0,
|
|
139
|
-
/* 1px border width offset added here to prevent unwanted overflow and scolling - ED-16212 */
|
|
140
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-space
|
|
141
|
-
marginRight: '-1px',
|
|
142
|
-
width: '100%'
|
|
143
|
-
}
|
|
144
|
-
});
|
|
145
|
-
var editorContentAreaContainerNestedDndStyle = (0, _react2.css)({
|
|
146
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
147
|
-
'.fabric-editor--full-width-mode': {
|
|
148
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
149
|
-
'[data-layout-section]': {
|
|
150
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
151
|
-
maxWidth: "calc(100% + ".concat((akLayoutGutterOffset + AK_NESTED_DND_GUTTER_OFFSET) * 2, "px)")
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
});
|
|
155
|
-
|
|
156
|
-
/* Prevent horizontal scroll on page in full width mode */
|
|
157
|
-
var editorContentAreaContainerStyleExcludeCodeBlockNew = (0, _react2.css)({
|
|
158
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
159
|
-
'.fabric-editor--full-width-mode': {
|
|
160
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
161
|
-
'.extension-container, .multiBodiedExtension--container': {
|
|
162
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
163
|
-
maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
|
|
164
|
-
},
|
|
165
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
166
|
-
'.extension-container.inline': {
|
|
167
|
-
maxWidth: '100%'
|
|
168
|
-
},
|
|
169
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
170
|
-
'td .extension-container.inline': {
|
|
171
|
-
maxWidth: 'inherit'
|
|
172
|
-
},
|
|
173
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
174
|
-
'[data-layout-section]': {
|
|
175
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
176
|
-
maxWidth: "calc(100% + ".concat(akLayoutGutterOffset * 2, "px)")
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
});
|
|
180
|
-
|
|
181
|
-
/* Prevent horizontal scroll on page in full width mode */
|
|
182
|
-
var editorContentAreaContainerStyleNew = (0, _react2.css)({
|
|
183
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
184
|
-
'.fabric-editor--full-width-mode': {
|
|
185
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
186
|
-
'.code-block, .extension-container, .multiBodiedExtension--container': {
|
|
187
|
-
maxWidth: "calc(100% - ".concat(tableMarginFullWidthMode * 2, "px)")
|
|
188
|
-
},
|
|
189
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
190
|
-
'.extension-container.inline': {
|
|
191
|
-
maxWidth: '100%'
|
|
192
|
-
},
|
|
193
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
194
|
-
'td .extension-container.inline': {
|
|
195
|
-
maxWidth: 'inherit'
|
|
196
|
-
},
|
|
197
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
198
|
-
'[data-layout-section]': {
|
|
199
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
200
|
-
maxWidth: "calc(100% + ".concat(akLayoutGutterOffset * 2, "px)")
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
});
|
|
204
|
-
var editorContentGutterStyleFG = (0, _react2.css)({
|
|
205
|
-
padding: '0 72px'
|
|
206
|
-
});
|
|
207
|
-
var editorContentGutterStyles = (0, _react2.css)({
|
|
208
|
-
boxSizing: 'border-box',
|
|
209
|
-
padding: '0 52px'
|
|
210
|
-
});
|
|
211
|
-
var editorContentReducedGutterStyles = (0, _react2.css)((0, _defineProperty2.default)({}, "@container editor-area (max-width: ".concat(_editorSharedStyles.akEditorFullPageNarrowBreakout, "px)"), {
|
|
212
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
213
|
-
padding: "0 ".concat(_editorSharedStyles.akEditorGutterPaddingReduced, "px")
|
|
214
|
-
}));
|
|
215
|
-
var contentAreaNew = (0, _react2.css)({
|
|
216
|
-
display: 'flex',
|
|
217
|
-
flexDirection: 'row',
|
|
218
|
-
height: "calc(100% - var(--ak-editor-fullpage-toolbar-height))",
|
|
219
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
220
|
-
'&.ak-editor-content-area-no-toolbar': {
|
|
221
|
-
// The editor toolbar height is 1px off (from the border) -- so we need to add 1px to the height
|
|
222
|
-
// to match the toolbar height
|
|
223
|
-
height: "calc(100% + 1px)"
|
|
224
|
-
},
|
|
225
|
-
boxSizing: 'border-box',
|
|
226
|
-
margin: 0,
|
|
227
|
-
padding: 0,
|
|
228
|
-
transition: "padding 0ms ".concat(akEditorSwoopCubicBezier)
|
|
229
|
-
});
|
|
230
|
-
var contentAreaHeightNoToolbar = (0, _react2.css)({
|
|
231
|
-
height: '100%'
|
|
232
|
-
});
|
|
233
|
-
|
|
234
|
-
// When the markdown source view is shown (markdown mode toggled on and not in
|
|
235
|
-
// the WYSIWYG "preview" view) we tint the whole editor container with the
|
|
236
|
-
// sunken surface so the source editor reads as a distinct, inset surface.
|
|
237
|
-
var markdownModeContainerBackgroundStyle = (0, _react2.css)({
|
|
238
|
-
backgroundColor: "var(--ds-surface-sunken, #F8F8F8)"
|
|
239
|
-
});
|
|
240
|
-
var markdownModeContentAreaStyle = (0, _react2.css)({
|
|
241
|
-
boxSizing: 'border-box',
|
|
242
|
-
height: '100%',
|
|
243
|
-
margin: 0,
|
|
244
|
-
maxWidth: 'none',
|
|
245
|
-
minWidth: 0,
|
|
246
|
-
paddingBottom: 0,
|
|
247
|
-
paddingTop: 0,
|
|
248
|
-
width: '100%',
|
|
249
|
-
// The markdown source view is rendered through PluginSlot. Stretch those
|
|
250
|
-
// intermediate wrappers so its in-flow footer can sit at the bottom without
|
|
251
|
-
// overlaying the CodeMirror scrollbar.
|
|
252
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
253
|
-
'> .ak-editor-content-area': {
|
|
254
|
-
boxSizing: 'border-box',
|
|
255
|
-
display: 'flex',
|
|
256
|
-
flexDirection: 'column',
|
|
257
|
-
height: '100%',
|
|
258
|
-
minHeight: 0,
|
|
259
|
-
minWidth: 0,
|
|
260
|
-
padding: 0,
|
|
261
|
-
width: '100%'
|
|
262
|
-
},
|
|
263
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
264
|
-
'> .ak-editor-content-area > [data-testid="plugins-components-wrapper"]': {
|
|
265
|
-
display: 'flex',
|
|
266
|
-
flex: '1 1 auto',
|
|
267
|
-
minHeight: 0,
|
|
268
|
-
minWidth: 0,
|
|
269
|
-
width: '100%'
|
|
270
|
-
}
|
|
271
|
-
});
|
|
272
|
-
var CONTENT_AREA_TEST_ID = exports.CONTENT_AREA_TEST_ID = 'ak-editor-fp-content-area';
|
|
273
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
274
|
-
var EDITOR_CONTAINER = exports.EDITOR_CONTAINER = 'ak-editor-container';
|
|
275
|
-
var Content = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
|
|
276
|
-
var _props$editorAPI, _props$editorAPI$bloc, _props$editorAPI2, _contentAreaRef$curre, _allowScrollGutter$gu, _allowScrollGutter$gu2;
|
|
277
|
-
var theme = (0, _react2.useTheme)();
|
|
278
|
-
var fullWidthMode = props.appearance === 'full-width';
|
|
279
|
-
var maxWidthMode = props.appearance === 'max';
|
|
280
|
-
var scrollContainerRef = (0, _react.useRef)(null);
|
|
281
|
-
var contentAreaRef = (0, _react.useRef)(null);
|
|
282
|
-
var containerRef = (0, _react.useRef)(null);
|
|
283
|
-
var allowScrollGutter = (_props$editorAPI = props.editorAPI) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.base) === null || _props$editorAPI === void 0 || (_props$editorAPI = _props$editorAPI.sharedState.currentState()) === null || _props$editorAPI === void 0 ? void 0 : _props$editorAPI.allowScrollGutter;
|
|
284
|
-
var contentAreaMaxWidth = getTotalPadding() + (!fullWidthMode ? maxWidthMode ? akEditorUltraWideLayoutWidth : (0, _expValEquals.expValEquals)('platform_editor_core_non_ecc_static_css', 'isEnabled', true) || (0, _expValEquals.expValEquals)('platform_editor_core_static_css', 'isEnabled', true) ? _editorSharedStyles.akEditorDefaultLayoutWidth : theme.layoutMaxWidth : akEditorFullWidthLayoutWidth);
|
|
285
|
-
|
|
286
|
-
// Get useStandardNodeWidth from block menu plugin shared state
|
|
287
|
-
// Only access editorAPI when the experiment is enabled to avoid performance impact
|
|
288
|
-
var useStandardNodeWidth = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && ((_props$editorAPI$bloc = (_props$editorAPI2 = props.editorAPI) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.blockMenu) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.sharedState) === null || _props$editorAPI2 === void 0 || (_props$editorAPI2 = _props$editorAPI2.currentState()) === null || _props$editorAPI2 === void 0 ? void 0 : _props$editorAPI2.useStandardNodeWidth) !== null && _props$editorAPI$bloc !== void 0 ? _props$editorAPI$bloc : false);
|
|
289
|
-
(0, _react.useImperativeHandle)(ref, function () {
|
|
290
|
-
return {
|
|
291
|
-
get scrollContainer() {
|
|
292
|
-
return scrollContainerRef.current;
|
|
293
|
-
},
|
|
294
|
-
get contentArea() {
|
|
295
|
-
return contentAreaRef.current;
|
|
296
|
-
},
|
|
297
|
-
get containerArea() {
|
|
298
|
-
return containerRef.current;
|
|
299
|
-
}
|
|
300
|
-
};
|
|
301
|
-
}, []);
|
|
302
|
-
var markdownPluginCurrentView = (0, _hooks.useSharedPluginStateWithSelector)(props.editorAPI, ['markdownMode'], function (states) {
|
|
303
|
-
var _states$markdownModeS;
|
|
304
|
-
return (_states$markdownModeS = states.markdownModeState) === null || _states$markdownModeS === void 0 ? void 0 : _states$markdownModeS.view;
|
|
305
|
-
});
|
|
306
|
-
var markdownPluginCurrentIsMarkdownMode = (0, _hooks.useSharedPluginStateWithSelector)(props.editorAPI, ['markdownMode'], function (states) {
|
|
307
|
-
var _states$markdownModeS2;
|
|
308
|
-
return (_states$markdownModeS2 = states.markdownModeState) === null || _states$markdownModeS2 === void 0 ? void 0 : _states$markdownModeS2.isMarkdownMode;
|
|
309
|
-
});
|
|
310
|
-
var isMarkdownModeExperimentEnabled = (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true);
|
|
311
|
-
var shouldHideProseMirrorForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentView !== 'preview' && markdownPluginCurrentIsMarkdownMode;
|
|
312
|
-
var shouldHideScrollGutterForMarkdownMode = isMarkdownModeExperimentEnabled && markdownPluginCurrentIsMarkdownMode;
|
|
313
|
-
var shouldUseMarkdownModeMvpLayout = shouldHideProseMirrorForMarkdownMode && (0, _platformFeatureFlags.fg)('platform_editor_md_mvp_layout');
|
|
314
|
-
return (0, _react2.jsx)("div", {
|
|
315
|
-
css: [contentAreaNew, props.isEditorToolbarHidden && contentAreaHeightNoToolbar],
|
|
316
|
-
"data-testid": CONTENT_AREA_TEST_ID,
|
|
317
|
-
ref: containerRef
|
|
318
|
-
}, (0, _react2.jsx)("div", {
|
|
319
|
-
css: [
|
|
320
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
321
|
-
_StyledComponents.contentAreaWrapper, shouldUseMarkdownModeMvpLayout && markdownModeContainerBackgroundStyle],
|
|
322
|
-
"data-testid": EDITOR_CONTAINER,
|
|
323
|
-
"data-editor-container": 'true'
|
|
324
|
-
}, (0, _react2.jsx)(_EditorContentContainer.default
|
|
325
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
326
|
-
, {
|
|
327
|
-
className: "fabric-editor-popup-scroll-parent",
|
|
328
|
-
featureFlags: props.featureFlags,
|
|
329
|
-
ref: scrollContainerRef,
|
|
330
|
-
viewMode: props === null || props === void 0 ? void 0 : props.viewMode,
|
|
331
|
-
isScrollable: true,
|
|
332
|
-
appearance: props.appearance,
|
|
333
|
-
contentMode: props.contentMode,
|
|
334
|
-
useStandardNodeWidth: useStandardNodeWidth
|
|
335
|
-
}, (0, _react2.jsx)(_ClickAreaBlock.default, {
|
|
336
|
-
editorView: props.editorView,
|
|
337
|
-
editorDisabled: props.disabled
|
|
338
|
-
}, (0, _react2.jsx)("div", {
|
|
339
|
-
"data-markdown-mode-hide-prosemirror": shouldHideProseMirrorForMarkdownMode ? 'true' : undefined,
|
|
340
|
-
"data-markdown-mode-hide-scroll-gutter": shouldHideScrollGutterForMarkdownMode ? 'true' : undefined,
|
|
341
|
-
css: [editorContentAreaNew, editorContentAreaProsemirrorStyle,
|
|
342
|
-
// EDITOR-6558: hide ProseMirror when the markdown-mode plugin
|
|
343
|
-
// reports a non-WYSIWYG view.
|
|
344
|
-
shouldHideProseMirrorForMarkdownMode && hideEditorContentAreaProsemirrorWithAttributeStyle, shouldHideScrollGutterForMarkdownMode && hideEditorContentAreaScrollGutterWithAttributeStyle, shouldUseMarkdownModeMvpLayout && markdownModeContentAreaStyle, tableFullPageEditorStylesNew, fullWidthNonChromelessBreakoutBlockTableStyle,
|
|
345
|
-
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
346
|
-
(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) ? editorContentAreaContainerStyleExcludeCodeBlockNew : editorContentAreaContainerStyleNew, (0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') && editorContentAreaContainerNestedDndStyle, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReducedHeaderSpace, !(0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') && props.isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && contentAreaReservedPrimaryToolbarSpace],
|
|
347
|
-
style: {
|
|
348
|
-
'--ak-editor-content-area-max-width': "".concat(contentAreaMaxWidth, "px")
|
|
349
|
-
}
|
|
350
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
|
|
351
|
-
,
|
|
352
|
-
className: "ak-editor-content-area-region",
|
|
353
|
-
"data-editor-editable-content": true,
|
|
354
|
-
role: "region",
|
|
355
|
-
"aria-label": props.intl.formatMessage(_messages.fullPageMessages.editableContentLabel),
|
|
356
|
-
ref: contentAreaRef,
|
|
357
|
-
"data-vc": "editor-content-area-region"
|
|
358
|
-
}, (0, _react2.jsx)("div", {
|
|
359
|
-
css: [editorContentGutterStyles,
|
|
360
|
-
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
361
|
-
(0, _platformFeatureFlags.fg)('platform_editor_controls_increase_full_page_gutter') && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && editorContentGutterStyleFG, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
|
|
362
|
-
exposure: true
|
|
363
|
-
}) && editorContentReducedGutterStyles]
|
|
364
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
365
|
-
,
|
|
366
|
-
className: (0, _classnames.default)('ak-editor-content-area', 'appearance-full-page', {
|
|
367
|
-
'fabric-editor--full-width-mode': fullWidthMode,
|
|
368
|
-
'fabric-editor--max-width-mode': Boolean(maxWidthMode)
|
|
369
|
-
}),
|
|
370
|
-
ref: contentAreaRef
|
|
371
|
-
}, !!props.customContentComponents && 'before' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.before) : (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents), (0, _react2.jsx)(_PluginSlot.default, {
|
|
372
|
-
editorView: props.editorView,
|
|
373
|
-
editorActions: props.editorActions,
|
|
374
|
-
eventDispatcher: props.eventDispatcher,
|
|
375
|
-
providerFactory: props.providerFactory,
|
|
376
|
-
appearance: props.appearance,
|
|
377
|
-
items: props.contentComponents,
|
|
378
|
-
pluginHooks: props.pluginHooks,
|
|
379
|
-
contentArea: (_contentAreaRef$curre = contentAreaRef.current) !== null && _contentAreaRef$curre !== void 0 ? _contentAreaRef$curre : undefined,
|
|
380
|
-
popupsMountPoint: props.popupsMountPoint,
|
|
381
|
-
popupsBoundariesElement: props.popupsBoundariesElement,
|
|
382
|
-
popupsScrollableElement: props.popupsScrollableElement,
|
|
383
|
-
disabled: !!props.disabled,
|
|
384
|
-
containerElement: scrollContainerRef.current,
|
|
385
|
-
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
|
|
386
|
-
wrapperElement: props.wrapperElement
|
|
387
|
-
}), props.editorDOMElement, !!props.customContentComponents && 'after' in props.customContentComponents ? (0, _contentComponentWrapper.contentComponentClickWrapper)(props.customContentComponents.after) : null, allowScrollGutter && ((0, _experiments.editorExperiment)('platform_editor_blocks', true) ? (0, _react2.jsx)("div", {
|
|
388
|
-
id: "editor-scroll-gutter",
|
|
389
|
-
css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
|
|
390
|
-
style: {
|
|
391
|
-
paddingBottom: "".concat((_allowScrollGutter$gu = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu !== void 0 ? _allowScrollGutter$gu : '120', "px")
|
|
392
|
-
},
|
|
393
|
-
"data-vc": "scroll-gutter",
|
|
394
|
-
"data-editor-scroll-gutter": "true"
|
|
395
|
-
}) : (0, _react2.jsx)("div", {
|
|
396
|
-
id: "editor-scroll-gutter",
|
|
397
|
-
css: shouldHideScrollGutterForMarkdownMode && hideEditorScrollGutterStyle,
|
|
398
|
-
style: {
|
|
399
|
-
paddingBottom: "".concat((_allowScrollGutter$gu2 = allowScrollGutter.gutterSize) !== null && _allowScrollGutter$gu2 !== void 0 ? _allowScrollGutter$gu2 : '120', "px")
|
|
400
|
-
},
|
|
401
|
-
"data-vc": "scroll-gutter"
|
|
402
|
-
}))))))), (0, _react2.jsx)("div", {
|
|
403
|
-
css: _StyledComponents.sidebarArea
|
|
404
|
-
}, props.contextPanel || (0, _react2.jsx)(_ContextPanel.ContextPanel, {
|
|
405
|
-
editorAPI: props.editorAPI,
|
|
406
|
-
visible: false
|
|
407
|
-
})));
|
|
408
|
-
});
|
|
409
|
-
|
|
410
|
-
// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
|
|
411
|
-
var FullPageContentAreaEmotion = exports.FullPageContentAreaEmotion = (0, _reactIntl.injectIntl)(Content, {
|
|
412
|
-
forwardRef: true
|
|
413
|
-
});
|
|
@@ -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}}
|