@atlaskit/editor-plugin-table 22.4.23 → 23.0.1
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 +18 -0
- package/dist/cjs/pm-plugins/handlers.js +78 -19
- package/dist/cjs/ui/FloatingContextualMenu/CellMenuPopup.js +29 -8
- package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +13 -0
- package/dist/cjs/ui/FloatingContextualMenu/index.js +5 -5
- package/dist/cjs/ui/FloatingDragMenu/index.js +1 -0
- package/dist/es2019/pm-plugins/handlers.js +70 -7
- package/dist/es2019/ui/FloatingContextualMenu/CellMenuPopup.js +23 -8
- package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +13 -0
- package/dist/es2019/ui/FloatingContextualMenu/index.js +5 -5
- package/dist/es2019/ui/FloatingDragMenu/index.js +1 -0
- package/dist/esm/pm-plugins/handlers.js +78 -19
- package/dist/esm/ui/FloatingContextualMenu/CellMenuPopup.js +28 -8
- package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +13 -0
- package/dist/esm/ui/FloatingContextualMenu/index.js +5 -5
- package/dist/esm/ui/FloatingDragMenu/index.js +1 -0
- package/dist/types/ui/FloatingContextualMenu/CellMenuPopup.d.ts +2 -2
- package/dist/types-ts4.5/ui/FloatingContextualMenu/CellMenuPopup.d.ts +2 -2
- package/package.json +22 -22
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 23.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`f53b4391ccd54`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f53b4391ccd54) -
|
|
8
|
+
Fix table menu popup placement near viewport edges
|
|
9
|
+
|
|
10
|
+
Add new editor experiment platform_editor_table_close_cell_menu_on_move_exp to fix legacy menu
|
|
11
|
+
staying open when changing cells.
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 23.0.0
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 22.4.23
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -9,6 +9,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
9
9
|
var _customSteps = require("@atlaskit/custom-steps");
|
|
10
10
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
11
11
|
var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
12
|
+
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
|
|
12
13
|
var _utils3 = require("@atlaskit/editor-tables/utils");
|
|
13
14
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
14
15
|
var _defaultTableSelection = require("./default-table-selection");
|
|
@@ -30,38 +31,83 @@ var nextResizeHandleColumnIndex = function nextResizeHandleColumnIndex(tr, resiz
|
|
|
30
31
|
}
|
|
31
32
|
return resizeHandleColumnIndex;
|
|
32
33
|
};
|
|
33
|
-
var
|
|
34
|
-
var
|
|
35
|
-
|
|
34
|
+
var shouldCloseLegacyContextualMenu = function shouldCloseLegacyContextualMenu(_ref) {
|
|
35
|
+
var pluginState = _ref.pluginState,
|
|
36
|
+
targetCellPositionChanged = _ref.targetCellPositionChanged,
|
|
37
|
+
tr = _ref.tr;
|
|
38
|
+
return Boolean(pluginState.isContextualMenuOpen && (targetCellPositionChanged || tr.selectionSet && !(tr.selection instanceof _cellSelection.CellSelection)));
|
|
39
|
+
};
|
|
40
|
+
var updateTargetCellPosition = function updateTargetCellPosition(_ref2) {
|
|
41
|
+
var tr = _ref2.tr,
|
|
42
|
+
table = _ref2.table;
|
|
36
43
|
return function (pluginState) {
|
|
37
44
|
var tableNode = table && table.node;
|
|
45
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
|
|
46
|
+
var _targetCellPosition;
|
|
47
|
+
if (tableNode) {
|
|
48
|
+
var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
|
|
49
|
+
_tableCell = _tr$doc$type$schema$n.tableCell,
|
|
50
|
+
_tableHeader = _tr$doc$type$schema$n.tableHeader;
|
|
51
|
+
var _cell = (0, _utils2.findParentNodeOfType)([_tableCell, _tableHeader])(tr.selection);
|
|
52
|
+
_targetCellPosition = _cell ? _cell.pos : undefined;
|
|
53
|
+
}
|
|
54
|
+
var hasTargetCellChanged = pluginState.targetCellPosition !== _targetCellPosition;
|
|
55
|
+
var hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
|
|
56
|
+
var shouldCloseMenu = hasActiveTableMenu && (!tableNode || hasTargetCellChanged || !(tr.selection instanceof _cellSelection.CellSelection));
|
|
57
|
+
if (!hasTargetCellChanged && !shouldCloseMenu) {
|
|
58
|
+
return pluginState;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
// The updated table menu is anchored to a table selection. When selection moves
|
|
62
|
+
// to another cell, leaves the table, or changes from a CellSelection to a text cursor,
|
|
63
|
+
// close the active menu so render state cannot point at a stale anchor.
|
|
64
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
65
|
+
targetCellPosition: _targetCellPosition,
|
|
66
|
+
activeTableMenu: shouldCloseMenu ? {
|
|
67
|
+
type: 'none'
|
|
68
|
+
} : pluginState.activeTableMenu
|
|
69
|
+
});
|
|
70
|
+
}
|
|
38
71
|
if (!tableNode) {
|
|
39
72
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
40
73
|
targetCellPosition: undefined
|
|
41
74
|
});
|
|
42
75
|
}
|
|
43
|
-
var _tr$doc$type$schema$
|
|
44
|
-
tableCell = _tr$doc$type$schema$
|
|
45
|
-
tableHeader = _tr$doc$type$schema$
|
|
76
|
+
var _tr$doc$type$schema$n2 = tr.doc.type.schema.nodes,
|
|
77
|
+
tableCell = _tr$doc$type$schema$n2.tableCell,
|
|
78
|
+
tableHeader = _tr$doc$type$schema$n2.tableHeader;
|
|
46
79
|
var cell = (0, _utils2.findParentNodeOfType)([tableCell, tableHeader])(tr.selection);
|
|
47
80
|
var targetCellPosition = cell ? cell.pos : undefined;
|
|
81
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
|
|
82
|
+
var targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
|
|
83
|
+
var closeContextualMenu = shouldCloseLegacyContextualMenu({
|
|
84
|
+
pluginState: pluginState,
|
|
85
|
+
targetCellPositionChanged: targetCellPositionChanged,
|
|
86
|
+
tr: tr
|
|
87
|
+
});
|
|
88
|
+
if (!targetCellPositionChanged && !closeContextualMenu) {
|
|
89
|
+
return pluginState;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
// Close the legacy contextual menu when moving cells because the cell background
|
|
93
|
+
// color submenu can otherwise remain open against the previous cell selection.
|
|
94
|
+
return _objectSpread(_objectSpread(_objectSpread({}, pluginState), closeContextualMenu ? {
|
|
95
|
+
isContextualMenuOpen: false
|
|
96
|
+
} : {}), {}, {
|
|
97
|
+
targetCellPosition: targetCellPosition
|
|
98
|
+
});
|
|
99
|
+
}
|
|
48
100
|
if (pluginState.targetCellPosition === targetCellPosition) {
|
|
49
101
|
return pluginState;
|
|
50
102
|
}
|
|
51
|
-
|
|
52
|
-
// The updated table menu is anchored to the current target cell. When selection moves
|
|
53
|
-
// to another cell, close the active menu so render state cannot point at a stale anchor.
|
|
54
103
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
55
|
-
targetCellPosition: targetCellPosition
|
|
56
|
-
activeTableMenu: pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none' && (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? {
|
|
57
|
-
type: 'none'
|
|
58
|
-
} : pluginState.activeTableMenu
|
|
104
|
+
targetCellPosition: targetCellPosition
|
|
59
105
|
});
|
|
60
106
|
};
|
|
61
107
|
};
|
|
62
|
-
var updateTableNodePluginState = function updateTableNodePluginState(
|
|
63
|
-
var tr =
|
|
64
|
-
table =
|
|
108
|
+
var updateTableNodePluginState = function updateTableNodePluginState(_ref3) {
|
|
109
|
+
var tr = _ref3.tr,
|
|
110
|
+
table = _ref3.table;
|
|
65
111
|
return function (pluginState) {
|
|
66
112
|
var tableNode = table && table.node;
|
|
67
113
|
if (!tableNode || (0, _utils.isTextInput)(tr)) {
|
|
@@ -77,9 +123,9 @@ var updateTableNodePluginState = function updateTableNodePluginState(_ref2) {
|
|
|
77
123
|
});
|
|
78
124
|
};
|
|
79
125
|
};
|
|
80
|
-
var updateCollapseHandler = function updateCollapseHandler(
|
|
81
|
-
var tr =
|
|
82
|
-
table =
|
|
126
|
+
var updateCollapseHandler = function updateCollapseHandler(_ref4) {
|
|
127
|
+
var tr = _ref4.tr,
|
|
128
|
+
table = _ref4.table;
|
|
83
129
|
return function (pluginState) {
|
|
84
130
|
var tableNode = table && table.node;
|
|
85
131
|
var schema = tr.doc.type.schema;
|
|
@@ -115,6 +161,19 @@ var buildPluginState = function buildPluginState(builders) {
|
|
|
115
161
|
return function (props) {
|
|
116
162
|
return function (pluginState) {
|
|
117
163
|
if (!props.table) {
|
|
164
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
|
|
165
|
+
var shouldClearTargetCellPosition = pluginState.targetCellPosition !== undefined;
|
|
166
|
+
var hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
|
|
167
|
+
if (!shouldClearTargetCellPosition && !hasActiveTableMenu) {
|
|
168
|
+
return pluginState;
|
|
169
|
+
}
|
|
170
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
171
|
+
targetCellPosition: undefined,
|
|
172
|
+
activeTableMenu: hasActiveTableMenu ? {
|
|
173
|
+
type: 'none'
|
|
174
|
+
} : pluginState.activeTableMenu
|
|
175
|
+
});
|
|
176
|
+
}
|
|
118
177
|
return pluginState.targetCellPosition ? _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
119
178
|
targetCellPosition: undefined
|
|
120
179
|
}) : pluginState;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
3
4
|
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
4
5
|
Object.defineProperty(exports, "__esModule", {
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.CellMenuPopup = void 0;
|
|
9
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
10
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
8
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
12
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
10
13
|
var _uiReact = require("@atlaskit/editor-common/ui-react");
|
|
@@ -17,16 +20,19 @@ var _keys = require("../TableMenu/cell/keys");
|
|
|
17
20
|
var _consts2 = require("../TableMenu/shared/consts");
|
|
18
21
|
var _TableMenu = require("../TableMenu/shared/TableMenu");
|
|
19
22
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
23
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
24
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
20
25
|
var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
|
|
21
26
|
var NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
|
|
22
27
|
var CELL_MENU_TRIGGER_SELECTOR = ".".concat(_types.TableCssClassName.CONTEXTUAL_MENU_BUTTON);
|
|
28
|
+
var CELL_MENU_TRIGGER_CLEARANCE = [6, 0];
|
|
23
29
|
var CellMenuPopup = exports.CellMenuPopup = function CellMenuPopup(_ref) {
|
|
24
30
|
var api = _ref.api,
|
|
25
31
|
boundariesElement = _ref.boundariesElement,
|
|
26
32
|
editorView = _ref.editorView,
|
|
27
33
|
mountPoint = _ref.mountPoint,
|
|
28
34
|
scrollableElement = _ref.scrollableElement,
|
|
29
|
-
|
|
35
|
+
target = _ref.target,
|
|
30
36
|
zIndex = _ref.zIndex;
|
|
31
37
|
var popupContentRef = (0, _react.useRef)(null);
|
|
32
38
|
var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
|
|
@@ -53,6 +59,20 @@ var CellMenuPopup = exports.CellMenuPopup = function CellMenuPopup(_ref) {
|
|
|
53
59
|
}
|
|
54
60
|
return target instanceof Element && Boolean(target.closest(NESTED_DROPDOWN_SELECTOR) || target.closest(CELL_MENU_TRIGGER_SELECTOR));
|
|
55
61
|
}, []);
|
|
62
|
+
var horizontalPlacementRef = (0, _react.useRef)(undefined);
|
|
63
|
+
var handlePlacementChanged = (0, _react.useCallback)(function (_ref2) {
|
|
64
|
+
var _ref3 = (0, _slicedToArray2.default)(_ref2, 2),
|
|
65
|
+
horizontalPlacement = _ref3[1];
|
|
66
|
+
horizontalPlacementRef.current = horizontalPlacement;
|
|
67
|
+
}, []);
|
|
68
|
+
var handlePositionCalculated = (0, _react.useCallback)(function (position) {
|
|
69
|
+
if (horizontalPlacementRef.current !== 'left' || position.left === undefined) {
|
|
70
|
+
return position;
|
|
71
|
+
}
|
|
72
|
+
return _objectSpread(_objectSpread({}, position), {}, {
|
|
73
|
+
left: position.left + target.getBoundingClientRect().width
|
|
74
|
+
});
|
|
75
|
+
}, [target]);
|
|
56
76
|
var handleCellMenuClickOutside = (0, _react.useCallback)(function (event) {
|
|
57
77
|
if (isEventInsideCellMenu(event)) {
|
|
58
78
|
return;
|
|
@@ -60,19 +80,20 @@ var CellMenuPopup = exports.CellMenuPopup = function CellMenuPopup(_ref) {
|
|
|
60
80
|
closeCellMenu();
|
|
61
81
|
}, [closeCellMenu, isEventInsideCellMenu]);
|
|
62
82
|
return /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
|
|
63
|
-
alignX: "
|
|
64
|
-
alignY: "
|
|
65
|
-
target:
|
|
83
|
+
alignX: "end",
|
|
84
|
+
alignY: "start",
|
|
85
|
+
target: target,
|
|
66
86
|
mountTo: mountPoint,
|
|
67
87
|
boundariesElement: boundariesElement,
|
|
68
88
|
scrollableElement: scrollableElement,
|
|
69
89
|
fitHeight: _consts.tablePopupMenuFitHeight,
|
|
70
90
|
fitWidth: _consts2.TABLE_MENU_WIDTH,
|
|
71
91
|
zIndex: zIndex,
|
|
72
|
-
forcePlacement: true
|
|
73
|
-
|
|
74
|
-
,
|
|
75
|
-
|
|
92
|
+
forcePlacement: true,
|
|
93
|
+
preventOverflow: true,
|
|
94
|
+
onPlacementChanged: handlePlacementChanged,
|
|
95
|
+
onPositionCalculated: handlePositionCalculated,
|
|
96
|
+
offset: CELL_MENU_TRIGGER_CLEARANCE,
|
|
76
97
|
stick: true,
|
|
77
98
|
handleClickOutside: handleCellMenuClickOutside,
|
|
78
99
|
handleEscapeKeydown: closeCellMenu
|
|
@@ -544,6 +544,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
544
544
|
_this$props8$editorVi = _this$props8.editorView,
|
|
545
545
|
state = _this$props8$editorVi.state,
|
|
546
546
|
dispatch = _this$props8$editorVi.dispatch;
|
|
547
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
|
|
548
|
+
if ((0, _pluginFactory.getPluginState)(state).isContextualMenuOpen) {
|
|
549
|
+
(0, _commands.toggleContextualMenu)()(state, dispatch);
|
|
550
|
+
}
|
|
551
|
+
_this.closeSubmenu();
|
|
552
|
+
return;
|
|
553
|
+
}
|
|
547
554
|
(0, _commands.toggleContextualMenu)()(state, dispatch);
|
|
548
555
|
if (!isOpen) {
|
|
549
556
|
_this.setState({
|
|
@@ -654,6 +661,12 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
654
661
|
(0, _commandsWithAnalytics.setColorWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
|
|
655
662
|
if (!(0, _expValEquals.expValEquals)('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
|
|
656
663
|
_this.toggleOpen();
|
|
664
|
+
} else if ((0, _expValEquals.expValEquals)('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
|
|
665
|
+
_this.toggleOpen();
|
|
666
|
+
if (isCellMenuOpenByKeyboard) {
|
|
667
|
+
(0, _commands.setFocusToCellMenu)(false)(editorView.state, dispatch);
|
|
668
|
+
dom.focus();
|
|
669
|
+
}
|
|
657
670
|
} else {
|
|
658
671
|
(0, _commands.toggleContextualMenu)()(state, dispatch);
|
|
659
672
|
_this.setState({
|
|
@@ -73,16 +73,16 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
|
|
|
73
73
|
}
|
|
74
74
|
var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
|
|
75
75
|
if ((0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true)) {
|
|
76
|
+
if (!(targetCellRef instanceof HTMLElement)) {
|
|
77
|
+
return null;
|
|
78
|
+
}
|
|
76
79
|
return (0, _react.jsx)(_CellMenuPopup.CellMenuPopup, {
|
|
77
80
|
api: api,
|
|
78
81
|
boundariesElement: boundariesElement,
|
|
79
82
|
editorView: editorView,
|
|
80
83
|
mountPoint: mountPoint,
|
|
81
|
-
scrollableElement: scrollableElement
|
|
82
|
-
|
|
83
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
84
|
-
,
|
|
85
|
-
targetCellRef: targetCellRef,
|
|
84
|
+
scrollableElement: scrollableElement,
|
|
85
|
+
target: targetCellRef,
|
|
86
86
|
zIndex: parentSticky ? _editorSharedStyles.akEditorFloatingDialogZIndex : _editorSharedStyles.akEditorFloatingOverlapPanelZIndex
|
|
87
87
|
});
|
|
88
88
|
}
|
|
@@ -84,6 +84,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
|
|
|
84
84
|
,
|
|
85
85
|
zIndex: inStickyMode ? _editorSharedStyles.akEditorFloatingDialogZIndex : _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
|
|
86
86
|
forcePlacement: true,
|
|
87
|
+
preventOverflow: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? dragMenuDirection === 'row' : undefined,
|
|
87
88
|
offset: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
|
|
88
89
|
stick: true
|
|
89
90
|
}, (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_userIntent.UserIntentPopupWrapper, {
|
|
@@ -5,6 +5,7 @@ import { isTextInput } from '@atlaskit/editor-common/utils';
|
|
|
5
5
|
// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
|
|
6
6
|
|
|
7
7
|
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
8
|
+
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
8
9
|
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
9
10
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
10
11
|
import { defaultTableSelection } from './default-table-selection';
|
|
@@ -21,11 +22,44 @@ const nextResizeHandleColumnIndex = (tr, resizeHandleColumnIndex) => {
|
|
|
21
22
|
}
|
|
22
23
|
return resizeHandleColumnIndex;
|
|
23
24
|
};
|
|
25
|
+
const shouldCloseLegacyContextualMenu = ({
|
|
26
|
+
pluginState,
|
|
27
|
+
targetCellPositionChanged,
|
|
28
|
+
tr
|
|
29
|
+
}) => Boolean(pluginState.isContextualMenuOpen && (targetCellPositionChanged || tr.selectionSet && !(tr.selection instanceof CellSelection)));
|
|
24
30
|
const updateTargetCellPosition = ({
|
|
25
31
|
tr,
|
|
26
32
|
table
|
|
27
33
|
}) => pluginState => {
|
|
28
34
|
const tableNode = table && table.node;
|
|
35
|
+
if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
|
|
36
|
+
let targetCellPosition;
|
|
37
|
+
if (tableNode) {
|
|
38
|
+
const {
|
|
39
|
+
tableCell,
|
|
40
|
+
tableHeader
|
|
41
|
+
} = tr.doc.type.schema.nodes;
|
|
42
|
+
const cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
|
|
43
|
+
targetCellPosition = cell ? cell.pos : undefined;
|
|
44
|
+
}
|
|
45
|
+
const hasTargetCellChanged = pluginState.targetCellPosition !== targetCellPosition;
|
|
46
|
+
const hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
|
|
47
|
+
const shouldCloseMenu = hasActiveTableMenu && (!tableNode || hasTargetCellChanged || !(tr.selection instanceof CellSelection));
|
|
48
|
+
if (!hasTargetCellChanged && !shouldCloseMenu) {
|
|
49
|
+
return pluginState;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
// The updated table menu is anchored to a table selection. When selection moves
|
|
53
|
+
// to another cell, leaves the table, or changes from a CellSelection to a text cursor,
|
|
54
|
+
// close the active menu so render state cannot point at a stale anchor.
|
|
55
|
+
return {
|
|
56
|
+
...pluginState,
|
|
57
|
+
targetCellPosition,
|
|
58
|
+
activeTableMenu: shouldCloseMenu ? {
|
|
59
|
+
type: 'none'
|
|
60
|
+
} : pluginState.activeTableMenu
|
|
61
|
+
};
|
|
62
|
+
}
|
|
29
63
|
if (!tableNode) {
|
|
30
64
|
return {
|
|
31
65
|
...pluginState,
|
|
@@ -38,18 +72,33 @@ const updateTargetCellPosition = ({
|
|
|
38
72
|
} = tr.doc.type.schema.nodes;
|
|
39
73
|
const cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
|
|
40
74
|
const targetCellPosition = cell ? cell.pos : undefined;
|
|
75
|
+
if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
|
|
76
|
+
const targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
|
|
77
|
+
const closeContextualMenu = shouldCloseLegacyContextualMenu({
|
|
78
|
+
pluginState,
|
|
79
|
+
targetCellPositionChanged,
|
|
80
|
+
tr
|
|
81
|
+
});
|
|
82
|
+
if (!targetCellPositionChanged && !closeContextualMenu) {
|
|
83
|
+
return pluginState;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
// Close the legacy contextual menu when moving cells because the cell background
|
|
87
|
+
// color submenu can otherwise remain open against the previous cell selection.
|
|
88
|
+
return {
|
|
89
|
+
...pluginState,
|
|
90
|
+
...(closeContextualMenu ? {
|
|
91
|
+
isContextualMenuOpen: false
|
|
92
|
+
} : {}),
|
|
93
|
+
targetCellPosition
|
|
94
|
+
};
|
|
95
|
+
}
|
|
41
96
|
if (pluginState.targetCellPosition === targetCellPosition) {
|
|
42
97
|
return pluginState;
|
|
43
98
|
}
|
|
44
|
-
|
|
45
|
-
// The updated table menu is anchored to the current target cell. When selection moves
|
|
46
|
-
// to another cell, close the active menu so render state cannot point at a stale anchor.
|
|
47
99
|
return {
|
|
48
100
|
...pluginState,
|
|
49
|
-
targetCellPosition
|
|
50
|
-
activeTableMenu: pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? {
|
|
51
|
-
type: 'none'
|
|
52
|
-
} : pluginState.activeTableMenu
|
|
101
|
+
targetCellPosition
|
|
53
102
|
};
|
|
54
103
|
};
|
|
55
104
|
const updateTableNodePluginState = ({
|
|
@@ -107,6 +156,20 @@ const updateCollapseHandler = ({
|
|
|
107
156
|
};
|
|
108
157
|
const buildPluginState = builders => props => pluginState => {
|
|
109
158
|
if (!props.table) {
|
|
159
|
+
if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
|
|
160
|
+
const shouldClearTargetCellPosition = pluginState.targetCellPosition !== undefined;
|
|
161
|
+
const hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
|
|
162
|
+
if (!shouldClearTargetCellPosition && !hasActiveTableMenu) {
|
|
163
|
+
return pluginState;
|
|
164
|
+
}
|
|
165
|
+
return {
|
|
166
|
+
...pluginState,
|
|
167
|
+
targetCellPosition: undefined,
|
|
168
|
+
activeTableMenu: hasActiveTableMenu ? {
|
|
169
|
+
type: 'none'
|
|
170
|
+
} : pluginState.activeTableMenu
|
|
171
|
+
};
|
|
172
|
+
}
|
|
110
173
|
return pluginState.targetCellPosition ? {
|
|
111
174
|
...pluginState,
|
|
112
175
|
targetCellPosition: undefined
|
|
@@ -12,13 +12,14 @@ import { TableMenu } from '../TableMenu/shared/TableMenu';
|
|
|
12
12
|
const PopupWithListeners = withReactEditorViewOuterListeners(Popup);
|
|
13
13
|
const NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
|
|
14
14
|
const CELL_MENU_TRIGGER_SELECTOR = `.${ClassName.CONTEXTUAL_MENU_BUTTON}`;
|
|
15
|
+
const CELL_MENU_TRIGGER_CLEARANCE = [6, 0];
|
|
15
16
|
export const CellMenuPopup = ({
|
|
16
17
|
api,
|
|
17
18
|
boundariesElement,
|
|
18
19
|
editorView,
|
|
19
20
|
mountPoint,
|
|
20
21
|
scrollableElement,
|
|
21
|
-
|
|
22
|
+
target,
|
|
22
23
|
zIndex
|
|
23
24
|
}) => {
|
|
24
25
|
const popupContentRef = useRef(null);
|
|
@@ -47,6 +48,19 @@ export const CellMenuPopup = ({
|
|
|
47
48
|
}
|
|
48
49
|
return target instanceof Element && Boolean(target.closest(NESTED_DROPDOWN_SELECTOR) || target.closest(CELL_MENU_TRIGGER_SELECTOR));
|
|
49
50
|
}, []);
|
|
51
|
+
const horizontalPlacementRef = useRef(undefined);
|
|
52
|
+
const handlePlacementChanged = useCallback(([, horizontalPlacement]) => {
|
|
53
|
+
horizontalPlacementRef.current = horizontalPlacement;
|
|
54
|
+
}, []);
|
|
55
|
+
const handlePositionCalculated = useCallback(position => {
|
|
56
|
+
if (horizontalPlacementRef.current !== 'left' || position.left === undefined) {
|
|
57
|
+
return position;
|
|
58
|
+
}
|
|
59
|
+
return {
|
|
60
|
+
...position,
|
|
61
|
+
left: position.left + target.getBoundingClientRect().width
|
|
62
|
+
};
|
|
63
|
+
}, [target]);
|
|
50
64
|
const handleCellMenuClickOutside = useCallback(event => {
|
|
51
65
|
if (isEventInsideCellMenu(event)) {
|
|
52
66
|
return;
|
|
@@ -54,19 +68,20 @@ export const CellMenuPopup = ({
|
|
|
54
68
|
closeCellMenu();
|
|
55
69
|
}, [closeCellMenu, isEventInsideCellMenu]);
|
|
56
70
|
return /*#__PURE__*/React.createElement(PopupWithListeners, {
|
|
57
|
-
alignX: "
|
|
58
|
-
alignY: "
|
|
59
|
-
target:
|
|
71
|
+
alignX: "end",
|
|
72
|
+
alignY: "start",
|
|
73
|
+
target: target,
|
|
60
74
|
mountTo: mountPoint,
|
|
61
75
|
boundariesElement: boundariesElement,
|
|
62
76
|
scrollableElement: scrollableElement,
|
|
63
77
|
fitHeight: tablePopupMenuFitHeight,
|
|
64
78
|
fitWidth: TABLE_MENU_WIDTH,
|
|
65
79
|
zIndex: zIndex,
|
|
66
|
-
forcePlacement: true
|
|
67
|
-
|
|
68
|
-
,
|
|
69
|
-
|
|
80
|
+
forcePlacement: true,
|
|
81
|
+
preventOverflow: true,
|
|
82
|
+
onPlacementChanged: handlePlacementChanged,
|
|
83
|
+
onPositionCalculated: handlePositionCalculated,
|
|
84
|
+
offset: CELL_MENU_TRIGGER_CLEARANCE,
|
|
70
85
|
stick: true,
|
|
71
86
|
handleClickOutside: handleCellMenuClickOutside,
|
|
72
87
|
handleEscapeKeydown: closeCellMenu
|
|
@@ -576,6 +576,13 @@ export class ContextualMenu extends Component {
|
|
|
576
576
|
dispatch
|
|
577
577
|
}
|
|
578
578
|
} = this.props;
|
|
579
|
+
if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
|
|
580
|
+
if (getPluginState(state).isContextualMenuOpen) {
|
|
581
|
+
toggleContextualMenu()(state, dispatch);
|
|
582
|
+
}
|
|
583
|
+
this.closeSubmenu();
|
|
584
|
+
return;
|
|
585
|
+
}
|
|
579
586
|
toggleContextualMenu()(state, dispatch);
|
|
580
587
|
if (!isOpen) {
|
|
581
588
|
this.setState({
|
|
@@ -698,6 +705,12 @@ export class ContextualMenu extends Component {
|
|
|
698
705
|
setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
|
|
699
706
|
if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
|
|
700
707
|
this.toggleOpen();
|
|
708
|
+
} else if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
|
|
709
|
+
this.toggleOpen();
|
|
710
|
+
if (isCellMenuOpenByKeyboard) {
|
|
711
|
+
setFocusToCellMenu(false)(editorView.state, dispatch);
|
|
712
|
+
dom.focus();
|
|
713
|
+
}
|
|
701
714
|
} else {
|
|
702
715
|
toggleContextualMenu()(state, dispatch);
|
|
703
716
|
this.setState({
|
|
@@ -69,16 +69,16 @@ const FloatingContextualMenu = ({
|
|
|
69
69
|
}
|
|
70
70
|
const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
|
|
71
71
|
if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
|
|
72
|
+
if (!(targetCellRef instanceof HTMLElement)) {
|
|
73
|
+
return null;
|
|
74
|
+
}
|
|
72
75
|
return jsx(CellMenuPopup, {
|
|
73
76
|
api: api,
|
|
74
77
|
boundariesElement: boundariesElement,
|
|
75
78
|
editorView: editorView,
|
|
76
79
|
mountPoint: mountPoint,
|
|
77
|
-
scrollableElement: scrollableElement
|
|
78
|
-
|
|
79
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
80
|
-
,
|
|
81
|
-
targetCellRef: targetCellRef,
|
|
80
|
+
scrollableElement: scrollableElement,
|
|
81
|
+
target: targetCellRef,
|
|
82
82
|
zIndex: parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex
|
|
83
83
|
});
|
|
84
84
|
}
|
|
@@ -79,6 +79,7 @@ const FloatingDragMenu = ({
|
|
|
79
79
|
,
|
|
80
80
|
zIndex: inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
|
|
81
81
|
forcePlacement: true,
|
|
82
|
+
preventOverflow: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? dragMenuDirection === 'row' : undefined,
|
|
82
83
|
offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
|
|
83
84
|
stick: true
|
|
84
85
|
}, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
|
|
@@ -8,6 +8,7 @@ import { isTextInput } from '@atlaskit/editor-common/utils';
|
|
|
8
8
|
// @ts-ignore -- ReadonlyTransaction is a local declaration and will cause a TS2305 error in CCFE typecheck
|
|
9
9
|
|
|
10
10
|
import { findParentNodeOfType } from '@atlaskit/editor-prosemirror/utils';
|
|
11
|
+
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
11
12
|
import { findTable } from '@atlaskit/editor-tables/utils';
|
|
12
13
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
14
|
import { defaultTableSelection } from './default-table-selection';
|
|
@@ -26,38 +27,83 @@ var nextResizeHandleColumnIndex = function nextResizeHandleColumnIndex(tr, resiz
|
|
|
26
27
|
}
|
|
27
28
|
return resizeHandleColumnIndex;
|
|
28
29
|
};
|
|
29
|
-
var
|
|
30
|
-
var
|
|
31
|
-
|
|
30
|
+
var shouldCloseLegacyContextualMenu = function shouldCloseLegacyContextualMenu(_ref) {
|
|
31
|
+
var pluginState = _ref.pluginState,
|
|
32
|
+
targetCellPositionChanged = _ref.targetCellPositionChanged,
|
|
33
|
+
tr = _ref.tr;
|
|
34
|
+
return Boolean(pluginState.isContextualMenuOpen && (targetCellPositionChanged || tr.selectionSet && !(tr.selection instanceof CellSelection)));
|
|
35
|
+
};
|
|
36
|
+
var updateTargetCellPosition = function updateTargetCellPosition(_ref2) {
|
|
37
|
+
var tr = _ref2.tr,
|
|
38
|
+
table = _ref2.table;
|
|
32
39
|
return function (pluginState) {
|
|
33
40
|
var tableNode = table && table.node;
|
|
41
|
+
if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
|
|
42
|
+
var _targetCellPosition;
|
|
43
|
+
if (tableNode) {
|
|
44
|
+
var _tr$doc$type$schema$n = tr.doc.type.schema.nodes,
|
|
45
|
+
_tableCell = _tr$doc$type$schema$n.tableCell,
|
|
46
|
+
_tableHeader = _tr$doc$type$schema$n.tableHeader;
|
|
47
|
+
var _cell = findParentNodeOfType([_tableCell, _tableHeader])(tr.selection);
|
|
48
|
+
_targetCellPosition = _cell ? _cell.pos : undefined;
|
|
49
|
+
}
|
|
50
|
+
var hasTargetCellChanged = pluginState.targetCellPosition !== _targetCellPosition;
|
|
51
|
+
var hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
|
|
52
|
+
var shouldCloseMenu = hasActiveTableMenu && (!tableNode || hasTargetCellChanged || !(tr.selection instanceof CellSelection));
|
|
53
|
+
if (!hasTargetCellChanged && !shouldCloseMenu) {
|
|
54
|
+
return pluginState;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
// The updated table menu is anchored to a table selection. When selection moves
|
|
58
|
+
// to another cell, leaves the table, or changes from a CellSelection to a text cursor,
|
|
59
|
+
// close the active menu so render state cannot point at a stale anchor.
|
|
60
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
61
|
+
targetCellPosition: _targetCellPosition,
|
|
62
|
+
activeTableMenu: shouldCloseMenu ? {
|
|
63
|
+
type: 'none'
|
|
64
|
+
} : pluginState.activeTableMenu
|
|
65
|
+
});
|
|
66
|
+
}
|
|
34
67
|
if (!tableNode) {
|
|
35
68
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
36
69
|
targetCellPosition: undefined
|
|
37
70
|
});
|
|
38
71
|
}
|
|
39
|
-
var _tr$doc$type$schema$
|
|
40
|
-
tableCell = _tr$doc$type$schema$
|
|
41
|
-
tableHeader = _tr$doc$type$schema$
|
|
72
|
+
var _tr$doc$type$schema$n2 = tr.doc.type.schema.nodes,
|
|
73
|
+
tableCell = _tr$doc$type$schema$n2.tableCell,
|
|
74
|
+
tableHeader = _tr$doc$type$schema$n2.tableHeader;
|
|
42
75
|
var cell = findParentNodeOfType([tableCell, tableHeader])(tr.selection);
|
|
43
76
|
var targetCellPosition = cell ? cell.pos : undefined;
|
|
77
|
+
if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
|
|
78
|
+
var targetCellPositionChanged = pluginState.targetCellPosition !== targetCellPosition;
|
|
79
|
+
var closeContextualMenu = shouldCloseLegacyContextualMenu({
|
|
80
|
+
pluginState: pluginState,
|
|
81
|
+
targetCellPositionChanged: targetCellPositionChanged,
|
|
82
|
+
tr: tr
|
|
83
|
+
});
|
|
84
|
+
if (!targetCellPositionChanged && !closeContextualMenu) {
|
|
85
|
+
return pluginState;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Close the legacy contextual menu when moving cells because the cell background
|
|
89
|
+
// color submenu can otherwise remain open against the previous cell selection.
|
|
90
|
+
return _objectSpread(_objectSpread(_objectSpread({}, pluginState), closeContextualMenu ? {
|
|
91
|
+
isContextualMenuOpen: false
|
|
92
|
+
} : {}), {}, {
|
|
93
|
+
targetCellPosition: targetCellPosition
|
|
94
|
+
});
|
|
95
|
+
}
|
|
44
96
|
if (pluginState.targetCellPosition === targetCellPosition) {
|
|
45
97
|
return pluginState;
|
|
46
98
|
}
|
|
47
|
-
|
|
48
|
-
// The updated table menu is anchored to the current target cell. When selection moves
|
|
49
|
-
// to another cell, close the active menu so render state cannot point at a stale anchor.
|
|
50
99
|
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
51
|
-
targetCellPosition: targetCellPosition
|
|
52
|
-
activeTableMenu: pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none' && expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? {
|
|
53
|
-
type: 'none'
|
|
54
|
-
} : pluginState.activeTableMenu
|
|
100
|
+
targetCellPosition: targetCellPosition
|
|
55
101
|
});
|
|
56
102
|
};
|
|
57
103
|
};
|
|
58
|
-
var updateTableNodePluginState = function updateTableNodePluginState(
|
|
59
|
-
var tr =
|
|
60
|
-
table =
|
|
104
|
+
var updateTableNodePluginState = function updateTableNodePluginState(_ref3) {
|
|
105
|
+
var tr = _ref3.tr,
|
|
106
|
+
table = _ref3.table;
|
|
61
107
|
return function (pluginState) {
|
|
62
108
|
var tableNode = table && table.node;
|
|
63
109
|
if (!tableNode || isTextInput(tr)) {
|
|
@@ -73,9 +119,9 @@ var updateTableNodePluginState = function updateTableNodePluginState(_ref2) {
|
|
|
73
119
|
});
|
|
74
120
|
};
|
|
75
121
|
};
|
|
76
|
-
var updateCollapseHandler = function updateCollapseHandler(
|
|
77
|
-
var tr =
|
|
78
|
-
table =
|
|
122
|
+
var updateCollapseHandler = function updateCollapseHandler(_ref4) {
|
|
123
|
+
var tr = _ref4.tr,
|
|
124
|
+
table = _ref4.table;
|
|
79
125
|
return function (pluginState) {
|
|
80
126
|
var tableNode = table && table.node;
|
|
81
127
|
var schema = tr.doc.type.schema;
|
|
@@ -111,6 +157,19 @@ var buildPluginState = function buildPluginState(builders) {
|
|
|
111
157
|
return function (props) {
|
|
112
158
|
return function (pluginState) {
|
|
113
159
|
if (!props.table) {
|
|
160
|
+
if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
|
|
161
|
+
var shouldClearTargetCellPosition = pluginState.targetCellPosition !== undefined;
|
|
162
|
+
var hasActiveTableMenu = pluginState.activeTableMenu != null && pluginState.activeTableMenu.type !== 'none';
|
|
163
|
+
if (!shouldClearTargetCellPosition && !hasActiveTableMenu) {
|
|
164
|
+
return pluginState;
|
|
165
|
+
}
|
|
166
|
+
return _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
167
|
+
targetCellPosition: undefined,
|
|
168
|
+
activeTableMenu: hasActiveTableMenu ? {
|
|
169
|
+
type: 'none'
|
|
170
|
+
} : pluginState.activeTableMenu
|
|
171
|
+
});
|
|
172
|
+
}
|
|
114
173
|
return pluginState.targetCellPosition ? _objectSpread(_objectSpread({}, pluginState), {}, {
|
|
115
174
|
targetCellPosition: undefined
|
|
116
175
|
}) : pluginState;
|
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
3
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
1
5
|
import React, { useCallback, useContext, useRef } from 'react';
|
|
2
6
|
import { Popup } from '@atlaskit/editor-common/ui';
|
|
3
7
|
import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
|
|
@@ -12,13 +16,14 @@ import { TableMenu } from '../TableMenu/shared/TableMenu';
|
|
|
12
16
|
var PopupWithListeners = withReactEditorViewOuterListeners(Popup);
|
|
13
17
|
var NESTED_DROPDOWN_SELECTOR = '[data-toolbar-nested-dropdown-menu]';
|
|
14
18
|
var CELL_MENU_TRIGGER_SELECTOR = ".".concat(ClassName.CONTEXTUAL_MENU_BUTTON);
|
|
19
|
+
var CELL_MENU_TRIGGER_CLEARANCE = [6, 0];
|
|
15
20
|
export var CellMenuPopup = function CellMenuPopup(_ref) {
|
|
16
21
|
var api = _ref.api,
|
|
17
22
|
boundariesElement = _ref.boundariesElement,
|
|
18
23
|
editorView = _ref.editorView,
|
|
19
24
|
mountPoint = _ref.mountPoint,
|
|
20
25
|
scrollableElement = _ref.scrollableElement,
|
|
21
|
-
|
|
26
|
+
target = _ref.target,
|
|
22
27
|
zIndex = _ref.zIndex;
|
|
23
28
|
var popupContentRef = useRef(null);
|
|
24
29
|
var setOutsideClickTargetRef = useContext(OutsideClickTargetRefContext);
|
|
@@ -45,6 +50,20 @@ export var CellMenuPopup = function CellMenuPopup(_ref) {
|
|
|
45
50
|
}
|
|
46
51
|
return target instanceof Element && Boolean(target.closest(NESTED_DROPDOWN_SELECTOR) || target.closest(CELL_MENU_TRIGGER_SELECTOR));
|
|
47
52
|
}, []);
|
|
53
|
+
var horizontalPlacementRef = useRef(undefined);
|
|
54
|
+
var handlePlacementChanged = useCallback(function (_ref2) {
|
|
55
|
+
var _ref3 = _slicedToArray(_ref2, 2),
|
|
56
|
+
horizontalPlacement = _ref3[1];
|
|
57
|
+
horizontalPlacementRef.current = horizontalPlacement;
|
|
58
|
+
}, []);
|
|
59
|
+
var handlePositionCalculated = useCallback(function (position) {
|
|
60
|
+
if (horizontalPlacementRef.current !== 'left' || position.left === undefined) {
|
|
61
|
+
return position;
|
|
62
|
+
}
|
|
63
|
+
return _objectSpread(_objectSpread({}, position), {}, {
|
|
64
|
+
left: position.left + target.getBoundingClientRect().width
|
|
65
|
+
});
|
|
66
|
+
}, [target]);
|
|
48
67
|
var handleCellMenuClickOutside = useCallback(function (event) {
|
|
49
68
|
if (isEventInsideCellMenu(event)) {
|
|
50
69
|
return;
|
|
@@ -52,19 +71,20 @@ export var CellMenuPopup = function CellMenuPopup(_ref) {
|
|
|
52
71
|
closeCellMenu();
|
|
53
72
|
}, [closeCellMenu, isEventInsideCellMenu]);
|
|
54
73
|
return /*#__PURE__*/React.createElement(PopupWithListeners, {
|
|
55
|
-
alignX: "
|
|
56
|
-
alignY: "
|
|
57
|
-
target:
|
|
74
|
+
alignX: "end",
|
|
75
|
+
alignY: "start",
|
|
76
|
+
target: target,
|
|
58
77
|
mountTo: mountPoint,
|
|
59
78
|
boundariesElement: boundariesElement,
|
|
60
79
|
scrollableElement: scrollableElement,
|
|
61
80
|
fitHeight: tablePopupMenuFitHeight,
|
|
62
81
|
fitWidth: TABLE_MENU_WIDTH,
|
|
63
82
|
zIndex: zIndex,
|
|
64
|
-
forcePlacement: true
|
|
65
|
-
|
|
66
|
-
,
|
|
67
|
-
|
|
83
|
+
forcePlacement: true,
|
|
84
|
+
preventOverflow: true,
|
|
85
|
+
onPlacementChanged: handlePlacementChanged,
|
|
86
|
+
onPositionCalculated: handlePositionCalculated,
|
|
87
|
+
offset: CELL_MENU_TRIGGER_CLEARANCE,
|
|
68
88
|
stick: true,
|
|
69
89
|
handleClickOutside: handleCellMenuClickOutside,
|
|
70
90
|
handleEscapeKeydown: closeCellMenu
|
|
@@ -539,6 +539,13 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
|
|
|
539
539
|
_this$props8$editorVi = _this$props8.editorView,
|
|
540
540
|
state = _this$props8$editorVi.state,
|
|
541
541
|
dispatch = _this$props8$editorVi.dispatch;
|
|
542
|
+
if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
|
|
543
|
+
if (getPluginState(state).isContextualMenuOpen) {
|
|
544
|
+
toggleContextualMenu()(state, dispatch);
|
|
545
|
+
}
|
|
546
|
+
_this.closeSubmenu();
|
|
547
|
+
return;
|
|
548
|
+
}
|
|
542
549
|
toggleContextualMenu()(state, dispatch);
|
|
543
550
|
if (!isOpen) {
|
|
544
551
|
_this.setState({
|
|
@@ -649,6 +656,12 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
|
|
|
649
656
|
setColorWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, color)(state, dispatch);
|
|
650
657
|
if (!expValEquals('platform_editor_toolbar_submenu_open_click', 'isEnabled', true)) {
|
|
651
658
|
_this.toggleOpen();
|
|
659
|
+
} else if (expValEquals('platform_editor_table_close_cell_menu_on_move_exp', 'isEnabled', true)) {
|
|
660
|
+
_this.toggleOpen();
|
|
661
|
+
if (isCellMenuOpenByKeyboard) {
|
|
662
|
+
setFocusToCellMenu(false)(editorView.state, dispatch);
|
|
663
|
+
dom.focus();
|
|
664
|
+
}
|
|
652
665
|
} else {
|
|
653
666
|
toggleContextualMenu()(state, dispatch);
|
|
654
667
|
_this.setState({
|
|
@@ -64,16 +64,16 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
|
|
|
64
64
|
}
|
|
65
65
|
var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
|
|
66
66
|
if (expValEquals('platform_editor_table_menu_updates', 'isEnabled', true)) {
|
|
67
|
+
if (!(targetCellRef instanceof HTMLElement)) {
|
|
68
|
+
return null;
|
|
69
|
+
}
|
|
67
70
|
return jsx(CellMenuPopup, {
|
|
68
71
|
api: api,
|
|
69
72
|
boundariesElement: boundariesElement,
|
|
70
73
|
editorView: editorView,
|
|
71
74
|
mountPoint: mountPoint,
|
|
72
|
-
scrollableElement: scrollableElement
|
|
73
|
-
|
|
74
|
-
// eslint-disable-next-line @atlaskit/editor/no-as-casting
|
|
75
|
-
,
|
|
76
|
-
targetCellRef: targetCellRef,
|
|
75
|
+
scrollableElement: scrollableElement,
|
|
76
|
+
target: targetCellRef,
|
|
77
77
|
zIndex: parentSticky ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex
|
|
78
78
|
});
|
|
79
79
|
}
|
|
@@ -77,6 +77,7 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
|
|
|
77
77
|
,
|
|
78
78
|
zIndex: inStickyMode ? akEditorFloatingDialogZIndex : akEditorFloatingOverlapPanelZIndex,
|
|
79
79
|
forcePlacement: true,
|
|
80
|
+
preventOverflow: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? dragMenuDirection === 'row' : undefined,
|
|
80
81
|
offset: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? [TABLE_MENU_OFFSET, 0] : direction === 'row' ? [-9, 0] : [0, -7],
|
|
81
82
|
stick: true
|
|
82
83
|
}, expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? /*#__PURE__*/React.createElement(UserIntentPopupWrapper, {
|
|
@@ -7,8 +7,8 @@ type CellMenuPopupProps = {
|
|
|
7
7
|
editorView: EditorView;
|
|
8
8
|
mountPoint?: HTMLElement;
|
|
9
9
|
scrollableElement?: HTMLElement;
|
|
10
|
-
|
|
10
|
+
target: HTMLElement;
|
|
11
11
|
zIndex: number;
|
|
12
12
|
};
|
|
13
|
-
export declare const CellMenuPopup: ({ api, boundariesElement, editorView, mountPoint, scrollableElement,
|
|
13
|
+
export declare const CellMenuPopup: ({ api, boundariesElement, editorView, mountPoint, scrollableElement, target, zIndex, }: CellMenuPopupProps) => React.JSX.Element;
|
|
14
14
|
export {};
|
|
@@ -7,8 +7,8 @@ type CellMenuPopupProps = {
|
|
|
7
7
|
editorView: EditorView;
|
|
8
8
|
mountPoint?: HTMLElement;
|
|
9
9
|
scrollableElement?: HTMLElement;
|
|
10
|
-
|
|
10
|
+
target: HTMLElement;
|
|
11
11
|
zIndex: number;
|
|
12
12
|
};
|
|
13
|
-
export declare const CellMenuPopup: ({ api, boundariesElement, editorView, mountPoint, scrollableElement,
|
|
13
|
+
export declare const CellMenuPopup: ({ api, boundariesElement, editorView, mountPoint, scrollableElement, target, zIndex, }: CellMenuPopupProps) => React.JSX.Element;
|
|
14
14
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "23.0.1",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -28,42 +28,42 @@
|
|
|
28
28
|
"singleton": true
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@atlaskit/adf-schema": "^52.
|
|
31
|
+
"@atlaskit/adf-schema": "^52.16.0",
|
|
32
32
|
"@atlaskit/button": "^23.11.0",
|
|
33
33
|
"@atlaskit/custom-steps": "^0.17.0",
|
|
34
34
|
"@atlaskit/editor-palette": "^2.2.0",
|
|
35
|
-
"@atlaskit/editor-plugin-accessibility-utils": "^
|
|
36
|
-
"@atlaskit/editor-plugin-analytics": "^
|
|
37
|
-
"@atlaskit/editor-plugin-batch-attribute-updates": "^
|
|
38
|
-
"@atlaskit/editor-plugin-content-insertion": "^
|
|
39
|
-
"@atlaskit/editor-plugin-editor-viewmode": "^
|
|
40
|
-
"@atlaskit/editor-plugin-extension": "
|
|
41
|
-
"@atlaskit/editor-plugin-guideline": "^
|
|
42
|
-
"@atlaskit/editor-plugin-interaction": "^
|
|
43
|
-
"@atlaskit/editor-plugin-limited-mode": "^
|
|
44
|
-
"@atlaskit/editor-plugin-selection": "^
|
|
45
|
-
"@atlaskit/editor-plugin-toolbar": "^
|
|
46
|
-
"@atlaskit/editor-plugin-ui-control-registry": "^
|
|
47
|
-
"@atlaskit/editor-plugin-user-intent": "^
|
|
48
|
-
"@atlaskit/editor-plugin-width": "^
|
|
35
|
+
"@atlaskit/editor-plugin-accessibility-utils": "^11.0.0",
|
|
36
|
+
"@atlaskit/editor-plugin-analytics": "^11.0.0",
|
|
37
|
+
"@atlaskit/editor-plugin-batch-attribute-updates": "^11.0.0",
|
|
38
|
+
"@atlaskit/editor-plugin-content-insertion": "^11.0.0",
|
|
39
|
+
"@atlaskit/editor-plugin-editor-viewmode": "^13.0.0",
|
|
40
|
+
"@atlaskit/editor-plugin-extension": "14.0.0",
|
|
41
|
+
"@atlaskit/editor-plugin-guideline": "^11.0.0",
|
|
42
|
+
"@atlaskit/editor-plugin-interaction": "^20.0.0",
|
|
43
|
+
"@atlaskit/editor-plugin-limited-mode": "^8.0.0",
|
|
44
|
+
"@atlaskit/editor-plugin-selection": "^11.0.0",
|
|
45
|
+
"@atlaskit/editor-plugin-toolbar": "^8.0.0",
|
|
46
|
+
"@atlaskit/editor-plugin-ui-control-registry": "^5.0.0",
|
|
47
|
+
"@atlaskit/editor-plugin-user-intent": "^9.0.0",
|
|
48
|
+
"@atlaskit/editor-plugin-width": "^12.0.0",
|
|
49
49
|
"@atlaskit/editor-prosemirror": "^7.3.0",
|
|
50
50
|
"@atlaskit/editor-shared-styles": "^3.11.0",
|
|
51
51
|
"@atlaskit/editor-tables": "^2.10.0",
|
|
52
52
|
"@atlaskit/editor-toolbar": "^1.9.0",
|
|
53
53
|
"@atlaskit/editor-ui-control-model": "^1.2.0",
|
|
54
|
-
"@atlaskit/icon": "^35.
|
|
55
|
-
"@atlaskit/icon-lab": "^6.
|
|
54
|
+
"@atlaskit/icon": "^35.4.0",
|
|
55
|
+
"@atlaskit/icon-lab": "^6.13.0",
|
|
56
56
|
"@atlaskit/insm": "^0.4.0",
|
|
57
57
|
"@atlaskit/menu": "^8.5.0",
|
|
58
58
|
"@atlaskit/platform-feature-flags": "^1.1.0",
|
|
59
59
|
"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
|
|
60
60
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
|
|
61
|
-
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.
|
|
61
|
+
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.2.0",
|
|
62
62
|
"@atlaskit/primitives": "^19.0.0",
|
|
63
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
63
|
+
"@atlaskit/tmp-editor-statsig": "^88.4.0",
|
|
64
64
|
"@atlaskit/toggle": "^16.1.0",
|
|
65
65
|
"@atlaskit/tokens": "^13.1.0",
|
|
66
|
-
"@atlaskit/tooltip": "^22.
|
|
66
|
+
"@atlaskit/tooltip": "^22.6.0",
|
|
67
67
|
"@babel/runtime": "^7.0.0",
|
|
68
68
|
"@compiled/react": "^0.20.0",
|
|
69
69
|
"@emotion/react": "^11.7.1",
|
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
"uuid": "^3.1.0"
|
|
76
76
|
},
|
|
77
77
|
"peerDependencies": {
|
|
78
|
-
"@atlaskit/editor-common": "^
|
|
78
|
+
"@atlaskit/editor-common": "^115.0.0",
|
|
79
79
|
"react": "^18.2.0",
|
|
80
80
|
"react-dom": "^18.2.0",
|
|
81
81
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|