@atlaskit/editor-plugin-table 15.3.12 → 15.3.13

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 15.3.13
+
+### Patch Changes
+
+- [`ca454ed251e1e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca454ed251e1e) -
+  Add table height analytics
+- Updated dependencies
+
 ## 15.3.12
 
 ### Patch Changes

package/dist/cjs/pm-plugins/utils/analytics.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateResizedPayload = exports.generateResizeFrameRatePayloads = void 0;
+exports.getHeightInfoPayload = exports.generateResizedPayload = exports.generateResizeFrameRatePayloads = void 0;
 exports.getSelectedCellInfo = getSelectedCellInfo;
 exports.getSelectedTableInfo = getSelectedTableInfo;
 exports.withEditorAnalyticsAPI = exports.useMeasureFramerate = exports.reduceResizeFrameRateSamples = exports.getWidthInfoPayload = void 0;
@@ -256,4 +256,51 @@ var getWidthInfoPayload = exports.getWidthInfoPayload = function getWidthInfoPay
     },
     eventType: _analytics.EVENT_TYPE.OPERATIONAL
   };
+};
+var getHeightInfoPayload = exports.getHeightInfoPayload = function getHeightInfoPayload(editorView) {
+  var tablesInfo = [];
+  var editorPopupScrollParent = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
+
+  // don't send the event if the editor scroll parent is not available
+  if (!editorPopupScrollParent) {
+    return undefined;
+  }
+  var editorScrollParentClientHeight = editorPopupScrollParent.clientHeight;
+  var isEditorScrollable = editorPopupScrollParent.scrollHeight > editorScrollParentClientHeight;
+  editorView.state.doc.nodesBetween(0, editorView.state.doc.content.size, function (node, pos, parent) {
+    if (!tableContainerNodes.has(node.type.name)) {
+      return false;
+    }
+    if (node.type.name === 'table') {
+      var _domAtPos$node2;
+      var domAtPos = editorView.domAtPos(pos + 1);
+      var table = (_domAtPos$node2 = domAtPos.node) === null || _domAtPos$node2 === void 0 ? void 0 : _domAtPos$node2.parentElement;
+      var isNestedTable = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'tableCell' || (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'tableHeader';
+      if (table instanceof HTMLTableElement) {
+        tablesInfo.push({
+          isNestedTable: isNestedTable,
+          tableHeight: table.scrollHeight
+        });
+      }
+    }
+  });
+
+  // only send the event if there are tables on the page
+  if (tablesInfo.length === 0) {
+    return undefined;
+  }
+  var maxTableHeight = Math.max.apply(Math, (0, _toConsumableArray2.default)(tablesInfo.map(function (table) {
+    return table.tableHeight;
+  })));
+  return {
+    action: _analytics.TABLE_ACTION.TABLE_EDITOR_HEIGHT_INFO,
+    actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+    attributes: {
+      editorScrollParentClientHeight: editorScrollParentClientHeight,
+      isEditorScrollable: isEditorScrollable,
+      maxTableToEditorHeightRatio: maxTableHeight / editorScrollParentClientHeight,
+      tableHeightInfo: tablesInfo
+    },
+    eventType: _analytics.EVENT_TYPE.OPERATIONAL
+  };
 };

package/dist/cjs/tablePlugin.js

@@ -430,10 +430,18 @@ var tablePlugin = function tablePlugin(_ref) {
                   var requestIdleCallbackFn = function requestIdleCallbackFn() {
                     var _api$width$sharedStat2;
                     var editorWidth = api === null || api === void 0 || (_api$width$sharedStat2 = api.width.sharedState.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width;
-                    if (editorWidth && editorViewRef.current) {
-                      var payload = (0, _analytics2.getWidthInfoPayload)(editorViewRef.current, editorWidth);
-                      if (payload) {
-                        dispatchAnalyticsEvent(payload);
+                    if (editorViewRef.current) {
+                      if (editorWidth) {
+                        var payload = (0, _analytics2.getWidthInfoPayload)(editorViewRef.current, editorWidth);
+                        if (payload) {
+                          dispatchAnalyticsEvent(payload);
+                        }
+                      }
+                      if ((0, _platformFeatureFlags.fg)('platform_editor_table_height_analytics_event')) {
+                        var payloadHeight = (0, _analytics2.getHeightInfoPayload)(editorViewRef.current);
+                        if (payloadHeight) {
+                          dispatchAnalyticsEvent(payloadHeight);
+                        }
                       }
                     }
                   };

package/dist/es2019/pm-plugins/utils/analytics.js

@@ -227,4 +227,49 @@ export const getWidthInfoPayload = (editorView, editorWidth) => {
     },
     eventType: EVENT_TYPE.OPERATIONAL
   };
+};
+export const getHeightInfoPayload = editorView => {
+  const tablesInfo = [];
+  const editorPopupScrollParent = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
+
+  // don't send the event if the editor scroll parent is not available
+  if (!editorPopupScrollParent) {
+    return undefined;
+  }
+  const editorScrollParentClientHeight = editorPopupScrollParent.clientHeight;
+  const isEditorScrollable = editorPopupScrollParent.scrollHeight > editorScrollParentClientHeight;
+  editorView.state.doc.nodesBetween(0, editorView.state.doc.content.size, (node, pos, parent) => {
+    if (!tableContainerNodes.has(node.type.name)) {
+      return false;
+    }
+    if (node.type.name === 'table') {
+      var _domAtPos$node2;
+      const domAtPos = editorView.domAtPos(pos + 1);
+      const table = (_domAtPos$node2 = domAtPos.node) === null || _domAtPos$node2 === void 0 ? void 0 : _domAtPos$node2.parentElement;
+      const isNestedTable = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'tableCell' || (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'tableHeader';
+      if (table instanceof HTMLTableElement) {
+        tablesInfo.push({
+          isNestedTable: isNestedTable,
+          tableHeight: table.scrollHeight
+        });
+      }
+    }
+  });
+
+  // only send the event if there are tables on the page
+  if (tablesInfo.length === 0) {
+    return undefined;
+  }
+  const maxTableHeight = Math.max(...tablesInfo.map(table => table.tableHeight));
+  return {
+    action: TABLE_ACTION.TABLE_EDITOR_HEIGHT_INFO,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    attributes: {
+      editorScrollParentClientHeight,
+      isEditorScrollable,
+      maxTableToEditorHeightRatio: maxTableHeight / editorScrollParentClientHeight,
+      tableHeightInfo: tablesInfo
+    },
+    eventType: EVENT_TYPE.OPERATIONAL
+  };
 };

package/dist/es2019/tablePlugin.js

@@ -36,7 +36,7 @@ import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap'
 import { createPlugin as createSizeSelectorPlugin, pluginKey as sizeSelectorPluginKey } from './pm-plugins/table-size-selector';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
-import { getWidthInfoPayload } from './pm-plugins/utils/analytics';
+import { getHeightInfoPayload, getWidthInfoPayload } from './pm-plugins/utils/analytics';
 import { createTableWithWidth } from './pm-plugins/utils/create';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { ContentComponent } from './ui/ContentComponent';
@@ -419,10 +419,18 @@ const tablePlugin = ({
                   const requestIdleCallbackFn = () => {
                     var _api$width$sharedStat2;
                     const editorWidth = api === null || api === void 0 ? void 0 : (_api$width$sharedStat2 = api.width.sharedState.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width;
-                    if (editorWidth && editorViewRef.current) {
-                      const payload = getWidthInfoPayload(editorViewRef.current, editorWidth);
-                      if (payload) {
-                        dispatchAnalyticsEvent(payload);
+                    if (editorViewRef.current) {
+                      if (editorWidth) {
+                        const payload = getWidthInfoPayload(editorViewRef.current, editorWidth);
+                        if (payload) {
+                          dispatchAnalyticsEvent(payload);
+                        }
+                      }
+                      if (fg('platform_editor_table_height_analytics_event')) {
+                        const payloadHeight = getHeightInfoPayload(editorViewRef.current);
+                        if (payloadHeight) {
+                          dispatchAnalyticsEvent(payloadHeight);
+                        }
                       }
                     }
                   };

package/dist/esm/pm-plugins/utils/analytics.js

@@ -246,4 +246,51 @@ export var getWidthInfoPayload = function getWidthInfoPayload(editorView, editor
     },
     eventType: EVENT_TYPE.OPERATIONAL
   };
+};
+export var getHeightInfoPayload = function getHeightInfoPayload(editorView) {
+  var tablesInfo = [];
+  var editorPopupScrollParent = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
+
+  // don't send the event if the editor scroll parent is not available
+  if (!editorPopupScrollParent) {
+    return undefined;
+  }
+  var editorScrollParentClientHeight = editorPopupScrollParent.clientHeight;
+  var isEditorScrollable = editorPopupScrollParent.scrollHeight > editorScrollParentClientHeight;
+  editorView.state.doc.nodesBetween(0, editorView.state.doc.content.size, function (node, pos, parent) {
+    if (!tableContainerNodes.has(node.type.name)) {
+      return false;
+    }
+    if (node.type.name === 'table') {
+      var _domAtPos$node2;
+      var domAtPos = editorView.domAtPos(pos + 1);
+      var table = (_domAtPos$node2 = domAtPos.node) === null || _domAtPos$node2 === void 0 ? void 0 : _domAtPos$node2.parentElement;
+      var isNestedTable = (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'tableCell' || (parent === null || parent === void 0 ? void 0 : parent.type.name) === 'tableHeader';
+      if (table instanceof HTMLTableElement) {
+        tablesInfo.push({
+          isNestedTable: isNestedTable,
+          tableHeight: table.scrollHeight
+        });
+      }
+    }
+  });
+
+  // only send the event if there are tables on the page
+  if (tablesInfo.length === 0) {
+    return undefined;
+  }
+  var maxTableHeight = Math.max.apply(Math, _toConsumableArray(tablesInfo.map(function (table) {
+    return table.tableHeight;
+  })));
+  return {
+    action: TABLE_ACTION.TABLE_EDITOR_HEIGHT_INFO,
+    actionSubject: ACTION_SUBJECT.TABLE,
+    attributes: {
+      editorScrollParentClientHeight: editorScrollParentClientHeight,
+      isEditorScrollable: isEditorScrollable,
+      maxTableToEditorHeightRatio: maxTableHeight / editorScrollParentClientHeight,
+      tableHeightInfo: tablesInfo
+    },
+    eventType: EVENT_TYPE.OPERATIONAL
+  };
 };

package/dist/esm/tablePlugin.js

@@ -39,7 +39,7 @@ import { tableSelectionKeymapPlugin } from './pm-plugins/table-selection-keymap'
 import { createPlugin as createSizeSelectorPlugin, pluginKey as sizeSelectorPluginKey } from './pm-plugins/table-size-selector';
 import { createPlugin as createTableWidthPlugin, pluginKey as tableWidthPluginKey } from './pm-plugins/table-width';
 import { createPlugin as createTableWidthInCommentFixPlugin } from './pm-plugins/table-width-in-comment-fix';
-import { getWidthInfoPayload } from './pm-plugins/utils/analytics';
+import { getHeightInfoPayload, getWidthInfoPayload } from './pm-plugins/utils/analytics';
 import { createTableWithWidth } from './pm-plugins/utils/create';
 import { createPlugin as createViewModeSortPlugin } from './pm-plugins/view-mode-sort';
 import { ContentComponent } from './ui/ContentComponent';
@@ -421,10 +421,18 @@ var tablePlugin = function tablePlugin(_ref) {
                   var requestIdleCallbackFn = function requestIdleCallbackFn() {
                     var _api$width$sharedStat2;
                     var editorWidth = api === null || api === void 0 || (_api$width$sharedStat2 = api.width.sharedState.currentState()) === null || _api$width$sharedStat2 === void 0 ? void 0 : _api$width$sharedStat2.width;
-                    if (editorWidth && editorViewRef.current) {
-                      var payload = getWidthInfoPayload(editorViewRef.current, editorWidth);
-                      if (payload) {
-                        dispatchAnalyticsEvent(payload);
+                    if (editorViewRef.current) {
+                      if (editorWidth) {
+                        var payload = getWidthInfoPayload(editorViewRef.current, editorWidth);
+                        if (payload) {
+                          dispatchAnalyticsEvent(payload);
+                        }
+                      }
+                      if (fg('platform_editor_table_height_analytics_event')) {
+                        var payloadHeight = getHeightInfoPayload(editorViewRef.current);
+                        if (payloadHeight) {
+                          dispatchAnalyticsEvent(payloadHeight);
+                        }
                       }
                     }
                   };

package/dist/types/pm-plugins/utils/analytics.d.ts

@@ -45,4 +45,5 @@ export declare const useMeasureFramerate: (config?: UseMeasureFramerateConfig) =
     countFrames: () => void;
 };
 export declare const getWidthInfoPayload: (editorView: EditorView, editorWidth: number) => TableEventPayload | undefined;
+export declare const getHeightInfoPayload: (editorView: EditorView) => TableEventPayload | undefined;
 export {};

package/dist/types-ts4.5/pm-plugins/utils/analytics.d.ts

@@ -45,4 +45,5 @@ export declare const useMeasureFramerate: (config?: UseMeasureFramerateConfig) =
     countFrames: () => void;
 };
 export declare const getWidthInfoPayload: (editorView: EditorView, editorWidth: number) => TableEventPayload | undefined;
+export declare const getHeightInfoPayload: (editorView: EditorView) => TableEventPayload | undefined;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "15.3.12",
+	"version": "15.3.13",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -147,6 +147,12 @@
 		},
 		"platform_editor_table_width_refactor": {
 			"type": "boolean"
+		},
+		"platform_editor_table_height_analytics": {
+			"type": "boolean"
+		},
+		"platform_editor_table_height_analytics_event": {
+			"type": "boolean"
 		}
 	}
 }