@atlaskit/editor-plugin-table 7.29.6 → 7.29.8
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 +17 -0
- package/afm-cc/tsconfig.json +1 -2
- package/dist/cjs/plugin.js +1 -2
- package/dist/cjs/pm-plugins/keymap.js +1 -4
- package/dist/cjs/ui/FloatingContextualButton/index.js +7 -10
- package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +42 -72
- package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +1 -3
- package/dist/es2019/plugin.js +1 -2
- package/dist/es2019/pm-plugins/keymap.js +1 -4
- package/dist/es2019/ui/FloatingContextualButton/index.js +9 -12
- package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +47 -77
- package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +1 -3
- package/dist/esm/plugin.js +1 -2
- package/dist/esm/pm-plugins/keymap.js +1 -4
- package/dist/esm/ui/FloatingContextualButton/index.js +7 -10
- package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +42 -72
- package/dist/esm/ui/FloatingDragMenu/DragMenu.js +1 -3
- package/package.json +2 -5
- package/src/plugin.tsx +1 -4
- package/src/pm-plugins/keymap.ts +2 -4
- package/src/ui/FloatingContextualButton/index.tsx +6 -13
- package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +81 -127
- package/src/ui/FloatingDragMenu/DragMenu.tsx +1 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 7.29.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#157905](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157905)
|
|
8
|
+
[`f02486a915690`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f02486a915690) -
|
|
9
|
+
NO-ISSUE Cleanup unused props and components
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 7.29.7
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#152968](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152968)
|
|
17
|
+
[`501e975100eab`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/501e975100eab) -
|
|
18
|
+
[ED-24137] feature flag clean up for the Cell Options menu a11y work
|
|
19
|
+
|
|
3
20
|
## 7.29.6
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
package/afm-cc/tsconfig.json
CHANGED
package/dist/cjs/plugin.js
CHANGED
|
@@ -18,7 +18,6 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
|
18
18
|
var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
|
|
19
19
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
20
20
|
var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
|
|
21
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
21
|
var _insert = require("./commands/insert");
|
|
23
22
|
var _createPluginConfig = require("./create-plugin-config");
|
|
24
23
|
var _plugin = require("./pm-plugins/analytics/plugin");
|
|
@@ -393,7 +392,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
|
|
|
393
392
|
isCellMenuOpenByKeyboard = _ref20.isCellMenuOpenByKeyboard;
|
|
394
393
|
var allowControls = pluginConfig.allowControls;
|
|
395
394
|
var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
|
|
396
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard
|
|
395
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
|
|
397
396
|
isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
|
|
398
397
|
editorView: editorView,
|
|
399
398
|
tableNode: tableNode,
|
|
@@ -9,7 +9,6 @@ var _analytics = require("@atlaskit/editor-common/analytics");
|
|
|
9
9
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
10
10
|
var _commands = require("@atlaskit/editor-prosemirror/commands");
|
|
11
11
|
var _keymap = require("@atlaskit/editor-prosemirror/keymap");
|
|
12
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
12
|
var _commands2 = require("../commands");
|
|
14
13
|
var _commandsWithAnalytics = require("../commands-with-analytics");
|
|
15
14
|
var _columnResize = require("../commands/column-resize");
|
|
@@ -83,9 +82,7 @@ function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, dragAndD
|
|
|
83
82
|
ariaNotify: ariaNotifyPlugin,
|
|
84
83
|
getIntl: getIntl
|
|
85
84
|
}), list);
|
|
86
|
-
|
|
87
|
-
(0, _keymaps.bindKeymapWithCommand)(_keymaps.focusToContextMenuTrigger.common, (0, _commands2.setFocusToCellMenu)(), list);
|
|
88
|
-
}
|
|
85
|
+
(0, _keymaps.bindKeymapWithCommand)(_keymaps.focusToContextMenuTrigger.common, (0, _commands2.setFocusToCellMenu)(), list);
|
|
89
86
|
return (0, _keymap.keymap)(list);
|
|
90
87
|
}
|
|
91
88
|
var _default = exports.default = keymapPlugin;
|
|
@@ -18,7 +18,6 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
|
|
|
18
18
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
19
19
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
20
20
|
var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
|
|
21
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
22
21
|
var _commands = require("../../commands");
|
|
23
22
|
var _types = require("../../types");
|
|
24
23
|
var _FixedButton = _interopRequireDefault(require("./FixedButton"));
|
|
@@ -60,13 +59,11 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
|
|
|
60
59
|
var targetCellRef;
|
|
61
60
|
targetCellRef = (0, _utils.findDomRefAtPos)(targetCellPosition, domAtPos);
|
|
62
61
|
(0, _react.useEffect)(function () {
|
|
63
|
-
if (
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
(0, _commands.toggleContextualMenu)()(state, dispatch);
|
|
69
|
-
}
|
|
62
|
+
if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
|
|
63
|
+
var state = editorView.state,
|
|
64
|
+
dispatch = editorView.dispatch;
|
|
65
|
+
// open the menu when the keyboard shortcut is pressed
|
|
66
|
+
(0, _commands.toggleContextualMenu)()(state, dispatch);
|
|
70
67
|
}
|
|
71
68
|
}, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
|
|
72
69
|
if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
|
|
@@ -85,7 +82,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
|
|
|
85
82
|
className: _types.TableCssClassName.CONTEXTUAL_MENU_BUTTON,
|
|
86
83
|
selected: isContextualMenuOpen,
|
|
87
84
|
title: labelCellOptions,
|
|
88
|
-
keymap:
|
|
85
|
+
keymap: _keymaps.focusToContextMenuTrigger,
|
|
89
86
|
onClick: handleClick,
|
|
90
87
|
iconBefore: (0, _react2.jsx)(_chevronDown.default, {
|
|
91
88
|
label: "",
|
|
@@ -93,7 +90,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
|
|
|
93
90
|
isFacadeDisabled: true
|
|
94
91
|
}),
|
|
95
92
|
"aria-label": labelCellOptions,
|
|
96
|
-
"aria-expanded":
|
|
93
|
+
"aria-expanded": isContextualMenuOpen
|
|
97
94
|
}));
|
|
98
95
|
var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
|
|
99
96
|
if (stickyHeader && parentSticky && tableWrapper) {
|
|
@@ -39,7 +39,6 @@ var _tableColumnAddRight = _interopRequireDefault(require("@atlaskit/icon/core/t
|
|
|
39
39
|
var _tableColumnDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-column-delete"));
|
|
40
40
|
var _tableRowAddBelow = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-below"));
|
|
41
41
|
var _tableRowDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-row-delete"));
|
|
42
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
43
42
|
var _primitives = require("@atlaskit/primitives");
|
|
44
43
|
var _commands = require("../../commands");
|
|
45
44
|
var _commandsWithAnalytics = require("../../commands-with-analytics");
|
|
@@ -106,16 +105,14 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
106
105
|
targetCellPosition = _getPluginState.targetCellPosition,
|
|
107
106
|
isDragAndDropEnabled = _getPluginState.isDragAndDropEnabled;
|
|
108
107
|
if (allowBackgroundColor) {
|
|
109
|
-
var _node$attrs, _node$attrs2
|
|
108
|
+
var _node$attrs, _node$attrs2;
|
|
110
109
|
var node = isOpen && targetCellPosition ? state.doc.nodeAt(targetCellPosition) : null;
|
|
111
110
|
var background = (0, _editorPalette.hexToEditorBackgroundPaletteColor)((node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.background) || '#ffffff');
|
|
112
111
|
var selectedRowIndex;
|
|
113
112
|
var selectedColumnIndex;
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
|
|
118
|
-
}
|
|
113
|
+
var selectedRowAndColumnFromPalette = (0, _uiColor.getSelectedRowAndColumnFromPalette)(_uiColor.cellBackgroundColorPalette, background, _consts.colorPalletteColumns);
|
|
114
|
+
selectedRowIndex = selectedRowAndColumnFromPalette.selectedRowIndex;
|
|
115
|
+
selectedColumnIndex = selectedRowAndColumnFromPalette.selectedColumnIndex;
|
|
119
116
|
return {
|
|
120
117
|
content: isDragAndDropEnabled ? formatMessage(_messages.tableMessages.backgroundColor) : formatMessage(_messages.tableMessages.cellBackground),
|
|
121
118
|
value: {
|
|
@@ -139,7 +136,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
139
136
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
140
137
|
,
|
|
141
138
|
className: isDragAndDropEnabled ? _types.TableCssClassName.CONTEXTUAL_MENU_ICON_SMALL : _types.TableCssClassName.CONTEXTUAL_MENU_ICON
|
|
142
|
-
}),
|
|
139
|
+
}), isSubmenuOpen && (0, _react2.jsx)("div", {
|
|
143
140
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
144
141
|
className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
|
|
145
142
|
ref: _this.handleSubMenuRef
|
|
@@ -169,22 +166,8 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
169
166
|
paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
|
|
170
167
|
hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
|
|
171
168
|
}
|
|
172
|
-
})))
|
|
173
|
-
|
|
174
|
-
(0, _react2.jsx)("div", {
|
|
175
|
-
className: _types.TableCssClassName.CONTEXTUAL_SUBMENU,
|
|
176
|
-
ref: _this.handleSubMenuRef
|
|
177
|
-
}, (0, _react2.jsx)(_uiColor.ColorPalette, {
|
|
178
|
-
cols: 7,
|
|
179
|
-
onClick: _this.setColor,
|
|
180
|
-
selectedColor: (node === null || node === void 0 || (_node$attrs3 = node.attrs) === null || _node$attrs3 === void 0 ? void 0 : _node$attrs3.background) || '#ffffff',
|
|
181
|
-
paletteOptions: {
|
|
182
|
-
palette: _uiColor.cellBackgroundColorPalette,
|
|
183
|
-
paletteColorTooltipMessages: _uiColor.backgroundPaletteTooltipMessages,
|
|
184
|
-
hexToPaletteColor: _editorPalette.hexToEditorBackgroundPaletteColor
|
|
185
|
-
}
|
|
186
|
-
}))),
|
|
187
|
-
'aria-expanded': (0, _platformFeatureFlags.fg)('platform_editor_a11y_table_context_menu') ? isSubmenuOpen : undefined
|
|
169
|
+
})))),
|
|
170
|
+
'aria-expanded': isSubmenuOpen
|
|
188
171
|
};
|
|
189
172
|
}
|
|
190
173
|
});
|
|
@@ -510,7 +493,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
510
493
|
tableWithFixedColumnWidthsOption = _ref4$tableWithFixedC === void 0 ? false : _ref4$tableWithFixedC;
|
|
511
494
|
// context menu opened by keyboard and any item except 'background' activated
|
|
512
495
|
// or color has been chosen from color palette
|
|
513
|
-
if (isCellMenuOpenByKeyboard && (item.value.name !== 'background' || item.value.name === 'background' && _this.state.isSubmenuOpen)
|
|
496
|
+
if (isCellMenuOpenByKeyboard && (item.value.name !== 'background' || item.value.name === 'background' && _this.state.isSubmenuOpen)) {
|
|
514
497
|
var tr = state.tr;
|
|
515
498
|
tr.setMeta(_pluginKey.pluginKey, {
|
|
516
499
|
type: 'SET_CELL_MENU_OPEN',
|
|
@@ -579,7 +562,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
579
562
|
// 1st time when user chooses the background color item.
|
|
580
563
|
// 2nd when color has been chosen from color palette.
|
|
581
564
|
// here we are handling the 1st call relying on the isSubmenuOpen state value
|
|
582
|
-
if (isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen
|
|
565
|
+
if (isCellMenuOpenByKeyboard && !_this.state.isSubmenuOpen) {
|
|
583
566
|
_this.setState({
|
|
584
567
|
isSubmenuOpen: true
|
|
585
568
|
});
|
|
@@ -608,39 +591,32 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
608
591
|
dispatch = _this$props12$editorV.dispatch,
|
|
609
592
|
dom = _this$props12$editorV.dom,
|
|
610
593
|
isCellMenuOpenByKeyboard = _this$props12.isCellMenuOpenByKeyboard;
|
|
611
|
-
if (
|
|
612
|
-
|
|
613
|
-
|
|
614
|
-
if (
|
|
615
|
-
if (
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
event.preventDefault();
|
|
620
|
-
}
|
|
621
|
-
(0, _commands.toggleContextualMenu)()(state, dispatch);
|
|
622
|
-
_this.setState({
|
|
623
|
-
isSubmenuOpen: false
|
|
624
|
-
});
|
|
625
|
-
(0, _commands.setFocusToCellMenu)(false)(state, dispatch);
|
|
626
|
-
dom.focus();
|
|
594
|
+
if (payload) {
|
|
595
|
+
var event = payload.event;
|
|
596
|
+
if (event && event instanceof KeyboardEvent) {
|
|
597
|
+
if (!_this.state.isSubmenuOpen) {
|
|
598
|
+
if (arrowsList.has(event.key)) {
|
|
599
|
+
// preventing default behavior for avoiding cursor jump to next/previous table column
|
|
600
|
+
// when left/right arrow pressed.
|
|
601
|
+
event.preventDefault();
|
|
627
602
|
}
|
|
628
|
-
} else {
|
|
629
|
-
// mouse click outside
|
|
630
603
|
(0, _commands.toggleContextualMenu)()(state, dispatch);
|
|
631
604
|
_this.setState({
|
|
632
605
|
isSubmenuOpen: false
|
|
633
606
|
});
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
|
|
607
|
+
(0, _commands.setFocusToCellMenu)(false)(state, dispatch);
|
|
608
|
+
dom.focus();
|
|
609
|
+
}
|
|
610
|
+
} else {
|
|
611
|
+
// mouse click outside
|
|
612
|
+
(0, _commands.toggleContextualMenu)()(state, dispatch);
|
|
613
|
+
_this.setState({
|
|
614
|
+
isSubmenuOpen: false
|
|
615
|
+
});
|
|
616
|
+
if (isCellMenuOpenByKeyboard) {
|
|
617
|
+
(0, _commands.setFocusToCellMenu)(false)(state, dispatch);
|
|
637
618
|
}
|
|
638
619
|
}
|
|
639
|
-
} else {
|
|
640
|
-
(0, _commands.toggleContextualMenu)()(state, dispatch);
|
|
641
|
-
_this.setState({
|
|
642
|
-
isSubmenuOpen: false
|
|
643
|
-
});
|
|
644
620
|
}
|
|
645
621
|
});
|
|
646
622
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleItemMouseEnter", function (_ref5) {
|
|
@@ -700,17 +676,15 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
700
676
|
(0, _createClass2.default)(ContextualMenu, [{
|
|
701
677
|
key: "componentDidMount",
|
|
702
678
|
value: function componentDidMount() {
|
|
703
|
-
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
}));
|
|
713
|
-
}
|
|
679
|
+
// ArrowKeyNavigationProvider in DropdownMenu expects that menu handle will stay focused
|
|
680
|
+
// until user pressed ArrowDown.
|
|
681
|
+
// Behavior above fails the A11Y requirement about first item in menu should be focused immediately.
|
|
682
|
+
// so here is triggering componentDidUpdate inside dropdown to set focus on first element
|
|
683
|
+
var isCellMenuOpenByKeyboard = this.props.isCellMenuOpenByKeyboard;
|
|
684
|
+
if (isCellMenuOpenByKeyboard) {
|
|
685
|
+
this.setState(_objectSpread(_objectSpread({}, this.state), {}, {
|
|
686
|
+
isOpenAllowed: isCellMenuOpenByKeyboard
|
|
687
|
+
}));
|
|
714
688
|
}
|
|
715
689
|
}
|
|
716
690
|
}, {
|
|
@@ -727,11 +701,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
727
701
|
isDragAndDropEnabled = _getPluginState13.isDragAndDropEnabled;
|
|
728
702
|
var items = isDragAndDropEnabled ? this.createNewContextMenuItems() : this.createOriginalContextMenuItems();
|
|
729
703
|
var isOpenAllowed = false;
|
|
730
|
-
|
|
731
|
-
isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
|
|
732
|
-
} else {
|
|
733
|
-
isOpenAllowed = isOpen;
|
|
734
|
-
}
|
|
704
|
+
isOpenAllowed = isCellMenuOpenByKeyboard ? this.state.isOpenAllowed : isOpen;
|
|
735
705
|
return (0, _react2.jsx)("div", {
|
|
736
706
|
"data-testid": "table-cell-contextual-menu",
|
|
737
707
|
onMouseLeave: this.closeSubmenu,
|
|
@@ -743,7 +713,7 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
743
713
|
,
|
|
744
714
|
arrowKeyNavigationProviderOptions: {
|
|
745
715
|
type: _uiMenu.ArrowKeyNavigationType.MENU,
|
|
746
|
-
disableArrowKeyNavigation: isCellMenuOpenByKeyboard
|
|
716
|
+
disableArrowKeyNavigation: !isCellMenuOpenByKeyboard || this.state.isSubmenuOpen
|
|
747
717
|
},
|
|
748
718
|
items: items,
|
|
749
719
|
isOpen: isOpenAllowed,
|
|
@@ -753,15 +723,15 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
|
|
|
753
723
|
onMouseLeave: this.handleItemMouseLeave,
|
|
754
724
|
fitHeight: 188,
|
|
755
725
|
fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth,
|
|
756
|
-
shouldFocusFirstItem:
|
|
726
|
+
shouldFocusFirstItem: function shouldFocusFirstItem() {
|
|
757
727
|
return Boolean(isCellMenuOpenByKeyboard);
|
|
758
|
-
}
|
|
728
|
+
},
|
|
759
729
|
boundariesElement: boundariesElement,
|
|
760
730
|
offset: offset,
|
|
761
731
|
section: isDragAndDropEnabled ? {
|
|
762
732
|
hasSeparator: true
|
|
763
733
|
} : undefined,
|
|
764
|
-
allowEnterDefaultBehavior:
|
|
734
|
+
allowEnterDefaultBehavior: this.state.isSubmenuOpen
|
|
765
735
|
}));
|
|
766
736
|
}
|
|
767
737
|
}]);
|
|
@@ -14,7 +14,6 @@ var _reactIntlNext = require("react-intl-next");
|
|
|
14
14
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
15
15
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
16
16
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
17
|
-
var _ui = require("@atlaskit/editor-common/ui");
|
|
18
17
|
var _uiColor = require("@atlaskit/editor-common/ui-color");
|
|
19
18
|
var _uiMenu = require("@atlaskit/editor-common/ui-menu");
|
|
20
19
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
@@ -193,7 +192,6 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
|
|
|
193
192
|
menuCallback: menuCallback
|
|
194
193
|
};
|
|
195
194
|
};
|
|
196
|
-
var ColorPaletteWithListeners = (0, _ui.withOuterListeners)(_uiColor.ColorPalette);
|
|
197
195
|
var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
198
196
|
var _tableMap$hasMergedCe, _pluginConfig$allowBa;
|
|
199
197
|
var _ref$direction = _ref.direction,
|
|
@@ -311,7 +309,7 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
|
311
309
|
},
|
|
312
310
|
isPopupPositioned: true,
|
|
313
311
|
isOpenedByKeyboard: isKeyboardModeActive
|
|
314
|
-
}, (0, _react2.jsx)(
|
|
312
|
+
}, (0, _react2.jsx)(_uiColor.ColorPalette, {
|
|
315
313
|
cols: _consts.colorPalletteColumns,
|
|
316
314
|
onClick: function onClick(color) {
|
|
317
315
|
setColor(color);
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -10,7 +10,6 @@ import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
|
10
10
|
import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
|
|
11
11
|
import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
|
|
12
12
|
import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
|
|
13
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
13
|
import { insertTableWithSize } from './commands/insert';
|
|
15
14
|
import { pluginConfig } from './create-plugin-config';
|
|
16
15
|
import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
|
|
@@ -387,7 +386,7 @@ const tablesPlugin = ({
|
|
|
387
386
|
allowControls
|
|
388
387
|
} = pluginConfig;
|
|
389
388
|
const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
|
|
390
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard
|
|
389
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
|
|
391
390
|
isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
|
|
392
391
|
editorView: editorView,
|
|
393
392
|
tableNode: tableNode,
|
|
@@ -2,7 +2,6 @@ import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
|
2
2
|
import { addColumnAfter, addColumnAfterVO, addColumnBefore, addColumnBeforeVO, addRowAfter, addRowAfterVO, addRowBefore, addRowBeforeVO, backspace, bindKeymapWithCommand, decreaseMediaSize, deleteColumn, deleteRow, escape, focusToContextMenuTrigger, increaseMediaSize, moveColumnLeft, moveColumnRight, moveLeft, moveRight, moveRowDown, moveRowUp, nextCell, previousCell, startColumnResizing, toggleTable } from '@atlaskit/editor-common/keymaps';
|
|
3
3
|
import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
|
|
4
4
|
import { keymap } from '@atlaskit/editor-prosemirror/keymap';
|
|
5
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
6
5
|
import { goToNextCell, moveCursorBackward, setFocusToCellMenu } from '../commands';
|
|
7
6
|
import { addRowAroundSelection, changeColumnWidthByStepWithAnalytics, deleteSelectedRowsOrColumnsWithAnalyticsViaShortcut, deleteTableIfSelectedWithAnalytics, emptyMultipleCellsWithAnalytics } from '../commands-with-analytics';
|
|
8
7
|
import { activateNextResizeArea, initiateKeyboardColumnResizing, stopKeyboardColumnResizing } from '../commands/column-resize';
|
|
@@ -65,9 +64,7 @@ export function keymapPlugin(getEditorContainerWidth, api, editorAnalyticsAPI, d
|
|
|
65
64
|
ariaNotify: ariaNotifyPlugin,
|
|
66
65
|
getIntl: getIntl
|
|
67
66
|
}), list);
|
|
68
|
-
|
|
69
|
-
bindKeymapWithCommand(focusToContextMenuTrigger.common, setFocusToCellMenu(), list);
|
|
70
|
-
}
|
|
67
|
+
bindKeymapWithCommand(focusToContextMenuTrigger.common, setFocusToCellMenu(), list);
|
|
71
68
|
return keymap(list);
|
|
72
69
|
}
|
|
73
70
|
export default keymapPlugin;
|
|
@@ -16,7 +16,6 @@ import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
|
|
|
16
16
|
import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
|
|
17
17
|
import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
|
|
18
18
|
import ExpandIcon from '@atlaskit/icon/utility/migration/chevron-down';
|
|
19
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
20
19
|
import { toggleContextualMenu } from '../../commands';
|
|
21
20
|
import { TableCssClassName as ClassName } from '../../types';
|
|
22
21
|
import FixedButton from './FixedButton';
|
|
@@ -55,15 +54,13 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
|
|
|
55
54
|
let targetCellRef;
|
|
56
55
|
targetCellRef = findDomRefAtPos(targetCellPosition, domAtPos);
|
|
57
56
|
useEffect(() => {
|
|
58
|
-
if (
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
toggleContextualMenu()(state, dispatch);
|
|
66
|
-
}
|
|
57
|
+
if (isCellMenuOpenByKeyboard && !isContextualMenuOpen) {
|
|
58
|
+
const {
|
|
59
|
+
state,
|
|
60
|
+
dispatch
|
|
61
|
+
} = editorView;
|
|
62
|
+
// open the menu when the keyboard shortcut is pressed
|
|
63
|
+
toggleContextualMenu()(state, dispatch);
|
|
67
64
|
}
|
|
68
65
|
}, [isCellMenuOpenByKeyboard, isContextualMenuOpen, editorView]);
|
|
69
66
|
if (!targetCellRef || !(targetCellRef instanceof HTMLElement)) {
|
|
@@ -82,7 +79,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
|
|
|
82
79
|
className: ClassName.CONTEXTUAL_MENU_BUTTON,
|
|
83
80
|
selected: isContextualMenuOpen,
|
|
84
81
|
title: labelCellOptions,
|
|
85
|
-
keymap:
|
|
82
|
+
keymap: focusToContextMenuTrigger,
|
|
86
83
|
onClick: handleClick,
|
|
87
84
|
iconBefore: jsx(ExpandIcon, {
|
|
88
85
|
label: "",
|
|
@@ -90,7 +87,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
|
|
|
90
87
|
isFacadeDisabled: true
|
|
91
88
|
}),
|
|
92
89
|
"aria-label": labelCellOptions,
|
|
93
|
-
"aria-expanded":
|
|
90
|
+
"aria-expanded": isContextualMenuOpen
|
|
94
91
|
}));
|
|
95
92
|
const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
|
|
96
93
|
if (stickyHeader && parentSticky && tableWrapper) {
|