@atlaskit/editor-common 102.11.4 → 102.11.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 +8 -0
- package/dist/cjs/monitoring/error.js +1 -1
- package/dist/cjs/ui/DropList/index.js +1 -1
- package/dist/cjs/utils/calculate-toolbar-position.js +82 -3
- package/dist/cjs/utils/index.js +6 -0
- package/dist/es2019/monitoring/error.js +1 -1
- package/dist/es2019/ui/DropList/index.js +1 -1
- package/dist/es2019/utils/calculate-toolbar-position.js +81 -0
- package/dist/es2019/utils/index.js +1 -1
- package/dist/esm/monitoring/error.js +1 -1
- package/dist/esm/ui/DropList/index.js +1 -1
- package/dist/esm/utils/calculate-toolbar-position.js +81 -2
- package/dist/esm/utils/index.js +1 -1
- package/dist/types/utils/calculate-toolbar-position.d.ts +1 -0
- package/dist/types/utils/index.d.ts +1 -1
- package/dist/types-ts4.5/utils/calculate-toolbar-position.d.ts +1 -0
- package/dist/types-ts4.5/utils/index.d.ts +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-common
|
|
2
2
|
|
|
3
|
+
## 102.11.5
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#126837](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/126837)
|
|
8
|
+
[`3f513ff6dac97`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3f513ff6dac97) -
|
|
9
|
+
[ux] Displays Text Formatting toolbar on CellSelection.
|
|
10
|
+
|
|
3
11
|
## 102.11.4
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
17
17
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
18
18
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
19
19
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
20
|
-
var packageVersion = "102.11.
|
|
20
|
+
var packageVersion = "102.11.5";
|
|
21
21
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
22
22
|
// Remove URL as it has UGC
|
|
23
23
|
// Ignored via go/ees007
|
|
@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
23
23
|
* @jsx jsx
|
|
24
24
|
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
25
25
|
var packageName = "@atlaskit/editor-common";
|
|
26
|
-
var packageVersion = "102.11.
|
|
26
|
+
var packageVersion = "102.11.5";
|
|
27
27
|
var halfFocusRing = 1;
|
|
28
28
|
var dropOffset = '0, 8';
|
|
29
29
|
// Ignored via go/ees005
|
|
@@ -3,7 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.calculateToolbarPositionTrackHead = exports.calculateToolbarPositionAboveSelection = void 0;
|
|
6
|
+
exports.calculateToolbarPositionTrackHead = exports.calculateToolbarPositionOnCellSelection = exports.calculateToolbarPositionAboveSelection = void 0;
|
|
7
|
+
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
8
|
+
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
|
|
7
9
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
8
10
|
/*
|
|
9
11
|
Calculates the position of the floating toolbar relative to the selection.
|
|
@@ -135,8 +137,8 @@ var calculateToolbarPositionTrackHead = exports.calculateToolbarPositionTrackHea
|
|
|
135
137
|
var leftCoord = Math.max(0, left - wrapperBounds.left);
|
|
136
138
|
if ((0, _platformFeatureFlags.fg)('platform_editor_selection_toolbar_scroll_fix')) {
|
|
137
139
|
if (leftCoord + toolbarRect.width > wrapperBounds.width) {
|
|
138
|
-
var
|
|
139
|
-
leftCoord = Math.max(0, wrapperBounds.width - (toolbarRect.width +
|
|
140
|
+
var _scrollbarWidth = 20;
|
|
141
|
+
leftCoord = Math.max(0, wrapperBounds.width - (toolbarRect.width + _scrollbarWidth));
|
|
140
142
|
}
|
|
141
143
|
}
|
|
142
144
|
|
|
@@ -156,4 +158,81 @@ var getCoordsBelowSelection = function getCoordsBelowSelection(bottomCoords, too
|
|
|
156
158
|
top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
|
|
157
159
|
left: bottomCoords.right - toolbarRect.width / 2
|
|
158
160
|
};
|
|
161
|
+
};
|
|
162
|
+
var cellSelectionToolbarCffsetTop = 10;
|
|
163
|
+
var scrollbarWidth = 20;
|
|
164
|
+
var calculateToolbarPositionOnCellSelection = exports.calculateToolbarPositionOnCellSelection = function calculateToolbarPositionOnCellSelection(toolbarTitle) {
|
|
165
|
+
return function (editorView, nextPos) {
|
|
166
|
+
var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
|
|
167
|
+
if (!toolbar) {
|
|
168
|
+
return nextPos;
|
|
169
|
+
}
|
|
170
|
+
var selection = editorView.state.selection;
|
|
171
|
+
if (!(selection instanceof _cellSelection.CellSelection)) {
|
|
172
|
+
return nextPos;
|
|
173
|
+
}
|
|
174
|
+
var $anchorCell = selection.$anchorCell,
|
|
175
|
+
$headCell = selection.$headCell;
|
|
176
|
+
var domAtPos = editorView.domAtPos.bind(editorView);
|
|
177
|
+
var anchorCellDOM = (0, _utils.findDomRefAtPos)($anchorCell.pos, domAtPos);
|
|
178
|
+
var headCellDOM = (0, _utils.findDomRefAtPos)($headCell.pos, domAtPos);
|
|
179
|
+
if (!(anchorCellDOM instanceof HTMLElement) || !(headCellDOM instanceof HTMLElement)) {
|
|
180
|
+
return nextPos;
|
|
181
|
+
}
|
|
182
|
+
var anchorCellRect = anchorCellDOM.getBoundingClientRect();
|
|
183
|
+
var headCellRect = headCellDOM.getBoundingClientRect();
|
|
184
|
+
var toolbarRect = toolbar.getBoundingClientRect();
|
|
185
|
+
var top;
|
|
186
|
+
if (headCellRect.top <= anchorCellRect.top) {
|
|
187
|
+
// Display Selection toolbar at the top of the selection
|
|
188
|
+
top = headCellRect.top - toolbarRect.height - cellSelectionToolbarCffsetTop;
|
|
189
|
+
} else {
|
|
190
|
+
// Display Selection toolbar at the bottom of the selection
|
|
191
|
+
top = headCellRect.bottom + cellSelectionToolbarCffsetTop;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
// scroll wrapper for full page, fall back to document body
|
|
195
|
+
// Ignored via go/ees007
|
|
196
|
+
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
197
|
+
// TODO: look into using getScrollGutterOptions()
|
|
198
|
+
var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
|
|
199
|
+
var wrapperBounds = scrollWrapper.getBoundingClientRect();
|
|
200
|
+
// Place toolbar below selection if not sufficient space above
|
|
201
|
+
if (top < wrapperBounds.top && headCellRect.top <= anchorCellRect.top) {
|
|
202
|
+
top = anchorCellRect.bottom + cellSelectionToolbarCffsetTop;
|
|
203
|
+
}
|
|
204
|
+
var left;
|
|
205
|
+
if (headCellRect.left < anchorCellRect.left) {
|
|
206
|
+
left = headCellRect.left;
|
|
207
|
+
} else if (headCellRect.left === anchorCellRect.left) {
|
|
208
|
+
left = headCellRect.left + headCellRect.width / 2;
|
|
209
|
+
} else {
|
|
210
|
+
left = headCellRect.right;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
// If a user selected multiple columns via clicking on a drag handle
|
|
214
|
+
// (clicking first on the left column and then shift clicking on the right column),
|
|
215
|
+
// the $headcell stays in place and $anchorcell changes position. If they clicked on the right column
|
|
216
|
+
// and then shift clicked on the left, the $headCell will change while $anchor stays in place.
|
|
217
|
+
// Where is no way to know if user was dragging to select the cells or clicking on the drag handle.
|
|
218
|
+
// So if all cells in columns are selected, we will align the Text Formatting toolbar
|
|
219
|
+
// relative to center of the selected area.
|
|
220
|
+
if (selection.isColSelection()) {
|
|
221
|
+
if (headCellRect.left < anchorCellRect.left) {
|
|
222
|
+
left = headCellRect.left + (anchorCellRect.right - headCellRect.left) / 2;
|
|
223
|
+
} else if (headCellRect.left === anchorCellRect.left) {
|
|
224
|
+
left = left;
|
|
225
|
+
} else {
|
|
226
|
+
left = anchorCellRect.left + (headCellRect.right - anchorCellRect.left) / 2;
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
var adjustedLeft = Math.max(0, left - toolbarRect.width / 2 - wrapperBounds.left);
|
|
230
|
+
if (adjustedLeft + toolbarRect.width > wrapperBounds.width) {
|
|
231
|
+
adjustedLeft = Math.max(0, wrapperBounds.width - (toolbarRect.width + scrollbarWidth));
|
|
232
|
+
}
|
|
233
|
+
return {
|
|
234
|
+
top: top - wrapperBounds.top + scrollWrapper.scrollTop,
|
|
235
|
+
left: adjustedLeft
|
|
236
|
+
};
|
|
237
|
+
};
|
|
159
238
|
};
|
package/dist/cjs/utils/index.js
CHANGED
|
@@ -202,6 +202,12 @@ Object.defineProperty(exports, "calculateToolbarPositionAboveSelection", {
|
|
|
202
202
|
return _calculateToolbarPosition.calculateToolbarPositionAboveSelection;
|
|
203
203
|
}
|
|
204
204
|
});
|
|
205
|
+
Object.defineProperty(exports, "calculateToolbarPositionOnCellSelection", {
|
|
206
|
+
enumerable: true,
|
|
207
|
+
get: function get() {
|
|
208
|
+
return _calculateToolbarPosition.calculateToolbarPositionOnCellSelection;
|
|
209
|
+
}
|
|
210
|
+
});
|
|
205
211
|
Object.defineProperty(exports, "calculateToolbarPositionTrackHead", {
|
|
206
212
|
enumerable: true,
|
|
207
213
|
get: function get() {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { isFedRamp } from './environment';
|
|
2
2
|
const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
3
3
|
const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
4
|
-
const packageVersion = "102.11.
|
|
4
|
+
const packageVersion = "102.11.5";
|
|
5
5
|
const sanitiseSentryEvents = (data, _hint) => {
|
|
6
6
|
// Remove URL as it has UGC
|
|
7
7
|
// Ignored via go/ees007
|
|
@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
|
|
|
13
13
|
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
14
14
|
import Layer from '../Layer';
|
|
15
15
|
const packageName = "@atlaskit/editor-common";
|
|
16
|
-
const packageVersion = "102.11.
|
|
16
|
+
const packageVersion = "102.11.5";
|
|
17
17
|
const halfFocusRing = 1;
|
|
18
18
|
const dropOffset = '0, 8';
|
|
19
19
|
// Ignored via go/ees005
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
2
|
+
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
1
3
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
4
|
/*
|
|
3
5
|
Calculates the position of the floating toolbar relative to the selection.
|
|
@@ -150,4 +152,83 @@ const getCoordsBelowSelection = (bottomCoords, toolbarRect) => {
|
|
|
150
152
|
top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
|
|
151
153
|
left: bottomCoords.right - toolbarRect.width / 2
|
|
152
154
|
};
|
|
155
|
+
};
|
|
156
|
+
const cellSelectionToolbarCffsetTop = 10;
|
|
157
|
+
const scrollbarWidth = 20;
|
|
158
|
+
export const calculateToolbarPositionOnCellSelection = toolbarTitle => (editorView, nextPos) => {
|
|
159
|
+
const toolbar = document.querySelector(`div[aria-label="${toolbarTitle}"]`);
|
|
160
|
+
if (!toolbar) {
|
|
161
|
+
return nextPos;
|
|
162
|
+
}
|
|
163
|
+
const {
|
|
164
|
+
selection
|
|
165
|
+
} = editorView.state;
|
|
166
|
+
if (!(selection instanceof CellSelection)) {
|
|
167
|
+
return nextPos;
|
|
168
|
+
}
|
|
169
|
+
const {
|
|
170
|
+
$anchorCell,
|
|
171
|
+
$headCell
|
|
172
|
+
} = selection;
|
|
173
|
+
const domAtPos = editorView.domAtPos.bind(editorView);
|
|
174
|
+
const anchorCellDOM = findDomRefAtPos($anchorCell.pos, domAtPos);
|
|
175
|
+
const headCellDOM = findDomRefAtPos($headCell.pos, domAtPos);
|
|
176
|
+
if (!(anchorCellDOM instanceof HTMLElement) || !(headCellDOM instanceof HTMLElement)) {
|
|
177
|
+
return nextPos;
|
|
178
|
+
}
|
|
179
|
+
const anchorCellRect = anchorCellDOM.getBoundingClientRect();
|
|
180
|
+
const headCellRect = headCellDOM.getBoundingClientRect();
|
|
181
|
+
const toolbarRect = toolbar.getBoundingClientRect();
|
|
182
|
+
let top;
|
|
183
|
+
if (headCellRect.top <= anchorCellRect.top) {
|
|
184
|
+
// Display Selection toolbar at the top of the selection
|
|
185
|
+
top = headCellRect.top - toolbarRect.height - cellSelectionToolbarCffsetTop;
|
|
186
|
+
} else {
|
|
187
|
+
// Display Selection toolbar at the bottom of the selection
|
|
188
|
+
top = headCellRect.bottom + cellSelectionToolbarCffsetTop;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
// scroll wrapper for full page, fall back to document body
|
|
192
|
+
// Ignored via go/ees007
|
|
193
|
+
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
194
|
+
// TODO: look into using getScrollGutterOptions()
|
|
195
|
+
const scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
|
|
196
|
+
const wrapperBounds = scrollWrapper.getBoundingClientRect();
|
|
197
|
+
// Place toolbar below selection if not sufficient space above
|
|
198
|
+
if (top < wrapperBounds.top && headCellRect.top <= anchorCellRect.top) {
|
|
199
|
+
top = anchorCellRect.bottom + cellSelectionToolbarCffsetTop;
|
|
200
|
+
}
|
|
201
|
+
let left;
|
|
202
|
+
if (headCellRect.left < anchorCellRect.left) {
|
|
203
|
+
left = headCellRect.left;
|
|
204
|
+
} else if (headCellRect.left === anchorCellRect.left) {
|
|
205
|
+
left = headCellRect.left + headCellRect.width / 2;
|
|
206
|
+
} else {
|
|
207
|
+
left = headCellRect.right;
|
|
208
|
+
}
|
|
209
|
+
|
|
210
|
+
// If a user selected multiple columns via clicking on a drag handle
|
|
211
|
+
// (clicking first on the left column and then shift clicking on the right column),
|
|
212
|
+
// the $headcell stays in place and $anchorcell changes position. If they clicked on the right column
|
|
213
|
+
// and then shift clicked on the left, the $headCell will change while $anchor stays in place.
|
|
214
|
+
// Where is no way to know if user was dragging to select the cells or clicking on the drag handle.
|
|
215
|
+
// So if all cells in columns are selected, we will align the Text Formatting toolbar
|
|
216
|
+
// relative to center of the selected area.
|
|
217
|
+
if (selection.isColSelection()) {
|
|
218
|
+
if (headCellRect.left < anchorCellRect.left) {
|
|
219
|
+
left = headCellRect.left + (anchorCellRect.right - headCellRect.left) / 2;
|
|
220
|
+
} else if (headCellRect.left === anchorCellRect.left) {
|
|
221
|
+
left = left;
|
|
222
|
+
} else {
|
|
223
|
+
left = anchorCellRect.left + (headCellRect.right - anchorCellRect.left) / 2;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
let adjustedLeft = Math.max(0, left - toolbarRect.width / 2 - wrapperBounds.left);
|
|
227
|
+
if (adjustedLeft + toolbarRect.width > wrapperBounds.width) {
|
|
228
|
+
adjustedLeft = Math.max(0, wrapperBounds.width - (toolbarRect.width + scrollbarWidth));
|
|
229
|
+
}
|
|
230
|
+
return {
|
|
231
|
+
top: top - wrapperBounds.top + scrollWrapper.scrollTop,
|
|
232
|
+
left: adjustedLeft
|
|
233
|
+
};
|
|
153
234
|
};
|
|
@@ -361,7 +361,7 @@ export { createWrapSelectionTransaction, getWrappingOptions } from './create-wra
|
|
|
361
361
|
export { transformNodeIntoListItem } from './insert-node-into-ordered-list';
|
|
362
362
|
export { wrapSelectionIn } from './wrap-selection-in';
|
|
363
363
|
export { toJSON, nodeToJSON } from './nodes';
|
|
364
|
-
export { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from './calculate-toolbar-position';
|
|
364
|
+
export { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from './calculate-toolbar-position';
|
|
365
365
|
export { findNodePosByLocalIds } from './nodes-by-localIds';
|
|
366
366
|
export { getPageElementCounts } from './page-element-counts';
|
|
367
367
|
export { withFeatureFlaggedComponent } from './withFeatureFlaggedComponent';
|
|
@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
7
7
|
import { isFedRamp } from './environment';
|
|
8
8
|
var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
|
|
9
9
|
var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
|
|
10
|
-
var packageVersion = "102.11.
|
|
10
|
+
var packageVersion = "102.11.5";
|
|
11
11
|
var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
|
|
12
12
|
// Remove URL as it has UGC
|
|
13
13
|
// Ignored via go/ees007
|
|
@@ -20,7 +20,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
|
|
|
20
20
|
import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
|
|
21
21
|
import Layer from '../Layer';
|
|
22
22
|
var packageName = "@atlaskit/editor-common";
|
|
23
|
-
var packageVersion = "102.11.
|
|
23
|
+
var packageVersion = "102.11.5";
|
|
24
24
|
var halfFocusRing = 1;
|
|
25
25
|
var dropOffset = '0, 8';
|
|
26
26
|
// Ignored via go/ees005
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
2
|
+
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
1
3
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
2
4
|
/*
|
|
3
5
|
Calculates the position of the floating toolbar relative to the selection.
|
|
@@ -129,8 +131,8 @@ export var calculateToolbarPositionTrackHead = function calculateToolbarPosition
|
|
|
129
131
|
var leftCoord = Math.max(0, left - wrapperBounds.left);
|
|
130
132
|
if (fg('platform_editor_selection_toolbar_scroll_fix')) {
|
|
131
133
|
if (leftCoord + toolbarRect.width > wrapperBounds.width) {
|
|
132
|
-
var
|
|
133
|
-
leftCoord = Math.max(0, wrapperBounds.width - (toolbarRect.width +
|
|
134
|
+
var _scrollbarWidth = 20;
|
|
135
|
+
leftCoord = Math.max(0, wrapperBounds.width - (toolbarRect.width + _scrollbarWidth));
|
|
134
136
|
}
|
|
135
137
|
}
|
|
136
138
|
|
|
@@ -150,4 +152,81 @@ var getCoordsBelowSelection = function getCoordsBelowSelection(bottomCoords, too
|
|
|
150
152
|
top: (bottomCoords.top || 0) + toolbarRect.height / 1.15,
|
|
151
153
|
left: bottomCoords.right - toolbarRect.width / 2
|
|
152
154
|
};
|
|
155
|
+
};
|
|
156
|
+
var cellSelectionToolbarCffsetTop = 10;
|
|
157
|
+
var scrollbarWidth = 20;
|
|
158
|
+
export var calculateToolbarPositionOnCellSelection = function calculateToolbarPositionOnCellSelection(toolbarTitle) {
|
|
159
|
+
return function (editorView, nextPos) {
|
|
160
|
+
var toolbar = document.querySelector("div[aria-label=\"".concat(toolbarTitle, "\"]"));
|
|
161
|
+
if (!toolbar) {
|
|
162
|
+
return nextPos;
|
|
163
|
+
}
|
|
164
|
+
var selection = editorView.state.selection;
|
|
165
|
+
if (!(selection instanceof CellSelection)) {
|
|
166
|
+
return nextPos;
|
|
167
|
+
}
|
|
168
|
+
var $anchorCell = selection.$anchorCell,
|
|
169
|
+
$headCell = selection.$headCell;
|
|
170
|
+
var domAtPos = editorView.domAtPos.bind(editorView);
|
|
171
|
+
var anchorCellDOM = findDomRefAtPos($anchorCell.pos, domAtPos);
|
|
172
|
+
var headCellDOM = findDomRefAtPos($headCell.pos, domAtPos);
|
|
173
|
+
if (!(anchorCellDOM instanceof HTMLElement) || !(headCellDOM instanceof HTMLElement)) {
|
|
174
|
+
return nextPos;
|
|
175
|
+
}
|
|
176
|
+
var anchorCellRect = anchorCellDOM.getBoundingClientRect();
|
|
177
|
+
var headCellRect = headCellDOM.getBoundingClientRect();
|
|
178
|
+
var toolbarRect = toolbar.getBoundingClientRect();
|
|
179
|
+
var top;
|
|
180
|
+
if (headCellRect.top <= anchorCellRect.top) {
|
|
181
|
+
// Display Selection toolbar at the top of the selection
|
|
182
|
+
top = headCellRect.top - toolbarRect.height - cellSelectionToolbarCffsetTop;
|
|
183
|
+
} else {
|
|
184
|
+
// Display Selection toolbar at the bottom of the selection
|
|
185
|
+
top = headCellRect.bottom + cellSelectionToolbarCffsetTop;
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
// scroll wrapper for full page, fall back to document body
|
|
189
|
+
// Ignored via go/ees007
|
|
190
|
+
// eslint-disable-next-line @atlaskit/editor/enforce-todo-comment-format
|
|
191
|
+
// TODO: look into using getScrollGutterOptions()
|
|
192
|
+
var scrollWrapper = editorView.dom.closest('.fabric-editor-popup-scroll-parent') || document.body;
|
|
193
|
+
var wrapperBounds = scrollWrapper.getBoundingClientRect();
|
|
194
|
+
// Place toolbar below selection if not sufficient space above
|
|
195
|
+
if (top < wrapperBounds.top && headCellRect.top <= anchorCellRect.top) {
|
|
196
|
+
top = anchorCellRect.bottom + cellSelectionToolbarCffsetTop;
|
|
197
|
+
}
|
|
198
|
+
var left;
|
|
199
|
+
if (headCellRect.left < anchorCellRect.left) {
|
|
200
|
+
left = headCellRect.left;
|
|
201
|
+
} else if (headCellRect.left === anchorCellRect.left) {
|
|
202
|
+
left = headCellRect.left + headCellRect.width / 2;
|
|
203
|
+
} else {
|
|
204
|
+
left = headCellRect.right;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
// If a user selected multiple columns via clicking on a drag handle
|
|
208
|
+
// (clicking first on the left column and then shift clicking on the right column),
|
|
209
|
+
// the $headcell stays in place and $anchorcell changes position. If they clicked on the right column
|
|
210
|
+
// and then shift clicked on the left, the $headCell will change while $anchor stays in place.
|
|
211
|
+
// Where is no way to know if user was dragging to select the cells or clicking on the drag handle.
|
|
212
|
+
// So if all cells in columns are selected, we will align the Text Formatting toolbar
|
|
213
|
+
// relative to center of the selected area.
|
|
214
|
+
if (selection.isColSelection()) {
|
|
215
|
+
if (headCellRect.left < anchorCellRect.left) {
|
|
216
|
+
left = headCellRect.left + (anchorCellRect.right - headCellRect.left) / 2;
|
|
217
|
+
} else if (headCellRect.left === anchorCellRect.left) {
|
|
218
|
+
left = left;
|
|
219
|
+
} else {
|
|
220
|
+
left = anchorCellRect.left + (headCellRect.right - anchorCellRect.left) / 2;
|
|
221
|
+
}
|
|
222
|
+
}
|
|
223
|
+
var adjustedLeft = Math.max(0, left - toolbarRect.width / 2 - wrapperBounds.left);
|
|
224
|
+
if (adjustedLeft + toolbarRect.width > wrapperBounds.width) {
|
|
225
|
+
adjustedLeft = Math.max(0, wrapperBounds.width - (toolbarRect.width + scrollbarWidth));
|
|
226
|
+
}
|
|
227
|
+
return {
|
|
228
|
+
top: top - wrapperBounds.top + scrollWrapper.scrollTop,
|
|
229
|
+
left: adjustedLeft
|
|
230
|
+
};
|
|
231
|
+
};
|
|
153
232
|
};
|
package/dist/esm/utils/index.js
CHANGED
|
@@ -364,7 +364,7 @@ export { createWrapSelectionTransaction, getWrappingOptions } from './create-wra
|
|
|
364
364
|
export { transformNodeIntoListItem } from './insert-node-into-ordered-list';
|
|
365
365
|
export { wrapSelectionIn } from './wrap-selection-in';
|
|
366
366
|
export { toJSON, nodeToJSON } from './nodes';
|
|
367
|
-
export { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead } from './calculate-toolbar-position';
|
|
367
|
+
export { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead } from './calculate-toolbar-position';
|
|
368
368
|
export { findNodePosByLocalIds } from './nodes-by-localIds';
|
|
369
369
|
export { getPageElementCounts } from './page-element-counts';
|
|
370
370
|
export { withFeatureFlaggedComponent } from './withFeatureFlaggedComponent';
|
|
@@ -211,7 +211,7 @@ export { createWrapSelectionTransaction, getWrappingOptions, } from './create-wr
|
|
|
211
211
|
export { transformNodeIntoListItem } from './insert-node-into-ordered-list';
|
|
212
212
|
export { wrapSelectionIn } from './wrap-selection-in';
|
|
213
213
|
export { toJSON, nodeToJSON } from './nodes';
|
|
214
|
-
export { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead, } from './calculate-toolbar-position';
|
|
214
|
+
export { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead, } from './calculate-toolbar-position';
|
|
215
215
|
export { findNodePosByLocalIds } from './nodes-by-localIds';
|
|
216
216
|
export { getPageElementCounts } from './page-element-counts';
|
|
217
217
|
export type { PageElementCounts } from './page-element-counts';
|
|
@@ -211,7 +211,7 @@ export { createWrapSelectionTransaction, getWrappingOptions, } from './create-wr
|
|
|
211
211
|
export { transformNodeIntoListItem } from './insert-node-into-ordered-list';
|
|
212
212
|
export { wrapSelectionIn } from './wrap-selection-in';
|
|
213
213
|
export { toJSON, nodeToJSON } from './nodes';
|
|
214
|
-
export { calculateToolbarPositionAboveSelection, calculateToolbarPositionTrackHead, } from './calculate-toolbar-position';
|
|
214
|
+
export { calculateToolbarPositionAboveSelection, calculateToolbarPositionOnCellSelection, calculateToolbarPositionTrackHead, } from './calculate-toolbar-position';
|
|
215
215
|
export { findNodePosByLocalIds } from './nodes-by-localIds';
|
|
216
216
|
export { getPageElementCounts } from './page-element-counts';
|
|
217
217
|
export type { PageElementCounts } from './page-element-counts';
|
package/package.json
CHANGED