@atlaskit/editor-plugin-table 10.8.1 → 10.8.2
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 +10 -0
- package/dist/cjs/pm-plugins/table-size-selector.js +40 -0
- package/dist/cjs/tablePlugin.js +63 -32
- package/dist/cjs/ui/SizeSelector/index.js +65 -0
- package/dist/es2019/pm-plugins/table-size-selector.js +31 -0
- package/dist/es2019/tablePlugin.js +33 -3
- package/dist/es2019/ui/SizeSelector/index.js +61 -0
- package/dist/esm/pm-plugins/table-size-selector.js +33 -0
- package/dist/esm/tablePlugin.js +63 -32
- package/dist/esm/ui/SizeSelector/index.js +58 -0
- package/dist/types/pm-plugins/table-size-selector.d.ts +10 -0
- package/dist/types/ui/SizeSelector/index.d.ts +9 -0
- package/dist/types-ts4.5/pm-plugins/table-size-selector.d.ts +10 -0
- package/dist/types-ts4.5/ui/SizeSelector/index.d.ts +9 -0
- package/package.json +9 -3
- package/src/pm-plugins/table-size-selector.ts +39 -0
- package/src/tablePlugin.tsx +49 -0
- package/src/ui/SizeSelector/index.tsx +74 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 10.8.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#142852](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142852)
|
|
8
|
+
[`ca0f841e860ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca0f841e860ab) -
|
|
9
|
+
[ux] [ED-27466] When table option in quick insert typeahead is selected, shows table size picker
|
|
10
|
+
allow user selecting the table size before inserting
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
|
|
3
13
|
## 10.8.1
|
|
4
14
|
|
|
5
15
|
### Patch Changes
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.pluginKey = exports.createPlugin = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
10
|
+
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
11
|
+
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; }
|
|
12
|
+
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; }
|
|
13
|
+
var pluginKey = exports.pluginKey = new _state.PluginKey('tableSizeSelectorPlugin');
|
|
14
|
+
var createPlugin = exports.createPlugin = function createPlugin(dispatch) {
|
|
15
|
+
return new _safePlugin.SafePlugin({
|
|
16
|
+
key: pluginKey,
|
|
17
|
+
state: {
|
|
18
|
+
init: function init() {
|
|
19
|
+
return {
|
|
20
|
+
isSelectorOpen: false
|
|
21
|
+
};
|
|
22
|
+
},
|
|
23
|
+
apply: function apply(tr, currentPluginState) {
|
|
24
|
+
var meta = tr.getMeta(pluginKey);
|
|
25
|
+
if (meta) {
|
|
26
|
+
var keys = Object.keys(meta);
|
|
27
|
+
var changed = keys.some(function (key) {
|
|
28
|
+
return currentPluginState[key] !== meta[key];
|
|
29
|
+
});
|
|
30
|
+
if (changed) {
|
|
31
|
+
var newState = _objectSpread(_objectSpread({}, currentPluginState), meta);
|
|
32
|
+
dispatch(pluginKey, newState);
|
|
33
|
+
return newState;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
return currentPluginState;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
});
|
|
40
|
+
};
|
package/dist/cjs/tablePlugin.js
CHANGED
|
@@ -12,6 +12,7 @@ var _adfSchema = require("@atlaskit/adf-schema");
|
|
|
12
12
|
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
13
13
|
var _browser = require("@atlaskit/editor-common/browser");
|
|
14
14
|
var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
|
|
15
|
+
var _getDomRefFromSelection = require("@atlaskit/editor-common/get-dom-ref-from-selection");
|
|
15
16
|
var _hooks = require("@atlaskit/editor-common/hooks");
|
|
16
17
|
var _icons = require("@atlaskit/editor-common/icons");
|
|
17
18
|
var _keymaps = require("@atlaskit/editor-common/keymaps");
|
|
@@ -48,6 +49,7 @@ var _plugin5 = require("./pm-plugins/table-resizing/plugin");
|
|
|
48
49
|
var _pluginFactory2 = require("./pm-plugins/table-resizing/plugin-factory");
|
|
49
50
|
var _pluginKey5 = require("./pm-plugins/table-resizing/plugin-key");
|
|
50
51
|
var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
|
|
52
|
+
var _tableSizeSelector = require("./pm-plugins/table-size-selector");
|
|
51
53
|
var _tableWidth = require("./pm-plugins/table-width");
|
|
52
54
|
var _tableWidthInCommentFix = require("./pm-plugins/table-width-in-comment-fix");
|
|
53
55
|
var _create = require("./pm-plugins/utils/create");
|
|
@@ -59,6 +61,7 @@ var _FloatingDragMenu = _interopRequireDefault(require("./ui/FloatingDragMenu"))
|
|
|
59
61
|
var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertButton"));
|
|
60
62
|
var _FloatingToolbarLabel = require("./ui/FloatingToolbarLabel/FloatingToolbarLabel");
|
|
61
63
|
var _globalStyles = require("./ui/global-styles");
|
|
64
|
+
var _SizeSelector = require("./ui/SizeSelector");
|
|
62
65
|
var _TableFullWidthLabel = require("./ui/TableFullWidthLabel");
|
|
63
66
|
var _toolbar = require("./ui/toolbar");
|
|
64
67
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
@@ -75,7 +78,7 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
|
|
|
75
78
|
* from `@atlaskit/editor-core`.
|
|
76
79
|
*/
|
|
77
80
|
var tablePlugin = function tablePlugin(_ref) {
|
|
78
|
-
var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _api$analytics2;
|
|
81
|
+
var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
|
|
79
82
|
var options = _ref.config,
|
|
80
83
|
api = _ref.api;
|
|
81
84
|
var editorViewRef = {
|
|
@@ -92,6 +95,9 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
92
95
|
var isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 || (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
|
|
93
96
|
var shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
94
97
|
options === null || options === void 0 ? void 0 : options.isCommentEditor));
|
|
98
|
+
var isTableSelectorEnabled =
|
|
99
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
100
|
+
!(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 || (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_table_picker');
|
|
95
101
|
return {
|
|
96
102
|
name: 'table',
|
|
97
103
|
// Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
|
|
@@ -395,6 +401,12 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
395
401
|
}
|
|
396
402
|
});
|
|
397
403
|
}
|
|
404
|
+
}, {
|
|
405
|
+
name: 'tableSizeSelectorPlugin',
|
|
406
|
+
plugin: function plugin(_ref19) {
|
|
407
|
+
var dispatch = _ref19.dispatch;
|
|
408
|
+
return isTableSelectorEnabled ? (0, _tableSizeSelector.createPlugin)(dispatch) : undefined;
|
|
409
|
+
}
|
|
398
410
|
}];
|
|
399
411
|
|
|
400
412
|
// Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
|
|
@@ -409,13 +421,13 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
409
421
|
}
|
|
410
422
|
return plugins;
|
|
411
423
|
},
|
|
412
|
-
contentComponent: function contentComponent(
|
|
424
|
+
contentComponent: function contentComponent(_ref20) {
|
|
413
425
|
var _api$featureFlags;
|
|
414
|
-
var editorView =
|
|
415
|
-
popupsMountPoint =
|
|
416
|
-
popupsBoundariesElement =
|
|
417
|
-
popupsScrollableElement =
|
|
418
|
-
dispatchAnalyticsEvent =
|
|
426
|
+
var editorView = _ref20.editorView,
|
|
427
|
+
popupsMountPoint = _ref20.popupsMountPoint,
|
|
428
|
+
popupsBoundariesElement = _ref20.popupsBoundariesElement,
|
|
429
|
+
popupsScrollableElement = _ref20.popupsScrollableElement,
|
|
430
|
+
dispatchAnalyticsEvent = _ref20.dispatchAnalyticsEvent;
|
|
419
431
|
return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
|
|
420
432
|
component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
|
|
421
433
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
@@ -431,34 +443,38 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
431
443
|
tableWidthPluginState: _tableWidth.pluginKey,
|
|
432
444
|
tableResizingPluginState: _pluginKey5.pluginKey,
|
|
433
445
|
stickyHeadersState: _pluginKey4.pluginKey,
|
|
434
|
-
dragAndDropState: _pluginKey2.pluginKey
|
|
446
|
+
dragAndDropState: _pluginKey2.pluginKey,
|
|
447
|
+
sizeSelectorPluginState: _tableSizeSelector.pluginKey
|
|
435
448
|
},
|
|
436
|
-
render: function render(
|
|
437
|
-
var
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
449
|
+
render: function render(_ref21) {
|
|
450
|
+
var _sizeSelectorPluginSt, _api$analytics3;
|
|
451
|
+
var resizingPluginState = _ref21.tableResizingPluginState,
|
|
452
|
+
stickyHeadersState = _ref21.stickyHeadersState,
|
|
453
|
+
tablePluginState = _ref21.tablePluginState,
|
|
454
|
+
tableWidthPluginState = _ref21.tableWidthPluginState,
|
|
455
|
+
dragAndDropState = _ref21.dragAndDropState,
|
|
456
|
+
sizeSelectorPluginState = _ref21.sizeSelectorPluginState;
|
|
442
457
|
var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
|
|
443
458
|
var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
|
|
444
459
|
var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
|
|
445
460
|
var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
|
|
446
461
|
var isResizing = isColumnResizing || isTableResizing;
|
|
447
462
|
var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
|
|
448
|
-
var
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
463
|
+
var isSizeSelectorOpen = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen;
|
|
464
|
+
var _ref22 = tablePluginState,
|
|
465
|
+
tableNode = _ref22.tableNode,
|
|
466
|
+
tablePos = _ref22.tablePos,
|
|
467
|
+
targetCellPosition = _ref22.targetCellPosition,
|
|
468
|
+
isContextualMenuOpen = _ref22.isContextualMenuOpen,
|
|
469
|
+
tableRef = _ref22.tableRef,
|
|
470
|
+
pluginConfig = _ref22.pluginConfig,
|
|
471
|
+
insertColumnButtonIndex = _ref22.insertColumnButtonIndex,
|
|
472
|
+
insertRowButtonIndex = _ref22.insertRowButtonIndex,
|
|
473
|
+
isHeaderColumnEnabled = _ref22.isHeaderColumnEnabled,
|
|
474
|
+
isHeaderRowEnabled = _ref22.isHeaderRowEnabled,
|
|
475
|
+
isDragAndDropEnabled = _ref22.isDragAndDropEnabled,
|
|
476
|
+
tableWrapperTarget = _ref22.tableWrapperTarget,
|
|
477
|
+
isCellMenuOpenByKeyboard = _ref22.isCellMenuOpenByKeyboard;
|
|
462
478
|
var allowControls = pluginConfig.allowControls;
|
|
463
479
|
var stickyHeader = stickyHeadersState ? (0, _util.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
|
|
464
480
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
|
|
@@ -548,13 +564,20 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
548
564
|
forcePlacement: true,
|
|
549
565
|
zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
|
|
550
566
|
offset: [0, 10]
|
|
567
|
+
}), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/_react.default.createElement(_SizeSelector.SizeSelector, {
|
|
568
|
+
api: api,
|
|
569
|
+
isOpenedByKeyboard: false,
|
|
570
|
+
popupsMountPoint: popupsMountPoint,
|
|
571
|
+
target: (_sizeSelectorPluginSt = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef) !== null && _sizeSelectorPluginSt !== void 0 ? _sizeSelectorPluginSt : (0, _getDomRefFromSelection.getDomRefFromSelection)(editorView, _analytics.ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent),
|
|
572
|
+
popupsBoundariesElement: popupsBoundariesElement,
|
|
573
|
+
popupsScrollableElement: popupsScrollableElement
|
|
551
574
|
}));
|
|
552
575
|
}
|
|
553
576
|
}));
|
|
554
577
|
},
|
|
555
578
|
pluginsOptions: {
|
|
556
|
-
quickInsert: function quickInsert(
|
|
557
|
-
var formatMessage =
|
|
579
|
+
quickInsert: function quickInsert(_ref23) {
|
|
580
|
+
var formatMessage = _ref23.formatMessage;
|
|
558
581
|
return [{
|
|
559
582
|
id: 'table',
|
|
560
583
|
title: formatMessage(_messages.toolbarInsertBlockMessages.table),
|
|
@@ -567,6 +590,14 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
567
590
|
},
|
|
568
591
|
action: function action(insert, state) {
|
|
569
592
|
var _api$table, _options$tableOptions6;
|
|
593
|
+
if (isTableSelectorEnabled) {
|
|
594
|
+
var _tr = insert('');
|
|
595
|
+
_tr.setMeta(_tableSizeSelector.pluginKey, {
|
|
596
|
+
isSelectorOpen: true
|
|
597
|
+
});
|
|
598
|
+
return _tr;
|
|
599
|
+
}
|
|
600
|
+
|
|
570
601
|
// see comment on tablesPlugin.getSharedState on usage
|
|
571
602
|
var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
|
|
572
603
|
var tableNodeProps = {
|
|
@@ -617,8 +648,8 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
617
648
|
return editorViewRef.current;
|
|
618
649
|
}, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
|
|
619
650
|
},
|
|
620
|
-
usePluginHook: function usePluginHook(
|
|
621
|
-
var editorView =
|
|
651
|
+
usePluginHook: function usePluginHook(_ref24) {
|
|
652
|
+
var editorView = _ref24.editorView;
|
|
622
653
|
var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['editorViewMode']),
|
|
623
654
|
editorViewModeState = _useSharedPluginState.editorViewModeState;
|
|
624
655
|
var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.SizeSelector = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _react2 = require("@emotion/react");
|
|
9
|
+
var _ui = require("@atlaskit/editor-common/ui");
|
|
10
|
+
var _tableSizeSelector = require("../../pm-plugins/table-size-selector");
|
|
11
|
+
/**
|
|
12
|
+
* @jsxRuntime classic
|
|
13
|
+
* @jsx jsx
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
17
|
+
|
|
18
|
+
var DEFAULT_TABLE_SELECTOR_COLS = 3;
|
|
19
|
+
var DEFAULT_TABLE_SELECTOR_ROWS = 3;
|
|
20
|
+
var SizeSelector = exports.SizeSelector = function SizeSelector(_ref) {
|
|
21
|
+
var api = _ref.api,
|
|
22
|
+
target = _ref.target,
|
|
23
|
+
popupsMountPoint = _ref.popupsMountPoint,
|
|
24
|
+
popupsBoundariesElement = _ref.popupsBoundariesElement,
|
|
25
|
+
popupsScrollableElement = _ref.popupsScrollableElement;
|
|
26
|
+
var closeSelectorPopup = (0, _react.useCallback)(function () {
|
|
27
|
+
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
|
|
28
|
+
var tr = _ref2.tr;
|
|
29
|
+
tr.setMeta(_tableSizeSelector.pluginKey, {
|
|
30
|
+
isSelectorOpen: false
|
|
31
|
+
});
|
|
32
|
+
return tr;
|
|
33
|
+
});
|
|
34
|
+
}, [api]);
|
|
35
|
+
var onSelection = (0, _react.useCallback)(function (rowsCount, colsCount) {
|
|
36
|
+
api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
|
|
37
|
+
var tr = _ref3.tr;
|
|
38
|
+
api === null || api === void 0 || api.table.commands.insertTableWithSize(rowsCount, colsCount)({
|
|
39
|
+
tr: tr
|
|
40
|
+
});
|
|
41
|
+
tr.setMeta(_tableSizeSelector.pluginKey, {
|
|
42
|
+
isSelectorOpen: false
|
|
43
|
+
});
|
|
44
|
+
return tr;
|
|
45
|
+
});
|
|
46
|
+
}, [api]);
|
|
47
|
+
var onUnmount = function onUnmount() {
|
|
48
|
+
api === null || api === void 0 || api.core.actions.focus();
|
|
49
|
+
};
|
|
50
|
+
return (0, _react2.jsx)(_ui.TableSelectorPopup, {
|
|
51
|
+
defaultSize: {
|
|
52
|
+
row: DEFAULT_TABLE_SELECTOR_ROWS,
|
|
53
|
+
col: DEFAULT_TABLE_SELECTOR_COLS
|
|
54
|
+
},
|
|
55
|
+
target: target,
|
|
56
|
+
onUnmount: onUnmount,
|
|
57
|
+
onSelection: onSelection,
|
|
58
|
+
popupsMountPoint: popupsMountPoint,
|
|
59
|
+
popupsScrollableElement: popupsScrollableElement,
|
|
60
|
+
popupsBoundariesElement: popupsBoundariesElement,
|
|
61
|
+
isOpenedByKeyboard: true,
|
|
62
|
+
handleClickOutside: closeSelectorPopup,
|
|
63
|
+
handleEscapeKeydown: closeSelectorPopup
|
|
64
|
+
});
|
|
65
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
2
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
3
|
+
export const pluginKey = new PluginKey('tableSizeSelectorPlugin');
|
|
4
|
+
export const createPlugin = dispatch => {
|
|
5
|
+
return new SafePlugin({
|
|
6
|
+
key: pluginKey,
|
|
7
|
+
state: {
|
|
8
|
+
init: () => ({
|
|
9
|
+
isSelectorOpen: false
|
|
10
|
+
}),
|
|
11
|
+
apply: (tr, currentPluginState) => {
|
|
12
|
+
const meta = tr.getMeta(pluginKey);
|
|
13
|
+
if (meta) {
|
|
14
|
+
const keys = Object.keys(meta);
|
|
15
|
+
const changed = keys.some(key => {
|
|
16
|
+
return currentPluginState[key] !== meta[key];
|
|
17
|
+
});
|
|
18
|
+
if (changed) {
|
|
19
|
+
const newState = {
|
|
20
|
+
...currentPluginState,
|
|
21
|
+
...meta
|
|
22
|
+
};
|
|
23
|
+
dispatch(pluginKey, newState);
|
|
24
|
+
return newState;
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return currentPluginState;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
};
|
|
@@ -3,6 +3,7 @@ import { tableCell, tableCellWithNestedTable, tableHeader, tableHeaderWithNested
|
|
|
3
3
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
|
|
4
4
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
5
5
|
import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
|
|
6
|
+
import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
|
|
6
7
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
7
8
|
import { IconTable } from '@atlaskit/editor-common/icons';
|
|
8
9
|
import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
|
|
@@ -39,6 +40,7 @@ import { createPlugin as createFlexiResizingPlugin } from './pm-plugins/table-re
|
|
|
39
40
|
import { getPluginState as getFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin-factory';
|
|
40
41
|
import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing/plugin-key';
|
|
41
42
|
import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
|
|
43
|
+
import { createPlugin as createSizeSelectorPlugin, pluginKey as sizeSelectorPluginKey } from './pm-plugins/table-size-selector';
|
|
42
44
|
import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
|
|
43
45
|
import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
|
|
44
46
|
import { createTableWithWidth } from './pm-plugins/utils/create';
|
|
@@ -52,6 +54,7 @@ import FloatingDragMenu from './ui/FloatingDragMenu';
|
|
|
52
54
|
import FloatingInsertButton from './ui/FloatingInsertButton';
|
|
53
55
|
import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
|
|
54
56
|
import { GlobalStylesWrapper } from './ui/global-styles';
|
|
57
|
+
import { SizeSelector } from './ui/SizeSelector';
|
|
55
58
|
import { FullWidthDisplay } from './ui/TableFullWidthLabel';
|
|
56
59
|
import { getToolbarConfig } from './ui/toolbar';
|
|
57
60
|
const defaultGetEditorFeatureFlags = () => ({});
|
|
@@ -64,7 +67,7 @@ const tablePlugin = ({
|
|
|
64
67
|
config: options,
|
|
65
68
|
api
|
|
66
69
|
}) => {
|
|
67
|
-
var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _api$analytics2;
|
|
70
|
+
var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
|
|
68
71
|
const editorViewRef = {
|
|
69
72
|
current: null
|
|
70
73
|
};
|
|
@@ -79,6 +82,9 @@ const tablePlugin = ({
|
|
|
79
82
|
const isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 ? void 0 : (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
|
|
80
83
|
const shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
81
84
|
options === null || options === void 0 ? void 0 : options.isCommentEditor));
|
|
85
|
+
const isTableSelectorEnabled =
|
|
86
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
87
|
+
!(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 ? void 0 : (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_table_picker');
|
|
82
88
|
return {
|
|
83
89
|
name: 'table',
|
|
84
90
|
// Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
|
|
@@ -383,6 +389,11 @@ const tablePlugin = ({
|
|
|
383
389
|
}
|
|
384
390
|
});
|
|
385
391
|
}
|
|
392
|
+
}, {
|
|
393
|
+
name: 'tableSizeSelectorPlugin',
|
|
394
|
+
plugin: ({
|
|
395
|
+
dispatch
|
|
396
|
+
}) => isTableSelectorEnabled ? createSizeSelectorPlugin(dispatch) : undefined
|
|
386
397
|
}];
|
|
387
398
|
|
|
388
399
|
// Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
|
|
@@ -420,21 +431,25 @@ const tablePlugin = ({
|
|
|
420
431
|
tableWidthPluginState: tableWidthPluginKey,
|
|
421
432
|
tableResizingPluginState: tableResizingPluginKey,
|
|
422
433
|
stickyHeadersState: stickyHeadersPluginKey,
|
|
423
|
-
dragAndDropState: dragAndDropPluginKey
|
|
434
|
+
dragAndDropState: dragAndDropPluginKey,
|
|
435
|
+
sizeSelectorPluginState: sizeSelectorPluginKey
|
|
424
436
|
},
|
|
425
437
|
render: ({
|
|
426
438
|
tableResizingPluginState: resizingPluginState,
|
|
427
439
|
stickyHeadersState,
|
|
428
440
|
tablePluginState,
|
|
429
441
|
tableWidthPluginState,
|
|
430
|
-
dragAndDropState
|
|
442
|
+
dragAndDropState,
|
|
443
|
+
sizeSelectorPluginState
|
|
431
444
|
}) => {
|
|
445
|
+
var _sizeSelectorPluginSt, _api$analytics3;
|
|
432
446
|
const isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
|
|
433
447
|
const isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
|
|
434
448
|
const resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
|
|
435
449
|
const resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
|
|
436
450
|
const isResizing = isColumnResizing || isTableResizing;
|
|
437
451
|
const widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
|
|
452
|
+
const isSizeSelectorOpen = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen;
|
|
438
453
|
const {
|
|
439
454
|
tableNode,
|
|
440
455
|
tablePos,
|
|
@@ -543,6 +558,13 @@ const tablePlugin = ({
|
|
|
543
558
|
forcePlacement: true,
|
|
544
559
|
zIndex: akEditorFloatingPanelZIndex,
|
|
545
560
|
offset: [0, 10]
|
|
561
|
+
}), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/React.createElement(SizeSelector, {
|
|
562
|
+
api: api,
|
|
563
|
+
isOpenedByKeyboard: false,
|
|
564
|
+
popupsMountPoint: popupsMountPoint,
|
|
565
|
+
target: (_sizeSelectorPluginSt = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef) !== null && _sizeSelectorPluginSt !== void 0 ? _sizeSelectorPluginSt : getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent),
|
|
566
|
+
popupsBoundariesElement: popupsBoundariesElement,
|
|
567
|
+
popupsScrollableElement: popupsScrollableElement
|
|
546
568
|
}));
|
|
547
569
|
}
|
|
548
570
|
}));
|
|
@@ -560,6 +582,14 @@ const tablePlugin = ({
|
|
|
560
582
|
icon: () => /*#__PURE__*/React.createElement(IconTable, null),
|
|
561
583
|
action(insert, state) {
|
|
562
584
|
var _api$table, _options$tableOptions6;
|
|
585
|
+
if (isTableSelectorEnabled) {
|
|
586
|
+
const tr = insert('');
|
|
587
|
+
tr.setMeta(sizeSelectorPluginKey, {
|
|
588
|
+
isSelectorOpen: true
|
|
589
|
+
});
|
|
590
|
+
return tr;
|
|
591
|
+
}
|
|
592
|
+
|
|
563
593
|
// see comment on tablesPlugin.getSharedState on usage
|
|
564
594
|
const tableState = api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
|
|
565
595
|
const tableNodeProps = {
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { useCallback } from 'react';
|
|
6
|
+
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
8
|
+
import { jsx } from '@emotion/react';
|
|
9
|
+
import { TableSelectorPopup } from '@atlaskit/editor-common/ui';
|
|
10
|
+
import { pluginKey } from '../../pm-plugins/table-size-selector';
|
|
11
|
+
const DEFAULT_TABLE_SELECTOR_COLS = 3;
|
|
12
|
+
const DEFAULT_TABLE_SELECTOR_ROWS = 3;
|
|
13
|
+
export const SizeSelector = ({
|
|
14
|
+
api,
|
|
15
|
+
target,
|
|
16
|
+
popupsMountPoint,
|
|
17
|
+
popupsBoundariesElement,
|
|
18
|
+
popupsScrollableElement
|
|
19
|
+
}) => {
|
|
20
|
+
const closeSelectorPopup = useCallback(() => {
|
|
21
|
+
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
|
|
22
|
+
tr
|
|
23
|
+
}) => {
|
|
24
|
+
tr.setMeta(pluginKey, {
|
|
25
|
+
isSelectorOpen: false
|
|
26
|
+
});
|
|
27
|
+
return tr;
|
|
28
|
+
});
|
|
29
|
+
}, [api]);
|
|
30
|
+
const onSelection = useCallback((rowsCount, colsCount) => {
|
|
31
|
+
api === null || api === void 0 ? void 0 : api.core.actions.execute(({
|
|
32
|
+
tr
|
|
33
|
+
}) => {
|
|
34
|
+
api === null || api === void 0 ? void 0 : api.table.commands.insertTableWithSize(rowsCount, colsCount)({
|
|
35
|
+
tr
|
|
36
|
+
});
|
|
37
|
+
tr.setMeta(pluginKey, {
|
|
38
|
+
isSelectorOpen: false
|
|
39
|
+
});
|
|
40
|
+
return tr;
|
|
41
|
+
});
|
|
42
|
+
}, [api]);
|
|
43
|
+
const onUnmount = () => {
|
|
44
|
+
api === null || api === void 0 ? void 0 : api.core.actions.focus();
|
|
45
|
+
};
|
|
46
|
+
return jsx(TableSelectorPopup, {
|
|
47
|
+
defaultSize: {
|
|
48
|
+
row: DEFAULT_TABLE_SELECTOR_ROWS,
|
|
49
|
+
col: DEFAULT_TABLE_SELECTOR_COLS
|
|
50
|
+
},
|
|
51
|
+
target: target,
|
|
52
|
+
onUnmount: onUnmount,
|
|
53
|
+
onSelection: onSelection,
|
|
54
|
+
popupsMountPoint: popupsMountPoint,
|
|
55
|
+
popupsScrollableElement: popupsScrollableElement,
|
|
56
|
+
popupsBoundariesElement: popupsBoundariesElement,
|
|
57
|
+
isOpenedByKeyboard: true,
|
|
58
|
+
handleClickOutside: closeSelectorPopup,
|
|
59
|
+
handleEscapeKeydown: closeSelectorPopup
|
|
60
|
+
});
|
|
61
|
+
};
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
+
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; }
|
|
3
|
+
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; }
|
|
4
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
5
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
6
|
+
export var pluginKey = new PluginKey('tableSizeSelectorPlugin');
|
|
7
|
+
export var createPlugin = function createPlugin(dispatch) {
|
|
8
|
+
return new SafePlugin({
|
|
9
|
+
key: pluginKey,
|
|
10
|
+
state: {
|
|
11
|
+
init: function init() {
|
|
12
|
+
return {
|
|
13
|
+
isSelectorOpen: false
|
|
14
|
+
};
|
|
15
|
+
},
|
|
16
|
+
apply: function apply(tr, currentPluginState) {
|
|
17
|
+
var meta = tr.getMeta(pluginKey);
|
|
18
|
+
if (meta) {
|
|
19
|
+
var keys = Object.keys(meta);
|
|
20
|
+
var changed = keys.some(function (key) {
|
|
21
|
+
return currentPluginState[key] !== meta[key];
|
|
22
|
+
});
|
|
23
|
+
if (changed) {
|
|
24
|
+
var newState = _objectSpread(_objectSpread({}, currentPluginState), meta);
|
|
25
|
+
dispatch(pluginKey, newState);
|
|
26
|
+
return newState;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
return currentPluginState;
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
};
|
package/dist/esm/tablePlugin.js
CHANGED
|
@@ -6,6 +6,7 @@ import { tableCell, tableCellWithNestedTable, tableHeader, tableHeaderWithNested
|
|
|
6
6
|
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
|
|
7
7
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
8
8
|
import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
|
|
9
|
+
import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
|
|
9
10
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
10
11
|
import { IconTable } from '@atlaskit/editor-common/icons';
|
|
11
12
|
import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
|
|
@@ -42,6 +43,7 @@ import { createPlugin as createFlexiResizingPlugin } from './pm-plugins/table-re
|
|
|
42
43
|
import { getPluginState as getFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin-factory';
|
|
43
44
|
import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing/plugin-key';
|
|
44
45
|
import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
|
|
46
|
+
import { createPlugin as createSizeSelectorPlugin, pluginKey as sizeSelectorPluginKey } from './pm-plugins/table-size-selector';
|
|
45
47
|
import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
|
|
46
48
|
import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
|
|
47
49
|
import { createTableWithWidth } from './pm-plugins/utils/create';
|
|
@@ -55,6 +57,7 @@ import FloatingDragMenu from './ui/FloatingDragMenu';
|
|
|
55
57
|
import FloatingInsertButton from './ui/FloatingInsertButton';
|
|
56
58
|
import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
|
|
57
59
|
import { GlobalStylesWrapper } from './ui/global-styles';
|
|
60
|
+
import { SizeSelector } from './ui/SizeSelector';
|
|
58
61
|
import { FullWidthDisplay } from './ui/TableFullWidthLabel';
|
|
59
62
|
import { getToolbarConfig } from './ui/toolbar';
|
|
60
63
|
var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
|
|
@@ -66,7 +69,7 @@ var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
|
|
|
66
69
|
* from `@atlaskit/editor-core`.
|
|
67
70
|
*/
|
|
68
71
|
var tablePlugin = function tablePlugin(_ref) {
|
|
69
|
-
var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _api$analytics2;
|
|
72
|
+
var _api$analytics, _api$accessibilityUti, _options$getEditorFea, _options$getEditorFea2, _api$analytics2;
|
|
70
73
|
var options = _ref.config,
|
|
71
74
|
api = _ref.api;
|
|
72
75
|
var editorViewRef = {
|
|
@@ -83,6 +86,9 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
83
86
|
var isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 || (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
|
|
84
87
|
var shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
85
88
|
options === null || options === void 0 ? void 0 : options.isCommentEditor));
|
|
89
|
+
var isTableSelectorEnabled =
|
|
90
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
91
|
+
!(options !== null && options !== void 0 && options.isChromelessEditor) && !(options !== null && options !== void 0 && options.isCommentEditor) && (options === null || options === void 0 || (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableSelector) && editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_table_picker');
|
|
86
92
|
return {
|
|
87
93
|
name: 'table',
|
|
88
94
|
// Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
|
|
@@ -386,6 +392,12 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
386
392
|
}
|
|
387
393
|
});
|
|
388
394
|
}
|
|
395
|
+
}, {
|
|
396
|
+
name: 'tableSizeSelectorPlugin',
|
|
397
|
+
plugin: function plugin(_ref19) {
|
|
398
|
+
var dispatch = _ref19.dispatch;
|
|
399
|
+
return isTableSelectorEnabled ? createSizeSelectorPlugin(dispatch) : undefined;
|
|
400
|
+
}
|
|
389
401
|
}];
|
|
390
402
|
|
|
391
403
|
// Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
|
|
@@ -400,13 +412,13 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
400
412
|
}
|
|
401
413
|
return plugins;
|
|
402
414
|
},
|
|
403
|
-
contentComponent: function contentComponent(
|
|
415
|
+
contentComponent: function contentComponent(_ref20) {
|
|
404
416
|
var _api$featureFlags;
|
|
405
|
-
var editorView =
|
|
406
|
-
popupsMountPoint =
|
|
407
|
-
popupsBoundariesElement =
|
|
408
|
-
popupsScrollableElement =
|
|
409
|
-
dispatchAnalyticsEvent =
|
|
417
|
+
var editorView = _ref20.editorView,
|
|
418
|
+
popupsMountPoint = _ref20.popupsMountPoint,
|
|
419
|
+
popupsBoundariesElement = _ref20.popupsBoundariesElement,
|
|
420
|
+
popupsScrollableElement = _ref20.popupsScrollableElement,
|
|
421
|
+
dispatchAnalyticsEvent = _ref20.dispatchAnalyticsEvent;
|
|
410
422
|
return /*#__PURE__*/React.createElement(ErrorBoundary, {
|
|
411
423
|
component: ACTION_SUBJECT.TABLES_PLUGIN,
|
|
412
424
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
@@ -422,34 +434,38 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
422
434
|
tableWidthPluginState: tableWidthPluginKey,
|
|
423
435
|
tableResizingPluginState: tableResizingPluginKey,
|
|
424
436
|
stickyHeadersState: stickyHeadersPluginKey,
|
|
425
|
-
dragAndDropState: dragAndDropPluginKey
|
|
437
|
+
dragAndDropState: dragAndDropPluginKey,
|
|
438
|
+
sizeSelectorPluginState: sizeSelectorPluginKey
|
|
426
439
|
},
|
|
427
|
-
render: function render(
|
|
428
|
-
var
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
432
|
-
|
|
440
|
+
render: function render(_ref21) {
|
|
441
|
+
var _sizeSelectorPluginSt, _api$analytics3;
|
|
442
|
+
var resizingPluginState = _ref21.tableResizingPluginState,
|
|
443
|
+
stickyHeadersState = _ref21.stickyHeadersState,
|
|
444
|
+
tablePluginState = _ref21.tablePluginState,
|
|
445
|
+
tableWidthPluginState = _ref21.tableWidthPluginState,
|
|
446
|
+
dragAndDropState = _ref21.dragAndDropState,
|
|
447
|
+
sizeSelectorPluginState = _ref21.sizeSelectorPluginState;
|
|
433
448
|
var isColumnResizing = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
|
|
434
449
|
var isTableResizing = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.resizing;
|
|
435
450
|
var resizingTableLocalId = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableLocalId;
|
|
436
451
|
var resizingTableRef = tableWidthPluginState === null || tableWidthPluginState === void 0 ? void 0 : tableWidthPluginState.tableRef;
|
|
437
452
|
var isResizing = isColumnResizing || isTableResizing;
|
|
438
453
|
var widthToWidest = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.widthToWidest;
|
|
439
|
-
var
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
454
|
+
var isSizeSelectorOpen = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.isSelectorOpen;
|
|
455
|
+
var _ref22 = tablePluginState,
|
|
456
|
+
tableNode = _ref22.tableNode,
|
|
457
|
+
tablePos = _ref22.tablePos,
|
|
458
|
+
targetCellPosition = _ref22.targetCellPosition,
|
|
459
|
+
isContextualMenuOpen = _ref22.isContextualMenuOpen,
|
|
460
|
+
tableRef = _ref22.tableRef,
|
|
461
|
+
pluginConfig = _ref22.pluginConfig,
|
|
462
|
+
insertColumnButtonIndex = _ref22.insertColumnButtonIndex,
|
|
463
|
+
insertRowButtonIndex = _ref22.insertRowButtonIndex,
|
|
464
|
+
isHeaderColumnEnabled = _ref22.isHeaderColumnEnabled,
|
|
465
|
+
isHeaderRowEnabled = _ref22.isHeaderRowEnabled,
|
|
466
|
+
isDragAndDropEnabled = _ref22.isDragAndDropEnabled,
|
|
467
|
+
tableWrapperTarget = _ref22.tableWrapperTarget,
|
|
468
|
+
isCellMenuOpenByKeyboard = _ref22.isCellMenuOpenByKeyboard;
|
|
453
469
|
var allowControls = pluginConfig.allowControls;
|
|
454
470
|
var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePos) : undefined;
|
|
455
471
|
return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
|
|
@@ -539,13 +555,20 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
539
555
|
forcePlacement: true,
|
|
540
556
|
zIndex: akEditorFloatingPanelZIndex,
|
|
541
557
|
offset: [0, 10]
|
|
558
|
+
}), isTableSelectorEnabled && isSizeSelectorOpen && /*#__PURE__*/React.createElement(SizeSelector, {
|
|
559
|
+
api: api,
|
|
560
|
+
isOpenedByKeyboard: false,
|
|
561
|
+
popupsMountPoint: popupsMountPoint,
|
|
562
|
+
target: (_sizeSelectorPluginSt = sizeSelectorPluginState === null || sizeSelectorPluginState === void 0 ? void 0 : sizeSelectorPluginState.targetRef) !== null && _sizeSelectorPluginSt !== void 0 ? _sizeSelectorPluginSt : getDomRefFromSelection(editorView, ACTION_SUBJECT_ID.PICKER_TABLE_SIZE, api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent),
|
|
563
|
+
popupsBoundariesElement: popupsBoundariesElement,
|
|
564
|
+
popupsScrollableElement: popupsScrollableElement
|
|
542
565
|
}));
|
|
543
566
|
}
|
|
544
567
|
}));
|
|
545
568
|
},
|
|
546
569
|
pluginsOptions: {
|
|
547
|
-
quickInsert: function quickInsert(
|
|
548
|
-
var formatMessage =
|
|
570
|
+
quickInsert: function quickInsert(_ref23) {
|
|
571
|
+
var formatMessage = _ref23.formatMessage;
|
|
549
572
|
return [{
|
|
550
573
|
id: 'table',
|
|
551
574
|
title: formatMessage(messages.table),
|
|
@@ -558,6 +581,14 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
558
581
|
},
|
|
559
582
|
action: function action(insert, state) {
|
|
560
583
|
var _api$table, _options$tableOptions6;
|
|
584
|
+
if (isTableSelectorEnabled) {
|
|
585
|
+
var _tr = insert('');
|
|
586
|
+
_tr.setMeta(sizeSelectorPluginKey, {
|
|
587
|
+
isSelectorOpen: true
|
|
588
|
+
});
|
|
589
|
+
return _tr;
|
|
590
|
+
}
|
|
591
|
+
|
|
561
592
|
// see comment on tablesPlugin.getSharedState on usage
|
|
562
593
|
var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
|
|
563
594
|
var tableNodeProps = {
|
|
@@ -608,8 +639,8 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
608
639
|
return editorViewRef.current;
|
|
609
640
|
}, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
|
|
610
641
|
},
|
|
611
|
-
usePluginHook: function usePluginHook(
|
|
612
|
-
var editorView =
|
|
642
|
+
usePluginHook: function usePluginHook(_ref24) {
|
|
643
|
+
var editorView = _ref24.editorView;
|
|
613
644
|
var _useSharedPluginState = useSharedPluginState(api, ['editorViewMode']),
|
|
614
645
|
editorViewModeState = _useSharedPluginState.editorViewModeState;
|
|
615
646
|
var mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { useCallback } from 'react';
|
|
6
|
+
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
8
|
+
import { jsx } from '@emotion/react';
|
|
9
|
+
import { TableSelectorPopup } from '@atlaskit/editor-common/ui';
|
|
10
|
+
import { pluginKey } from '../../pm-plugins/table-size-selector';
|
|
11
|
+
var DEFAULT_TABLE_SELECTOR_COLS = 3;
|
|
12
|
+
var DEFAULT_TABLE_SELECTOR_ROWS = 3;
|
|
13
|
+
export var SizeSelector = function SizeSelector(_ref) {
|
|
14
|
+
var api = _ref.api,
|
|
15
|
+
target = _ref.target,
|
|
16
|
+
popupsMountPoint = _ref.popupsMountPoint,
|
|
17
|
+
popupsBoundariesElement = _ref.popupsBoundariesElement,
|
|
18
|
+
popupsScrollableElement = _ref.popupsScrollableElement;
|
|
19
|
+
var closeSelectorPopup = useCallback(function () {
|
|
20
|
+
api === null || api === void 0 || api.core.actions.execute(function (_ref2) {
|
|
21
|
+
var tr = _ref2.tr;
|
|
22
|
+
tr.setMeta(pluginKey, {
|
|
23
|
+
isSelectorOpen: false
|
|
24
|
+
});
|
|
25
|
+
return tr;
|
|
26
|
+
});
|
|
27
|
+
}, [api]);
|
|
28
|
+
var onSelection = useCallback(function (rowsCount, colsCount) {
|
|
29
|
+
api === null || api === void 0 || api.core.actions.execute(function (_ref3) {
|
|
30
|
+
var tr = _ref3.tr;
|
|
31
|
+
api === null || api === void 0 || api.table.commands.insertTableWithSize(rowsCount, colsCount)({
|
|
32
|
+
tr: tr
|
|
33
|
+
});
|
|
34
|
+
tr.setMeta(pluginKey, {
|
|
35
|
+
isSelectorOpen: false
|
|
36
|
+
});
|
|
37
|
+
return tr;
|
|
38
|
+
});
|
|
39
|
+
}, [api]);
|
|
40
|
+
var onUnmount = function onUnmount() {
|
|
41
|
+
api === null || api === void 0 || api.core.actions.focus();
|
|
42
|
+
};
|
|
43
|
+
return jsx(TableSelectorPopup, {
|
|
44
|
+
defaultSize: {
|
|
45
|
+
row: DEFAULT_TABLE_SELECTOR_ROWS,
|
|
46
|
+
col: DEFAULT_TABLE_SELECTOR_COLS
|
|
47
|
+
},
|
|
48
|
+
target: target,
|
|
49
|
+
onUnmount: onUnmount,
|
|
50
|
+
onSelection: onSelection,
|
|
51
|
+
popupsMountPoint: popupsMountPoint,
|
|
52
|
+
popupsScrollableElement: popupsScrollableElement,
|
|
53
|
+
popupsBoundariesElement: popupsBoundariesElement,
|
|
54
|
+
isOpenedByKeyboard: true,
|
|
55
|
+
handleClickOutside: closeSelectorPopup,
|
|
56
|
+
handleEscapeKeydown: closeSelectorPopup
|
|
57
|
+
});
|
|
58
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
|
|
2
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
+
type SizeSelectorPluginState = {
|
|
5
|
+
isSelectorOpen: boolean;
|
|
6
|
+
targetRef?: HTMLElement;
|
|
7
|
+
};
|
|
8
|
+
export declare const pluginKey: PluginKey<SizeSelectorPluginState>;
|
|
9
|
+
export declare const createPlugin: (dispatch: Dispatch) => SafePlugin<SizeSelectorPluginState>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx } from '@emotion/react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
|
|
4
|
+
import { TablePlugin } from '../../tablePluginType';
|
|
5
|
+
interface SizeSelectorProps extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {
|
|
6
|
+
api?: ExtractInjectionAPI<TablePlugin>;
|
|
7
|
+
}
|
|
8
|
+
export declare const SizeSelector: ({ api, target, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: SizeSelectorProps) => jsx.JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
|
|
2
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
+
type SizeSelectorPluginState = {
|
|
5
|
+
isSelectorOpen: boolean;
|
|
6
|
+
targetRef?: HTMLElement;
|
|
7
|
+
};
|
|
8
|
+
export declare const pluginKey: PluginKey<SizeSelectorPluginState>;
|
|
9
|
+
export declare const createPlugin: (dispatch: Dispatch) => SafePlugin<SizeSelectorPluginState>;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { jsx } from '@emotion/react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import { type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
|
|
4
|
+
import { TablePlugin } from '../../tablePluginType';
|
|
5
|
+
interface SizeSelectorProps extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {
|
|
6
|
+
api?: ExtractInjectionAPI<TablePlugin>;
|
|
7
|
+
}
|
|
8
|
+
export declare const SizeSelector: ({ api, target, popupsMountPoint, popupsBoundariesElement, popupsScrollableElement, }: SizeSelectorProps) => jsx.JSX.Element;
|
|
9
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "10.8.
|
|
3
|
+
"version": "10.8.2",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -32,7 +32,7 @@
|
|
|
32
32
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
33
33
|
"@atlaskit/button": "^23.0.0",
|
|
34
34
|
"@atlaskit/custom-steps": "^0.11.0",
|
|
35
|
-
"@atlaskit/editor-common": "^103.
|
|
35
|
+
"@atlaskit/editor-common": "^103.12.0",
|
|
36
36
|
"@atlaskit/editor-palette": "^2.1.0",
|
|
37
37
|
"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
|
|
55
55
|
"@atlaskit/primitives": "^14.4.0",
|
|
56
56
|
"@atlaskit/theme": "^18.0.0",
|
|
57
|
-
"@atlaskit/tmp-editor-statsig": "^4.
|
|
57
|
+
"@atlaskit/tmp-editor-statsig": "^4.12.0",
|
|
58
58
|
"@atlaskit/toggle": "^15.0.0",
|
|
59
59
|
"@atlaskit/tokens": "^4.8.0",
|
|
60
60
|
"@atlaskit/tooltip": "^20.0.0",
|
|
@@ -197,6 +197,12 @@
|
|
|
197
197
|
},
|
|
198
198
|
"platform_editor_controls_patch_4": {
|
|
199
199
|
"type": "boolean"
|
|
200
|
+
},
|
|
201
|
+
"platform_editor_tables_table_selector": {
|
|
202
|
+
"type": "boolean"
|
|
203
|
+
},
|
|
204
|
+
"platform_editor_controls_table_picker": {
|
|
205
|
+
"type": "boolean"
|
|
200
206
|
}
|
|
201
207
|
}
|
|
202
208
|
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type { Dispatch } from '@atlaskit/editor-common/event-dispatcher';
|
|
2
|
+
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
3
|
+
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
+
|
|
5
|
+
type SizeSelectorPluginState = {
|
|
6
|
+
isSelectorOpen: boolean;
|
|
7
|
+
targetRef?: HTMLElement;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
export const pluginKey = new PluginKey<SizeSelectorPluginState>('tableSizeSelectorPlugin');
|
|
11
|
+
|
|
12
|
+
export const createPlugin = (dispatch: Dispatch) => {
|
|
13
|
+
return new SafePlugin<SizeSelectorPluginState>({
|
|
14
|
+
key: pluginKey,
|
|
15
|
+
state: {
|
|
16
|
+
init: () => ({
|
|
17
|
+
isSelectorOpen: false,
|
|
18
|
+
}),
|
|
19
|
+
apply: (tr, currentPluginState) => {
|
|
20
|
+
const meta = tr.getMeta(pluginKey);
|
|
21
|
+
|
|
22
|
+
if (meta) {
|
|
23
|
+
const keys = Object.keys(meta) as Array<keyof SizeSelectorPluginState>;
|
|
24
|
+
const changed = keys.some((key) => {
|
|
25
|
+
return currentPluginState[key] !== meta[key];
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
if (changed) {
|
|
29
|
+
const newState = { ...currentPluginState, ...meta };
|
|
30
|
+
|
|
31
|
+
dispatch(pluginKey, newState);
|
|
32
|
+
return newState;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
return currentPluginState;
|
|
36
|
+
},
|
|
37
|
+
},
|
|
38
|
+
});
|
|
39
|
+
};
|
package/src/tablePlugin.tsx
CHANGED
|
@@ -18,6 +18,7 @@ import {
|
|
|
18
18
|
} from '@atlaskit/editor-common/analytics';
|
|
19
19
|
import { browser } from '@atlaskit/editor-common/browser';
|
|
20
20
|
import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
|
|
21
|
+
import { getDomRefFromSelection } from '@atlaskit/editor-common/get-dom-ref-from-selection';
|
|
21
22
|
import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
|
|
22
23
|
import { IconTable } from '@atlaskit/editor-common/icons';
|
|
23
24
|
import { toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
|
|
@@ -61,6 +62,10 @@ import { createPlugin as createFlexiResizingPlugin } from './pm-plugins/table-re
|
|
|
61
62
|
import { getPluginState as getFlexiResizingPlugin } from './pm-plugins/table-resizing/plugin-factory';
|
|
62
63
|
import { pluginKey as tableResizingPluginKey } from './pm-plugins/table-resizing/plugin-key';
|
|
63
64
|
import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap';
|
|
65
|
+
import {
|
|
66
|
+
createPlugin as createSizeSelectorPlugin,
|
|
67
|
+
pluginKey as sizeSelectorPluginKey,
|
|
68
|
+
} from './pm-plugins/table-size-selector';
|
|
64
69
|
import {
|
|
65
70
|
createPlugin as createTableWidthPlugin,
|
|
66
71
|
pluginKey as tableWidthPluginKey,
|
|
@@ -79,6 +84,7 @@ import FloatingDragMenu from './ui/FloatingDragMenu';
|
|
|
79
84
|
import FloatingInsertButton from './ui/FloatingInsertButton';
|
|
80
85
|
import { FloatingToolbarLabel } from './ui/FloatingToolbarLabel/FloatingToolbarLabel';
|
|
81
86
|
import { GlobalStylesWrapper } from './ui/global-styles';
|
|
87
|
+
import { SizeSelector } from './ui/SizeSelector';
|
|
82
88
|
import { FullWidthDisplay } from './ui/TableFullWidthLabel';
|
|
83
89
|
import { getToolbarConfig } from './ui/toolbar';
|
|
84
90
|
|
|
@@ -109,6 +115,14 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
|
|
|
109
115
|
// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
110
116
|
options?.isCommentEditor);
|
|
111
117
|
|
|
118
|
+
const isTableSelectorEnabled =
|
|
119
|
+
// eslint-disable-next-line @atlaskit/platform/no-preconditioning
|
|
120
|
+
!options?.isChromelessEditor &&
|
|
121
|
+
!options?.isCommentEditor &&
|
|
122
|
+
options?.getEditorFeatureFlags?.().tableSelector &&
|
|
123
|
+
editorExperiment('platform_editor_controls', 'variant1') &&
|
|
124
|
+
fg('platform_editor_controls_table_picker');
|
|
125
|
+
|
|
112
126
|
return {
|
|
113
127
|
name: 'table',
|
|
114
128
|
|
|
@@ -487,6 +501,11 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
|
|
|
487
501
|
});
|
|
488
502
|
},
|
|
489
503
|
},
|
|
504
|
+
{
|
|
505
|
+
name: 'tableSizeSelectorPlugin',
|
|
506
|
+
plugin: ({ dispatch }) =>
|
|
507
|
+
isTableSelectorEnabled ? createSizeSelectorPlugin(dispatch) : undefined,
|
|
508
|
+
},
|
|
490
509
|
];
|
|
491
510
|
|
|
492
511
|
// Workaround for table element breaking issue caused by composition event with an inputType of deleteCompositionText.
|
|
@@ -529,6 +548,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
|
|
|
529
548
|
tableResizingPluginState: tableResizingPluginKey,
|
|
530
549
|
stickyHeadersState: stickyHeadersPluginKey,
|
|
531
550
|
dragAndDropState: dragAndDropPluginKey,
|
|
551
|
+
sizeSelectorPluginState: sizeSelectorPluginKey,
|
|
532
552
|
}}
|
|
533
553
|
render={({
|
|
534
554
|
tableResizingPluginState: resizingPluginState,
|
|
@@ -536,6 +556,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
|
|
|
536
556
|
tablePluginState,
|
|
537
557
|
tableWidthPluginState,
|
|
538
558
|
dragAndDropState,
|
|
559
|
+
sizeSelectorPluginState,
|
|
539
560
|
}) => {
|
|
540
561
|
const isColumnResizing = resizingPluginState?.dragging;
|
|
541
562
|
const isTableResizing = tableWidthPluginState?.resizing;
|
|
@@ -543,6 +564,7 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
|
|
|
543
564
|
const resizingTableRef = tableWidthPluginState?.tableRef;
|
|
544
565
|
const isResizing = isColumnResizing || isTableResizing;
|
|
545
566
|
const widthToWidest = tablePluginState?.widthToWidest;
|
|
567
|
+
const isSizeSelectorOpen = sizeSelectorPluginState?.isSelectorOpen;
|
|
546
568
|
|
|
547
569
|
const {
|
|
548
570
|
tableNode,
|
|
@@ -695,6 +717,24 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
|
|
|
695
717
|
offset={[0, 10]}
|
|
696
718
|
/>
|
|
697
719
|
)}
|
|
720
|
+
|
|
721
|
+
{isTableSelectorEnabled && isSizeSelectorOpen && (
|
|
722
|
+
<SizeSelector
|
|
723
|
+
api={api}
|
|
724
|
+
isOpenedByKeyboard={false}
|
|
725
|
+
popupsMountPoint={popupsMountPoint}
|
|
726
|
+
target={
|
|
727
|
+
sizeSelectorPluginState?.targetRef ??
|
|
728
|
+
getDomRefFromSelection(
|
|
729
|
+
editorView,
|
|
730
|
+
ACTION_SUBJECT_ID.PICKER_TABLE_SIZE,
|
|
731
|
+
api?.analytics?.actions.fireAnalyticsEvent,
|
|
732
|
+
)
|
|
733
|
+
}
|
|
734
|
+
popupsBoundariesElement={popupsBoundariesElement}
|
|
735
|
+
popupsScrollableElement={popupsScrollableElement}
|
|
736
|
+
/>
|
|
737
|
+
)}
|
|
698
738
|
</>
|
|
699
739
|
);
|
|
700
740
|
}}
|
|
@@ -714,6 +754,15 @@ const tablePlugin: TablePlugin = ({ config: options, api }) => {
|
|
|
714
754
|
keyshortcut: tooltip(toggleTable),
|
|
715
755
|
icon: () => <IconTable />,
|
|
716
756
|
action(insert, state) {
|
|
757
|
+
if (isTableSelectorEnabled) {
|
|
758
|
+
const tr = insert('');
|
|
759
|
+
tr.setMeta(sizeSelectorPluginKey, {
|
|
760
|
+
isSelectorOpen: true,
|
|
761
|
+
});
|
|
762
|
+
|
|
763
|
+
return tr;
|
|
764
|
+
}
|
|
765
|
+
|
|
717
766
|
// see comment on tablesPlugin.getSharedState on usage
|
|
718
767
|
const tableState = api?.table?.sharedState.currentState();
|
|
719
768
|
const tableNodeProps = {
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
* @jsx jsx
|
|
4
|
+
*/
|
|
5
|
+
import { useCallback } from 'react';
|
|
6
|
+
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
|
|
8
|
+
import { jsx } from '@emotion/react';
|
|
9
|
+
|
|
10
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
11
|
+
import { TableSelectorPopup, type TableSelectorPopupProps } from '@atlaskit/editor-common/ui';
|
|
12
|
+
|
|
13
|
+
import { pluginKey } from '../../pm-plugins/table-size-selector';
|
|
14
|
+
import { TablePlugin } from '../../tablePluginType';
|
|
15
|
+
|
|
16
|
+
interface SizeSelectorProps
|
|
17
|
+
extends Omit<TableSelectorPopupProps, 'handleClickOutside' | 'onSelection' | 'unUnmount'> {
|
|
18
|
+
api?: ExtractInjectionAPI<TablePlugin>;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const DEFAULT_TABLE_SELECTOR_COLS = 3;
|
|
22
|
+
const DEFAULT_TABLE_SELECTOR_ROWS = 3;
|
|
23
|
+
|
|
24
|
+
export const SizeSelector = ({
|
|
25
|
+
api,
|
|
26
|
+
target,
|
|
27
|
+
popupsMountPoint,
|
|
28
|
+
popupsBoundariesElement,
|
|
29
|
+
popupsScrollableElement,
|
|
30
|
+
}: SizeSelectorProps) => {
|
|
31
|
+
const closeSelectorPopup = useCallback(() => {
|
|
32
|
+
api?.core.actions.execute(({ tr }) => {
|
|
33
|
+
tr.setMeta(pluginKey, {
|
|
34
|
+
isSelectorOpen: false,
|
|
35
|
+
});
|
|
36
|
+
|
|
37
|
+
return tr;
|
|
38
|
+
});
|
|
39
|
+
}, [api]);
|
|
40
|
+
|
|
41
|
+
const onSelection = useCallback(
|
|
42
|
+
(rowsCount: number, colsCount: number) => {
|
|
43
|
+
api?.core.actions.execute(({ tr }) => {
|
|
44
|
+
api?.table.commands.insertTableWithSize(rowsCount, colsCount)({ tr });
|
|
45
|
+
|
|
46
|
+
tr.setMeta(pluginKey, {
|
|
47
|
+
isSelectorOpen: false,
|
|
48
|
+
});
|
|
49
|
+
|
|
50
|
+
return tr;
|
|
51
|
+
});
|
|
52
|
+
},
|
|
53
|
+
[api],
|
|
54
|
+
);
|
|
55
|
+
|
|
56
|
+
const onUnmount = () => {
|
|
57
|
+
api?.core.actions.focus();
|
|
58
|
+
};
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<TableSelectorPopup
|
|
62
|
+
defaultSize={{ row: DEFAULT_TABLE_SELECTOR_ROWS, col: DEFAULT_TABLE_SELECTOR_COLS }}
|
|
63
|
+
target={target}
|
|
64
|
+
onUnmount={onUnmount}
|
|
65
|
+
onSelection={onSelection}
|
|
66
|
+
popupsMountPoint={popupsMountPoint}
|
|
67
|
+
popupsScrollableElement={popupsScrollableElement}
|
|
68
|
+
popupsBoundariesElement={popupsBoundariesElement}
|
|
69
|
+
isOpenedByKeyboard={true}
|
|
70
|
+
handleClickOutside={closeSelectorPopup}
|
|
71
|
+
handleEscapeKeydown={closeSelectorPopup}
|
|
72
|
+
/>
|
|
73
|
+
);
|
|
74
|
+
};
|