@atlaskit/editor-common 112.4.3 → 112.5.0
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 +35 -0
- package/dist/cjs/ai-messages/ai.js +1 -1
- package/dist/cjs/analytics/types/enums.js +1 -0
- package/dist/cjs/messages/index.js +7 -0
- package/dist/cjs/messages/smart-link-changeboard.js +29 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/react-node-view/index.js +6 -2
- package/dist/cjs/ugc-tokens/editor-ugc-token-names.js +1 -0
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/ui/OverflowShadow/index.js +8 -6
- package/dist/cjs/ui/Popup/utils.js +11 -4
- package/dist/cjs/utils/calculate-toolbar-position.js +2 -194
- package/dist/es2019/ai-messages/ai.js +1 -1
- package/dist/es2019/analytics/types/enums.js +1 -0
- package/dist/es2019/messages/index.js +1 -0
- package/dist/es2019/messages/smart-link-changeboard.js +23 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/react-node-view/index.js +6 -2
- package/dist/es2019/ugc-tokens/editor-ugc-token-names.js +1 -0
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/ui/OverflowShadow/index.js +8 -6
- package/dist/es2019/ui/Popup/utils.js +11 -4
- package/dist/es2019/utils/calculate-toolbar-position.js +1 -196
- package/dist/esm/ai-messages/ai.js +1 -1
- package/dist/esm/analytics/types/enums.js +1 -0
- package/dist/esm/messages/index.js +1 -0
- package/dist/esm/messages/smart-link-changeboard.js +23 -0
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/react-node-view/index.js +6 -2
- package/dist/esm/ugc-tokens/editor-ugc-token-names.js +1 -0
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/ui/OverflowShadow/index.js +8 -6
- package/dist/esm/ui/Popup/utils.js +11 -4
- package/dist/esm/utils/calculate-toolbar-position.js +1 -193
- package/dist/types/analytics/types/enums.d.ts +1 -0
- package/dist/types/analytics/types/format-events.d.ts +5 -1
- package/dist/types/messages/index.d.ts +1 -0
- package/dist/types/messages/smart-link-changeboard.d.ts +22 -0
- package/dist/types/ugc-tokens/editor-ugc-token-names.d.ts +1 -0
- package/dist/types/utils/calculate-toolbar-position.d.ts +0 -7
- package/dist/types-ts4.5/analytics/types/enums.d.ts +1 -0
- package/dist/types-ts4.5/analytics/types/format-events.d.ts +5 -1
- package/dist/types-ts4.5/messages/index.d.ts +1 -0
- package/dist/types-ts4.5/messages/smart-link-changeboard.d.ts +22 -0
- package/dist/types-ts4.5/ugc-tokens/editor-ugc-token-names.d.ts +1 -0
- package/dist/types-ts4.5/utils/calculate-toolbar-position.d.ts +0 -7
- package/package.json +3 -3
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
2
2
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
3
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
4
3
|
const MAXIMUM_BROWSER_SCROLLBAR_WIDTH = 20;
|
|
5
4
|
|
|
6
5
|
/*
|
|
@@ -79,82 +78,7 @@ export const calculateToolbarPositionAboveSelection = toolbarTitle => (editorVie
|
|
|
79
78
|
left: Math.max(0, left - wrapperBounds.left)
|
|
80
79
|
};
|
|
81
80
|
};
|
|
82
|
-
const
|
|
83
|
-
if (expValEquals('platform_editor_sel_toolbar_scroll_pos_fix_exp', 'isEnabled', true)) {
|
|
84
|
-
// Traverse DOM Tree upwards looking for scroll parents with "overflow: scroll"
|
|
85
|
-
// or fixed/absolute positioned containers.
|
|
86
|
-
let parent = editorView.dom;
|
|
87
|
-
|
|
88
|
-
// Ignored via go/ees005
|
|
89
|
-
// eslint-disable-next-line no-cond-assign
|
|
90
|
-
while (parent = parent.parentElement) {
|
|
91
|
-
const style = window.getComputedStyle(parent);
|
|
92
|
-
|
|
93
|
-
// Check for explicit scroll parent class
|
|
94
|
-
if (parent.classList.contains('fabric-editor-popup-scroll-parent')) {
|
|
95
|
-
return {
|
|
96
|
-
container: parent,
|
|
97
|
-
isFixed: false
|
|
98
|
-
};
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
// Check for overflow scroll containers
|
|
102
|
-
if (style.overflow === 'scroll' || style.overflowX === 'scroll' || style.overflowY === 'scroll' || style.overflow === 'auto' || style.overflowX === 'auto' || style.overflowY === 'auto') {
|
|
103
|
-
return {
|
|
104
|
-
container: parent,
|
|
105
|
-
isFixed: false
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
// Check for fixed or absolute positioned containers (modal wrappers, sidebars)
|
|
110
|
-
if (style.position === 'fixed' || style.position === 'absolute') {
|
|
111
|
-
return {
|
|
112
|
-
container: parent,
|
|
113
|
-
isFixed: style.position === 'fixed'
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
// Stop at body
|
|
118
|
-
if (parent === document.body) {
|
|
119
|
-
break;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// Fall back to document.body if no suitable container found
|
|
124
|
-
return {
|
|
125
|
-
container: document.body,
|
|
126
|
-
isFixed: false
|
|
127
|
-
};
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
// Original logic
|
|
131
|
-
const scrollParent = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
|
|
132
|
-
if (scrollParent) {
|
|
133
|
-
return {
|
|
134
|
-
container: scrollParent,
|
|
135
|
-
isFixed: false
|
|
136
|
-
};
|
|
137
|
-
} else {
|
|
138
|
-
let fixedParent = editorView.dom.parentElement;
|
|
139
|
-
while (fixedParent && fixedParent !== document.body) {
|
|
140
|
-
const computedStyle = window.getComputedStyle(fixedParent);
|
|
141
|
-
if (computedStyle.position === 'fixed') {
|
|
142
|
-
return {
|
|
143
|
-
container: fixedParent,
|
|
144
|
-
isFixed: true
|
|
145
|
-
};
|
|
146
|
-
}
|
|
147
|
-
fixedParent = fixedParent.parentElement;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
// Fall back to document.body if no fixed parent found
|
|
152
|
-
return {
|
|
153
|
-
container: document.body,
|
|
154
|
-
isFixed: false
|
|
155
|
-
};
|
|
156
|
-
};
|
|
157
|
-
export const calculateToolbarPositionTrackHeadOld = toolbarTitle => (editorView, nextPos) => {
|
|
81
|
+
export const calculateToolbarPositionTrackHead = toolbarTitle => (editorView, nextPos) => {
|
|
158
82
|
const toolbar = document.querySelector(`div[aria-label="${toolbarTitle}"]`);
|
|
159
83
|
if (!toolbar) {
|
|
160
84
|
return nextPos;
|
|
@@ -224,125 +148,6 @@ export const calculateToolbarPositionTrackHeadOld = toolbarTitle => (editorView,
|
|
|
224
148
|
};
|
|
225
149
|
};
|
|
226
150
|
|
|
227
|
-
/**
|
|
228
|
-
* Same logic as calculateToolbarPositionTrackHeadOld, but with the following changes:
|
|
229
|
-
* - Uses a cached container to avoid repeated DOM traversal and getComputedStyle calls
|
|
230
|
-
* - Works when editor is nested within a fixed positioned parent, such as within a modal or sidebar
|
|
231
|
-
*/
|
|
232
|
-
export const calculateToolbarPositionTrackHeadNew = toolbarTitle => {
|
|
233
|
-
// Cache the container to avoid repeated DOM traversal and getComputedStyle calls
|
|
234
|
-
let cachedContainer = null;
|
|
235
|
-
let isFixedContainer = false;
|
|
236
|
-
let cachedEditorDom = null;
|
|
237
|
-
return (editorView, nextPos) => {
|
|
238
|
-
const toolbar = document.querySelector(`div[aria-label="${toolbarTitle}"]`);
|
|
239
|
-
if (!toolbar) {
|
|
240
|
-
return nextPos;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
// Find and cache the container (only recalculates if editor DOM changed)
|
|
244
|
-
if (cachedEditorDom !== editorView.dom) {
|
|
245
|
-
cachedEditorDom = editorView.dom;
|
|
246
|
-
const {
|
|
247
|
-
container,
|
|
248
|
-
isFixed
|
|
249
|
-
} = findContainingElement(editorView);
|
|
250
|
-
cachedContainer = container;
|
|
251
|
-
isFixedContainer = isFixed;
|
|
252
|
-
}
|
|
253
|
-
if (!cachedContainer) {
|
|
254
|
-
return nextPos;
|
|
255
|
-
}
|
|
256
|
-
const container = cachedContainer;
|
|
257
|
-
const containerBounds = container.getBoundingClientRect();
|
|
258
|
-
const selection = window && window.getSelection();
|
|
259
|
-
const moreRovoOptionsButton = document.querySelector('button[aria-label="More Rovo options"], [aria-label="More Rovo options"]');
|
|
260
|
-
const isMoreRovoOptionsButtonVisible = !!moreRovoOptionsButton && moreRovoOptionsButton instanceof HTMLElement && !!moreRovoOptionsButton.offsetParent;
|
|
261
|
-
let range = null;
|
|
262
|
-
if (isMoreRovoOptionsButtonVisible) {
|
|
263
|
-
if (selection && selection.getRangeAt && selection.rangeCount > 0) {
|
|
264
|
-
const maybeRange = selection.getRangeAt(0);
|
|
265
|
-
if (maybeRange instanceof Range) {
|
|
266
|
-
range = maybeRange;
|
|
267
|
-
}
|
|
268
|
-
}
|
|
269
|
-
} else {
|
|
270
|
-
if (selection && !selection.isCollapsed && selection.getRangeAt && selection.rangeCount > 0) {
|
|
271
|
-
const maybeRange = selection.getRangeAt(0);
|
|
272
|
-
if (maybeRange instanceof Range) {
|
|
273
|
-
range = maybeRange;
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
}
|
|
277
|
-
if (!range) {
|
|
278
|
-
return nextPos;
|
|
279
|
-
}
|
|
280
|
-
const toolbarRect = toolbar.getBoundingClientRect();
|
|
281
|
-
const {
|
|
282
|
-
head,
|
|
283
|
-
anchor
|
|
284
|
-
} = editorView.state.selection;
|
|
285
|
-
let top;
|
|
286
|
-
let left;
|
|
287
|
-
const topCoords = editorView.coordsAtPos(Math.min(head, anchor));
|
|
288
|
-
const bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
|
|
289
|
-
// If not the same line AND we are selecting downwards, display toolbar below.
|
|
290
|
-
if (head > anchor && topCoords.top !== bottomCoords.top) {
|
|
291
|
-
// We are taking the previous pos to the maxium, so avoid end of line positions
|
|
292
|
-
// returning the next line's rect.
|
|
293
|
-
top = (bottomCoords.top || 0) + toolbarRect.height / 1.15;
|
|
294
|
-
} else {
|
|
295
|
-
top = (topCoords.top || 0) - toolbarRect.height * 1.5;
|
|
296
|
-
}
|
|
297
|
-
left = (head > anchor ? bottomCoords.right : topCoords.left) - toolbarRect.width / 2;
|
|
298
|
-
|
|
299
|
-
// Place toolbar below selection if not sufficient space above
|
|
300
|
-
if (top < containerBounds.top) {
|
|
301
|
-
({
|
|
302
|
-
top,
|
|
303
|
-
left
|
|
304
|
-
} = getCoordsBelowSelection(bottomCoords, toolbarRect));
|
|
305
|
-
}
|
|
306
|
-
let leftCoord = Math.max(0, left - containerBounds.left);
|
|
307
|
-
if (leftCoord + toolbarRect.width > containerBounds.width) {
|
|
308
|
-
const scrollbarWidth = MAXIMUM_BROWSER_SCROLLBAR_WIDTH;
|
|
309
|
-
leftCoord = Math.max(0, containerBounds.width - (toolbarRect.width + scrollbarWidth));
|
|
310
|
-
}
|
|
311
|
-
|
|
312
|
-
// Apply scroll offset only for non-fixed containers
|
|
313
|
-
// Fixed positioned elements don't scroll with the page
|
|
314
|
-
const scrollOffset = isFixedContainer ? 0 : container.scrollTop;
|
|
315
|
-
return {
|
|
316
|
-
top: top - containerBounds.top + scrollOffset,
|
|
317
|
-
left: leftCoord
|
|
318
|
-
};
|
|
319
|
-
};
|
|
320
|
-
};
|
|
321
|
-
|
|
322
|
-
/*
|
|
323
|
-
Calculates the position of the floating toolbar relative to the selection.
|
|
324
|
-
This implementation works in multiple scenarios:
|
|
325
|
-
- Standard scrollable containers with .fabric-editor-popup-scroll-parent
|
|
326
|
-
- Fixed positioned parent containers
|
|
327
|
-
- Falls back to document.body
|
|
328
|
-
|
|
329
|
-
The function automatically detects the container type and applies the appropriate
|
|
330
|
-
positioning logic and scroll offset handling.
|
|
331
|
-
|
|
332
|
-
Things to consider:
|
|
333
|
-
- stick as close to the head X release coordinates as possible
|
|
334
|
-
- coordinates of head X and getBoundingClientRect() are absolute in client viewport
|
|
335
|
-
- popup may appear in '.fabric-editor-popup-scroll-parent', fixed parent, or body
|
|
336
|
-
- we use the toolbarRect to center align toolbar
|
|
337
|
-
- use container bounds to clamp values
|
|
338
|
-
- for fixed positioning, no scroll offsets are applied
|
|
339
|
-
- for scrollable containers, scroll offsets are included
|
|
340
|
-
*/
|
|
341
|
-
export const calculateToolbarPositionTrackHead = toolbarTitle => {
|
|
342
|
-
const isSelToolbarFixEnabled = expValEquals('platform_editor_sel_toolbar_fix', 'isEnabled', true);
|
|
343
|
-
return isSelToolbarFixEnabled ? calculateToolbarPositionTrackHeadNew(toolbarTitle) : calculateToolbarPositionTrackHeadOld(toolbarTitle);
|
|
344
|
-
};
|
|
345
|
-
|
|
346
151
|
/**
|
|
347
152
|
* Returns the coordintes at the bottom the selection.
|
|
348
153
|
*/
|
|
@@ -249,7 +249,7 @@ export var aiMessages = defineMessages({
|
|
|
249
249
|
// Block menu messages
|
|
250
250
|
blockMenuNestedMenuTitle: {
|
|
251
251
|
id: 'fabric.editor.ai.config.item.blockMenuNestedMenu.title',
|
|
252
|
-
defaultMessage: '
|
|
252
|
+
defaultMessage: 'View more actions',
|
|
253
253
|
description: 'Title for the nested menu in the block menu'
|
|
254
254
|
}
|
|
255
255
|
});
|
|
@@ -442,6 +442,7 @@ export var ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
|
|
|
442
442
|
ACTION_SUBJECT_ID["FORMAT_CODE"] = "code";
|
|
443
443
|
ACTION_SUBJECT_ID["FORMAT_COLOR"] = "color";
|
|
444
444
|
ACTION_SUBJECT_ID["FORMAT_HEADING"] = "heading";
|
|
445
|
+
ACTION_SUBJECT_ID["FORMAT_SMALL_TEXT"] = "smallText";
|
|
445
446
|
ACTION_SUBJECT_ID["FORMAT_INDENT"] = "indentation";
|
|
446
447
|
ACTION_SUBJECT_ID["FORMAT_ITALIC"] = "italic";
|
|
447
448
|
ACTION_SUBJECT_ID["FORMAT_LIST_BULLET"] = "bulletedList";
|
|
@@ -27,6 +27,7 @@ export { messages as dateMessages } from './date';
|
|
|
27
27
|
export { toolbarMessages as layoutMessages } from './layout';
|
|
28
28
|
export { messages as indentationMessages } from './indentation';
|
|
29
29
|
export { avatarGroupMessages } from './avatar-group';
|
|
30
|
+
export { smartLinkChangeboardMessages } from './smart-link-changeboard';
|
|
30
31
|
export { findReplaceMessages } from './find-replace';
|
|
31
32
|
export { elementInsertSidePanel } from './element-insert-side-panel';
|
|
32
33
|
export { textColorMessages } from './text-color';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { defineMessages } from 'react-intl-next';
|
|
2
|
+
export var smartLinkChangeboardMessages = defineMessages({
|
|
3
|
+
headline: {
|
|
4
|
+
id: 'platform.editor.smartlink.changeboard.headline',
|
|
5
|
+
defaultMessage: 'Drag and drop links',
|
|
6
|
+
description: 'Headline for the smart link drag and drop changeboarding popup'
|
|
7
|
+
},
|
|
8
|
+
gifAlt: {
|
|
9
|
+
id: 'platform.editor.smartlink.changeboard.gif.alt',
|
|
10
|
+
defaultMessage: 'Drag smart link into sidebar demonstration',
|
|
11
|
+
description: 'Alt text for the changeboarding GIF'
|
|
12
|
+
},
|
|
13
|
+
description: {
|
|
14
|
+
id: 'platform.editor.smartlink.changeboard.description',
|
|
15
|
+
defaultMessage: 'Keep your important links organized and easy to find by dragging Smart Links into the content tree.',
|
|
16
|
+
description: 'Description text for the changeboarding popup'
|
|
17
|
+
},
|
|
18
|
+
dismiss: {
|
|
19
|
+
id: 'platform.editor.smartlink.changeboard.dismiss',
|
|
20
|
+
defaultMessage: 'Done',
|
|
21
|
+
description: 'Label for the dismiss button in the changeboarding popup'
|
|
22
|
+
}
|
|
23
|
+
});
|
|
@@ -10,7 +10,7 @@ import { isFedRamp } from './environment';
|
|
|
10
10
|
import { normaliseSentryBreadcrumbs, SERIALIZABLE_ATTRIBUTES } from './normalise-sentry-breadcrumbs';
|
|
11
11
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
12
12
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
13
|
-
var packageVersion = "112.4.
|
|
13
|
+
var packageVersion = "112.4.4";
|
|
14
14
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
15
15
|
// Remove URL as it has UGC
|
|
16
16
|
// Ignored via go/ees007
|
|
@@ -262,9 +262,13 @@ var ReactNodeView = /*#__PURE__*/function () {
|
|
|
262
262
|
}, {
|
|
263
263
|
key: "dom",
|
|
264
264
|
get: function get() {
|
|
265
|
+
// Only return reference if domRef is defined
|
|
266
|
+
if (this.domRef === undefined) {
|
|
267
|
+
//raise an error
|
|
268
|
+
throw new Error('domRef is not defined or may have been destroyed');
|
|
269
|
+
}
|
|
270
|
+
|
|
265
271
|
// Spreading props to pass through dynamic component props
|
|
266
|
-
// Ignored via go/ees005
|
|
267
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
268
272
|
return this.domRef;
|
|
269
273
|
}
|
|
270
274
|
}, {
|
|
@@ -40,6 +40,7 @@ export var editorUGCTokensRefreshed = {
|
|
|
40
40
|
'editor.font.heading.h5': 'normal 600 0.857143em/1.33333 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
41
41
|
'editor.font.heading.h6': 'normal 600 0.785714em/1.45455 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
42
42
|
'editor.font.body': 'normal 400 1em/1.714 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
43
|
+
'editor.font.body.small': 'normal 400 0.875em/1.714 "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif',
|
|
43
44
|
'editor.font.weight.heading.h1.bold': '700',
|
|
44
45
|
'editor.font.weight.heading.h2.bold': '700',
|
|
45
46
|
'editor.font.weight.heading.h3.bold': '700',
|
|
@@ -21,7 +21,7 @@ import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
|
21
21
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
22
22
|
import Layer from '../Layer';
|
|
23
23
|
var packageName = "@atlaskit/editor-common";
|
|
24
|
-
var packageVersion = "112.4.
|
|
24
|
+
var packageVersion = "112.4.4";
|
|
25
25
|
var halfFocusRing = 1;
|
|
26
26
|
var dropOffset = '0, 8';
|
|
27
27
|
var fadeIn = keyframes({
|
|
@@ -72,10 +72,10 @@ export default function overflowShadow(Component, options) {
|
|
|
72
72
|
}
|
|
73
73
|
var width = 0;
|
|
74
74
|
for (var i = 0; i < _this.scrollable.length; i++) {
|
|
75
|
-
// Ignored via go/ees005
|
|
76
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
77
75
|
var scrollableElement = _this.scrollable[i];
|
|
78
|
-
|
|
76
|
+
if (isElementNode(scrollableElement)) {
|
|
77
|
+
width += scrollableElement.scrollWidth;
|
|
78
|
+
}
|
|
79
79
|
}
|
|
80
80
|
return width;
|
|
81
81
|
});
|
|
@@ -84,9 +84,6 @@ export default function overflowShadow(Component, options) {
|
|
|
84
84
|
return;
|
|
85
85
|
}
|
|
86
86
|
_this.container = container;
|
|
87
|
-
|
|
88
|
-
// Ignored via go/ees005
|
|
89
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
90
87
|
_this.overflowContainer = container.querySelector(options.overflowSelector);
|
|
91
88
|
if (!_this.overflowContainer) {
|
|
92
89
|
_this.overflowContainer = container;
|
|
@@ -173,4 +170,9 @@ export default function overflowShadow(Component, options) {
|
|
|
173
170
|
}
|
|
174
171
|
}]);
|
|
175
172
|
}(React.Component);
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// Helper function to check if the passed node is of Element class
|
|
176
|
+
function isElementNode(node) {
|
|
177
|
+
return node.nodeType === 1;
|
|
176
178
|
}
|
|
@@ -221,7 +221,7 @@ export function calculatePosition(_ref5) {
|
|
|
221
221
|
boundariesElement = _ref5.boundariesElement,
|
|
222
222
|
minPopupMargin = _ref5.minPopupMargin;
|
|
223
223
|
var position = {};
|
|
224
|
-
if (!target || !popup || !popup.offsetParent) {
|
|
224
|
+
if (!target || !popup || !popup.offsetParent || !isHTMLElementNode(popup.offsetParent)) {
|
|
225
225
|
return position;
|
|
226
226
|
}
|
|
227
227
|
if (isTextNode(target)) {
|
|
@@ -229,9 +229,6 @@ export function calculatePosition(_ref5) {
|
|
|
229
229
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
230
230
|
target = target.parentElement;
|
|
231
231
|
}
|
|
232
|
-
|
|
233
|
-
// Ignored via go/ees005
|
|
234
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
235
232
|
var popupOffsetParent = popup.offsetParent;
|
|
236
233
|
var offsetParentStyle = popupOffsetParent.style;
|
|
237
234
|
var borderBottomWidth = 0;
|
|
@@ -340,4 +337,14 @@ export function findOverflowScrollParent(popup) {
|
|
|
340
337
|
}
|
|
341
338
|
}
|
|
342
339
|
return false;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
// Helper function to check if the passed node is of Element class
|
|
343
|
+
function isElementNode(node) {
|
|
344
|
+
return node.nodeType === 1;
|
|
345
|
+
}
|
|
346
|
+
|
|
347
|
+
// Helper function to check if the passed node is of HTMLElement class
|
|
348
|
+
function isHTMLElementNode(node) {
|
|
349
|
+
return isElementNode(node) && node.namespaceURI === 'http://www.w3.org/1999/xhtml';
|
|
343
350
|
}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
2
2
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
3
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
4
3
|
var MAXIMUM_BROWSER_SCROLLBAR_WIDTH = 20;
|
|
5
4
|
|
|
6
5
|
/*
|
|
@@ -79,82 +78,7 @@ export var calculateToolbarPositionAboveSelection = function calculateToolbarPos
|
|
|
79
78
|
};
|
|
80
79
|
};
|
|
81
80
|
};
|
|
82
|
-
var
|
|
83
|
-
if (expValEquals('platform_editor_sel_toolbar_scroll_pos_fix_exp', 'isEnabled', true)) {
|
|
84
|
-
// Traverse DOM Tree upwards looking for scroll parents with "overflow: scroll"
|
|
85
|
-
// or fixed/absolute positioned containers.
|
|
86
|
-
var parent = editorView.dom;
|
|
87
|
-
|
|
88
|
-
// Ignored via go/ees005
|
|
89
|
-
// eslint-disable-next-line no-cond-assign
|
|
90
|
-
while (parent = parent.parentElement) {
|
|
91
|
-
var style = window.getComputedStyle(parent);
|
|
92
|
-
|
|
93
|
-
// Check for explicit scroll parent class
|
|
94
|
-
if (parent.classList.contains('fabric-editor-popup-scroll-parent')) {
|
|
95
|
-
return {
|
|
96
|
-
container: parent,
|
|
97
|
-
isFixed: false
|
|
98
|
-
};
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
// Check for overflow scroll containers
|
|
102
|
-
if (style.overflow === 'scroll' || style.overflowX === 'scroll' || style.overflowY === 'scroll' || style.overflow === 'auto' || style.overflowX === 'auto' || style.overflowY === 'auto') {
|
|
103
|
-
return {
|
|
104
|
-
container: parent,
|
|
105
|
-
isFixed: false
|
|
106
|
-
};
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
// Check for fixed or absolute positioned containers (modal wrappers, sidebars)
|
|
110
|
-
if (style.position === 'fixed' || style.position === 'absolute') {
|
|
111
|
-
return {
|
|
112
|
-
container: parent,
|
|
113
|
-
isFixed: style.position === 'fixed'
|
|
114
|
-
};
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
// Stop at body
|
|
118
|
-
if (parent === document.body) {
|
|
119
|
-
break;
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
// Fall back to document.body if no suitable container found
|
|
124
|
-
return {
|
|
125
|
-
container: document.body,
|
|
126
|
-
isFixed: false
|
|
127
|
-
};
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
// Original logic
|
|
131
|
-
var scrollParent = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
|
|
132
|
-
if (scrollParent) {
|
|
133
|
-
return {
|
|
134
|
-
container: scrollParent,
|
|
135
|
-
isFixed: false
|
|
136
|
-
};
|
|
137
|
-
} else {
|
|
138
|
-
var fixedParent = editorView.dom.parentElement;
|
|
139
|
-
while (fixedParent && fixedParent !== document.body) {
|
|
140
|
-
var computedStyle = window.getComputedStyle(fixedParent);
|
|
141
|
-
if (computedStyle.position === 'fixed') {
|
|
142
|
-
return {
|
|
143
|
-
container: fixedParent,
|
|
144
|
-
isFixed: true
|
|
145
|
-
};
|
|
146
|
-
}
|
|
147
|
-
fixedParent = fixedParent.parentElement;
|
|
148
|
-
}
|
|
149
|
-
}
|
|
150
|
-
|
|
151
|
-
// Fall back to document.body if no fixed parent found
|
|
152
|
-
return {
|
|
153
|
-
container: document.body,
|
|
154
|
-
isFixed: false
|
|
155
|
-
};
|
|
156
|
-
};
|
|
157
|
-
export var calculateToolbarPositionTrackHeadOld = function calculateToolbarPositionTrackHeadOld(toolbarTitle) {
|
|
81
|
+
export var calculateToolbarPositionTrackHead = function calculateToolbarPositionTrackHead(toolbarTitle) {
|
|
158
82
|
return function (editorView, nextPos) {
|
|
159
83
|
var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
|
|
160
84
|
if (!toolbar) {
|
|
@@ -224,122 +148,6 @@ export var calculateToolbarPositionTrackHeadOld = function calculateToolbarPosit
|
|
|
224
148
|
};
|
|
225
149
|
};
|
|
226
150
|
|
|
227
|
-
/**
|
|
228
|
-
* Same logic as calculateToolbarPositionTrackHeadOld, but with the following changes:
|
|
229
|
-
* - Uses a cached container to avoid repeated DOM traversal and getComputedStyle calls
|
|
230
|
-
* - Works when editor is nested within a fixed positioned parent, such as within a modal or sidebar
|
|
231
|
-
*/
|
|
232
|
-
export var calculateToolbarPositionTrackHeadNew = function calculateToolbarPositionTrackHeadNew(toolbarTitle) {
|
|
233
|
-
// Cache the container to avoid repeated DOM traversal and getComputedStyle calls
|
|
234
|
-
var cachedContainer = null;
|
|
235
|
-
var isFixedContainer = false;
|
|
236
|
-
var cachedEditorDom = null;
|
|
237
|
-
return function (editorView, nextPos) {
|
|
238
|
-
var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
|
|
239
|
-
if (!toolbar) {
|
|
240
|
-
return nextPos;
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
// Find and cache the container (only recalculates if editor DOM changed)
|
|
244
|
-
if (cachedEditorDom !== editorView.dom) {
|
|
245
|
-
cachedEditorDom = editorView.dom;
|
|
246
|
-
var _findContainingElemen = findContainingElement(editorView),
|
|
247
|
-
_container = _findContainingElemen.container,
|
|
248
|
-
isFixed = _findContainingElemen.isFixed;
|
|
249
|
-
cachedContainer = _container;
|
|
250
|
-
isFixedContainer = isFixed;
|
|
251
|
-
}
|
|
252
|
-
if (!cachedContainer) {
|
|
253
|
-
return nextPos;
|
|
254
|
-
}
|
|
255
|
-
var container = cachedContainer;
|
|
256
|
-
var containerBounds = container.getBoundingClientRect();
|
|
257
|
-
var selection = window && window.getSelection();
|
|
258
|
-
var moreRovoOptionsButton = document.querySelector('button[aria-label="More Rovo options"], [aria-label="More Rovo options"]');
|
|
259
|
-
var isMoreRovoOptionsButtonVisible = !!moreRovoOptionsButton && moreRovoOptionsButton instanceof HTMLElement && !!moreRovoOptionsButton.offsetParent;
|
|
260
|
-
var range = null;
|
|
261
|
-
if (isMoreRovoOptionsButtonVisible) {
|
|
262
|
-
if (selection && selection.getRangeAt && selection.rangeCount > 0) {
|
|
263
|
-
var maybeRange = selection.getRangeAt(0);
|
|
264
|
-
if (maybeRange instanceof Range) {
|
|
265
|
-
range = maybeRange;
|
|
266
|
-
}
|
|
267
|
-
}
|
|
268
|
-
} else {
|
|
269
|
-
if (selection && !selection.isCollapsed && selection.getRangeAt && selection.rangeCount > 0) {
|
|
270
|
-
var _maybeRange2 = selection.getRangeAt(0);
|
|
271
|
-
if (_maybeRange2 instanceof Range) {
|
|
272
|
-
range = _maybeRange2;
|
|
273
|
-
}
|
|
274
|
-
}
|
|
275
|
-
}
|
|
276
|
-
if (!range) {
|
|
277
|
-
return nextPos;
|
|
278
|
-
}
|
|
279
|
-
var toolbarRect = toolbar.getBoundingClientRect();
|
|
280
|
-
var _editorView$state$sel3 = editorView.state.selection,
|
|
281
|
-
head = _editorView$state$sel3.head,
|
|
282
|
-
anchor = _editorView$state$sel3.anchor;
|
|
283
|
-
var top;
|
|
284
|
-
var left;
|
|
285
|
-
var topCoords = editorView.coordsAtPos(Math.min(head, anchor));
|
|
286
|
-
var bottomCoords = editorView.coordsAtPos(Math.max(head, anchor) - Math.min(range.endOffset, 1));
|
|
287
|
-
// If not the same line AND we are selecting downwards, display toolbar below.
|
|
288
|
-
if (head > anchor && topCoords.top !== bottomCoords.top) {
|
|
289
|
-
// We are taking the previous pos to the maxium, so avoid end of line positions
|
|
290
|
-
// returning the next line's rect.
|
|
291
|
-
top = (bottomCoords.top || 0) + toolbarRect.height / 1.15;
|
|
292
|
-
} else {
|
|
293
|
-
top = (topCoords.top || 0) - toolbarRect.height * 1.5;
|
|
294
|
-
}
|
|
295
|
-
left = (head > anchor ? bottomCoords.right : topCoords.left) - toolbarRect.width / 2;
|
|
296
|
-
|
|
297
|
-
// Place toolbar below selection if not sufficient space above
|
|
298
|
-
if (top < containerBounds.top) {
|
|
299
|
-
var _getCoordsBelowSelect3 = getCoordsBelowSelection(bottomCoords, toolbarRect);
|
|
300
|
-
top = _getCoordsBelowSelect3.top;
|
|
301
|
-
left = _getCoordsBelowSelect3.left;
|
|
302
|
-
}
|
|
303
|
-
var leftCoord = Math.max(0, left - containerBounds.left);
|
|
304
|
-
if (leftCoord + toolbarRect.width > containerBounds.width) {
|
|
305
|
-
var _scrollbarWidth2 = MAXIMUM_BROWSER_SCROLLBAR_WIDTH;
|
|
306
|
-
leftCoord = Math.max(0, containerBounds.width - (toolbarRect.width + _scrollbarWidth2));
|
|
307
|
-
}
|
|
308
|
-
|
|
309
|
-
// Apply scroll offset only for non-fixed containers
|
|
310
|
-
// Fixed positioned elements don't scroll with the page
|
|
311
|
-
var scrollOffset = isFixedContainer ? 0 : container.scrollTop;
|
|
312
|
-
return {
|
|
313
|
-
top: top - containerBounds.top + scrollOffset,
|
|
314
|
-
left: leftCoord
|
|
315
|
-
};
|
|
316
|
-
};
|
|
317
|
-
};
|
|
318
|
-
|
|
319
|
-
/*
|
|
320
|
-
Calculates the position of the floating toolbar relative to the selection.
|
|
321
|
-
This implementation works in multiple scenarios:
|
|
322
|
-
- Standard scrollable containers with .fabric-editor-popup-scroll-parent
|
|
323
|
-
- Fixed positioned parent containers
|
|
324
|
-
- Falls back to document.body
|
|
325
|
-
|
|
326
|
-
The function automatically detects the container type and applies the appropriate
|
|
327
|
-
positioning logic and scroll offset handling.
|
|
328
|
-
|
|
329
|
-
Things to consider:
|
|
330
|
-
- stick as close to the head X release coordinates as possible
|
|
331
|
-
- coordinates of head X and getBoundingClientRect() are absolute in client viewport
|
|
332
|
-
- popup may appear in '.fabric-editor-popup-scroll-parent', fixed parent, or body
|
|
333
|
-
- we use the toolbarRect to center align toolbar
|
|
334
|
-
- use container bounds to clamp values
|
|
335
|
-
- for fixed positioning, no scroll offsets are applied
|
|
336
|
-
- for scrollable containers, scroll offsets are included
|
|
337
|
-
*/
|
|
338
|
-
export var calculateToolbarPositionTrackHead = function calculateToolbarPositionTrackHead(toolbarTitle) {
|
|
339
|
-
var isSelToolbarFixEnabled = expValEquals('platform_editor_sel_toolbar_fix', 'isEnabled', true);
|
|
340
|
-
return isSelToolbarFixEnabled ? calculateToolbarPositionTrackHeadNew(toolbarTitle) : calculateToolbarPositionTrackHeadOld(toolbarTitle);
|
|
341
|
-
};
|
|
342
|
-
|
|
343
151
|
/**
|
|
344
152
|
* Returns the coordintes at the bottom the selection.
|
|
345
153
|
*/
|
|
@@ -433,6 +433,7 @@ export declare enum ACTION_SUBJECT_ID {
|
|
|
433
433
|
FORMAT_CODE = "code",
|
|
434
434
|
FORMAT_COLOR = "color",
|
|
435
435
|
FORMAT_HEADING = "heading",
|
|
436
|
+
FORMAT_SMALL_TEXT = "smallText",
|
|
436
437
|
FORMAT_INDENT = "indentation",
|
|
437
438
|
FORMAT_ITALIC = "italic",
|
|
438
439
|
FORMAT_LIST_BULLET = "bulletedList",
|
|
@@ -31,6 +31,10 @@ type FormatHeadingAEP = FormatAEP<ACTION_SUBJECT_ID.FORMAT_HEADING, {
|
|
|
31
31
|
newHeadingLevel: HeadingLevelsAndNormalText;
|
|
32
32
|
previousHeadingLevel?: HeadingLevelsAndNormalText;
|
|
33
33
|
}>;
|
|
34
|
+
type FormatSmallTextAEP = FormatAEP<ACTION_SUBJECT_ID.FORMAT_SMALL_TEXT, {
|
|
35
|
+
inputMethod: INPUT_METHOD.TOOLBAR | INPUT_METHOD.INSERT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FORMATTING | INPUT_METHOD.SHORTCUT | INPUT_METHOD.FLOATING_TB;
|
|
36
|
+
previousBlockType?: string;
|
|
37
|
+
}>;
|
|
34
38
|
type FormatBlockQuoteAEP = FormatAEP<ACTION_SUBJECT_ID.FORMAT_BLOCK_QUOTE, {
|
|
35
39
|
inputMethod: INPUT_METHOD.TOOLBAR | INPUT_METHOD.INSERT_MENU | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FORMATTING | INPUT_METHOD.SHORTCUT | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.FLOATING_TB;
|
|
36
40
|
}>;
|
|
@@ -47,5 +51,5 @@ type FormatColorAEP = FormatAEP<ACTION_SUBJECT_ID.FORMAT_COLOR, {
|
|
|
47
51
|
type FormatListAEP = FormatAEP<ACTION_SUBJECT_ID.FORMAT_LIST_NUMBER | ACTION_SUBJECT_ID.FORMAT_LIST_BULLET, {
|
|
48
52
|
inputMethod: INPUT_METHOD.TOOLBAR | INPUT_METHOD.KEYBOARD | INPUT_METHOD.FORMATTING | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.FLOATING_TB;
|
|
49
53
|
}>;
|
|
50
|
-
export type FormatEventPayload = FormatBasicAEP | FormatSuperSubAEP | FormatIndentationAEP | FormatHeadingAEP | FormatBlockQuoteAEP | FormatClearAEP | FormatColorAEP | FormatListAEP;
|
|
54
|
+
export type FormatEventPayload = FormatBasicAEP | FormatSuperSubAEP | FormatIndentationAEP | FormatHeadingAEP | FormatSmallTextAEP | FormatBlockQuoteAEP | FormatClearAEP | FormatColorAEP | FormatListAEP;
|
|
51
55
|
export {};
|
|
@@ -23,6 +23,7 @@ export { messages as dateMessages } from './date';
|
|
|
23
23
|
export { toolbarMessages as layoutMessages } from './layout';
|
|
24
24
|
export { messages as indentationMessages } from './indentation';
|
|
25
25
|
export { avatarGroupMessages } from './avatar-group';
|
|
26
|
+
export { smartLinkChangeboardMessages } from './smart-link-changeboard';
|
|
26
27
|
export { findReplaceMessages } from './find-replace';
|
|
27
28
|
export { elementInsertSidePanel } from './element-insert-side-panel';
|
|
28
29
|
export { textColorMessages } from './text-color';
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
export declare const smartLinkChangeboardMessages: {
|
|
2
|
+
headline: {
|
|
3
|
+
id: string;
|
|
4
|
+
defaultMessage: string;
|
|
5
|
+
description: string;
|
|
6
|
+
};
|
|
7
|
+
gifAlt: {
|
|
8
|
+
id: string;
|
|
9
|
+
defaultMessage: string;
|
|
10
|
+
description: string;
|
|
11
|
+
};
|
|
12
|
+
description: {
|
|
13
|
+
id: string;
|
|
14
|
+
defaultMessage: string;
|
|
15
|
+
description: string;
|
|
16
|
+
};
|
|
17
|
+
dismiss: {
|
|
18
|
+
id: string;
|
|
19
|
+
defaultMessage: string;
|
|
20
|
+
description: string;
|
|
21
|
+
};
|
|
22
|
+
};
|