@atlaskit/editor-plugin-table 10.8.2 → 10.9.0

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.
Files changed (15) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/tablePlugin.js +42 -6
  3. package/dist/cjs/ui/ContentComponent.js +180 -0
  4. package/dist/es2019/tablePlugin.js +40 -4
  5. package/dist/es2019/ui/ContentComponent.js +176 -0
  6. package/dist/esm/tablePlugin.js +40 -4
  7. package/dist/esm/ui/ContentComponent.js +172 -0
  8. package/dist/types/types/index.d.ts +8 -1
  9. package/dist/types/ui/ContentComponent.d.ts +17 -0
  10. package/dist/types-ts4.5/types/index.d.ts +8 -1
  11. package/dist/types-ts4.5/ui/ContentComponent.d.ts +17 -0
  12. package/package.json +3 -3
  13. package/src/tablePlugin.tsx +46 -4
  14. package/src/types/index.ts +17 -0
  15. package/src/ui/ContentComponent.tsx +249 -0
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 10.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#142156](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142156)
8
+ [`9e2d56551d2cc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e2d56551d2cc) -
9
+ Remove WithPluginState from Table via platform_editor_usesharedpluginstateselector
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies
14
+
15
+ ## 10.8.3
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 10.8.2
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/tablePlugin.js CHANGED
@@ -37,7 +37,6 @@ var _plugin3 = require("./pm-plugins/drag-and-drop/plugin");
37
37
  var _pluginKey2 = require("./pm-plugins/drag-and-drop/plugin-key");
38
38
  var _keymap = require("./pm-plugins/keymap");
39
39
  var _main = require("./pm-plugins/main");
40
- var _pluginFactory = require("./pm-plugins/plugin-factory");
41
40
  var _pluginKey3 = require("./pm-plugins/plugin-key");
42
41
  var _safariDeleteCompositionTextIssueWorkaround = require("./pm-plugins/safari-delete-composition-text-issue-workaround");
43
42
  var _plugin4 = require("./pm-plugins/sticky-headers/plugin");
@@ -46,7 +45,7 @@ var _util = require("./pm-plugins/sticky-headers/util");
46
45
  var _tableAnalytics = require("./pm-plugins/table-analytics");
47
46
  var _tableLocalId = require("./pm-plugins/table-local-id");
48
47
  var _plugin5 = require("./pm-plugins/table-resizing/plugin");
49
- var _pluginFactory2 = require("./pm-plugins/table-resizing/plugin-factory");
48
+ var _pluginFactory = require("./pm-plugins/table-resizing/plugin-factory");
50
49
  var _pluginKey5 = require("./pm-plugins/table-resizing/plugin-key");
51
50
  var _tableSelectionKeymap = require("./pm-plugins/table-selection-keymap");
52
51
  var _tableSizeSelector = require("./pm-plugins/table-size-selector");
@@ -54,6 +53,7 @@ var _tableWidth = require("./pm-plugins/table-width");
54
53
  var _tableWidthInCommentFix = require("./pm-plugins/table-width-in-comment-fix");
55
54
  var _create = require("./pm-plugins/utils/create");
56
55
  var _viewModeSort = require("./pm-plugins/view-mode-sort");
56
+ var _ContentComponent = require("./ui/ContentComponent");
57
57
  var _FloatingContextualButton = _interopRequireDefault(require("./ui/FloatingContextualButton"));
58
58
  var _FloatingContextualMenu = _interopRequireDefault(require("./ui/FloatingContextualMenu"));
59
59
  var _FloatingDeleteButton = _interopRequireDefault(require("./ui/FloatingDeleteButton"));
@@ -103,13 +103,19 @@ var tablePlugin = function tablePlugin(_ref) {
103
103
  // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
104
104
  // to most up to date values - passing to createPluginState will not re-initialise the state
105
105
  getSharedState: function getSharedState(editorState) {
106
+ var _tablePluginState$tab, _tableWidthResizingPl;
106
107
  if (!editorState) {
107
108
  return undefined;
108
109
  }
109
- var tablePluginState = (0, _pluginFactory.getPluginState)(editorState);
110
- var tableResizingPluginState = (0, _pluginFactory2.getPluginState)(editorState);
110
+
111
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
112
+ var tablePluginState = _pluginKey3.pluginKey.getState(editorState);
113
+ var tableResizingPluginState = (0, _pluginFactory.getPluginState)(editorState);
111
114
  var tableWidthResizingPluginState = _tableWidth.pluginKey.getState(editorState);
112
- return {
115
+ var stickyHeadersState = _pluginKey4.pluginKey.getState(editorState);
116
+ var stickyHeader = stickyHeadersState ? (0, _util.findStickyHeaderForTable)(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
117
+ var dragAndDropState = _pluginKey2.pluginKey.getState(editorState);
118
+ var sharedStateInternal = {
113
119
  isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
114
120
  wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
115
121
  isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
@@ -126,8 +132,25 @@ var tablePlugin = function tablePlugin(_ref) {
126
132
  // IMPORTANT: Need to continue to pass tableNode to control re-renders
127
133
  // TableComponent listens for node attribute changes to update colgroups
128
134
  tableNode: tablePluginState.tableNode,
129
- widthToWidest: tablePluginState.widthToWidest
135
+ widthToWidest: tablePluginState.widthToWidest,
136
+ resizingTableLocalId: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableLocalId,
137
+ tableRef: (_tablePluginState$tab = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tableRef) !== null && _tablePluginState$tab !== void 0 ? _tablePluginState$tab : undefined,
138
+ resizingTableRef: (_tableWidthResizingPl = tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableRef) !== null && _tableWidthResizingPl !== void 0 ? _tableWidthResizingPl : undefined,
139
+ tablePos: tablePluginState.tablePos,
140
+ targetCellPosition: tablePluginState.targetCellPosition,
141
+ isContextualMenuOpen: tablePluginState.isContextualMenuOpen,
142
+ pluginConfig: tablePluginState.pluginConfig,
143
+ insertColumnButtonIndex: tablePluginState.insertColumnButtonIndex,
144
+ insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
145
+ isDragAndDropEnabled: tablePluginState.isDragAndDropEnabled,
146
+ tableWrapperTarget: tablePluginState.tableWrapperTarget,
147
+ isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
148
+ stickyHeader: stickyHeader,
149
+ dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
150
+ dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
151
+ isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
130
152
  };
153
+ return sharedStateInternal;
131
154
  },
132
155
  actions: {
133
156
  insertTable: function insertTable(analyticsPayload) {
@@ -428,6 +451,19 @@ var tablePlugin = function tablePlugin(_ref) {
428
451
  popupsBoundariesElement = _ref20.popupsBoundariesElement,
429
452
  popupsScrollableElement = _ref20.popupsScrollableElement,
430
453
  dispatchAnalyticsEvent = _ref20.dispatchAnalyticsEvent;
454
+ if ((0, _experiments.editorExperiment)('platform_editor_usesharedpluginstateselector', true)) {
455
+ return /*#__PURE__*/_react.default.createElement(_ContentComponent.ContentComponent, {
456
+ api: api,
457
+ editorView: editorView,
458
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
459
+ options: options,
460
+ popupsMountPoint: popupsMountPoint,
461
+ popupsBoundariesElement: popupsBoundariesElement,
462
+ popupsScrollableElement: popupsScrollableElement,
463
+ defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
464
+ defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
465
+ });
466
+ }
431
467
  return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
432
468
  component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
433
469
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
package/dist/cjs/ui/ContentComponent.js ADDED
@@ -0,0 +1,180 @@
1
+ "use strict";
2
+
3
+ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
+ Object.defineProperty(exports, "__esModule", {
5
+ value: true
6
+ });
7
+ exports.ContentComponent = void 0;
8
+ var _react = _interopRequireDefault(require("react"));
9
+ var _analytics = require("@atlaskit/editor-common/analytics");
10
+ var _errorBoundary = require("@atlaskit/editor-common/error-boundary");
11
+ var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
12
+ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
13
+ var _FloatingContextualButton = _interopRequireDefault(require("./FloatingContextualButton"));
14
+ var _FloatingContextualMenu = _interopRequireDefault(require("./FloatingContextualMenu"));
15
+ var _FloatingDeleteButton = _interopRequireDefault(require("./FloatingDeleteButton"));
16
+ var _FloatingDragMenu = _interopRequireDefault(require("./FloatingDragMenu"));
17
+ var _FloatingInsertButton = _interopRequireDefault(require("./FloatingInsertButton"));
18
+ var _FloatingToolbarLabel = require("./FloatingToolbarLabel/FloatingToolbarLabel");
19
+ var _globalStyles = require("./global-styles");
20
+ var _TableFullWidthLabel = require("./TableFullWidthLabel");
21
+ // Ignored via go/ees005
22
+ // eslint-disable-next-line import/no-named-as-default
23
+
24
+ var useSharedTablePluginStateSelector = function useSharedTablePluginStateSelector(api, key) {
25
+ var value = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, "table.".concat(key));
26
+ return value;
27
+ };
28
+ var ContentComponentInternal = function ContentComponentInternal(_ref) {
29
+ var _api$analytics, _api$accessibilityUti;
30
+ var api = _ref.api,
31
+ editorView = _ref.editorView,
32
+ dispatchAnalyticsEvent = _ref.dispatchAnalyticsEvent,
33
+ options = _ref.options,
34
+ popupsMountPoint = _ref.popupsMountPoint,
35
+ popupsBoundariesElement = _ref.popupsBoundariesElement,
36
+ popupsScrollableElement = _ref.popupsScrollableElement,
37
+ defaultGetEditorContainerWidth = _ref.defaultGetEditorContainerWidth,
38
+ defaultGetEditorFeatureFlags = _ref.defaultGetEditorFeatureFlags;
39
+ var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
40
+ var ariaNotifyPlugin = api === null || api === void 0 || (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
41
+ var resizingTableLocalId = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
42
+ var resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
43
+ var isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
44
+ var isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
45
+ var widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
46
+ var tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
47
+ var targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
48
+ var isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
49
+ var tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
50
+ var pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
51
+ var insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
52
+ var insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
53
+ var isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
54
+ var isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
55
+ var isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
56
+ var tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
57
+ var isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
58
+ var allowControls = pluginConfig.allowControls;
59
+ var stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
60
+ var dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
61
+ var dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
62
+ var isDragMenuOpen = useSharedTablePluginStateSelector(api, 'isDragMenuOpen');
63
+ return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
64
+ isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
65
+ editorView: editorView,
66
+ tableNode: tableNode,
67
+ mountPoint: popupsMountPoint,
68
+ targetCellPosition: targetCellPosition,
69
+ scrollableElement: popupsScrollableElement,
70
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
71
+ isContextualMenuOpen: isContextualMenuOpen,
72
+ stickyHeader: stickyHeader,
73
+ tableWrapper: tableWrapperTarget,
74
+ isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
75
+ }), allowControls && /*#__PURE__*/_react.default.createElement(_FloatingInsertButton.default, {
76
+ tableNode: tableNode,
77
+ tableRef: tableRef,
78
+ insertColumnButtonIndex: insertColumnButtonIndex,
79
+ insertRowButtonIndex: insertRowButtonIndex,
80
+ isHeaderColumnEnabled: isHeaderColumnEnabled,
81
+ isHeaderRowEnabled: isHeaderRowEnabled,
82
+ isDragAndDropEnabled: isDragAndDropEnabled,
83
+ isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
84
+ editorView: editorView,
85
+ mountPoint: popupsMountPoint,
86
+ boundariesElement: popupsBoundariesElement,
87
+ scrollableElement: popupsScrollableElement,
88
+ hasStickyHeaders: stickyHeader && stickyHeader.sticky,
89
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
90
+ editorAnalyticsAPI: editorAnalyticsAPI,
91
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
92
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
93
+ isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
94
+ api: api,
95
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
96
+ }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/_react.default.createElement(_FloatingContextualMenu.default, {
97
+ editorView: editorView,
98
+ mountPoint: popupsMountPoint,
99
+ boundariesElement: popupsBoundariesElement,
100
+ targetCellPosition: targetCellPosition,
101
+ isOpen: Boolean(isContextualMenuOpen) && !isResizing,
102
+ pluginConfig: pluginConfig,
103
+ editorAnalyticsAPI: editorAnalyticsAPI,
104
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
105
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
106
+ isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
107
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
108
+ api: api
109
+ }), isDragAndDropEnabled && /*#__PURE__*/_react.default.createElement(_FloatingDragMenu.default, {
110
+ editorView: editorView,
111
+ mountPoint: popupsMountPoint,
112
+ boundariesElement: popupsBoundariesElement,
113
+ tableRef: tableRef,
114
+ tableNode: tableNode,
115
+ targetCellPosition: targetCellPosition,
116
+ direction: dragMenuDirection,
117
+ index: dragMenuIndex,
118
+ isOpen: !!isDragMenuOpen && !isResizing,
119
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
120
+ editorAnalyticsAPI: editorAnalyticsAPI,
121
+ stickyHeaders: stickyHeader,
122
+ pluginConfig: pluginConfig,
123
+ isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
124
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
125
+ ariaNotifyPlugin: ariaNotifyPlugin,
126
+ api: api,
127
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
128
+ }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/_react.default.createElement(_FloatingDeleteButton.default, {
129
+ editorView: editorView,
130
+ selection: editorView.state.selection,
131
+ tableRef: tableRef,
132
+ mountPoint: popupsMountPoint,
133
+ boundariesElement: popupsBoundariesElement,
134
+ scrollableElement: popupsScrollableElement,
135
+ stickyHeaders: stickyHeader,
136
+ isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
137
+ editorAnalyticsAPI: editorAnalyticsAPI,
138
+ api: api
139
+ }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/_react.default.createElement(_FloatingToolbarLabel.FloatingToolbarLabel, {
140
+ target: resizingTableRef,
141
+ content: /*#__PURE__*/_react.default.createElement(_TableFullWidthLabel.FullWidthDisplay, null),
142
+ alignX: 'center',
143
+ alignY: 'bottom',
144
+ stick: true,
145
+ forcePlacement: true,
146
+ zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
147
+ offset: [0, 10]
148
+ }));
149
+ };
150
+ var ContentComponent = exports.ContentComponent = function ContentComponent(_ref2) {
151
+ var _api$featureFlags;
152
+ var api = _ref2.api,
153
+ editorView = _ref2.editorView,
154
+ dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
155
+ options = _ref2.options,
156
+ popupsMountPoint = _ref2.popupsMountPoint,
157
+ popupsBoundariesElement = _ref2.popupsBoundariesElement,
158
+ popupsScrollableElement = _ref2.popupsScrollableElement,
159
+ defaultGetEditorContainerWidth = _ref2.defaultGetEditorContainerWidth,
160
+ defaultGetEditorFeatureFlags = _ref2.defaultGetEditorFeatureFlags;
161
+ return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
162
+ component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
163
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
164
+ fallbackComponent: null
165
+ }, /*#__PURE__*/_react.default.createElement(_globalStyles.GlobalStylesWrapper, {
166
+ featureFlags: api === null || api === void 0 || (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState(),
167
+ isDragAndDropEnabledOption: options === null || options === void 0 ? void 0 : options.dragAndDropEnabled,
168
+ api: api
169
+ }), /*#__PURE__*/_react.default.createElement(ContentComponentInternal, {
170
+ api: api,
171
+ editorView: editorView,
172
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
173
+ options: options,
174
+ popupsMountPoint: popupsMountPoint,
175
+ popupsBoundariesElement: popupsBoundariesElement,
176
+ popupsScrollableElement: popupsScrollableElement,
177
+ defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
178
+ defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
179
+ }));
180
+ };
package/dist/es2019/tablePlugin.js CHANGED
@@ -28,7 +28,6 @@ import { createPlugin as createDragAndDropPlugin } from './pm-plugins/drag-and-d
28
28
  import { pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop/plugin-key';
29
29
  import { keymapPlugin } from './pm-plugins/keymap';
30
30
  import { createPlugin } from './pm-plugins/main';
31
- import { getPluginState } from './pm-plugins/plugin-factory';
32
31
  import { pluginKey } from './pm-plugins/plugin-key';
33
32
  import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
34
33
  import { createPlugin as createStickyHeadersPlugin } from './pm-plugins/sticky-headers/plugin';
@@ -45,6 +44,7 @@ import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKe
45
44
  import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
46
45
  import { createTableWithWidth } from './pm-plugins/utils/create';
47
46
  import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
47
+ import { ContentComponent } from './ui/ContentComponent';
48
48
  import FloatingContextualButton from './ui/FloatingContextualButton';
49
49
  import FloatingContextualMenu from './ui/FloatingContextualMenu';
50
50
  import FloatingDeleteButton from './ui/FloatingDeleteButton';
@@ -90,13 +90,19 @@ const tablePlugin = ({
90
90
  // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
91
91
  // to most up to date values - passing to createPluginState will not re-initialise the state
92
92
  getSharedState: editorState => {
93
+ var _tablePluginState$tab, _tableWidthResizingPl;
93
94
  if (!editorState) {
94
95
  return undefined;
95
96
  }
96
- const tablePluginState = getPluginState(editorState);
97
+
98
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
99
+ const tablePluginState = pluginKey.getState(editorState);
97
100
  const tableResizingPluginState = getFlexiResizingPlugin(editorState);
98
101
  const tableWidthResizingPluginState = tableWidthPluginKey.getState(editorState);
99
- return {
102
+ const stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
103
+ const stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
104
+ const dragAndDropState = dragAndDropPluginKey.getState(editorState);
105
+ const sharedStateInternal = {
100
106
  isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
101
107
  wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
102
108
  isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
@@ -113,8 +119,25 @@ const tablePlugin = ({
113
119
  // IMPORTANT: Need to continue to pass tableNode to control re-renders
114
120
  // TableComponent listens for node attribute changes to update colgroups
115
121
  tableNode: tablePluginState.tableNode,
116
- widthToWidest: tablePluginState.widthToWidest
122
+ widthToWidest: tablePluginState.widthToWidest,
123
+ resizingTableLocalId: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableLocalId,
124
+ tableRef: (_tablePluginState$tab = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tableRef) !== null && _tablePluginState$tab !== void 0 ? _tablePluginState$tab : undefined,
125
+ resizingTableRef: (_tableWidthResizingPl = tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableRef) !== null && _tableWidthResizingPl !== void 0 ? _tableWidthResizingPl : undefined,
126
+ tablePos: tablePluginState.tablePos,
127
+ targetCellPosition: tablePluginState.targetCellPosition,
128
+ isContextualMenuOpen: tablePluginState.isContextualMenuOpen,
129
+ pluginConfig: tablePluginState.pluginConfig,
130
+ insertColumnButtonIndex: tablePluginState.insertColumnButtonIndex,
131
+ insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
132
+ isDragAndDropEnabled: tablePluginState.isDragAndDropEnabled,
133
+ tableWrapperTarget: tablePluginState.tableWrapperTarget,
134
+ isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
135
+ stickyHeader,
136
+ dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
137
+ dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
138
+ isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
117
139
  };
140
+ return sharedStateInternal;
118
141
  },
119
142
  actions: {
120
143
  insertTable: analyticsPayload => (state, dispatch) => {
@@ -416,6 +439,19 @@ const tablePlugin = ({
416
439
  dispatchAnalyticsEvent
417
440
  }) {
418
441
  var _api$featureFlags;
442
+ if (editorExperiment('platform_editor_usesharedpluginstateselector', true)) {
443
+ return /*#__PURE__*/React.createElement(ContentComponent, {
444
+ api: api,
445
+ editorView: editorView,
446
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
447
+ options: options,
448
+ popupsMountPoint: popupsMountPoint,
449
+ popupsBoundariesElement: popupsBoundariesElement,
450
+ popupsScrollableElement: popupsScrollableElement,
451
+ defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
452
+ defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
453
+ });
454
+ }
419
455
  return /*#__PURE__*/React.createElement(ErrorBoundary, {
420
456
  component: ACTION_SUBJECT.TABLES_PLUGIN,
421
457
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,
package/dist/es2019/ui/ContentComponent.js ADDED
@@ -0,0 +1,176 @@
1
+ import React from 'react';
2
+ import { ACTION_SUBJECT } from '@atlaskit/editor-common/analytics';
3
+ import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
4
+ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
5
+ import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
6
+ import FloatingContextualButton from './FloatingContextualButton';
7
+ import FloatingContextualMenu from './FloatingContextualMenu';
8
+ import FloatingDeleteButton from './FloatingDeleteButton';
9
+ import FloatingDragMenu from './FloatingDragMenu';
10
+ // Ignored via go/ees005
11
+ // eslint-disable-next-line import/no-named-as-default
12
+ import FloatingInsertButton from './FloatingInsertButton';
13
+ import { FloatingToolbarLabel } from './FloatingToolbarLabel/FloatingToolbarLabel';
14
+ import { GlobalStylesWrapper } from './global-styles';
15
+ import { FullWidthDisplay } from './TableFullWidthLabel';
16
+ const useSharedTablePluginStateSelector = (api, key) => {
17
+ const value = useSharedPluginStateSelector(api, `table.${key}`);
18
+ return value;
19
+ };
20
+ const ContentComponentInternal = ({
21
+ api,
22
+ editorView,
23
+ dispatchAnalyticsEvent,
24
+ options,
25
+ popupsMountPoint,
26
+ popupsBoundariesElement,
27
+ popupsScrollableElement,
28
+ defaultGetEditorContainerWidth,
29
+ defaultGetEditorFeatureFlags
30
+ }) => {
31
+ var _api$analytics, _api$accessibilityUti;
32
+ const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
33
+ const ariaNotifyPlugin = api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
34
+ const resizingTableLocalId = useSharedTablePluginStateSelector(api, 'resizingTableLocalId');
35
+ const resizingTableRef = useSharedTablePluginStateSelector(api, 'resizingTableRef');
36
+ const isTableResizing = useSharedTablePluginStateSelector(api, 'isTableResizing');
37
+ const isResizing = useSharedTablePluginStateSelector(api, 'isResizing');
38
+ const widthToWidest = useSharedTablePluginStateSelector(api, 'widthToWidest');
39
+ const tableNode = useSharedTablePluginStateSelector(api, 'tableNode');
40
+ const targetCellPosition = useSharedTablePluginStateSelector(api, 'targetCellPosition');
41
+ const isContextualMenuOpen = useSharedTablePluginStateSelector(api, 'isContextualMenuOpen');
42
+ const tableRef = useSharedTablePluginStateSelector(api, 'tableRef');
43
+ const pluginConfig = useSharedTablePluginStateSelector(api, 'pluginConfig');
44
+ const insertColumnButtonIndex = useSharedTablePluginStateSelector(api, 'insertColumnButtonIndex');
45
+ const insertRowButtonIndex = useSharedTablePluginStateSelector(api, 'insertRowButtonIndex');
46
+ const isHeaderColumnEnabled = useSharedTablePluginStateSelector(api, 'isHeaderColumnEnabled');
47
+ const isHeaderRowEnabled = useSharedTablePluginStateSelector(api, 'isHeaderRowEnabled');
48
+ const isDragAndDropEnabled = useSharedTablePluginStateSelector(api, 'isDragAndDropEnabled');
49
+ const tableWrapperTarget = useSharedTablePluginStateSelector(api, 'tableWrapperTarget');
50
+ const isCellMenuOpenByKeyboard = useSharedTablePluginStateSelector(api, 'isCellMenuOpenByKeyboard');
51
+ const {
52
+ allowControls
53
+ } = pluginConfig;
54
+ const stickyHeader = useSharedTablePluginStateSelector(api, 'stickyHeader');
55
+ const dragMenuDirection = useSharedTablePluginStateSelector(api, 'dragMenuDirection');
56
+ const dragMenuIndex = useSharedTablePluginStateSelector(api, 'dragMenuIndex');
57
+ const isDragMenuOpen = useSharedTablePluginStateSelector(api, 'isDragMenuOpen');
58
+ return /*#__PURE__*/React.createElement(React.Fragment, null, targetCellPosition && (tableRef || isCellMenuOpenByKeyboard) && !isResizing && options && options.allowContextualMenu && /*#__PURE__*/React.createElement(FloatingContextualButton, {
59
+ isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
60
+ editorView: editorView,
61
+ tableNode: tableNode,
62
+ mountPoint: popupsMountPoint,
63
+ targetCellPosition: targetCellPosition,
64
+ scrollableElement: popupsScrollableElement,
65
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
66
+ isContextualMenuOpen: isContextualMenuOpen,
67
+ stickyHeader: stickyHeader,
68
+ tableWrapper: tableWrapperTarget,
69
+ isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
70
+ }), allowControls && /*#__PURE__*/React.createElement(FloatingInsertButton, {
71
+ tableNode: tableNode,
72
+ tableRef: tableRef,
73
+ insertColumnButtonIndex: insertColumnButtonIndex,
74
+ insertRowButtonIndex: insertRowButtonIndex,
75
+ isHeaderColumnEnabled: isHeaderColumnEnabled,
76
+ isHeaderRowEnabled: isHeaderRowEnabled,
77
+ isDragAndDropEnabled: isDragAndDropEnabled,
78
+ isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
79
+ editorView: editorView,
80
+ mountPoint: popupsMountPoint,
81
+ boundariesElement: popupsBoundariesElement,
82
+ scrollableElement: popupsScrollableElement,
83
+ hasStickyHeaders: stickyHeader && stickyHeader.sticky,
84
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
85
+ editorAnalyticsAPI: editorAnalyticsAPI,
86
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
87
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
88
+ isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
89
+ api: api,
90
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
91
+ }), (options === null || options === void 0 ? void 0 : options.allowContextualMenu) && /*#__PURE__*/React.createElement(FloatingContextualMenu, {
92
+ editorView: editorView,
93
+ mountPoint: popupsMountPoint,
94
+ boundariesElement: popupsBoundariesElement,
95
+ targetCellPosition: targetCellPosition,
96
+ isOpen: Boolean(isContextualMenuOpen) && !isResizing,
97
+ pluginConfig: pluginConfig,
98
+ editorAnalyticsAPI: editorAnalyticsAPI,
99
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
100
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
101
+ isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
102
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
103
+ api: api
104
+ }), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
105
+ editorView: editorView,
106
+ mountPoint: popupsMountPoint,
107
+ boundariesElement: popupsBoundariesElement,
108
+ tableRef: tableRef,
109
+ tableNode: tableNode,
110
+ targetCellPosition: targetCellPosition,
111
+ direction: dragMenuDirection,
112
+ index: dragMenuIndex,
113
+ isOpen: !!isDragMenuOpen && !isResizing,
114
+ getEditorContainerWidth: defaultGetEditorContainerWidth,
115
+ editorAnalyticsAPI: editorAnalyticsAPI,
116
+ stickyHeaders: stickyHeader,
117
+ pluginConfig: pluginConfig,
118
+ isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
119
+ getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
120
+ ariaNotifyPlugin: ariaNotifyPlugin,
121
+ api: api,
122
+ isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
123
+ }), allowControls && !isDragAndDropEnabled && !isResizing && /*#__PURE__*/React.createElement(FloatingDeleteButton, {
124
+ editorView: editorView,
125
+ selection: editorView.state.selection,
126
+ tableRef: tableRef,
127
+ mountPoint: popupsMountPoint,
128
+ boundariesElement: popupsBoundariesElement,
129
+ scrollableElement: popupsScrollableElement,
130
+ stickyHeaders: stickyHeader,
131
+ isNumberColumnEnabled: tableNode && tableNode.attrs.isNumberColumnEnabled,
132
+ editorAnalyticsAPI: editorAnalyticsAPI,
133
+ api: api
134
+ }), ((options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || (options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing) && options.isCommentEditor) && isTableResizing && widthToWidest && resizingTableLocalId && resizingTableRef && widthToWidest[resizingTableLocalId] && /*#__PURE__*/React.createElement(FloatingToolbarLabel, {
135
+ target: resizingTableRef,
136
+ content: /*#__PURE__*/React.createElement(FullWidthDisplay, null),
137
+ alignX: 'center',
138
+ alignY: 'bottom',
139
+ stick: true,
140
+ forcePlacement: true,
141
+ zIndex: akEditorFloatingPanelZIndex,
142
+ offset: [0, 10]
143
+ }));
144
+ };
145
+ export const ContentComponent = ({
146
+ api,
147
+ editorView,
148
+ dispatchAnalyticsEvent,
149
+ options,
150
+ popupsMountPoint,
151
+ popupsBoundariesElement,
152
+ popupsScrollableElement,
153
+ defaultGetEditorContainerWidth,
154
+ defaultGetEditorFeatureFlags
155
+ }) => {
156
+ var _api$featureFlags;
157
+ return /*#__PURE__*/React.createElement(ErrorBoundary, {
158
+ component: ACTION_SUBJECT.TABLES_PLUGIN,
159
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
160
+ fallbackComponent: null
161
+ }, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
162
+ featureFlags: api === null || api === void 0 ? void 0 : (_api$featureFlags = api.featureFlags) === null || _api$featureFlags === void 0 ? void 0 : _api$featureFlags.sharedState.currentState(),
163
+ isDragAndDropEnabledOption: options === null || options === void 0 ? void 0 : options.dragAndDropEnabled,
164
+ api: api
165
+ }), /*#__PURE__*/React.createElement(ContentComponentInternal, {
166
+ api: api,
167
+ editorView: editorView,
168
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
169
+ options: options,
170
+ popupsMountPoint: popupsMountPoint,
171
+ popupsBoundariesElement: popupsBoundariesElement,
172
+ popupsScrollableElement: popupsScrollableElement,
173
+ defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
174
+ defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
175
+ }));
176
+ };
package/dist/esm/tablePlugin.js CHANGED
@@ -31,7 +31,6 @@ import { createPlugin as createDragAndDropPlugin } from './pm-plugins/drag-and-d
31
31
  import { pluginKey as dragAndDropPluginKey } from './pm-plugins/drag-and-drop/plugin-key';
32
32
  import { keymapPlugin } from './pm-plugins/keymap';
33
33
  import { createPlugin } from './pm-plugins/main';
34
- import { getPluginState } from './pm-plugins/plugin-factory';
35
34
  import { pluginKey } from './pm-plugins/plugin-key';
36
35
  import { createPlugin as createTableSafariDeleteCompositionTextIssueWorkaroundPlugin } from './pm-plugins/safari-delete-composition-text-issue-workaround';
37
36
  import { createPlugin as createStickyHeadersPlugin } from './pm-plugins/sticky-headers/plugin';
@@ -48,6 +47,7 @@ import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKe
48
47
  import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
49
48
  import { createTableWithWidth } from './pm-plugins/utils/create';
50
49
  import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
50
+ import { ContentComponent } from './ui/ContentComponent';
51
51
  import FloatingContextualButton from './ui/FloatingContextualButton';
52
52
  import FloatingContextualMenu from './ui/FloatingContextualMenu';
53
53
  import FloatingDeleteButton from './ui/FloatingDeleteButton';
@@ -94,13 +94,19 @@ var tablePlugin = function tablePlugin(_ref) {
94
94
  // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
95
95
  // to most up to date values - passing to createPluginState will not re-initialise the state
96
96
  getSharedState: function getSharedState(editorState) {
97
+ var _tablePluginState$tab, _tableWidthResizingPl;
97
98
  if (!editorState) {
98
99
  return undefined;
99
100
  }
100
- var tablePluginState = getPluginState(editorState);
101
+
102
+ // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
103
+ var tablePluginState = pluginKey.getState(editorState);
101
104
  var tableResizingPluginState = getFlexiResizingPlugin(editorState);
102
105
  var tableWidthResizingPluginState = tableWidthPluginKey.getState(editorState);
103
- return {
106
+ var stickyHeadersState = stickyHeadersPluginKey.getState(editorState);
107
+ var stickyHeader = stickyHeadersState ? findStickyHeaderForTable(stickyHeadersState, tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tablePos) : undefined;
108
+ var dragAndDropState = dragAndDropPluginKey.getState(editorState);
109
+ var sharedStateInternal = {
104
110
  isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
105
111
  wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
106
112
  isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
@@ -117,8 +123,25 @@ var tablePlugin = function tablePlugin(_ref) {
117
123
  // IMPORTANT: Need to continue to pass tableNode to control re-renders
118
124
  // TableComponent listens for node attribute changes to update colgroups
119
125
  tableNode: tablePluginState.tableNode,
120
- widthToWidest: tablePluginState.widthToWidest
126
+ widthToWidest: tablePluginState.widthToWidest,
127
+ resizingTableLocalId: tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableLocalId,
128
+ tableRef: (_tablePluginState$tab = tablePluginState === null || tablePluginState === void 0 ? void 0 : tablePluginState.tableRef) !== null && _tablePluginState$tab !== void 0 ? _tablePluginState$tab : undefined,
129
+ resizingTableRef: (_tableWidthResizingPl = tableWidthResizingPluginState === null || tableWidthResizingPluginState === void 0 ? void 0 : tableWidthResizingPluginState.tableRef) !== null && _tableWidthResizingPl !== void 0 ? _tableWidthResizingPl : undefined,
130
+ tablePos: tablePluginState.tablePos,
131
+ targetCellPosition: tablePluginState.targetCellPosition,
132
+ isContextualMenuOpen: tablePluginState.isContextualMenuOpen,
133
+ pluginConfig: tablePluginState.pluginConfig,
134
+ insertColumnButtonIndex: tablePluginState.insertColumnButtonIndex,
135
+ insertRowButtonIndex: tablePluginState.insertRowButtonIndex,
136
+ isDragAndDropEnabled: tablePluginState.isDragAndDropEnabled,
137
+ tableWrapperTarget: tablePluginState.tableWrapperTarget,
138
+ isCellMenuOpenByKeyboard: tablePluginState.isCellMenuOpenByKeyboard,
139
+ stickyHeader: stickyHeader,
140
+ dragMenuDirection: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuDirection,
141
+ dragMenuIndex: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.dragMenuIndex,
142
+ isDragMenuOpen: dragAndDropState === null || dragAndDropState === void 0 ? void 0 : dragAndDropState.isDragMenuOpen
121
143
  };
144
+ return sharedStateInternal;
122
145
  },
123
146
  actions: {
124
147
  insertTable: function insertTable(analyticsPayload) {
@@ -419,6 +442,19 @@ var tablePlugin = function tablePlugin(_ref) {
419
442
  popupsBoundariesElement = _ref20.popupsBoundariesElement,
420
443
  popupsScrollableElement = _ref20.popupsScrollableElement,
421
444
  dispatchAnalyticsEvent = _ref20.dispatchAnalyticsEvent;
445
+ if (editorExperiment('platform_editor_usesharedpluginstateselector', true)) {
446
+ return /*#__PURE__*/React.createElement(ContentComponent, {
447
+ api: api,
448
+ editorView: editorView,
449
+ dispatchAnalyticsEvent: dispatchAnalyticsEvent,
450
+ options: options,
451
+ popupsMountPoint: popupsMountPoint,
452
+ popupsBoundariesElement: popupsBoundariesElement,
453
+ popupsScrollableElement: popupsScrollableElement,
454
+ defaultGetEditorContainerWidth: defaultGetEditorContainerWidth,
455
+ defaultGetEditorFeatureFlags: defaultGetEditorFeatureFlags
456
+ });
457
+ }
422
458
  return /*#__PURE__*/React.createElement(ErrorBoundary, {
423
459
  component: ACTION_SUBJECT.TABLES_PLUGIN,
424
460
  dispatchAnalyticsEvent: dispatchAnalyticsEvent,