@atlaskit/editor-plugin-table 24.5.5 → 24.5.7
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 +14 -0
- package/dist/cjs/tablePlugin.js +15 -3
- package/dist/cjs/ui/quick-insert/TableQuickInsertMenuItem.js +52 -0
- package/dist/cjs/ui/quick-insert/getTableQuickInsertComponents.js +31 -0
- package/dist/cjs/ui/quick-insert/insertTableFromQuickInsert.js +79 -0
- package/dist/es2019/tablePlugin.js +85 -72
- package/dist/es2019/ui/quick-insert/TableQuickInsertMenuItem.js +45 -0
- package/dist/es2019/ui/quick-insert/getTableQuickInsertComponents.js +20 -0
- package/dist/es2019/ui/quick-insert/insertTableFromQuickInsert.js +74 -0
- package/dist/esm/tablePlugin.js +15 -3
- package/dist/esm/ui/quick-insert/TableQuickInsertMenuItem.js +43 -0
- package/dist/esm/ui/quick-insert/getTableQuickInsertComponents.js +24 -0
- package/dist/esm/ui/quick-insert/insertTableFromQuickInsert.js +72 -0
- package/dist/types/ui/quick-insert/TableQuickInsertMenuItem.d.ts +10 -0
- package/dist/types/ui/quick-insert/getTableQuickInsertComponents.d.ts +10 -0
- package/dist/types/ui/quick-insert/insertTableFromQuickInsert.d.ts +14 -0
- package/package.json +6 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 24.5.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`4bc741a70d678`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4bc741a70d678) -
|
|
8
|
+
Add the first registry-backed Quick Insert slice with Table
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 24.5.6
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 24.5.5
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/dist/cjs/tablePlugin.js
CHANGED
|
@@ -20,6 +20,7 @@ var _preset = require("@atlaskit/editor-common/preset");
|
|
|
20
20
|
var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
21
21
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
22
22
|
var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
|
|
23
|
+
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
|
|
23
24
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
24
25
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
25
26
|
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
@@ -53,6 +54,7 @@ var _analytics2 = require("./pm-plugins/utils/analytics");
|
|
|
53
54
|
var _create = require("./pm-plugins/utils/create");
|
|
54
55
|
var _viewModeSort = require("./pm-plugins/view-mode-sort");
|
|
55
56
|
var _ContentComponent = require("./ui/ContentComponent");
|
|
57
|
+
var _getTableQuickInsertComponents = require("./ui/quick-insert/getTableQuickInsertComponents");
|
|
56
58
|
var _getTableMenuComponents = require("./ui/TableMenu/shared/getTableMenuComponents");
|
|
57
59
|
var _toolbar = require("./ui/toolbar");
|
|
58
60
|
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); }
|
|
@@ -99,6 +101,14 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
99
101
|
api: api
|
|
100
102
|
}));
|
|
101
103
|
}
|
|
104
|
+
if ((0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command')) {
|
|
105
|
+
var _api$uiControlRegistr2;
|
|
106
|
+
api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register((0, _getTableQuickInsertComponents.getTableQuickInsertComponents)({
|
|
107
|
+
api: api,
|
|
108
|
+
isTableSelectorEnabled: isTableSelectorEnabled,
|
|
109
|
+
options: options
|
|
110
|
+
}));
|
|
111
|
+
}
|
|
102
112
|
return {
|
|
103
113
|
name: 'table',
|
|
104
114
|
// Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
|
|
@@ -550,7 +560,7 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
550
560
|
isTableSelectorEnabled: isTableSelectorEnabled
|
|
551
561
|
});
|
|
552
562
|
},
|
|
553
|
-
pluginsOptions: {
|
|
563
|
+
pluginsOptions: _objectSpread(_objectSpread({}, (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_slash_command') ? {} : {
|
|
554
564
|
quickInsert: function quickInsert(_ref19) {
|
|
555
565
|
var formatMessage = _ref19.formatMessage;
|
|
556
566
|
return [{
|
|
@@ -565,6 +575,7 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
565
575
|
},
|
|
566
576
|
action: function action(insert, state) {
|
|
567
577
|
var _api$markdownMode, _api$table, _options$tableOptions6, _tr$selection$$from$n;
|
|
578
|
+
// Keep this legacy path aligned with insertTableFromQuickInsert during rollout.
|
|
568
579
|
if (isTableSelectorEnabled) {
|
|
569
580
|
var _tr = insert('');
|
|
570
581
|
_tr.setMeta(_tableSizeSelector.pluginKey, {
|
|
@@ -627,11 +638,12 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
627
638
|
return tr;
|
|
628
639
|
}
|
|
629
640
|
}];
|
|
630
|
-
}
|
|
641
|
+
}
|
|
642
|
+
}), {}, {
|
|
631
643
|
floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, function () {
|
|
632
644
|
return editorViewRef.current;
|
|
633
645
|
}, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
|
|
634
|
-
},
|
|
646
|
+
}),
|
|
635
647
|
usePluginHook: function usePluginHook(_ref20) {
|
|
636
648
|
var editorView = _ref20.editorView;
|
|
637
649
|
var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['editorViewMode'], function (states) {
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.TableQuickInsertMenuItem = void 0;
|
|
9
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
10
|
+
var _reactIntl = require("react-intl");
|
|
11
|
+
var _icons = require("@atlaskit/editor-common/icons");
|
|
12
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
13
|
+
var _useQuickInsertContext = require("@atlaskit/editor-common/quick-insert/use-quick-insert-context");
|
|
14
|
+
var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
|
|
15
|
+
var _insertTableFromQuickInsert = require("./insertTableFromQuickInsert");
|
|
16
|
+
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); }
|
|
17
|
+
var TableQuickInsertMenuItem = exports.TableQuickInsertMenuItem = function TableQuickInsertMenuItem(_ref) {
|
|
18
|
+
var api = _ref.api,
|
|
19
|
+
isTableSelectorEnabled = _ref.isTableSelectorEnabled,
|
|
20
|
+
options = _ref.options;
|
|
21
|
+
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
22
|
+
formatMessage = _useIntl.formatMessage;
|
|
23
|
+
var _useQuickInsertContex = (0, _useQuickInsertContext.useQuickInsertContext)(),
|
|
24
|
+
editorView = _useQuickInsertContex.editorView,
|
|
25
|
+
item = _useQuickInsertContex.item,
|
|
26
|
+
select = _useQuickInsertContex.select;
|
|
27
|
+
var onClick = (0, _react.useCallback)(function () {
|
|
28
|
+
select(function (_ref2) {
|
|
29
|
+
var insert = _ref2.insert,
|
|
30
|
+
source = _ref2.source;
|
|
31
|
+
return (0, _insertTableFromQuickInsert.insertTableFromQuickInsert)({
|
|
32
|
+
api: api,
|
|
33
|
+
inputMethod: source,
|
|
34
|
+
insert: insert,
|
|
35
|
+
isTableSelectorEnabled: isTableSelectorEnabled,
|
|
36
|
+
options: options,
|
|
37
|
+
state: editorView.state
|
|
38
|
+
});
|
|
39
|
+
});
|
|
40
|
+
}, [api, editorView, isTableSelectorEnabled, options, select]);
|
|
41
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
42
|
+
onMouseMove: item === null || item === void 0 ? void 0 : item.onMouseMove
|
|
43
|
+
}, /*#__PURE__*/_react.default.createElement(_buttonItem.default, {
|
|
44
|
+
"aria-selected": item === null || item === void 0 ? void 0 : item.isSelected,
|
|
45
|
+
description: formatMessage(_messages.toolbarInsertBlockMessages.tableDescription),
|
|
46
|
+
iconBefore: /*#__PURE__*/_react.default.createElement(_icons.IconTable, null),
|
|
47
|
+
id: item === null || item === void 0 ? void 0 : item.id,
|
|
48
|
+
isSelected: item === null || item === void 0 ? void 0 : item.isSelected,
|
|
49
|
+
onClick: onClick,
|
|
50
|
+
role: "option"
|
|
51
|
+
}, formatMessage(_messages.toolbarInsertBlockMessages.table)));
|
|
52
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.getTableQuickInsertComponents = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
|
+
var _keys = require("@atlaskit/editor-common/quick-insert/keys");
|
|
11
|
+
var _rank = require("@atlaskit/editor-common/quick-insert/rank");
|
|
12
|
+
var _TableQuickInsertMenuItem = require("./TableQuickInsertMenuItem");
|
|
13
|
+
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; }
|
|
14
|
+
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; }
|
|
15
|
+
var getTableQuickInsertComponents = exports.getTableQuickInsertComponents = function getTableQuickInsertComponents(_ref) {
|
|
16
|
+
var api = _ref.api,
|
|
17
|
+
isTableSelectorEnabled = _ref.isTableSelectorEnabled,
|
|
18
|
+
options = _ref.options;
|
|
19
|
+
return [_objectSpread(_objectSpread({}, _keys.TABLE_MENU_ITEM), {}, {
|
|
20
|
+
parents: [_objectSpread(_objectSpread({}, _keys.STRUCTURE_SECTION), {}, {
|
|
21
|
+
rank: _rank.QUICK_INSERT_STRUCTURE_SECTION_RANK[_keys.TABLE_MENU_ITEM.key]
|
|
22
|
+
})],
|
|
23
|
+
component: function component() {
|
|
24
|
+
return /*#__PURE__*/_react.default.createElement(_TableQuickInsertMenuItem.TableQuickInsertMenuItem, {
|
|
25
|
+
api: api,
|
|
26
|
+
isTableSelectorEnabled: isTableSelectorEnabled,
|
|
27
|
+
options: options
|
|
28
|
+
});
|
|
29
|
+
}
|
|
30
|
+
})];
|
|
31
|
+
};
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.insertTableFromQuickInsert = void 0;
|
|
8
|
+
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
|
+
var _analytics = require("@atlaskit/editor-common/analytics");
|
|
10
|
+
var _nesting = require("@atlaskit/editor-common/nesting");
|
|
11
|
+
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
12
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
13
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
14
|
+
var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
|
|
15
|
+
var _tableSizeSelector = require("../../pm-plugins/table-size-selector");
|
|
16
|
+
var _create = require("../../pm-plugins/utils/create");
|
|
17
|
+
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; }
|
|
18
|
+
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; }
|
|
19
|
+
var insertTableFromQuickInsert = exports.insertTableFromQuickInsert = function insertTableFromQuickInsert(_ref) {
|
|
20
|
+
var _api$markdownMode, _api$table, _api$analytics, _tr$selection$$from$n;
|
|
21
|
+
var api = _ref.api,
|
|
22
|
+
inputMethod = _ref.inputMethod,
|
|
23
|
+
insert = _ref.insert,
|
|
24
|
+
isTableSelectorEnabled = _ref.isTableSelectorEnabled,
|
|
25
|
+
options = _ref.options,
|
|
26
|
+
state = _ref.state;
|
|
27
|
+
if (isTableSelectorEnabled) {
|
|
28
|
+
var _tr = insert('');
|
|
29
|
+
_tr.setMeta(_tableSizeSelector.pluginKey, {
|
|
30
|
+
isSelectorOpen: true
|
|
31
|
+
});
|
|
32
|
+
return _tr;
|
|
33
|
+
}
|
|
34
|
+
var markdownState = api === null || api === void 0 || (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 ? void 0 : _api$markdownMode.sharedState.currentState();
|
|
35
|
+
if (markdownState !== null && markdownState !== void 0 && markdownState.isMarkdownMode && (markdownState === null || markdownState === void 0 ? void 0 : markdownState.view) === 'syntax' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('cc-markdown-mode', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_editor_markdown_compatible_toolbar')) {
|
|
36
|
+
var _api$markdownMode2;
|
|
37
|
+
api === null || api === void 0 || (_api$markdownMode2 = api.markdownMode) === null || _api$markdownMode2 === void 0 || _api$markdownMode2.actions.insertSourceTable();
|
|
38
|
+
return state.tr;
|
|
39
|
+
}
|
|
40
|
+
var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
|
|
41
|
+
var tableNodeProps = {
|
|
42
|
+
isTableScalingEnabled: options.isTableScalingEnabled,
|
|
43
|
+
isTableAlignmentEnabled: options.tableOptions.allowTableAlignment,
|
|
44
|
+
isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
|
|
45
|
+
isMaxWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled,
|
|
46
|
+
isCommentEditor: options.isCommentEditor,
|
|
47
|
+
isChromelessEditor: options.isChromelessEditor,
|
|
48
|
+
isTableResizingEnabled: options.tableOptions.allowTableResizing
|
|
49
|
+
};
|
|
50
|
+
var tableNode = (0, _create.createTableWithWidth)(tableNodeProps)(state.schema);
|
|
51
|
+
var tr = state.tr;
|
|
52
|
+
if ((0, _utils.hasParentNodeOfType)(state.schema.nodes.table)(state.selection) && options.tableOptions.allowNestedTables) {
|
|
53
|
+
if ((0, _nesting.getParentOfTypeCount)(state.schema.nodes.table)(state.selection.$from) > 1) {
|
|
54
|
+
var positionAfterTopTable = (0, _nesting.getPositionAfterTopParentNodeOfType)(state.schema.nodes.table)(state.selection.$from);
|
|
55
|
+
tr = (0, _utils.safeInsert)(tableNode, positionAfterTopTable)(tr);
|
|
56
|
+
tr.scrollIntoView();
|
|
57
|
+
} else {
|
|
58
|
+
tableNode = (0, _create.createTableWithWidth)(_objectSpread(_objectSpread({}, tableNodeProps), {}, {
|
|
59
|
+
isNestedTable: true
|
|
60
|
+
}))(state.schema);
|
|
61
|
+
tr = insert(tableNode);
|
|
62
|
+
}
|
|
63
|
+
} else {
|
|
64
|
+
tr = insert(tableNode);
|
|
65
|
+
}
|
|
66
|
+
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
|
|
67
|
+
action: _analytics.ACTION.INSERTED,
|
|
68
|
+
actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
|
|
69
|
+
actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
|
|
70
|
+
attributes: _objectSpread({
|
|
71
|
+
inputMethod: inputMethod,
|
|
72
|
+
localId: tableNode.attrs.localId
|
|
73
|
+
}, (0, _expValEquals.expValEquals)('platform_editor_nest_table_in_panel', 'isEnabled', true) ? {
|
|
74
|
+
parentNode: (_tr$selection$$from$n = tr.selection.$from.node(-1)) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type.name
|
|
75
|
+
} : {}),
|
|
76
|
+
eventType: _analytics.EVENT_TYPE.TRACK
|
|
77
|
+
})(tr);
|
|
78
|
+
return tr;
|
|
79
|
+
};
|
|
@@ -11,6 +11,7 @@ import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
|
|
|
11
11
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
12
12
|
import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
13
13
|
import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
|
|
14
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
14
15
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
16
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
16
17
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
@@ -44,6 +45,7 @@ import { getHeightInfoPayload, getWidthInfoPayload } from './pm-plugins/utils/an
|
|
|
44
45
|
import { createTableWithWidth } from './pm-plugins/utils/create';
|
|
45
46
|
import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
|
|
46
47
|
import { ContentComponent } from './ui/ContentComponent';
|
|
48
|
+
import { getTableQuickInsertComponents } from './ui/quick-insert/getTableQuickInsertComponents';
|
|
47
49
|
import { getTableMenuComponents } from './ui/TableMenu/shared/getTableMenuComponents';
|
|
48
50
|
import { getToolbarConfig } from './ui/toolbar';
|
|
49
51
|
const defaultGetEditorFeatureFlags = () => ({});
|
|
@@ -87,6 +89,14 @@ const tablePlugin = ({
|
|
|
87
89
|
api
|
|
88
90
|
}));
|
|
89
91
|
}
|
|
92
|
+
if (isExperimentEnabled('platform_editor_slash_command')) {
|
|
93
|
+
var _api$uiControlRegistr2;
|
|
94
|
+
api === null || api === void 0 ? void 0 : (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.register(getTableQuickInsertComponents({
|
|
95
|
+
api,
|
|
96
|
+
isTableSelectorEnabled,
|
|
97
|
+
options
|
|
98
|
+
}));
|
|
99
|
+
}
|
|
90
100
|
return {
|
|
91
101
|
name: 'table',
|
|
92
102
|
// Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
|
|
@@ -534,84 +544,87 @@ const tablePlugin = ({
|
|
|
534
544
|
});
|
|
535
545
|
},
|
|
536
546
|
pluginsOptions: {
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
547
|
+
...(isExperimentEnabled('platform_editor_slash_command') ? {} : {
|
|
548
|
+
quickInsert: ({
|
|
549
|
+
formatMessage
|
|
550
|
+
}) => [{
|
|
551
|
+
id: 'table',
|
|
552
|
+
title: formatMessage(messages.table),
|
|
553
|
+
description: formatMessage(messages.tableDescription),
|
|
554
|
+
keywords: ['cell', 'table'],
|
|
555
|
+
priority: 600,
|
|
556
|
+
keyshortcut: tooltip(toggleTable),
|
|
557
|
+
icon: () => /*#__PURE__*/React.createElement(IconTable, null),
|
|
558
|
+
action(insert, state) {
|
|
559
|
+
var _api$markdownMode, _api$table, _options$tableOptions6, _tr$selection$$from$n;
|
|
560
|
+
// Keep this legacy path aligned with insertTableFromQuickInsert during rollout.
|
|
561
|
+
if (isTableSelectorEnabled) {
|
|
562
|
+
const tr = insert('');
|
|
563
|
+
tr.setMeta(sizeSelectorPluginKey, {
|
|
564
|
+
isSelectorOpen: true
|
|
565
|
+
});
|
|
566
|
+
return tr;
|
|
567
|
+
}
|
|
556
568
|
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
569
|
+
// Delegate to the markdown plugin to insert a markdown table string at the CM cursor position.
|
|
570
|
+
const markdownState = api === null || api === void 0 ? void 0 : (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 ? void 0 : _api$markdownMode.sharedState.currentState();
|
|
571
|
+
if (markdownState !== null && markdownState !== void 0 && markdownState.isMarkdownMode && (markdownState === null || markdownState === void 0 ? void 0 : markdownState.view) === 'syntax' && expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && fg('platform_editor_markdown_compatible_toolbar')) {
|
|
572
|
+
var _api$markdownMode2;
|
|
573
|
+
api === null || api === void 0 ? void 0 : (_api$markdownMode2 = api.markdownMode) === null || _api$markdownMode2 === void 0 ? void 0 : _api$markdownMode2.actions.insertSourceTable();
|
|
574
|
+
return state.tr;
|
|
575
|
+
}
|
|
564
576
|
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
577
|
+
// see comment on tablesPlugin.getSharedState on usage
|
|
578
|
+
const tableState = api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
|
|
579
|
+
const tableNodeProps = {
|
|
580
|
+
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
|
|
581
|
+
isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
|
|
582
|
+
isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
|
|
583
|
+
isMaxWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled,
|
|
584
|
+
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
|
|
585
|
+
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
|
|
586
|
+
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
|
|
587
|
+
};
|
|
588
|
+
let tableNode = createTableWithWidth(tableNodeProps)(state.schema);
|
|
589
|
+
let {
|
|
590
|
+
tr
|
|
591
|
+
} = state;
|
|
592
|
+
// If the cursor is inside a table
|
|
593
|
+
if (hasParentNodeOfType(state.schema.nodes.table)(state.selection) && options !== null && options !== void 0 && (_options$tableOptions6 = options.tableOptions) !== null && _options$tableOptions6 !== void 0 && _options$tableOptions6.allowNestedTables) {
|
|
594
|
+
// If trying to nest deeper than one level, we insert the table after the top table
|
|
595
|
+
if (getParentOfTypeCount(state.schema.nodes.table)(state.selection.$from) > 1) {
|
|
596
|
+
// Nesting is too deep insert table after the top parent table
|
|
597
|
+
const positionAfterTopTable = getPositionAfterTopParentNodeOfType(state.schema.nodes.table)(state.selection.$from);
|
|
598
|
+
tr = safeInsert(tableNode, positionAfterTopTable)(tr);
|
|
599
|
+
tr.scrollIntoView();
|
|
600
|
+
} else {
|
|
601
|
+
// Table can be nested in parent table
|
|
602
|
+
tableNode = createTableWithWidth({
|
|
603
|
+
...tableNodeProps,
|
|
604
|
+
isNestedTable: true
|
|
605
|
+
})(state.schema);
|
|
606
|
+
tr = insert(tableNode);
|
|
607
|
+
}
|
|
588
608
|
} else {
|
|
589
|
-
// Table can be nested in parent table
|
|
590
|
-
tableNode = createTableWithWidth({
|
|
591
|
-
...tableNodeProps,
|
|
592
|
-
isNestedTable: true
|
|
593
|
-
})(state.schema);
|
|
594
609
|
tr = insert(tableNode);
|
|
595
610
|
}
|
|
596
|
-
|
|
597
|
-
|
|
611
|
+
editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({
|
|
612
|
+
action: ACTION.INSERTED,
|
|
613
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
614
|
+
actionSubjectId: ACTION_SUBJECT_ID.TABLE,
|
|
615
|
+
attributes: {
|
|
616
|
+
inputMethod: INPUT_METHOD.QUICK_INSERT,
|
|
617
|
+
localId: tableNode.attrs.localId,
|
|
618
|
+
...(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? {
|
|
619
|
+
parentNode: (_tr$selection$$from$n = tr.selection.$from.node(-1)) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type.name
|
|
620
|
+
} : {})
|
|
621
|
+
},
|
|
622
|
+
eventType: EVENT_TYPE.TRACK
|
|
623
|
+
})(tr);
|
|
624
|
+
return tr;
|
|
598
625
|
}
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
602
|
-
actionSubjectId: ACTION_SUBJECT_ID.TABLE,
|
|
603
|
-
attributes: {
|
|
604
|
-
inputMethod: INPUT_METHOD.QUICK_INSERT,
|
|
605
|
-
localId: tableNode.attrs.localId,
|
|
606
|
-
...(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? {
|
|
607
|
-
parentNode: (_tr$selection$$from$n = tr.selection.$from.node(-1)) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type.name
|
|
608
|
-
} : {})
|
|
609
|
-
},
|
|
610
|
-
eventType: EVENT_TYPE.TRACK
|
|
611
|
-
})(tr);
|
|
612
|
-
return tr;
|
|
613
|
-
}
|
|
614
|
-
}],
|
|
626
|
+
}]
|
|
627
|
+
}),
|
|
615
628
|
floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, () => editorViewRef.current, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
|
|
616
629
|
},
|
|
617
630
|
usePluginHook({
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl';
|
|
3
|
+
import { IconTable } from '@atlaskit/editor-common/icons';
|
|
4
|
+
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
|
+
import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
|
|
6
|
+
import ButtonItem from '@atlaskit/menu/button-item';
|
|
7
|
+
import { insertTableFromQuickInsert } from './insertTableFromQuickInsert';
|
|
8
|
+
export const TableQuickInsertMenuItem = ({
|
|
9
|
+
api,
|
|
10
|
+
isTableSelectorEnabled,
|
|
11
|
+
options
|
|
12
|
+
}) => {
|
|
13
|
+
const {
|
|
14
|
+
formatMessage
|
|
15
|
+
} = useIntl();
|
|
16
|
+
const {
|
|
17
|
+
editorView,
|
|
18
|
+
item,
|
|
19
|
+
select
|
|
20
|
+
} = useQuickInsertContext();
|
|
21
|
+
const onClick = useCallback(() => {
|
|
22
|
+
select(({
|
|
23
|
+
insert,
|
|
24
|
+
source
|
|
25
|
+
}) => insertTableFromQuickInsert({
|
|
26
|
+
api,
|
|
27
|
+
inputMethod: source,
|
|
28
|
+
insert,
|
|
29
|
+
isTableSelectorEnabled,
|
|
30
|
+
options,
|
|
31
|
+
state: editorView.state
|
|
32
|
+
}));
|
|
33
|
+
}, [api, editorView, isTableSelectorEnabled, options, select]);
|
|
34
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
35
|
+
onMouseMove: item === null || item === void 0 ? void 0 : item.onMouseMove
|
|
36
|
+
}, /*#__PURE__*/React.createElement(ButtonItem, {
|
|
37
|
+
"aria-selected": item === null || item === void 0 ? void 0 : item.isSelected,
|
|
38
|
+
description: formatMessage(messages.tableDescription),
|
|
39
|
+
iconBefore: /*#__PURE__*/React.createElement(IconTable, null),
|
|
40
|
+
id: item === null || item === void 0 ? void 0 : item.id,
|
|
41
|
+
isSelected: item === null || item === void 0 ? void 0 : item.isSelected,
|
|
42
|
+
onClick: onClick,
|
|
43
|
+
role: "option"
|
|
44
|
+
}, formatMessage(messages.table)));
|
|
45
|
+
};
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { STRUCTURE_SECTION, TABLE_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
|
|
3
|
+
import { QUICK_INSERT_STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
|
|
4
|
+
import { TableQuickInsertMenuItem } from './TableQuickInsertMenuItem';
|
|
5
|
+
export const getTableQuickInsertComponents = ({
|
|
6
|
+
api,
|
|
7
|
+
isTableSelectorEnabled,
|
|
8
|
+
options
|
|
9
|
+
}) => [{
|
|
10
|
+
...TABLE_MENU_ITEM,
|
|
11
|
+
parents: [{
|
|
12
|
+
...STRUCTURE_SECTION,
|
|
13
|
+
rank: QUICK_INSERT_STRUCTURE_SECTION_RANK[TABLE_MENU_ITEM.key]
|
|
14
|
+
}],
|
|
15
|
+
component: () => /*#__PURE__*/React.createElement(TableQuickInsertMenuItem, {
|
|
16
|
+
api: api,
|
|
17
|
+
isTableSelectorEnabled: isTableSelectorEnabled,
|
|
18
|
+
options: options
|
|
19
|
+
})
|
|
20
|
+
}];
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
2
|
+
import { getParentOfTypeCount, getPositionAfterTopParentNodeOfType } from '@atlaskit/editor-common/nesting';
|
|
3
|
+
import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
6
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
7
|
+
import { pluginKey as sizeSelectorPluginKey } from '../../pm-plugins/table-size-selector';
|
|
8
|
+
import { createTableWithWidth } from '../../pm-plugins/utils/create';
|
|
9
|
+
export const insertTableFromQuickInsert = ({
|
|
10
|
+
api,
|
|
11
|
+
inputMethod,
|
|
12
|
+
insert,
|
|
13
|
+
isTableSelectorEnabled,
|
|
14
|
+
options,
|
|
15
|
+
state
|
|
16
|
+
}) => {
|
|
17
|
+
var _api$markdownMode, _api$table, _api$analytics, _tr$selection$$from$n;
|
|
18
|
+
if (isTableSelectorEnabled) {
|
|
19
|
+
const tr = insert('');
|
|
20
|
+
tr.setMeta(sizeSelectorPluginKey, {
|
|
21
|
+
isSelectorOpen: true
|
|
22
|
+
});
|
|
23
|
+
return tr;
|
|
24
|
+
}
|
|
25
|
+
const markdownState = api === null || api === void 0 ? void 0 : (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 ? void 0 : _api$markdownMode.sharedState.currentState();
|
|
26
|
+
if (markdownState !== null && markdownState !== void 0 && markdownState.isMarkdownMode && (markdownState === null || markdownState === void 0 ? void 0 : markdownState.view) === 'syntax' && expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && fg('platform_editor_markdown_compatible_toolbar')) {
|
|
27
|
+
var _api$markdownMode2;
|
|
28
|
+
api === null || api === void 0 ? void 0 : (_api$markdownMode2 = api.markdownMode) === null || _api$markdownMode2 === void 0 ? void 0 : _api$markdownMode2.actions.insertSourceTable();
|
|
29
|
+
return state.tr;
|
|
30
|
+
}
|
|
31
|
+
const tableState = api === null || api === void 0 ? void 0 : (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
|
|
32
|
+
const tableNodeProps = {
|
|
33
|
+
isTableScalingEnabled: options.isTableScalingEnabled,
|
|
34
|
+
isTableAlignmentEnabled: options.tableOptions.allowTableAlignment,
|
|
35
|
+
isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
|
|
36
|
+
isMaxWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled,
|
|
37
|
+
isCommentEditor: options.isCommentEditor,
|
|
38
|
+
isChromelessEditor: options.isChromelessEditor,
|
|
39
|
+
isTableResizingEnabled: options.tableOptions.allowTableResizing
|
|
40
|
+
};
|
|
41
|
+
let tableNode = createTableWithWidth(tableNodeProps)(state.schema);
|
|
42
|
+
let {
|
|
43
|
+
tr
|
|
44
|
+
} = state;
|
|
45
|
+
if (hasParentNodeOfType(state.schema.nodes.table)(state.selection) && options.tableOptions.allowNestedTables) {
|
|
46
|
+
if (getParentOfTypeCount(state.schema.nodes.table)(state.selection.$from) > 1) {
|
|
47
|
+
const positionAfterTopTable = getPositionAfterTopParentNodeOfType(state.schema.nodes.table)(state.selection.$from);
|
|
48
|
+
tr = safeInsert(tableNode, positionAfterTopTable)(tr);
|
|
49
|
+
tr.scrollIntoView();
|
|
50
|
+
} else {
|
|
51
|
+
tableNode = createTableWithWidth({
|
|
52
|
+
...tableNodeProps,
|
|
53
|
+
isNestedTable: true
|
|
54
|
+
})(state.schema);
|
|
55
|
+
tr = insert(tableNode);
|
|
56
|
+
}
|
|
57
|
+
} else {
|
|
58
|
+
tr = insert(tableNode);
|
|
59
|
+
}
|
|
60
|
+
api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions.attachAnalyticsEvent({
|
|
61
|
+
action: ACTION.INSERTED,
|
|
62
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
63
|
+
actionSubjectId: ACTION_SUBJECT_ID.TABLE,
|
|
64
|
+
attributes: {
|
|
65
|
+
inputMethod,
|
|
66
|
+
localId: tableNode.attrs.localId,
|
|
67
|
+
...(expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? {
|
|
68
|
+
parentNode: (_tr$selection$$from$n = tr.selection.$from.node(-1)) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type.name
|
|
69
|
+
} : {})
|
|
70
|
+
},
|
|
71
|
+
eventType: EVENT_TYPE.TRACK
|
|
72
|
+
})(tr);
|
|
73
|
+
return tr;
|
|
74
|
+
};
|
package/dist/esm/tablePlugin.js
CHANGED
|
@@ -14,6 +14,7 @@ import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
|
|
|
14
14
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
15
15
|
import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
16
16
|
import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
|
|
17
|
+
import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
|
|
17
18
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
18
19
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
19
20
|
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
@@ -47,6 +48,7 @@ import { getHeightInfoPayload, getWidthInfoPayload } from './pm-plugins/utils/an
|
|
|
47
48
|
import { createTableWithWidth } from './pm-plugins/utils/create';
|
|
48
49
|
import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
|
|
49
50
|
import { ContentComponent } from './ui/ContentComponent';
|
|
51
|
+
import { getTableQuickInsertComponents } from './ui/quick-insert/getTableQuickInsertComponents';
|
|
50
52
|
import { getTableMenuComponents } from './ui/TableMenu/shared/getTableMenuComponents';
|
|
51
53
|
import { getToolbarConfig } from './ui/toolbar';
|
|
52
54
|
var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
|
|
@@ -90,6 +92,14 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
90
92
|
api: api
|
|
91
93
|
}));
|
|
92
94
|
}
|
|
95
|
+
if (isExperimentEnabled('platform_editor_slash_command')) {
|
|
96
|
+
var _api$uiControlRegistr2;
|
|
97
|
+
api === null || api === void 0 || (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 || _api$uiControlRegistr2.actions.register(getTableQuickInsertComponents({
|
|
98
|
+
api: api,
|
|
99
|
+
isTableSelectorEnabled: isTableSelectorEnabled,
|
|
100
|
+
options: options
|
|
101
|
+
}));
|
|
102
|
+
}
|
|
93
103
|
return {
|
|
94
104
|
name: 'table',
|
|
95
105
|
// Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
|
|
@@ -541,7 +551,7 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
541
551
|
isTableSelectorEnabled: isTableSelectorEnabled
|
|
542
552
|
});
|
|
543
553
|
},
|
|
544
|
-
pluginsOptions: {
|
|
554
|
+
pluginsOptions: _objectSpread(_objectSpread({}, isExperimentEnabled('platform_editor_slash_command') ? {} : {
|
|
545
555
|
quickInsert: function quickInsert(_ref19) {
|
|
546
556
|
var formatMessage = _ref19.formatMessage;
|
|
547
557
|
return [{
|
|
@@ -556,6 +566,7 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
556
566
|
},
|
|
557
567
|
action: function action(insert, state) {
|
|
558
568
|
var _api$markdownMode, _api$table, _options$tableOptions6, _tr$selection$$from$n;
|
|
569
|
+
// Keep this legacy path aligned with insertTableFromQuickInsert during rollout.
|
|
559
570
|
if (isTableSelectorEnabled) {
|
|
560
571
|
var _tr = insert('');
|
|
561
572
|
_tr.setMeta(sizeSelectorPluginKey, {
|
|
@@ -618,11 +629,12 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
618
629
|
return tr;
|
|
619
630
|
}
|
|
620
631
|
}];
|
|
621
|
-
}
|
|
632
|
+
}
|
|
633
|
+
}), {}, {
|
|
622
634
|
floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, function () {
|
|
623
635
|
return editorViewRef.current;
|
|
624
636
|
}, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
|
|
625
|
-
},
|
|
637
|
+
}),
|
|
626
638
|
usePluginHook: function usePluginHook(_ref20) {
|
|
627
639
|
var editorView = _ref20.editorView;
|
|
628
640
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['editorViewMode'], function (states) {
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React, { useCallback } from 'react';
|
|
2
|
+
import { useIntl } from 'react-intl';
|
|
3
|
+
import { IconTable } from '@atlaskit/editor-common/icons';
|
|
4
|
+
import { toolbarInsertBlockMessages as messages } from '@atlaskit/editor-common/messages';
|
|
5
|
+
import { useQuickInsertContext } from '@atlaskit/editor-common/quick-insert/use-quick-insert-context';
|
|
6
|
+
import ButtonItem from '@atlaskit/menu/button-item';
|
|
7
|
+
import { insertTableFromQuickInsert } from './insertTableFromQuickInsert';
|
|
8
|
+
export var TableQuickInsertMenuItem = function TableQuickInsertMenuItem(_ref) {
|
|
9
|
+
var api = _ref.api,
|
|
10
|
+
isTableSelectorEnabled = _ref.isTableSelectorEnabled,
|
|
11
|
+
options = _ref.options;
|
|
12
|
+
var _useIntl = useIntl(),
|
|
13
|
+
formatMessage = _useIntl.formatMessage;
|
|
14
|
+
var _useQuickInsertContex = useQuickInsertContext(),
|
|
15
|
+
editorView = _useQuickInsertContex.editorView,
|
|
16
|
+
item = _useQuickInsertContex.item,
|
|
17
|
+
select = _useQuickInsertContex.select;
|
|
18
|
+
var onClick = useCallback(function () {
|
|
19
|
+
select(function (_ref2) {
|
|
20
|
+
var insert = _ref2.insert,
|
|
21
|
+
source = _ref2.source;
|
|
22
|
+
return insertTableFromQuickInsert({
|
|
23
|
+
api: api,
|
|
24
|
+
inputMethod: source,
|
|
25
|
+
insert: insert,
|
|
26
|
+
isTableSelectorEnabled: isTableSelectorEnabled,
|
|
27
|
+
options: options,
|
|
28
|
+
state: editorView.state
|
|
29
|
+
});
|
|
30
|
+
});
|
|
31
|
+
}, [api, editorView, isTableSelectorEnabled, options, select]);
|
|
32
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
33
|
+
onMouseMove: item === null || item === void 0 ? void 0 : item.onMouseMove
|
|
34
|
+
}, /*#__PURE__*/React.createElement(ButtonItem, {
|
|
35
|
+
"aria-selected": item === null || item === void 0 ? void 0 : item.isSelected,
|
|
36
|
+
description: formatMessage(messages.tableDescription),
|
|
37
|
+
iconBefore: /*#__PURE__*/React.createElement(IconTable, null),
|
|
38
|
+
id: item === null || item === void 0 ? void 0 : item.id,
|
|
39
|
+
isSelected: item === null || item === void 0 ? void 0 : item.isSelected,
|
|
40
|
+
onClick: onClick,
|
|
41
|
+
role: "option"
|
|
42
|
+
}, formatMessage(messages.table)));
|
|
43
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
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 React from 'react';
|
|
5
|
+
import { STRUCTURE_SECTION, TABLE_MENU_ITEM } from '@atlaskit/editor-common/quick-insert/keys';
|
|
6
|
+
import { QUICK_INSERT_STRUCTURE_SECTION_RANK } from '@atlaskit/editor-common/quick-insert/rank';
|
|
7
|
+
import { TableQuickInsertMenuItem } from './TableQuickInsertMenuItem';
|
|
8
|
+
export var getTableQuickInsertComponents = function getTableQuickInsertComponents(_ref) {
|
|
9
|
+
var api = _ref.api,
|
|
10
|
+
isTableSelectorEnabled = _ref.isTableSelectorEnabled,
|
|
11
|
+
options = _ref.options;
|
|
12
|
+
return [_objectSpread(_objectSpread({}, TABLE_MENU_ITEM), {}, {
|
|
13
|
+
parents: [_objectSpread(_objectSpread({}, STRUCTURE_SECTION), {}, {
|
|
14
|
+
rank: QUICK_INSERT_STRUCTURE_SECTION_RANK[TABLE_MENU_ITEM.key]
|
|
15
|
+
})],
|
|
16
|
+
component: function component() {
|
|
17
|
+
return /*#__PURE__*/React.createElement(TableQuickInsertMenuItem, {
|
|
18
|
+
api: api,
|
|
19
|
+
isTableSelectorEnabled: isTableSelectorEnabled,
|
|
20
|
+
options: options
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
})];
|
|
24
|
+
};
|
|
@@ -0,0 +1,72 @@
|
|
|
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 { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
|
|
5
|
+
import { getParentOfTypeCount, getPositionAfterTopParentNodeOfType } from '@atlaskit/editor-common/nesting';
|
|
6
|
+
import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
|
|
7
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
|
+
import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
|
|
10
|
+
import { pluginKey as sizeSelectorPluginKey } from '../../pm-plugins/table-size-selector';
|
|
11
|
+
import { createTableWithWidth } from '../../pm-plugins/utils/create';
|
|
12
|
+
export var insertTableFromQuickInsert = function insertTableFromQuickInsert(_ref) {
|
|
13
|
+
var _api$markdownMode, _api$table, _api$analytics, _tr$selection$$from$n;
|
|
14
|
+
var api = _ref.api,
|
|
15
|
+
inputMethod = _ref.inputMethod,
|
|
16
|
+
insert = _ref.insert,
|
|
17
|
+
isTableSelectorEnabled = _ref.isTableSelectorEnabled,
|
|
18
|
+
options = _ref.options,
|
|
19
|
+
state = _ref.state;
|
|
20
|
+
if (isTableSelectorEnabled) {
|
|
21
|
+
var _tr = insert('');
|
|
22
|
+
_tr.setMeta(sizeSelectorPluginKey, {
|
|
23
|
+
isSelectorOpen: true
|
|
24
|
+
});
|
|
25
|
+
return _tr;
|
|
26
|
+
}
|
|
27
|
+
var markdownState = api === null || api === void 0 || (_api$markdownMode = api.markdownMode) === null || _api$markdownMode === void 0 ? void 0 : _api$markdownMode.sharedState.currentState();
|
|
28
|
+
if (markdownState !== null && markdownState !== void 0 && markdownState.isMarkdownMode && (markdownState === null || markdownState === void 0 ? void 0 : markdownState.view) === 'syntax' && expValEqualsNoExposure('cc-markdown-mode', 'isEnabled', true) && fg('platform_editor_markdown_compatible_toolbar')) {
|
|
29
|
+
var _api$markdownMode2;
|
|
30
|
+
api === null || api === void 0 || (_api$markdownMode2 = api.markdownMode) === null || _api$markdownMode2 === void 0 || _api$markdownMode2.actions.insertSourceTable();
|
|
31
|
+
return state.tr;
|
|
32
|
+
}
|
|
33
|
+
var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
|
|
34
|
+
var tableNodeProps = {
|
|
35
|
+
isTableScalingEnabled: options.isTableScalingEnabled,
|
|
36
|
+
isTableAlignmentEnabled: options.tableOptions.allowTableAlignment,
|
|
37
|
+
isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
|
|
38
|
+
isMaxWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled,
|
|
39
|
+
isCommentEditor: options.isCommentEditor,
|
|
40
|
+
isChromelessEditor: options.isChromelessEditor,
|
|
41
|
+
isTableResizingEnabled: options.tableOptions.allowTableResizing
|
|
42
|
+
};
|
|
43
|
+
var tableNode = createTableWithWidth(tableNodeProps)(state.schema);
|
|
44
|
+
var tr = state.tr;
|
|
45
|
+
if (hasParentNodeOfType(state.schema.nodes.table)(state.selection) && options.tableOptions.allowNestedTables) {
|
|
46
|
+
if (getParentOfTypeCount(state.schema.nodes.table)(state.selection.$from) > 1) {
|
|
47
|
+
var positionAfterTopTable = getPositionAfterTopParentNodeOfType(state.schema.nodes.table)(state.selection.$from);
|
|
48
|
+
tr = safeInsert(tableNode, positionAfterTopTable)(tr);
|
|
49
|
+
tr.scrollIntoView();
|
|
50
|
+
} else {
|
|
51
|
+
tableNode = createTableWithWidth(_objectSpread(_objectSpread({}, tableNodeProps), {}, {
|
|
52
|
+
isNestedTable: true
|
|
53
|
+
}))(state.schema);
|
|
54
|
+
tr = insert(tableNode);
|
|
55
|
+
}
|
|
56
|
+
} else {
|
|
57
|
+
tr = insert(tableNode);
|
|
58
|
+
}
|
|
59
|
+
api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
|
|
60
|
+
action: ACTION.INSERTED,
|
|
61
|
+
actionSubject: ACTION_SUBJECT.DOCUMENT,
|
|
62
|
+
actionSubjectId: ACTION_SUBJECT_ID.TABLE,
|
|
63
|
+
attributes: _objectSpread({
|
|
64
|
+
inputMethod: inputMethod,
|
|
65
|
+
localId: tableNode.attrs.localId
|
|
66
|
+
}, expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? {
|
|
67
|
+
parentNode: (_tr$selection$$from$n = tr.selection.$from.node(-1)) === null || _tr$selection$$from$n === void 0 ? void 0 : _tr$selection$$from$n.type.name
|
|
68
|
+
} : {}),
|
|
69
|
+
eventType: EVENT_TYPE.TRACK
|
|
70
|
+
})(tr);
|
|
71
|
+
return tr;
|
|
72
|
+
};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { TablePlugin, TablePluginOptions } from '../../tablePluginType';
|
|
4
|
+
type Props = {
|
|
5
|
+
api: ExtractInjectionAPI<TablePlugin> | undefined;
|
|
6
|
+
isTableSelectorEnabled: boolean | undefined;
|
|
7
|
+
options: TablePluginOptions;
|
|
8
|
+
};
|
|
9
|
+
export declare const TableQuickInsertMenuItem: ({ api, isTableSelectorEnabled, options, }: Props) => React.JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
2
|
+
import type { RegisterMenuItem } from '@atlaskit/editor-ui-control-model/types';
|
|
3
|
+
import type { TablePlugin, TablePluginOptions } from '../../tablePluginType';
|
|
4
|
+
type Params = {
|
|
5
|
+
api: ExtractInjectionAPI<TablePlugin> | undefined;
|
|
6
|
+
isTableSelectorEnabled: boolean | undefined;
|
|
7
|
+
options: TablePluginOptions;
|
|
8
|
+
};
|
|
9
|
+
export declare const getTableQuickInsertComponents: ({ api, isTableSelectorEnabled, options, }: Params) => RegisterMenuItem[];
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { type INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
2
|
+
import type { ExtractInjectionAPI, TypeAheadInsert } from '@atlaskit/editor-common/types';
|
|
3
|
+
import type { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
|
|
4
|
+
import type { TablePlugin, TablePluginOptions } from '../../tablePluginType';
|
|
5
|
+
type InsertTableFromQuickInsertParams = {
|
|
6
|
+
api: ExtractInjectionAPI<TablePlugin> | undefined;
|
|
7
|
+
inputMethod: INPUT_METHOD.ELEMENT_BROWSER | INPUT_METHOD.QUICK_INSERT | INPUT_METHOD.TOOLBAR;
|
|
8
|
+
insert: TypeAheadInsert;
|
|
9
|
+
isTableSelectorEnabled: boolean | undefined;
|
|
10
|
+
options: TablePluginOptions;
|
|
11
|
+
state: EditorState;
|
|
12
|
+
};
|
|
13
|
+
export declare const insertTableFromQuickInsert: ({ api, inputMethod, insert, isTableSelectorEnabled, options, state, }: InsertTableFromQuickInsertParams) => Transaction;
|
|
14
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "24.5.
|
|
3
|
+
"version": "24.5.7",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@atlaskit/editor-plugin-batch-attribute-updates": "^12.1.0",
|
|
30
30
|
"@atlaskit/editor-plugin-content-insertion": "^12.1.0",
|
|
31
31
|
"@atlaskit/editor-plugin-editor-viewmode": "^14.1.0",
|
|
32
|
-
"@atlaskit/editor-plugin-extension": "15.1.
|
|
32
|
+
"@atlaskit/editor-plugin-extension": "15.1.2",
|
|
33
33
|
"@atlaskit/editor-plugin-guideline": "^12.1.0",
|
|
34
34
|
"@atlaskit/editor-plugin-interaction": "^23.1.0",
|
|
35
35
|
"@atlaskit/editor-plugin-limited-mode": "^9.1.0",
|
|
@@ -42,17 +42,18 @@
|
|
|
42
42
|
"@atlaskit/editor-shared-styles": "^4.0.0",
|
|
43
43
|
"@atlaskit/editor-tables": "^3.0.0",
|
|
44
44
|
"@atlaskit/editor-toolbar": "^2.4.0",
|
|
45
|
-
"@atlaskit/editor-ui-control-model": "^2.
|
|
45
|
+
"@atlaskit/editor-ui-control-model": "^2.4.0",
|
|
46
46
|
"@atlaskit/icon": "^37.2.0",
|
|
47
47
|
"@atlaskit/icon-lab": "^7.4.0",
|
|
48
48
|
"@atlaskit/insm": "^1.2.0",
|
|
49
49
|
"@atlaskit/menu": "^9.2.0",
|
|
50
|
+
"@atlaskit/platform-feature-experiments": "^0.3.0",
|
|
50
51
|
"@atlaskit/platform-feature-flags": "^2.1.0",
|
|
51
52
|
"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
|
|
52
53
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
|
|
53
54
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
|
|
54
55
|
"@atlaskit/primitives": "^22.2.0",
|
|
55
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
56
|
+
"@atlaskit/tmp-editor-statsig": "^136.1.0",
|
|
56
57
|
"@atlaskit/toggle": "^17.1.0",
|
|
57
58
|
"@atlaskit/tokens": "^16.3.0",
|
|
58
59
|
"@atlaskit/tooltip": "^24.0.0",
|
|
@@ -67,7 +68,7 @@
|
|
|
67
68
|
"uuid": "^3.1.0"
|
|
68
69
|
},
|
|
69
70
|
"peerDependencies": {
|
|
70
|
-
"@atlaskit/editor-common": "^116.
|
|
71
|
+
"@atlaskit/editor-common": "^116.49.0",
|
|
71
72
|
"react": "^18.2.0 || ^19.2.0",
|
|
72
73
|
"react-dom": "^18.2.0 || ^19.2.0",
|
|
73
74
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|