@atlaskit/editor-plugin-table 2.6.12 → 2.7.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 2.7.0
+
+### Minor Changes
+
+- [`960a2b478c8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/960a2b478c8) - [ux] [ED-19167] Add blue shadow to resizer handle on hover
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

package/dist/cjs/plugins/table/nodeviews/TableResizer.js

@@ -13,6 +13,7 @@ var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _resizer = require("@atlaskit/editor-common/resizer");
+var _styles = require("@atlaskit/editor-common/styles");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils = require("@atlaskit/editor-tables/utils");
 var _utils2 = require("../pm-plugins/table-resizing/utils");
@@ -28,7 +29,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var handles = {
   right: true
 };
-var tableHandleMarginTop = 11;
+var tableHandleMarginTop = 12;
 var generateResizedPayload = function generateResizedPayload(props) {
   var _props$originalNode$a;
   var tableMap = _editorTables.TableMap.get(props.resizedNode);
@@ -161,6 +162,22 @@ var TableResizer = function TableResizer(_ref) {
   var scheduleResize = (0, _react.useMemo)(function () {
     return (0, _rafSchd.default)(handleResize);
   }, [handleResize]);
+  var handleComponent = (0, _react.useMemo)(function () {
+    return {
+      left: /*#__PURE__*/_react.default.createElement("div", {
+        className: _styles.resizerHandleShadowClassName,
+        style: {
+          height: 'calc(100% - 24px)'
+        }
+      }),
+      right: /*#__PURE__*/_react.default.createElement("div", {
+        className: _styles.resizerHandleShadowClassName,
+        style: {
+          height: 'calc(100% - 24px)'
+        }
+      })
+    };
+  }, []);
   return /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     enable: handles,
     width: width,
@@ -176,7 +193,8 @@ var TableResizer = function TableResizer(_ref) {
     snapGap: _consts.TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    isHandleVisible: ((_findTable = (0, _utils.findTable)((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
+    isHandleVisible: ((_findTable = (0, _utils.findTable)((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos(),
+    handleComponent: handleComponent
   }, children);
 };
 exports.TableResizer = TableResizer;

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.12",
+	"version": "2.7.0",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -3,6 +3,7 @@ import rafSchd from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, hasTableBeenResized, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
@@ -14,7 +15,7 @@ import { findClosestSnap } from '../utils/snapping';
 const handles = {
   right: true
 };
-const tableHandleMarginTop = 11;
+const tableHandleMarginTop = 12;
 const generateResizedPayload = props => {
   var _props$originalNode$a;
   const tableMap = TableMap.get(props.resizedNode);
@@ -149,6 +150,20 @@ export const TableResizer = ({
     return newWidth;
   }, [editorView, getPos, node, tableRef, updateWidth, updateActiveGuidelines]);
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
+  const handleComponent = useMemo(() => ({
+    left: /*#__PURE__*/React.createElement("div", {
+      className: resizerHandleShadowClassName,
+      style: {
+        height: 'calc(100% - 24px)'
+      }
+    }),
+    right: /*#__PURE__*/React.createElement("div", {
+      className: resizerHandleShadowClassName,
+      style: {
+        height: 'calc(100% - 24px)'
+      }
+    })
+  }), []);
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
@@ -164,6 +179,7 @@ export const TableResizer = ({
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
+    isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos(),
+    handleComponent: handleComponent
   }, children);
 };

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.12",
+	"version": "2.7.0",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -7,6 +7,7 @@ import rafSchd from 'raf-schd';
 import { ACTION_SUBJECT, EVENT_TYPE, TABLE_ACTION } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, hasTableBeenResized, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
@@ -18,7 +19,7 @@ import { findClosestSnap } from '../utils/snapping';
 var handles = {
   right: true
 };
-var tableHandleMarginTop = 11;
+var tableHandleMarginTop = 12;
 var generateResizedPayload = function generateResizedPayload(props) {
   var _props$originalNode$a;
   var tableMap = TableMap.get(props.resizedNode);
@@ -151,6 +152,22 @@ export var TableResizer = function TableResizer(_ref) {
   var scheduleResize = useMemo(function () {
     return rafSchd(handleResize);
   }, [handleResize]);
+  var handleComponent = useMemo(function () {
+    return {
+      left: /*#__PURE__*/React.createElement("div", {
+        className: resizerHandleShadowClassName,
+        style: {
+          height: 'calc(100% - 24px)'
+        }
+      }),
+      right: /*#__PURE__*/React.createElement("div", {
+        className: resizerHandleShadowClassName,
+        style: {
+          height: 'calc(100% - 24px)'
+        }
+      })
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
@@ -166,6 +183,7 @@ export var TableResizer = function TableResizer(_ref) {
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos()
+    isHandleVisible: ((_findTable = findTable((_editorView$state = editorView.state) === null || _editorView$state === void 0 ? void 0 : _editorView$state.selection)) === null || _findTable === void 0 ? void 0 : _findTable.pos) === getPos(),
+    handleComponent: handleComponent
   }, children);
 };

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.12",
+	"version": "2.7.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.6.12",
+  "version": "2.7.0",
   "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.38.0",
+    "@atlaskit/editor-common": "^74.40.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.0.7",

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -21,6 +21,7 @@ import {
   HandleResize,
   ResizerNext,
 } from '@atlaskit/editor-common/resizer';
+import { resizerHandleShadowClassName } from '@atlaskit/editor-common/styles';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { Transaction } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -54,7 +55,7 @@ interface TableResizerProps {
 }
 
 const handles = { right: true };
-const tableHandleMarginTop = 11;
+const tableHandleMarginTop = 12;
 
 const generateResizedPayload = (props: {
   originalNode: PMNode;
@@ -258,6 +259,24 @@ export const TableResizer = ({
 
   const scheduleResize = useMemo(() => rafSchd(handleResize), [handleResize]);
 
+  const handleComponent = useMemo(
+    () => ({
+      left: (
+        <div
+          className={resizerHandleShadowClassName}
+          style={{ height: 'calc(100% - 24px)' }}
+        />
+      ),
+      right: (
+        <div
+          className={resizerHandleShadowClassName}
+          style={{ height: 'calc(100% - 24px)' }}
+        />
+      ),
+    }),
+    [],
+  );
+
   return (
     <ResizerNext
       enable={handles}
@@ -275,6 +294,7 @@ export const TableResizer = ({
       snap={guidelineSnaps}
       handlePositioning="adjacent"
       isHandleVisible={findTable(editorView.state?.selection)?.pos === getPos()}
+      handleComponent={handleComponent}
     >
       {children}
     </ResizerNext>

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}