@atlaskit/editor-core 208.3.3 → 208.3.5
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 +34 -0
- package/dist/cjs/ui/Appearance/FullPage/FullPageContentArea.js +334 -7
- package/dist/cjs/ui/Appearance/FullPage/StyledComponents.js +2 -189
- package/dist/cjs/ui/ContentStyles/index.js +8 -7
- package/dist/cjs/ui/ContentStyles/tasks-and-decisions.js +1 -1
- package/dist/cjs/ui/EditorContentContainer/EditorContentContainer.js +8 -12
- package/dist/cjs/ui/EditorContentContainer/styles/findReplaceStyles.js +82 -1
- package/dist/cjs/ui/EditorContentContainer/styles/mentions.js +7 -3
- package/dist/cjs/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js +1 -1
- package/dist/cjs/version-wrapper.js +1 -1
- package/dist/es2019/ui/Appearance/FullPage/FullPageContentArea.js +329 -8
- package/dist/es2019/ui/Appearance/FullPage/StyledComponents.js +2 -180
- package/dist/es2019/ui/ContentStyles/index.js +11 -10
- package/dist/es2019/ui/ContentStyles/tasks-and-decisions.js +1 -1
- package/dist/es2019/ui/EditorContentContainer/EditorContentContainer.js +10 -14
- package/dist/es2019/ui/EditorContentContainer/styles/findReplaceStyles.js +109 -0
- package/dist/es2019/ui/EditorContentContainer/styles/mentions.js +6 -2
- package/dist/es2019/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js +1 -1
- package/dist/es2019/version-wrapper.js +1 -1
- package/dist/esm/ui/Appearance/FullPage/FullPageContentArea.js +335 -8
- package/dist/esm/ui/Appearance/FullPage/StyledComponents.js +2 -187
- package/dist/esm/ui/ContentStyles/index.js +9 -8
- package/dist/esm/ui/ContentStyles/tasks-and-decisions.js +1 -1
- package/dist/esm/ui/EditorContentContainer/EditorContentContainer.js +10 -14
- package/dist/esm/ui/EditorContentContainer/styles/findReplaceStyles.js +81 -0
- package/dist/esm/ui/EditorContentContainer/styles/mentions.js +6 -2
- package/dist/esm/ui/EditorContentContainer/styles/tasksAndDecisionsStyles.js +1 -1
- package/dist/esm/version-wrapper.js +1 -1
- package/dist/types/ui/Appearance/FullPage/StyledComponents.d.ts +0 -7
- package/dist/types/ui/EditorContentContainer/styles/findReplaceStyles.d.ts +1 -0
- package/dist/types/ui/EditorContentContainer/styles/mentions.d.ts +2 -2
- package/dist/types-ts4.5/ui/Appearance/FullPage/StyledComponents.d.ts +0 -7
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/findReplaceStyles.d.ts +1 -0
- package/dist/types-ts4.5/ui/EditorContentContainer/styles/mentions.d.ts +2 -2
- package/package.json +6 -14
|
@@ -1,29 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
-
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
3
|
Object.defineProperty(exports, "__esModule", {
|
|
5
4
|
value: true
|
|
6
5
|
});
|
|
7
|
-
exports.sidebarArea = exports.fullPageEditorWrapper = exports.
|
|
8
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
-
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
6
|
+
exports.sidebarArea = exports.fullPageEditorWrapper = exports.editorContentAreaHideContainer = exports.contentAreaWrapper = exports.contentArea = void 0;
|
|
10
7
|
var _react = require("@emotion/react");
|
|
11
|
-
var _adfSchema = require("@atlaskit/adf-schema");
|
|
12
|
-
var _commonStyles = require("@atlaskit/editor-plugins/table/ui/common-styles");
|
|
13
|
-
var _consts = require("@atlaskit/editor-plugins/table/ui/consts");
|
|
14
8
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
15
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
16
|
-
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
17
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
18
9
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
19
10
|
|
|
20
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
21
|
-
var SWOOP_ANIMATION = "0.5s ".concat(_editorSharedStyles.akEditorSwoopCubicBezier);
|
|
22
|
-
var getTotalPadding = function getTotalPadding() {
|
|
23
|
-
return (0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2;
|
|
24
|
-
};
|
|
25
|
-
var AK_NESTED_DND_GUTTER_OFFSET = 8;
|
|
26
|
-
|
|
27
11
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
28
12
|
var fullPageEditorWrapper = exports.fullPageEditorWrapper = (0, _react.css)({
|
|
29
13
|
minWidth: '340px',
|
|
@@ -33,6 +17,7 @@ var fullPageEditorWrapper = exports.fullPageEditorWrapper = (0, _react.css)({
|
|
|
33
17
|
boxSizing: 'border-box'
|
|
34
18
|
});
|
|
35
19
|
|
|
20
|
+
// delete when cleaning up experiment `platform_editor_core_static_emotion_non_central`
|
|
36
21
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
37
22
|
var contentArea = exports.contentArea = function contentArea() {
|
|
38
23
|
var editorToolbarHeight = (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)();
|
|
@@ -68,11 +53,6 @@ var contentAreaWrapper = exports.contentAreaWrapper = (0, _react.css)({
|
|
|
68
53
|
contain: 'layout style inline-size'
|
|
69
54
|
});
|
|
70
55
|
|
|
71
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
72
|
-
var contentAreaHeightNoToolbar = exports.contentAreaHeightNoToolbar = (0, _react.css)({
|
|
73
|
-
height: '100%'
|
|
74
|
-
});
|
|
75
|
-
|
|
76
56
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
77
57
|
var sidebarArea = exports.sidebarArea = (0, _react.css)({
|
|
78
58
|
height: '100%',
|
|
@@ -105,171 +85,4 @@ var editorContentAreaHideContainer = exports.editorContentAreaHideContainer = (0
|
|
|
105
85
|
display: 'none'
|
|
106
86
|
}
|
|
107
87
|
}
|
|
108
|
-
});
|
|
109
|
-
|
|
110
|
-
/* Prevent horizontal scroll on page in full width mode */
|
|
111
|
-
var editorContentAreaContainerStyle = function editorContentAreaContainerStyle() {
|
|
112
|
-
return (0, _react.css)({
|
|
113
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
114
|
-
'.fabric-editor--full-width-mode': {
|
|
115
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
116
|
-
'.code-block, .extension-container, .multiBodiedExtension--container': {
|
|
117
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
118
|
-
maxWidth: "calc(100% - ".concat(_consts.tableMarginFullWidthMode * 2, "px)")
|
|
119
|
-
},
|
|
120
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
121
|
-
'.extension-container.inline': {
|
|
122
|
-
maxWidth: '100%'
|
|
123
|
-
},
|
|
124
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
125
|
-
'td .extension-container.inline': {
|
|
126
|
-
maxWidth: 'inherit'
|
|
127
|
-
},
|
|
128
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
129
|
-
'[data-layout-section]': {
|
|
130
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
131
|
-
maxWidth: "calc(100% + ".concat((_editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2, "px)")
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
});
|
|
135
|
-
};
|
|
136
|
-
|
|
137
|
-
/* Prevent horizontal scroll on page in full width mode */
|
|
138
|
-
var editorContentAreaContainerStyleExcludeCodeBlock = function editorContentAreaContainerStyleExcludeCodeBlock() {
|
|
139
|
-
return (0, _react.css)({
|
|
140
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
141
|
-
'.fabric-editor--full-width-mode': {
|
|
142
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
143
|
-
'.extension-container, .multiBodiedExtension--container': {
|
|
144
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
145
|
-
maxWidth: "calc(100% - ".concat(_consts.tableMarginFullWidthMode * 2, "px)")
|
|
146
|
-
},
|
|
147
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
148
|
-
'.extension-container.inline': {
|
|
149
|
-
maxWidth: '100%'
|
|
150
|
-
},
|
|
151
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
152
|
-
'td .extension-container.inline': {
|
|
153
|
-
maxWidth: 'inherit'
|
|
154
|
-
},
|
|
155
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
156
|
-
'[data-layout-section]': {
|
|
157
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
158
|
-
maxWidth: "calc(100% + ".concat((_editorSharedStyles.akLayoutGutterOffset + ((0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes') ? AK_NESTED_DND_GUTTER_OFFSET : 0)) * 2, "px)")
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
});
|
|
162
|
-
};
|
|
163
|
-
var editorContentAreaStyle = exports.editorContentAreaStyle = function editorContentAreaStyle(_ref) {
|
|
164
|
-
var layoutMaxWidth = _ref.layoutMaxWidth,
|
|
165
|
-
fullWidthMode = _ref.fullWidthMode,
|
|
166
|
-
isEditorToolbarHidden = _ref.isEditorToolbarHidden;
|
|
167
|
-
return [editorContentArea, (0, _platformFeatureFlags.fg)('platform_editor_fix_table_width_inline_comment') ? fullWidthNonChromelessBreakoutBlockTableStyle : fullWidthModeBreakoutBlockTableStyle, !fullWidthMode && editorContentAreaWithLayoutWith(layoutMaxWidth),
|
|
168
|
-
// for breakout resizing, there's no need to restrict the width of codeblocks as they're always wrapped in a breakout mark
|
|
169
|
-
(0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_breakout_resizing', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_breakout_resizing_width_changes') ? editorContentAreaContainerStyleExcludeCodeBlock() : editorContentAreaContainerStyle()].concat((0, _toConsumableArray2.default)((0, _platformFeatureFlags.fg)('platform_editor_controls_no_toolbar_space') ? [] : [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
|
|
170
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
171
|
-
contentAreaReducedHeaderSpace, isEditorToolbarHidden && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') &&
|
|
172
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
173
|
-
contentAreaReservedPrimaryToolbarSpace]));
|
|
174
|
-
};
|
|
175
|
-
var editorContentAreaWithLayoutWith = function editorContentAreaWithLayoutWith(layoutMaxWidth) {
|
|
176
|
-
return (0, _react.css)({
|
|
177
|
-
// this restricts max width
|
|
178
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
179
|
-
maxWidth: "".concat(layoutMaxWidth + getTotalPadding(), "px")
|
|
180
|
-
});
|
|
181
|
-
};
|
|
182
|
-
var fullWidthModeBreakoutBlockTableStyle = (0, _react.css)({
|
|
183
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
184
|
-
'.fabric-editor--full-width-mode': {
|
|
185
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
186
|
-
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
187
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
188
|
-
width: '100% !important'
|
|
189
|
-
},
|
|
190
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
191
|
-
'.fabric-editor-breakout-mark': {
|
|
192
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
193
|
-
marginLeft: 'unset !important',
|
|
194
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
195
|
-
transform: 'none !important'
|
|
196
|
-
}
|
|
197
|
-
}
|
|
198
|
-
});
|
|
199
|
-
var fullWidthNonChromelessBreakoutBlockTableStyle = (0, _react.css)({
|
|
200
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-1
|
|
201
|
-
'.fabric-editor--full-width-mode:not(:has(#chromeless-editor))': {
|
|
202
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
203
|
-
'.fabric-editor-breakout-mark, .extension-container.block, .pm-table-container': {
|
|
204
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
205
|
-
width: '100% !important'
|
|
206
|
-
},
|
|
207
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
208
|
-
'.fabric-editor-breakout-mark': {
|
|
209
|
-
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview, @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
210
|
-
marginLeft: 'unset !important',
|
|
211
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
|
|
212
|
-
transform: 'none !important'
|
|
213
|
-
}
|
|
214
|
-
}
|
|
215
|
-
});
|
|
216
|
-
var editorContentArea = (0, _react.css)({
|
|
217
|
-
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
218
|
-
lineHeight: '24px',
|
|
219
|
-
paddingTop: "var(--ds-space-600, 48px)",
|
|
220
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
221
|
-
'.ak-editor-content-area-no-toolbar &': {
|
|
222
|
-
// When the toolbar is hidden, we don't want content to jump up
|
|
223
|
-
// the extra 1px is to account for the border on the toolbar
|
|
224
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
225
|
-
paddingTop: "calc(".concat("var(--ds-space-600, 48px)", " + ", (0, _editorSharedStyles.FULL_PAGE_EDITOR_TOOLBAR_HEIGHT)(), " + 1px)")
|
|
226
|
-
},
|
|
227
|
-
paddingBottom: "var(--ds-space-600, 48px)",
|
|
228
|
-
height: 'calc( 100% - 105px )',
|
|
229
|
-
width: '100%',
|
|
230
|
-
margin: 'auto',
|
|
231
|
-
flexDirection: 'column',
|
|
232
|
-
flexGrow: 1,
|
|
233
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
234
|
-
maxWidth: "".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth + getTotalPadding(), "px"),
|
|
235
|
-
transition: "max-width ".concat(SWOOP_ANIMATION),
|
|
236
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
237
|
-
'& .ProseMirror': (0, _defineProperty2.default)((0, _defineProperty2.default)({
|
|
238
|
-
flexGrow: 1,
|
|
239
|
-
boxSizing: 'border-box',
|
|
240
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
241
|
-
'& > *': {
|
|
242
|
-
clear: 'both'
|
|
243
|
-
}
|
|
244
|
-
}, "> p, > ul, > ol:not(".concat(_adfSchema.taskListSelector, "):not(").concat(_adfSchema.decisionListSelector, "), > h1, > h2, > h3, > h4, > h5, > h6"), {
|
|
245
|
-
clear: 'none'
|
|
246
|
-
}), '> p:last-child', {
|
|
247
|
-
marginBottom: "var(--ds-space-300, 24px)"
|
|
248
|
-
})
|
|
249
|
-
},
|
|
250
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
251
|
-
_commonStyles.tableFullPageEditorStyles);
|
|
252
|
-
|
|
253
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
254
|
-
var editorContentGutterStyle = exports.editorContentGutterStyle = function editorContentGutterStyle() {
|
|
255
|
-
return (0, _react.css)({
|
|
256
|
-
boxSizing: 'border-box',
|
|
257
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
258
|
-
padding: "0 ".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), "px")
|
|
259
|
-
});
|
|
260
|
-
};
|
|
261
|
-
|
|
262
|
-
// An additional spacing applied at the top of the content area reserving space when the primary toolbar
|
|
263
|
-
// is hidden – this avoids layout shift when the toolbar is toggled under the editor controls feature
|
|
264
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
265
|
-
var contentAreaReservedPrimaryToolbarSpace = (0, _react.css)({
|
|
266
|
-
// extra 1px to account for the bottom border on the toolbar
|
|
267
|
-
marginTop: "calc(".concat("var(--ds-space-500, 40px)", " + 1px)")
|
|
268
|
-
});
|
|
269
|
-
|
|
270
|
-
// A reduced top spacing applied to the content area to compensate for the reserved space at the top
|
|
271
|
-
// of the page when the primary toolbar is hidden under the editor controls feature
|
|
272
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
273
|
-
var contentAreaReducedHeaderSpace = (0, _react.css)({
|
|
274
|
-
paddingTop: "var(--ds-space-400, 32px)"
|
|
275
88
|
});
|
|
@@ -22,6 +22,7 @@ var _styles4 = require("@atlaskit/editor-plugins/paste-options-toolbar/styles");
|
|
|
22
22
|
var _styles5 = require("@atlaskit/editor-plugins/placeholder-text/styles");
|
|
23
23
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
24
24
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
25
|
+
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
25
26
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
26
27
|
var _tokens = require("@atlaskit/tokens");
|
|
27
28
|
var _getInlineNodeViewProducer = require("../../nodeviews/getInlineNodeViewProducer.styles");
|
|
@@ -51,13 +52,17 @@ var linkStyles = exports.linkStyles = (0, _react2.css)(_templateObject || (_temp
|
|
|
51
52
|
var ruleStyles = function ruleStyles() {
|
|
52
53
|
return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\t.ProseMirror {\n\t\t", ";\n\n\t\thr {\n\t\t\tcursor: pointer;\n\t\t\tpadding: ", " 0;\n\t\t\tmargin: ", " 0;\n\t\t\tbackground-clip: content-box;\n\n\t\t\t&.", " {\n\t\t\t\toutline: none;\n\t\t\t\tbackground-color: ", ";\n\t\t\t}\n\t\t}\n\t}\n"])), (0, _styles.ruleSharedStyles)(), "var(--ds-space-050, 4px)", "var(--ds-space-300, 24px)", _editorSharedStyles.akEditorSelectedNodeClassName, "var(--ds-border-selected, ".concat(_editorSharedStyles.akEditorSelectedBorderColor, ")"));
|
|
53
54
|
};
|
|
54
|
-
var
|
|
55
|
+
var mentionNodeStyles = (0, _react2.css)({
|
|
55
56
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
56
57
|
'.editor-mention-primitive': {
|
|
57
58
|
display: 'inline',
|
|
58
59
|
borderRadius: '20px',
|
|
59
60
|
cursor: 'pointer',
|
|
60
61
|
padding: '0 0.3em 2px 0.23em',
|
|
62
|
+
// To match `packages/elements/mention/src/components/Mention/PrimitiveMention.tsx` implementation
|
|
63
|
+
// we match the line height exactly
|
|
64
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
65
|
+
lineHeight: '1.714',
|
|
61
66
|
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
62
67
|
wordBreak: 'break-word',
|
|
63
68
|
background: "var(--ds-background-neutral, #091E420F)",
|
|
@@ -154,15 +159,11 @@ var akEditorBreakpointForSmallDevice = "1266px";
|
|
|
154
159
|
var legacyContentStyles = function legacyContentStyles(props) {
|
|
155
160
|
return (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n\t--ak-editor--default-gutter-padding: ", "px;\n\t/* 52 is from akEditorGutterPaddingDynamic via editor-shared-styles */\n\t--ak-editor--large-gutter-padding: ", "px;\n\t--ak-editor--default-layout-width: ", "px;\n\t--ak-editor--full-width-layout-width: ", "px;\n\t/* calculate editor line length, 100cqw is the editor container width */\n\t--ak-editor--line-length: min(\n\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\tvar(--ak-editor--default-layout-width)\n\t);\n\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t--ak-editor--breakout-full-page-guttering-padding: calc(\n\t\tvar(--ak-editor--large-gutter-padding) * 2 + var(--ak-editor--default-gutter-padding)\n\t);\n\n\t--ak-editor--breakout-fallback-width: calc(\n\t\t100cqw - var(--ak-editor--breakout-full-page-guttering-padding)\n\t);\n\n\t.fabric-editor--full-width-mode {\n\t\t--ak-editor--line-length: min(\n\t\t\tcalc(100cqw - var(--ak-editor--large-gutter-padding) * 2),\n\t\t\tvar(--ak-editor--full-width-layout-width)\n\t\t);\n\n\t\t/* in full width appearances it's not possible to rely on cqw because it doesn't account for the page scrollbar, which depends on users system settings */\n\t\t--ak-editor--breakout-fallback-width: 100%;\n\t}\n\n\t.ProseMirror {\n\t\t--ak-editor-max-container-width: calc(100cqw - var(--ak-editor--large-gutter-padding));\n\t}\n\n\t/* We can't allow nodes that are inside other nodes to bleed from the parent container */\n\t.ProseMirror > div[data-prosemirror-node-block] [data-prosemirror-node-block] {\n\t\t--ak-editor-max-container-width: 100%;\n\t}\n\n\t/* container editor-area is defined in platform/packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts */\n\t@container editor-area (width >= ", ") {\n\t\t.ProseMirror {\n\t\t\t--ak-editor--breakout-wide-layout-width: ", "px;\n\t\t}\n\t}\n\n\t.ProseMirror {\n\t\toutline: none;\n\t\tfont-size: ", "px;\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t\t", ";\n\t}\n\n\t.ProseMirror-hideselection *::selection {\n\t\tbackground: transparent;\n\t}\n\n\t.ProseMirror-hideselection *::-moz-selection {\n\t\tbackground: transparent;\n\t}\n\n\t/**\n\t * This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24\n\t *\n\t * 1. Merge and Release platform_editor_hide_cursor_when_pm_hideselection\n\t * 2. Cleanup duplicated style from platform_editor_advanced_code_blocks\n\t * https://product-fabric.atlassian.net/browse/ED-26331\n\t */\n\t", "\n\n\t/* This prosemirror css style: https://github.com/ProseMirror/prosemirror-view/blob/f37ebb29befdbde3cd194fe13fe17b78e743d2f2/style/prosemirror.css#L24 */\n\t", "\n\n\t.ProseMirror-selectednode {\n\t\toutline: none;\n\t}\n\n\t.ProseMirror-selectednode:empty {\n\t\toutline: 2px solid ", ";\n\t}\n\n\t.ProseMirror.ProseMirror-focused:has(.ProseMirror-mark-boundary-cursor) {\n\t\tcaret-color: transparent;\n\t}\n\t.ProseMirror:not(.ProseMirror-focused) .ProseMirror-mark-boundary-cursor {\n\t\tdisplay: none;\n\t}\n\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n\n ", "\n\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", ";\n\t", "\n\t", "\n\t", "\n\t", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n /* Switch between the two icons based on the visual refresh feature gate */\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\t", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n ", "\n\n .panelView-content-wrap {\n\t\tbox-sizing: border-box;\n\t}\n\n\t.mediaGroupView-content-wrap ul {\n\t\tpadding: 0;\n\t}\n\n\t/** Needed to override any cleared floats, e.g. image wrapping */\n\n\tdiv.fabric-editor-block-mark[class^='fabric-editor-align'] {\n\t\tclear: none !important;\n\t}\n\n\t.fabric-editor-align-end {\n\t\ttext-align: right;\n\t}\n\n\t.fabric-editor-align-start {\n\t\ttext-align: left;\n\t}\n\n\t.fabric-editor-align-center {\n\t\ttext-align: center;\n\t}\n\n\t/* For FullPage only when inside a table\n\tRelated code all lives inside: packages/editor/editor-core/src/ui/Appearance/FullPage/StyledComponents.ts\n\tIn the \"editorContentAreaContainerStyle\" function */\n\t.fabric-editor--full-width-mode {\n\t\t.pm-table-container {\n\t\t\t.code-block,\n\t\t\t.extension-container,\n\t\t\t.multiBodiedExtension--container {\n\t\t\t\tmax-width: 100%;\n\t\t\t}\n\t\t}\n\t}\n\n\t.pm-table-header-content-wrap :not(.fabric-editor-alignment),\n\t.pm-table-header-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark,\n\t.pm-table-cell-content-wrap :not(p, .fabric-editor-block-mark) + div.fabric-editor-block-mark {\n\t\tp:first-of-type {\n\t\t\tmargin-top: 0;\n\t\t}\n\t}\n\t.pm-table-cell-content-wrap .mediaGroupView-content-wrap {\n\t\tclear: both;\n\t}\n\n\t.hyperlink-floating-toolbar,\n\t.", " {\n\t\tpadding: 0;\n\t}\n\n\t/* Legacy Link icon in the Atlaskit package\n is bigger than the others, new ADS icon does not have this issue\n */\n\t", "\n"])), _editorSharedStyles.akEditorGutterPadding, (0, _editorSharedStyles.akEditorGutterPaddingDynamic)(), _editorSharedStyles.akEditorDefaultLayoutWidth, _editorSharedStyles.akEditorFullWidthLayoutWidth, _editorSharedStyles.akEditorCalculatedWideLayoutWidthSmallViewport, akEditorBreakpointForSmallDevice, _editorSharedStyles.akEditorCalculatedWideLayoutWidth, (0, _editorSharedStyles.editorFontSize)({
|
|
156
161
|
theme: props.theme
|
|
157
|
-
}), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)",
|
|
158
|
-
exposure: false
|
|
159
|
-
}) && vanillaMentionsStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
162
|
+
}), _styles.whitespaceSharedStyles, (0, _styles.paragraphSharedStyles)(props.typographyTheme), _styles.listsSharedStyles, _styles.indentationSharedStyles, _styles.shadowSharedStyle, _getInlineNodeViewProducer.InlineNodeViewSharedStyles, (0, _platformFeatureFlags.fg)('platform_editor_hide_cursor_when_pm_hideselection') ? (0, _react2.css)(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, (0, _experiments.editorExperiment)('platform_editor_advanced_code_blocks', true) ? (0, _react2.css)(_templateObject1 || (_templateObject1 = (0, _taggedTemplateLiteral2.default)(["\n\t\t\t\t.ProseMirror-hideselection {\n\t\t\t\t\tcaret-color: transparent;\n\t\t\t\t}\n\t\t\t"]))) : null, "var(--ds-border-focused, #8cf)", firstFloatingToolbarButtonStyles, _styles5.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') && _styles5.placeholderTextStyles_fg_platform_editor_system_fake_text_highlight_colour, placeholderStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? placeholderOverflowStyles : null, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_quick_insert_placeholder') ? placeholderWrapStyles : null, (0, _codeBlock.codeBlockStyles)(), (0, _styles2.blocktypeStyles)(props.typographyTheme), (0, _styles.codeMarkSharedStyles)(), _styles.textColorStyles, (0, _styles.backgroundColorStyles)(), listsStyles, ruleStyles(), (0, _media.mediaStyles)(), (0, _layout.layoutStyles)(props.viewMode), (0, _platformFeatureFlags.fg)('confluence_team_presence_scroll_to_pointer') ? _collab.telepointerStyle : _collab.telepointerStyleWithInitialOnly, _selection.gapCursorStyles, (0, _panel2.panelStyles)(), mentionsStyles, mentionNodeStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
160
163
|
exposure: false
|
|
161
164
|
}) && vanillaSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
162
165
|
exposure: false
|
|
163
|
-
}) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
164
|
-
exposure: false
|
|
165
|
-
}) && _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
166
|
+
}) ? emojiStyles : reactEmojiStyles, emojiStyles, _styles.tasksAndDecisionsStyles, _styles.gridStyles, linkStyles, _styles.blockMarksSharedStyles, _styles.dateSharedStyle, _extension.extensionStyles, (0, _expand.expandStyles)(), (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ? _styles3.findReplaceStylesNew : _styles3.findReplaceStyles, _styles4.textHighlightStyle, _tasksAndDecisions.taskDecisionStyles, _tasksAndDecisions.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
166
167
|
exposure: false
|
|
167
168
|
}) && _tasksAndDecisions.vanillaTaskDecisionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
168
169
|
exposure: false
|
|
@@ -159,7 +159,7 @@ var vanillaTaskItemStyles = exports.vanillaTaskItemStyles = (0, _react.css)((0,
|
|
|
159
159
|
display: 'none'
|
|
160
160
|
},
|
|
161
161
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
162
|
-
|
|
162
|
+
"[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='taskItem']:has([data-empty]):not(:has([data-type-ahead])) [data-component='placeholder']": {
|
|
163
163
|
display: 'block'
|
|
164
164
|
},
|
|
165
165
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -112,7 +112,7 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
112
112
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
113
113
|
_cursorStyles.cursorStyles,
|
|
114
114
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
115
|
-
|
|
115
|
+
_floatingToolbarStyles.firstFloatingToolbarButtonStyles,
|
|
116
116
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
117
117
|
_placeholderStyles.placeholderTextStyles, (0, _platformFeatureFlags.fg)('platform_editor_system_fake_text_highlight_colour') &&
|
|
118
118
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -188,15 +188,15 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
188
188
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
189
189
|
_expandStyles.expandStylesMixin_without_fg_platform_editor_nested_dnd_styles_changes,
|
|
190
190
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
191
|
-
(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _expandStyles.expandStylesMixin_fg_platform_visual_refresh_icons,
|
|
191
|
+
(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && _expandStyles.expandStylesMixin_fg_platform_visual_refresh_icons, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_find_and_replace_improvements', 'isEnabled', true) ?
|
|
192
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
193
|
+
_findReplaceStyles.findReplaceStylesNew :
|
|
192
194
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
193
195
|
_findReplaceStyles.findReplaceStyles,
|
|
194
196
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
195
197
|
_textHighlightStyles.textHighlightStyle,
|
|
196
198
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
197
|
-
_tasksAndDecisionsStyles.decisionStyles,
|
|
198
|
-
exposure: false
|
|
199
|
-
}) &&
|
|
199
|
+
_tasksAndDecisionsStyles.decisionStyles,
|
|
200
200
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
201
201
|
_tasksAndDecisionsStyles.vanillaTaskItemStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
202
202
|
exposure: false
|
|
@@ -318,15 +318,11 @@ var EditorContentContainer = /*#__PURE__*/_react.default.forwardRef(function (pr
|
|
|
318
318
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
319
319
|
_codeBlockStyles.firstCodeBlockWithNoMarginOld,
|
|
320
320
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
321
|
-
_firstBlockNodeStyles.firstBlockNodeStyles,
|
|
322
|
-
exposure: false
|
|
323
|
-
}) &&
|
|
321
|
+
_firstBlockNodeStyles.firstBlockNodeStyles,
|
|
324
322
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
325
|
-
_mentions.
|
|
326
|
-
exposure: false
|
|
327
|
-
}) &&
|
|
323
|
+
_mentions.mentionNodeStyles,
|
|
328
324
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
329
|
-
_mentions.
|
|
325
|
+
_mentions.mentionsSelectionStyles, (0, _experiments.editorExperiment)('platform_editor_vanilla_dom', true, {
|
|
330
326
|
exposure: false
|
|
331
327
|
}) ?
|
|
332
328
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.findReplaceStyles = void 0;
|
|
6
|
+
exports.findReplaceStylesNew = exports.findReplaceStyles = void 0;
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
9
9
|
|
|
@@ -19,4 +19,85 @@ var findReplaceStyles = exports.findReplaceStyles = (0, _react.css)({
|
|
|
19
19
|
'.selected-search-match': {
|
|
20
20
|
backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
|
|
21
21
|
}
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
25
|
+
var findReplaceStylesNew = exports.findReplaceStylesNew = (0, _react.css)({
|
|
26
|
+
/** Text match styles */
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
28
|
+
'.search-match': {
|
|
29
|
+
borderRadius: '3px',
|
|
30
|
+
backgroundColor: "var(--ds-background-accent-teal-subtlest, #E7F9FF)",
|
|
31
|
+
boxShadow: "var(--ds-shadow-raised, 0 1px 1px 0 rgba(9, 30, 66, 0.25), 0 0 1px 0 rgba(9, 30, 66, 0.31))".concat(", inset 0 0 0 1px ", "var(--ds-border-input, #8590A2)")
|
|
32
|
+
},
|
|
33
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
34
|
+
'.search-match-selected': {
|
|
35
|
+
backgroundColor: "var(--ds-background-accent-teal-subtle, #6CC3E0)"
|
|
36
|
+
},
|
|
37
|
+
/** Block match styles */
|
|
38
|
+
|
|
39
|
+
/** Light mode */
|
|
40
|
+
|
|
41
|
+
/** Without node selection */
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
43
|
+
'.search-match-block': {
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
45
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
46
|
+
boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", "\n\t\t\t")
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
50
|
+
'.search-match-selected.search-match-block': {
|
|
51
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
52
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
53
|
+
boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", "\n\t\t\t")
|
|
54
|
+
}
|
|
55
|
+
},
|
|
56
|
+
/** With node selection */
|
|
57
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
58
|
+
'.search-match-block.ak-editor-selected-node': {
|
|
59
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
60
|
+
'.loader-wrapper>div::after': {
|
|
61
|
+
boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-subtler, #F8E6A0)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
|
|
62
|
+
}
|
|
63
|
+
},
|
|
64
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
65
|
+
'.search-match-selected.search-match-block.ak-editor-selected-node': {
|
|
66
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
67
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
68
|
+
boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-subtler-pressed, #E2B203)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-subtlest-pressed, #F5CD47)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
/** Dark mode */
|
|
72
|
+
|
|
73
|
+
/** Without node selection */
|
|
74
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
75
|
+
'.search-match-block.search-match-dark': {
|
|
76
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
77
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
78
|
+
boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", "\n\t\t\t")
|
|
79
|
+
}
|
|
80
|
+
},
|
|
81
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
82
|
+
'.search-match-selected.search-match-block.search-match-dark': {
|
|
83
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
84
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
85
|
+
boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", "\n\t\t\t")
|
|
86
|
+
}
|
|
87
|
+
},
|
|
88
|
+
/** With node selection */
|
|
89
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
90
|
+
'.search-match-block.search-match-dark.ak-editor-selected-node': {
|
|
91
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
92
|
+
'.loader-wrapper>div::after': {
|
|
93
|
+
boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 5px ", "var(--ds-background-accent-yellow-bolder-pressed, #533F04)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
|
|
94
|
+
}
|
|
95
|
+
},
|
|
96
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
97
|
+
'.search-match-selected.search-match-block.search-match-dark.ak-editor-selected-node': {
|
|
98
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
99
|
+
'[data-smart-link-container="true"], .loader-wrapper>div::after': {
|
|
100
|
+
boxShadow: "\n\t\t\tinset 0 0 0 1px ".concat("var(--ds-background-accent-yellow-bolder, #946F00)", ",\n\t\t\tinset 0 0 0 4px ", "var(--ds-background-accent-yellow-bolder-hovered, #7F5F01)", ",\n\t\t\t0 0 0 1px ", "var(--ds-border-selected, #0C66E4)", "\n\t\t\t")
|
|
101
|
+
}
|
|
102
|
+
}
|
|
22
103
|
});
|
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.
|
|
7
|
+
exports.mentionsStyles = exports.mentionsSelectionStyles = exports.mentionNodeStyles = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _mention = require("@atlaskit/editor-common/mention");
|
|
@@ -36,13 +36,17 @@ _selectionStyles.backgroundSelectionStyles, mentionsSelectedColor])), '.danger',
|
|
|
36
36
|
})));
|
|
37
37
|
|
|
38
38
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
39
|
-
var
|
|
39
|
+
var mentionNodeStyles = exports.mentionNodeStyles = (0, _react.css)({
|
|
40
40
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
41
41
|
'.editor-mention-primitive': {
|
|
42
42
|
display: 'inline',
|
|
43
43
|
borderRadius: '20px',
|
|
44
44
|
cursor: 'pointer',
|
|
45
45
|
padding: '0 0.3em 2px 0.23em',
|
|
46
|
+
// To match `packages/elements/mention/src/components/Mention/PrimitiveMention.tsx` implementation
|
|
47
|
+
// we match the line height exactly
|
|
48
|
+
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
|
|
49
|
+
lineHeight: '1.714',
|
|
46
50
|
fontWeight: "var(--ds-font-weight-regular, 400)",
|
|
47
51
|
wordBreak: 'break-word',
|
|
48
52
|
background: "var(--ds-background-neutral, #091E420F)",
|
|
@@ -83,7 +87,7 @@ var vanillaMentionsStyles = exports.vanillaMentionsStyles = (0, _react.css)({
|
|
|
83
87
|
|
|
84
88
|
// This is mentions styles for mentions selection styles based on the vanilla node view
|
|
85
89
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles
|
|
86
|
-
var
|
|
90
|
+
var mentionsSelectionStyles = exports.mentionsSelectionStyles = (0, _react.css)((0, _defineProperty2.default)({
|
|
87
91
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
88
92
|
'.danger': {
|
|
89
93
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
@@ -246,7 +246,7 @@ var vanillaTaskItemStyles = exports.vanillaTaskItemStyles = (0, _react.css)((0,
|
|
|
246
246
|
display: 'none'
|
|
247
247
|
},
|
|
248
248
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
249
|
-
|
|
249
|
+
"[data-prosemirror-node-view-type='vanilla'][data-prosemirror-node-name='taskItem']:has([data-empty]):not(:has([data-type-ahead])) [data-component='placeholder']": {
|
|
250
250
|
display: 'block'
|
|
251
251
|
},
|
|
252
252
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|