@atlaskit/editor-plugin-table 2.6.11 → 2.6.13

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/editor-plugin-table
 
+## 2.6.13
+
+### Patch Changes
+
+- [`8fe864e4f7a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8fe864e4f7a) - [ux] ED-19336: Fixed insert column button not visible when sticky header is enabled."
+
+## 2.6.12
+
+### Patch Changes
+
+- [`08bae0f0926`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08bae0f0926) - [ux] When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
+  toggling side-effects because the intersection observers gets confused and ends up toggling the sticky header on when it should
+  be off and vice-versa.
+
+  This is due to their positioning using css relative top & bottom respectively. A row is only ~44px height and the bottom sentinel is
+  positioned ~67px off the bottom, and the top sentinel is ~25px off the top (which aligns to the top of the row).
+  So when only 1 row exist the bottom sentinel ends up being ~23px above the top sentinel. Which means the logic for
+  toggling becomes inverted and when the sentinels are scrolled off the screen the top on is now last and ends up displaying the
+  sticky header, where previously the bottom sentinel would hide it.
+
+- Updated dependencies
+
 ## 2.6.11
 
 ### Patch Changes

package/dist/cjs/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -445,6 +445,11 @@ var TableRowNodeView = /*#__PURE__*/function () {
           return;
         }
         var table = _this4.tree.table;
+        if (table.rows.length < 2) {
+          // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
+          // toggling side-effects because the intersection observers gets confused.
+          return;
+        }
         entries.forEach(function (entry) {
           var _entry$rootBounds;
           var target = entry.target;

package/dist/cjs/plugins/table/ui/FloatingInsertButton/index.js

@@ -19,6 +19,7 @@ var _analytics = require("@atlaskit/editor-common/analytics");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
@@ -114,6 +115,12 @@ var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       var tableWrapper = (0, _utils.closestElement)(targetCellRef, ".".concat(_types.TableCssClassName.TABLE_NODE_WRAPPER));
       var index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
       var hasNumberedColumns = (0, _utils4.checkIfNumberColumnEnabled)(editorView.state.selection);
+
+      // ED-19336: Fixed the 'add column button' not visible issue when sticky header is enabled
+      // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
+      // Only when inserting a column, otherwise set to undefined
+      // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
+      var zIndex = type === 'column' ? _editorSharedStyles.akEditorTableCellOnStickyHeaderZIndex : undefined;
       return /*#__PURE__*/_react.default.createElement(_ui.Popup, (0, _extends2.default)({
         target: targetCellRef,
         mountTo: tableContainerWrapper || mountPoint,
@@ -121,7 +128,9 @@ var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         scrollableElement: tableWrapper,
         forcePlacement: true,
         allowOutOfBounds: true
-      }, (0, _getPopupOptions.default)(type, index, hasNumberedColumns, tableContainerWrapper)), /*#__PURE__*/_react.default.createElement(_InsertButton.default, {
+      }, (0, _getPopupOptions.default)(type, index, hasNumberedColumns, tableContainerWrapper), {
+        zIndex: zIndex
+      }), /*#__PURE__*/_react.default.createElement(_InsertButton.default, {
         type: type,
         tableRef: tableRef,
         onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.11",
+	"version": "2.6.13",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -417,6 +417,11 @@ export class TableRowNodeView {
       const {
         table
       } = this.tree;
+      if (table.rows.length < 2) {
+        // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
+        // toggling side-effects because the intersection observers gets confused.
+        return;
+      }
       entries.forEach(entry => {
         var _entry$rootBounds;
         const target = entry.target;

package/dist/es2019/plugins/table/ui/FloatingInsertButton/index.js

@@ -6,6 +6,7 @@ import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE, INPUT_METHOD } f
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -97,6 +98,12 @@ export class FloatingInsertButton extends React.Component {
     const tableWrapper = closestElement(targetCellRef, `.${ClassName.TABLE_NODE_WRAPPER}`);
     const index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
     const hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state.selection);
+
+    // ED-19336: Fixed the 'add column button' not visible issue when sticky header is enabled
+    // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
+    // Only when inserting a column, otherwise set to undefined
+    // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
+    const zIndex = type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
     return /*#__PURE__*/React.createElement(Popup, _extends({
       target: targetCellRef,
       mountTo: tableContainerWrapper || mountPoint,
@@ -104,7 +111,9 @@ export class FloatingInsertButton extends React.Component {
       scrollableElement: tableWrapper,
       forcePlacement: true,
       allowOutOfBounds: true
-    }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper)), /*#__PURE__*/React.createElement(InsertButton, {
+    }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper), {
+      zIndex: zIndex
+    }), /*#__PURE__*/React.createElement(InsertButton, {
       type: type,
       tableRef: tableRef,
       onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.11",
+	"version": "2.6.13",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.js

@@ -438,6 +438,11 @@ export var TableRowNodeView = /*#__PURE__*/function () {
           return;
         }
         var table = _this4.tree.table;
+        if (table.rows.length < 2) {
+          // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
+          // toggling side-effects because the intersection observers gets confused.
+          return;
+        }
         entries.forEach(function (entry) {
           var _entry$rootBounds;
           var target = entry.target;

package/dist/esm/plugins/table/ui/FloatingInsertButton/index.js

@@ -14,6 +14,7 @@ import { ACTION, ACTION_SUBJECT, CONTENT_COMPONENT, EVENT_TYPE, INPUT_METHOD } f
 import { Popup } from '@atlaskit/editor-common/ui';
 import { closestElement } from '@atlaskit/editor-common/utils';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
+import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -107,6 +108,12 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
       var tableWrapper = closestElement(targetCellRef, ".".concat(ClassName.TABLE_NODE_WRAPPER));
       var index = type === 'column' ? insertColumnButtonIndex : insertRowButtonIndex;
       var hasNumberedColumns = checkIfNumberColumnEnabled(editorView.state.selection);
+
+      // ED-19336: Fixed the 'add column button' not visible issue when sticky header is enabled
+      // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
+      // Only when inserting a column, otherwise set to undefined
+      // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
+      var zIndex = type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
       return /*#__PURE__*/React.createElement(Popup, _extends({
         target: targetCellRef,
         mountTo: tableContainerWrapper || mountPoint,
@@ -114,7 +121,9 @@ export var FloatingInsertButton = /*#__PURE__*/function (_React$Component) {
         scrollableElement: tableWrapper,
         forcePlacement: true,
         allowOutOfBounds: true
-      }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper)), /*#__PURE__*/React.createElement(InsertButton, {
+      }, getPopupOptions(type, index, hasNumberedColumns, tableContainerWrapper), {
+        zIndex: zIndex
+      }), /*#__PURE__*/React.createElement(InsertButton, {
         type: type,
         tableRef: tableRef,
         onMouseDown: type === 'column' ? this.insertColumn : this.insertRow,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.6.11",
+	"version": "2.6.13",
 	"sideEffects": false
 }

package/examples/99-testing.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { IntlProvider } from 'react-intl-next';
 
 import Button from '@atlaskit/button/standard-button';
+import type { CollabEditOptions } from '@atlaskit/editor-common/collab';
 import {
   createEditorExampleForTests,
   mapProvidersToProps,
@@ -11,7 +12,6 @@ import { getDefaultLinkPickerOptions } from '@atlaskit/editor-core/example-helpe
 import { TitleInput } from '@atlaskit/editor-core/example-helpers/PageElements';
 import { SaveAndCancelButtons } from '@atlaskit/editor-core/examples/5-full-page';
 import { ContextPanel, Editor } from '@atlaskit/editor-core/src';
-import { CollabEditOptions } from '@atlaskit/editor-core/src/plugins/collab-edit';
 import { customInsertMenuItems } from '@atlaskit/editor-test-helpers/mock-insert-menu';
 import { SmartCardProvider } from '@atlaskit/link-provider';
 import { AtlassianIcon } from '@atlaskit/logo/atlassian-icon';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.6.11",
+  "version": "2.6.13",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^28.0.0",
-    "@atlaskit/editor-common": "^74.36.0",
+    "@atlaskit/editor-common": "^74.38.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.7",
@@ -59,7 +59,7 @@
     "@atlaskit/editor-plugin-feature-flags": "^0.1.3",
     "@atlaskit/editor-plugin-grid": "^0.1.0",
     "@atlaskit/editor-plugin-guideline": "^0.3.4",
-    "@atlaskit/editor-plugin-hyperlink": "^0.2.0",
+    "@atlaskit/editor-plugin-hyperlink": "^0.3.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
     "@atlaskit/editor-test-helpers": "^18.10.0",
     "@atlaskit/visual-regression": "*",

package/src/plugins/table/pm-plugins/sticky-headers/nodeviews/tableRow.ts

@@ -285,6 +285,13 @@ export class TableRowNodeView implements NodeView {
           return;
         }
         const { table } = this.tree;
+
+        if (table.rows.length < 2) {
+          // ED-19307 - When there's only one row in a table the top & bottom sentinels become inverted. This creates some nasty visiblity
+          // toggling side-effects because the intersection observers gets confused.
+          return;
+        }
+
         entries.forEach((entry) => {
           const target = entry.target as HTMLElement;
 

package/src/plugins/table/ui/FloatingInsertButton/index.tsx

@@ -18,6 +18,7 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 import { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findTable } from '@atlaskit/editor-tables/utils';
@@ -176,6 +177,13 @@ export class FloatingInsertButton extends React.Component<
       editorView.state.selection,
     );
 
+    // ED-19336: Fixed the 'add column button' not visible issue when sticky header is enabled
+    // By setting the Popup z-index higher than the sticky header z-index ( common-styles.ts tr.sticky)
+    // Only when inserting a column, otherwise set to undefined
+    // Need to set z-index in the Popup, set z-index in the <InsertButton /> will not work
+    const zIndex: number | undefined =
+      type === 'column' ? akEditorTableCellOnStickyHeaderZIndex : undefined;
+
     return (
       <Popup
         target={targetCellRef}
@@ -190,6 +198,7 @@ export class FloatingInsertButton extends React.Component<
           hasNumberedColumns,
           tableContainerWrapper,
         )}
+        zIndex={zIndex}
       >
         <InsertButton
           type={type}