@atlaskit/editor-plugin-table 5.7.0 → 5.7.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-table
 
+## 5.7.1
+
+### Patch Changes
+
+- [#63516](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63516) [`8fdf2e7a3737`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8fdf2e7a3737) - [ux] Added an adjustment value to the guidelines visible filtering method to exclude guidelines which may be visible but are not snapable.
+- Updated dependencies
+
 ## 5.7.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/TableResizer.js

@@ -79,7 +79,7 @@ var getResizerMinWidth = function getResizerMinWidth(node) {
  */
 var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWidth) {
   return guidelines.filter(function (guideline) {
-    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth;
+    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth + _consts.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT;
   });
 };
 var TableResizer = exports.TableResizer = function TableResizer(_ref) {

package/dist/cjs/ui/consts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
@@ -65,6 +65,11 @@ var TABLE_SNAP_GAP = exports.TABLE_SNAP_GAP = 9;
 var TABLE_HIGHLIGHT_GAP = exports.TABLE_HIGHLIGHT_GAP = 10;
 var TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_TOLERANCE = 2;
 var STICKY_HEADER_TOGGLE_TOLERANCE_MS = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+// This adjustment value represents a pixel amount by which the container width needs to be adjusted when determining
+// which guidelines are visible and most importantly CAN BE snapped too within the view. This value can be affected by
+// table margins and padding. For example a guideline at 1800px and the view at 1860px wide, means the guidelines is visible
+// BUT it cannot be snapped to during resize due to padding being applied to the resizer wrapper. This accommodates that difference.
+var TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 var dragMenuDropdownWidth = exports.dragMenuDropdownWidth = 240;
 var dragTableInsertColumnButtonSize = exports.dragTableInsertColumnButtonSize = 16;
 var dropTargetExtendedWidth = exports.dropTargetExtendedWidth = 150;

package/dist/es2019/nodeviews/TableResizer.js

@@ -14,7 +14,7 @@ import { getPluginState } from '../pm-plugins/plugin-factory';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
-import { TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
+import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines } from '../utils/guidelines';
 import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
@@ -65,7 +65,7 @@ const getResizerMinWidth = node => {
  */
 const getVisibleGuidelines = (guidelines, containerWidth) => {
   return guidelines.filter(guideline => {
-    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth;
+    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth + TABLE_GUIDELINE_VISIBLE_ADJUSTMENT;
   });
 };
 export const TableResizer = ({

package/dist/es2019/ui/consts.js

@@ -60,6 +60,11 @@ export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+// This adjustment value represents a pixel amount by which the container width needs to be adjusted when determining
+// which guidelines are visible and most importantly CAN BE snapped too within the view. This value can be affected by
+// table margins and padding. For example a guideline at 1800px and the view at 1860px wide, means the guidelines is visible
+// BUT it cannot be snapped to during resize due to padding being applied to the resizer wrapper. This accommodates that difference.
+export const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 export const dragMenuDropdownWidth = 240;
 export const dragTableInsertColumnButtonSize = 16;
 export const dropTargetExtendedWidth = 150;

package/dist/esm/nodeviews/TableResizer.js

@@ -18,7 +18,7 @@ import { getPluginState } from '../pm-plugins/plugin-factory';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { COLUMN_MIN_WIDTH, getColgroupChildrenLength, previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
-import { TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
+import { TABLE_GUIDELINE_VISIBLE_ADJUSTMENT, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE, TABLE_SNAP_GAP } from '../ui/consts';
 import { generateResizedPayload, generateResizeFrameRatePayloads, useMeasureFramerate } from '../utils/analytics';
 import { defaultGuidelines } from '../utils/guidelines';
 import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
@@ -69,7 +69,7 @@ var getResizerMinWidth = function getResizerMinWidth(node) {
  */
 var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWidth) {
   return guidelines.filter(function (guideline) {
-    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth;
+    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth + TABLE_GUIDELINE_VISIBLE_ADJUSTMENT;
   });
 };
 export var TableResizer = function TableResizer(_ref) {

package/dist/esm/ui/consts.js

@@ -60,6 +60,11 @@ export var TABLE_SNAP_GAP = 9;
 export var TABLE_HIGHLIGHT_GAP = 10;
 export var TABLE_HIGHLIGHT_TOLERANCE = 2;
 export var STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+// This adjustment value represents a pixel amount by which the container width needs to be adjusted when determining
+// which guidelines are visible and most importantly CAN BE snapped too within the view. This value can be affected by
+// table margins and padding. For example a guideline at 1800px and the view at 1860px wide, means the guidelines is visible
+// BUT it cannot be snapped to during resize due to padding being applied to the resizer wrapper. This accommodates that difference.
+export var TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 export var dragMenuDropdownWidth = 240;
 export var dragTableInsertColumnButtonSize = 16;
 export var dropTargetExtendedWidth = 150;

package/dist/types/ui/consts.d.ts

@@ -51,6 +51,7 @@ export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export declare const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+export declare const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 export declare const dragMenuDropdownWidth = 240;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -51,6 +51,7 @@ export declare const TABLE_SNAP_GAP = 9;
 export declare const TABLE_HIGHLIGHT_GAP = 10;
 export declare const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export declare const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+export declare const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 export declare const dragMenuDropdownWidth = 240;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "5.7.0",
+  "version": "5.7.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -47,7 +47,7 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^0.12.0",
     "@atlaskit/primitives": "^1.15.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.31.0",
+    "@atlaskit/tokens": "^1.32.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/src/nodeviews/TableResizer.tsx

@@ -41,6 +41,7 @@ import {
 } from '../pm-plugins/table-resizing/utils';
 import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
 import {
+  TABLE_GUIDELINE_VISIBLE_ADJUSTMENT,
   TABLE_HIGHLIGHT_GAP,
   TABLE_HIGHLIGHT_TOLERANCE,
   TABLE_SNAP_GAP,
@@ -140,7 +141,8 @@ const getVisibleGuidelines = (
       guideline.position &&
       guideline.position.x !== undefined &&
       typeof guideline.position.x === 'number' &&
-      Math.abs(guideline.position.x * 2) < containerWidth
+      Math.abs(guideline.position.x * 2) <
+        containerWidth + TABLE_GUIDELINE_VISIBLE_ADJUSTMENT
     );
   });
 };

package/src/ui/consts.ts

@@ -131,6 +131,11 @@ export const TABLE_SNAP_GAP = 9;
 export const TABLE_HIGHLIGHT_GAP = 10;
 export const TABLE_HIGHLIGHT_TOLERANCE = 2;
 export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+// This adjustment value represents a pixel amount by which the container width needs to be adjusted when determining
+// which guidelines are visible and most importantly CAN BE snapped too within the view. This value can be affected by
+// table margins and padding. For example a guideline at 1800px and the view at 1860px wide, means the guidelines is visible
+// BUT it cannot be snapped to during resize due to padding being applied to the resizer wrapper. This accommodates that difference.
+export const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 
 export const dragMenuDropdownWidth = 240;
 export const dragTableInsertColumnButtonSize = 16;