@atlaskit/editor-plugin-table 15.4.8 → 15.4.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +25 -40
- package/dist/cjs/ui/FloatingContextualMenu/index.js +1 -2
- package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +21 -34
- package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +25 -40
- package/dist/es2019/ui/FloatingContextualMenu/index.js +1 -2
- package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +21 -34
- package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +25 -40
- package/dist/esm/ui/FloatingContextualMenu/index.js +1 -2
- package/dist/esm/ui/FloatingDragMenu/DragMenu.js +21 -34
- package/package.json +1 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,13 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 15.4.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`9fa355db69f2c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9fa355db69f2c) -
|
|
8
|
+
[ux] Cleans up FG platform_editor_fix_table_menus_jira
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
3
11
|
## 15.4.8
|
|
4
12
|
|
|
5
13
|
### Patch Changes
|
|
@@ -39,7 +39,6 @@ var _tableRowAddBelow = _interopRequireDefault(require("@atlaskit/icon/core/tabl
|
|
|
39
39
|
var _tableRowDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-row-delete"));
|
|
40
40
|
var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
|
|
41
41
|
var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
|
|
42
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
43
42
|
var _primitives = require("@atlaskit/primitives");
|
|
44
43
|
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
45
44
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
@@ -88,47 +87,35 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
88
87
|
});
|
|
89
88
|
(0, _defineProperty2.default)(_this, "dropdownMenuRef", /*#__PURE__*/_react.default.createRef());
|
|
90
89
|
(0, _defineProperty2.default)(_this, "handleSubMenuRef", function (ref) {
|
|
91
|
-
var parent = (0, _utils.closestElement)(
|
|
92
90
|
// Ignored via go/ees005
|
|
93
91
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
94
|
-
_this.props.editorView.dom
|
|
95
|
-
|
|
96
|
-
parent = (0, _utils.closestElement)(
|
|
97
|
-
// Ignored via go/ees005
|
|
98
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
99
|
-
_this.props.editorView.dom, '.ak-editor-content-area');
|
|
100
|
-
}
|
|
92
|
+
var dom = _this.props.editorView.dom;
|
|
93
|
+
var parent = (0, _utils.closestElement)(dom, '.fabric-editor-popup-scroll-parent') || (0, _utils.closestElement)(dom, '.ak-editor-content-area');
|
|
101
94
|
if (!(parent && ref)) {
|
|
102
95
|
return;
|
|
103
96
|
}
|
|
104
97
|
var boundariesRect = parent.getBoundingClientRect();
|
|
105
98
|
var rect = ref.getBoundingClientRect();
|
|
106
|
-
if (
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
}
|
|
99
|
+
if (!!_this.props.mountPoint) {
|
|
100
|
+
return;
|
|
101
|
+
}
|
|
102
|
+
var offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
|
|
103
|
+
if (!offsetParent) {
|
|
104
|
+
return;
|
|
105
|
+
}
|
|
106
|
+
var offsetParentRect = offsetParent.getBoundingClientRect();
|
|
107
|
+
var rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
|
|
108
|
+
var leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
|
|
109
|
+
if (rightOverflow > leftOverflow) {
|
|
110
|
+
ref.style.left = "-".concat(rect.width, "px");
|
|
111
|
+
}
|
|
120
112
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
} else {
|
|
130
|
-
if (rect.left + rect.width > boundariesRect.width) {
|
|
131
|
-
ref.style.left = "-".concat(rect.width, "px");
|
|
113
|
+
// if it overflows regardless of side, let it overlap with the parent menu
|
|
114
|
+
if (leftOverflow > 0 && rightOverflow > 0) {
|
|
115
|
+
if (rightOverflow < leftOverflow) {
|
|
116
|
+
ref.style.left = "".concat(offsetParentRect.width - rightOverflow, "px");
|
|
117
|
+
} else {
|
|
118
|
+
ref.style.left = "-".concat(rect.width - leftOverflow, "px");
|
|
132
119
|
}
|
|
133
120
|
}
|
|
134
121
|
});
|
|
@@ -765,7 +752,6 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
765
752
|
var _this2 = this;
|
|
766
753
|
var _this$props13 = this.props,
|
|
767
754
|
isOpen = _this$props13.isOpen,
|
|
768
|
-
mountPoint = _this$props13.mountPoint,
|
|
769
755
|
offset = _this$props13.offset,
|
|
770
756
|
boundariesElement = _this$props13.boundariesElement,
|
|
771
757
|
editorView = _this$props13.editorView,
|
|
@@ -783,11 +769,10 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
783
769
|
,
|
|
784
770
|
onMouseLeave: _this2.closeSubmenu,
|
|
785
771
|
ref: _this2.dropdownMenuRef
|
|
786
|
-
}, (0, _react2.jsx)(_uiMenu.DropdownMenu
|
|
787
|
-
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
,
|
|
772
|
+
}, (0, _react2.jsx)(_uiMenu.DropdownMenu
|
|
773
|
+
//This needs be removed when the a11y is completely handled
|
|
774
|
+
//Disabling key navigation now as it works only partially
|
|
775
|
+
, {
|
|
791
776
|
arrowKeyNavigationProviderOptions: {
|
|
792
777
|
type: _uiMenu.ArrowKeyNavigationType.MENU,
|
|
793
778
|
disableArrowKeyNavigation: !isCellMenuOpenByKeyboard || _this2.state.isSubmenuOpen
|
|
@@ -10,7 +10,6 @@ var _ui = require("@atlaskit/editor-common/ui");
|
|
|
10
10
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
11
11
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
12
12
|
var _utils2 = require("@atlaskit/editor-tables/utils");
|
|
13
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
13
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
15
14
|
var _expVal = require("@atlaskit/tmp-editor-statsig/expVal");
|
|
16
15
|
var _pluginFactory = require("../../pm-plugins/plugin-factory");
|
|
@@ -113,7 +112,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
|
|
|
113
112
|
,
|
|
114
113
|
allowBackgroundColor: pluginConfig.allowBackgroundColor,
|
|
115
114
|
selectionRect: selectionRect,
|
|
116
|
-
mountPoint:
|
|
115
|
+
mountPoint: mountPoint,
|
|
117
116
|
boundariesElement: boundariesElement,
|
|
118
117
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
119
118
|
getEditorContainerWidth: getEditorContainerWidth,
|
|
@@ -23,7 +23,6 @@ var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
|
|
|
23
23
|
var _tableMap = require("@atlaskit/editor-tables/table-map");
|
|
24
24
|
var _utils2 = require("@atlaskit/editor-tables/utils");
|
|
25
25
|
var _paintBucketEditorBackgroundColor = _interopRequireDefault(require("@atlaskit/icon/core/migration/paint-bucket--editor-background-color"));
|
|
26
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
27
26
|
var _primitives = require("@atlaskit/primitives");
|
|
28
27
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
29
28
|
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
@@ -242,47 +241,35 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
|
242
241
|
menuCallback = _convertToDropdownIte.menuCallback;
|
|
243
242
|
var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
|
|
244
243
|
var handleSubMenuRef = function handleSubMenuRef(ref) {
|
|
245
|
-
var parent = (0, _utils.closestElement)(
|
|
246
244
|
// Ignored via go/ees005
|
|
247
245
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
248
|
-
editorView.dom
|
|
249
|
-
|
|
250
|
-
parent = (0, _utils.closestElement)(
|
|
251
|
-
// Ignored via go/ees005
|
|
252
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
253
|
-
editorView.dom, '.ak-editor-content-area');
|
|
254
|
-
}
|
|
246
|
+
var dom = editorView.dom;
|
|
247
|
+
var parent = (0, _utils.closestElement)(dom, '.fabric-editor-popup-scroll-parent') || (0, _utils.closestElement)(dom, '.ak-editor-content-area');
|
|
255
248
|
if (!(parent && ref)) {
|
|
256
249
|
return;
|
|
257
250
|
}
|
|
258
251
|
var boundariesRect = parent.getBoundingClientRect();
|
|
259
252
|
var rect = ref.getBoundingClientRect();
|
|
260
|
-
if (
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
}
|
|
253
|
+
if (!!mountPoint) {
|
|
254
|
+
return;
|
|
255
|
+
}
|
|
256
|
+
var offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
|
|
257
|
+
if (!offsetParent) {
|
|
258
|
+
return;
|
|
259
|
+
}
|
|
260
|
+
var offsetParentRect = offsetParent.getBoundingClientRect();
|
|
261
|
+
var rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
|
|
262
|
+
var leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
|
|
263
|
+
if (rightOverflow > leftOverflow) {
|
|
264
|
+
ref.style.left = "-".concat(rect.width, "px");
|
|
265
|
+
}
|
|
274
266
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
}
|
|
282
|
-
}
|
|
283
|
-
} else {
|
|
284
|
-
if (rect.left + rect.width > boundariesRect.width) {
|
|
285
|
-
ref.style.left = "-".concat(rect.width, "px");
|
|
267
|
+
// if it overflows regardless of side, let it overlap with the parent menu
|
|
268
|
+
if (leftOverflow > 0 && rightOverflow > 0) {
|
|
269
|
+
if (rightOverflow < leftOverflow) {
|
|
270
|
+
ref.style.left = "".concat(offsetParentRect.width - rightOverflow, "px");
|
|
271
|
+
} else {
|
|
272
|
+
ref.style.left = "-".concat(rect.width - leftOverflow, "px");
|
|
286
273
|
}
|
|
287
274
|
}
|
|
288
275
|
};
|
|
@@ -31,7 +31,6 @@ import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
|
|
|
31
31
|
import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
|
|
32
32
|
import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
|
|
33
33
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
34
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
35
34
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
36
35
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
37
36
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
@@ -67,47 +66,35 @@ export class ContextualMenu extends Component {
|
|
|
67
66
|
});
|
|
68
67
|
_defineProperty(this, "dropdownMenuRef", /*#__PURE__*/React.createRef());
|
|
69
68
|
_defineProperty(this, "handleSubMenuRef", ref => {
|
|
70
|
-
let parent = closestElement(
|
|
71
69
|
// Ignored via go/ees005
|
|
72
70
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
73
|
-
this.props.editorView.dom
|
|
74
|
-
|
|
75
|
-
parent = closestElement(
|
|
76
|
-
// Ignored via go/ees005
|
|
77
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
78
|
-
this.props.editorView.dom, '.ak-editor-content-area');
|
|
79
|
-
}
|
|
71
|
+
const dom = this.props.editorView.dom;
|
|
72
|
+
const parent = closestElement(dom, '.fabric-editor-popup-scroll-parent') || closestElement(dom, '.ak-editor-content-area');
|
|
80
73
|
if (!(parent && ref)) {
|
|
81
74
|
return;
|
|
82
75
|
}
|
|
83
76
|
const boundariesRect = parent.getBoundingClientRect();
|
|
84
77
|
const rect = ref.getBoundingClientRect();
|
|
85
|
-
if (
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
}
|
|
78
|
+
if (!!this.props.mountPoint) {
|
|
79
|
+
return;
|
|
80
|
+
}
|
|
81
|
+
const offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
|
|
82
|
+
if (!offsetParent) {
|
|
83
|
+
return;
|
|
84
|
+
}
|
|
85
|
+
const offsetParentRect = offsetParent.getBoundingClientRect();
|
|
86
|
+
const rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
|
|
87
|
+
const leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
|
|
88
|
+
if (rightOverflow > leftOverflow) {
|
|
89
|
+
ref.style.left = `-${rect.width}px`;
|
|
90
|
+
}
|
|
99
91
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
}
|
|
107
|
-
}
|
|
108
|
-
} else {
|
|
109
|
-
if (rect.left + rect.width > boundariesRect.width) {
|
|
110
|
-
ref.style.left = `-${rect.width}px`;
|
|
92
|
+
// if it overflows regardless of side, let it overlap with the parent menu
|
|
93
|
+
if (leftOverflow > 0 && rightOverflow > 0) {
|
|
94
|
+
if (rightOverflow < leftOverflow) {
|
|
95
|
+
ref.style.left = `${offsetParentRect.width - rightOverflow}px`;
|
|
96
|
+
} else {
|
|
97
|
+
ref.style.left = `-${rect.width - leftOverflow}px`;
|
|
111
98
|
}
|
|
112
99
|
}
|
|
113
100
|
});
|
|
@@ -820,7 +807,6 @@ export class ContextualMenu extends Component {
|
|
|
820
807
|
render() {
|
|
821
808
|
const {
|
|
822
809
|
isOpen,
|
|
823
|
-
mountPoint,
|
|
824
810
|
offset,
|
|
825
811
|
boundariesElement,
|
|
826
812
|
editorView,
|
|
@@ -839,11 +825,10 @@ export class ContextualMenu extends Component {
|
|
|
839
825
|
,
|
|
840
826
|
onMouseLeave: this.closeSubmenu,
|
|
841
827
|
ref: this.dropdownMenuRef
|
|
842
|
-
}, jsx(DropdownMenu
|
|
843
|
-
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
,
|
|
828
|
+
}, jsx(DropdownMenu
|
|
829
|
+
//This needs be removed when the a11y is completely handled
|
|
830
|
+
//Disabling key navigation now as it works only partially
|
|
831
|
+
, {
|
|
847
832
|
arrowKeyNavigationProviderOptions: {
|
|
848
833
|
type: ArrowKeyNavigationType.MENU,
|
|
849
834
|
disableArrowKeyNavigation: !isCellMenuOpenByKeyboard || this.state.isSubmenuOpen
|
|
@@ -8,7 +8,6 @@ import { Popup } from '@atlaskit/editor-common/ui';
|
|
|
8
8
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
9
9
|
import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
|
|
10
10
|
import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
11
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
12
|
import { expValNoExposure } from '@atlaskit/tmp-editor-statsig/expVal';
|
|
14
13
|
import { getPluginState } from '../../pm-plugins/plugin-factory';
|
|
@@ -109,7 +108,7 @@ const FloatingContextualMenu = ({
|
|
|
109
108
|
,
|
|
110
109
|
allowBackgroundColor: pluginConfig.allowBackgroundColor,
|
|
111
110
|
selectionRect: selectionRect,
|
|
112
|
-
mountPoint:
|
|
111
|
+
mountPoint: mountPoint,
|
|
113
112
|
boundariesElement: boundariesElement,
|
|
114
113
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
115
114
|
getEditorContainerWidth: getEditorContainerWidth,
|
|
@@ -21,7 +21,6 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
|
21
21
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
22
22
|
import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
|
|
23
23
|
import PaintBucketIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
|
|
24
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
25
24
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
26
25
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
27
26
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
@@ -232,47 +231,35 @@ const DragMenu = /*#__PURE__*/React.memo(({
|
|
|
232
231
|
} = convertToDropdownItems(dragMenuConfig, formatMessage, selectionRect);
|
|
233
232
|
const isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
|
|
234
233
|
const handleSubMenuRef = ref => {
|
|
235
|
-
let parent = closestElement(
|
|
236
234
|
// Ignored via go/ees005
|
|
237
235
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
238
|
-
editorView.dom
|
|
239
|
-
|
|
240
|
-
parent = closestElement(
|
|
241
|
-
// Ignored via go/ees005
|
|
242
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
243
|
-
editorView.dom, '.ak-editor-content-area');
|
|
244
|
-
}
|
|
236
|
+
const dom = editorView.dom;
|
|
237
|
+
const parent = closestElement(dom, '.fabric-editor-popup-scroll-parent') || closestElement(dom, '.ak-editor-content-area');
|
|
245
238
|
if (!(parent && ref)) {
|
|
246
239
|
return;
|
|
247
240
|
}
|
|
248
241
|
const boundariesRect = parent.getBoundingClientRect();
|
|
249
242
|
const rect = ref.getBoundingClientRect();
|
|
250
|
-
if (
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
}
|
|
243
|
+
if (!!mountPoint) {
|
|
244
|
+
return;
|
|
245
|
+
}
|
|
246
|
+
const offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
|
|
247
|
+
if (!offsetParent) {
|
|
248
|
+
return;
|
|
249
|
+
}
|
|
250
|
+
const offsetParentRect = offsetParent.getBoundingClientRect();
|
|
251
|
+
const rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
|
|
252
|
+
const leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
|
|
253
|
+
if (rightOverflow > leftOverflow) {
|
|
254
|
+
ref.style.left = `-${rect.width}px`;
|
|
255
|
+
}
|
|
264
256
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
}
|
|
272
|
-
}
|
|
273
|
-
} else {
|
|
274
|
-
if (rect.left + rect.width > boundariesRect.width) {
|
|
275
|
-
ref.style.left = `-${rect.width}px`;
|
|
257
|
+
// if it overflows regardless of side, let it overlap with the parent menu
|
|
258
|
+
if (leftOverflow > 0 && rightOverflow > 0) {
|
|
259
|
+
if (rightOverflow < leftOverflow) {
|
|
260
|
+
ref.style.left = `${offsetParentRect.width - rightOverflow}px`;
|
|
261
|
+
} else {
|
|
262
|
+
ref.style.left = `-${rect.width - leftOverflow}px`;
|
|
276
263
|
}
|
|
277
264
|
}
|
|
278
265
|
};
|
|
@@ -41,7 +41,6 @@ import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
|
|
|
41
41
|
import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
|
|
42
42
|
import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
|
|
43
43
|
import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
|
|
44
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
45
44
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
46
45
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
47
46
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
@@ -82,47 +81,35 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
|
|
|
82
81
|
});
|
|
83
82
|
_defineProperty(_this, "dropdownMenuRef", /*#__PURE__*/React.createRef());
|
|
84
83
|
_defineProperty(_this, "handleSubMenuRef", function (ref) {
|
|
85
|
-
var parent = closestElement(
|
|
86
84
|
// Ignored via go/ees005
|
|
87
85
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
88
|
-
_this.props.editorView.dom
|
|
89
|
-
|
|
90
|
-
parent = closestElement(
|
|
91
|
-
// Ignored via go/ees005
|
|
92
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
93
|
-
_this.props.editorView.dom, '.ak-editor-content-area');
|
|
94
|
-
}
|
|
86
|
+
var dom = _this.props.editorView.dom;
|
|
87
|
+
var parent = closestElement(dom, '.fabric-editor-popup-scroll-parent') || closestElement(dom, '.ak-editor-content-area');
|
|
95
88
|
if (!(parent && ref)) {
|
|
96
89
|
return;
|
|
97
90
|
}
|
|
98
91
|
var boundariesRect = parent.getBoundingClientRect();
|
|
99
92
|
var rect = ref.getBoundingClientRect();
|
|
100
|
-
if (
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
}
|
|
93
|
+
if (!!_this.props.mountPoint) {
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
var offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
|
|
97
|
+
if (!offsetParent) {
|
|
98
|
+
return;
|
|
99
|
+
}
|
|
100
|
+
var offsetParentRect = offsetParent.getBoundingClientRect();
|
|
101
|
+
var rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
|
|
102
|
+
var leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
|
|
103
|
+
if (rightOverflow > leftOverflow) {
|
|
104
|
+
ref.style.left = "-".concat(rect.width, "px");
|
|
105
|
+
}
|
|
114
106
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
} else {
|
|
124
|
-
if (rect.left + rect.width > boundariesRect.width) {
|
|
125
|
-
ref.style.left = "-".concat(rect.width, "px");
|
|
107
|
+
// if it overflows regardless of side, let it overlap with the parent menu
|
|
108
|
+
if (leftOverflow > 0 && rightOverflow > 0) {
|
|
109
|
+
if (rightOverflow < leftOverflow) {
|
|
110
|
+
ref.style.left = "".concat(offsetParentRect.width - rightOverflow, "px");
|
|
111
|
+
} else {
|
|
112
|
+
ref.style.left = "-".concat(rect.width - leftOverflow, "px");
|
|
126
113
|
}
|
|
127
114
|
}
|
|
128
115
|
});
|
|
@@ -759,7 +746,6 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
|
|
|
759
746
|
var _this2 = this;
|
|
760
747
|
var _this$props13 = this.props,
|
|
761
748
|
isOpen = _this$props13.isOpen,
|
|
762
|
-
mountPoint = _this$props13.mountPoint,
|
|
763
749
|
offset = _this$props13.offset,
|
|
764
750
|
boundariesElement = _this$props13.boundariesElement,
|
|
765
751
|
editorView = _this$props13.editorView,
|
|
@@ -777,11 +763,10 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
|
|
|
777
763
|
,
|
|
778
764
|
onMouseLeave: _this2.closeSubmenu,
|
|
779
765
|
ref: _this2.dropdownMenuRef
|
|
780
|
-
}, jsx(DropdownMenu
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
,
|
|
766
|
+
}, jsx(DropdownMenu
|
|
767
|
+
//This needs be removed when the a11y is completely handled
|
|
768
|
+
//Disabling key navigation now as it works only partially
|
|
769
|
+
, {
|
|
785
770
|
arrowKeyNavigationProviderOptions: {
|
|
786
771
|
type: ArrowKeyNavigationType.MENU,
|
|
787
772
|
disableArrowKeyNavigation: !isCellMenuOpenByKeyboard || _this2.state.isSubmenuOpen
|
|
@@ -8,7 +8,6 @@ import { Popup } from '@atlaskit/editor-common/ui';
|
|
|
8
8
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
9
9
|
import { akEditorFloatingDialogZIndex, akEditorFloatingOverlapPanelZIndex } from '@atlaskit/editor-shared-styles';
|
|
10
10
|
import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
11
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
12
|
import { expValNoExposure } from '@atlaskit/tmp-editor-statsig/expVal';
|
|
14
13
|
import { getPluginState } from '../../pm-plugins/plugin-factory';
|
|
@@ -105,7 +104,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
|
|
|
105
104
|
,
|
|
106
105
|
allowBackgroundColor: pluginConfig.allowBackgroundColor,
|
|
107
106
|
selectionRect: selectionRect,
|
|
108
|
-
mountPoint:
|
|
107
|
+
mountPoint: mountPoint,
|
|
109
108
|
boundariesElement: boundariesElement,
|
|
110
109
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
111
110
|
getEditorContainerWidth: getEditorContainerWidth,
|
|
@@ -23,7 +23,6 @@ import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
|
|
|
23
23
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
24
24
|
import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
|
|
25
25
|
import PaintBucketIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
|
|
26
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
27
26
|
// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
28
27
|
import { Box, xcss } from '@atlaskit/primitives';
|
|
29
28
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
@@ -231,47 +230,35 @@ var DragMenu = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
231
230
|
menuCallback = _convertToDropdownIte.menuCallback;
|
|
232
231
|
var isToolbarAIFCEnabled = Boolean(api === null || api === void 0 ? void 0 : api.toolbar);
|
|
233
232
|
var handleSubMenuRef = function handleSubMenuRef(ref) {
|
|
234
|
-
var parent = closestElement(
|
|
235
233
|
// Ignored via go/ees005
|
|
236
234
|
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
237
|
-
editorView.dom
|
|
238
|
-
|
|
239
|
-
parent = closestElement(
|
|
240
|
-
// Ignored via go/ees005
|
|
241
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
242
|
-
editorView.dom, '.ak-editor-content-area');
|
|
243
|
-
}
|
|
235
|
+
var dom = editorView.dom;
|
|
236
|
+
var parent = closestElement(dom, '.fabric-editor-popup-scroll-parent') || closestElement(dom, '.ak-editor-content-area');
|
|
244
237
|
if (!(parent && ref)) {
|
|
245
238
|
return;
|
|
246
239
|
}
|
|
247
240
|
var boundariesRect = parent.getBoundingClientRect();
|
|
248
241
|
var rect = ref.getBoundingClientRect();
|
|
249
|
-
if (
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
}
|
|
242
|
+
if (!!mountPoint) {
|
|
243
|
+
return;
|
|
244
|
+
}
|
|
245
|
+
var offsetParent = ref === null || ref === void 0 ? void 0 : ref.offsetParent;
|
|
246
|
+
if (!offsetParent) {
|
|
247
|
+
return;
|
|
248
|
+
}
|
|
249
|
+
var offsetParentRect = offsetParent.getBoundingClientRect();
|
|
250
|
+
var rightOverflow = offsetParentRect.right + rect.width - boundariesRect.right;
|
|
251
|
+
var leftOverflow = boundariesRect.left - (offsetParentRect.left - rect.width);
|
|
252
|
+
if (rightOverflow > leftOverflow) {
|
|
253
|
+
ref.style.left = "-".concat(rect.width, "px");
|
|
254
|
+
}
|
|
263
255
|
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
}
|
|
271
|
-
}
|
|
272
|
-
} else {
|
|
273
|
-
if (rect.left + rect.width > boundariesRect.width) {
|
|
274
|
-
ref.style.left = "-".concat(rect.width, "px");
|
|
256
|
+
// if it overflows regardless of side, let it overlap with the parent menu
|
|
257
|
+
if (leftOverflow > 0 && rightOverflow > 0) {
|
|
258
|
+
if (rightOverflow < leftOverflow) {
|
|
259
|
+
ref.style.left = "".concat(offsetParentRect.width - rightOverflow, "px");
|
|
260
|
+
} else {
|
|
261
|
+
ref.style.left = "-".concat(rect.width - leftOverflow, "px");
|
|
275
262
|
}
|
|
276
263
|
}
|
|
277
264
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "15.4.
|
|
3
|
+
"version": "15.4.9",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -135,9 +135,6 @@
|
|
|
135
135
|
"platform_editor_fix_confirm_table_removal": {
|
|
136
136
|
"type": "boolean"
|
|
137
137
|
},
|
|
138
|
-
"platform_editor_fix_table_menus_jira": {
|
|
139
|
-
"type": "boolean"
|
|
140
|
-
},
|
|
141
138
|
"platform_editor_content_mode_button_mvp": {
|
|
142
139
|
"type": "boolean"
|
|
143
140
|
},
|