@atlaskit/editor-plugin-table 7.6.0 → 7.6.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 7.6.2
+
+### Patch Changes
+
+- [#83121](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83121) [`97ee7097d940`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/97ee7097d940) - [ux] Prevents contenteditable on table shadows and table drag column handles.
+
+## 7.6.1
+
+### Patch Changes
+
+- [#83158](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83158) [`5a0749bf19ec`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5a0749bf19ec) - Fix incorrect full width guideline snapping
+
 ## 7.6.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -726,6 +726,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           return ((_this4$wrapper3 = _this4.wrapper) === null || _this4$wrapper3 === void 0 ? void 0 : _this4$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/_react.default.createElement("div", {
+        contentEditable: false,
         style: shadowStyle(showBeforeShadow),
         className: _types.TableCssClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {
@@ -763,6 +764,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           height: '100%'
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
+        contentEditable: false,
         style: shadowStyle(showAfterShadow),
         className: _types.TableCssClassName.TABLE_RIGHT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/_react.default.createElement("div", {

package/dist/cjs/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -129,6 +129,7 @@ var ColumnControls = exports.ColumnControls = function ColumnControls(_ref) {
       return sum + (v !== null && v !== void 0 ? v : _styles.tableCellMinWidth) * (indexes.includes(i) ? 1 : 0);
     }, 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : _styles.tableCellMinWidth;
     return /*#__PURE__*/_react.default.createElement("div", {
+      contentEditable: false,
       key: type,
       style: {
         gridColumn: gridColumn,

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.tablePopupMenuFitHeight = 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.contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = 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;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tableResizerWidth = exports.tablePopupMenuFitHeight = 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.contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = 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");
@@ -75,4 +75,5 @@ var TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTM
 var dragMenuDropdownWidth = exports.dragMenuDropdownWidth = 250;
 var dragTableInsertColumnButtonSize = exports.dragTableInsertColumnButtonSize = 16;
 var dropTargetExtendedWidth = exports.dropTargetExtendedWidth = 150;
-var colorPalletteColumns = exports.colorPalletteColumns = 7;
+var colorPalletteColumns = exports.colorPalletteColumns = 7;
+var tableResizerWidth = exports.tableResizerWidth = 8;

package/dist/cjs/utils/snapping.js

@@ -8,6 +8,7 @@ exports.findClosestSnap = exports.defaultTablePreserveSnappingWidths = exports.d
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _guideline = require("@atlaskit/editor-common/guideline");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _consts = require("../ui/consts");
 var numberOfLanesInDefaultLayoutWidth = 12;
 var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
   return new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map(function (v, i) {
@@ -23,7 +24,7 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
 var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorFullWidthLayoutWidth;
-  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _editorSharedStyles.akEditorMediaResizeHandlerPaddingWide;
+  var dynamicFullWidthLine = editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWith - _editorSharedStyles.akEditorGutterPadding * 2 - _consts.tableResizerWidth;
   return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
 };
 var defaultSnappingWidths = exports.defaultSnappingWidths = calculateDefaultSnappings();

package/dist/es2019/nodeviews/TableComponent.js

@@ -714,6 +714,7 @@ class TableComponent extends React.Component {
         return ((_this$wrapper4 = this.wrapper) === null || _this$wrapper4 === void 0 ? void 0 : _this$wrapper4.clientWidth) || 760;
       }
     }), /*#__PURE__*/React.createElement("div", {
+      contentEditable: false,
       style: shadowStyle(showBeforeShadow),
       className: ClassName.TABLE_LEFT_SHADOW
     }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
@@ -751,6 +752,7 @@ class TableComponent extends React.Component {
         height: '100%'
       }
     })), /*#__PURE__*/React.createElement("div", {
+      contentEditable: false,
       style: shadowStyle(showAfterShadow),
       className: ClassName.TABLE_RIGHT_SHADOW
     }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {

package/dist/es2019/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -124,6 +124,7 @@ export const ColumnControls = ({
     const previewHeight = (_rowHeights$reduce = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights.reduce((sum, cur) => sum + cur, 0)) !== null && _rowHeights$reduce !== void 0 ? _rowHeights$reduce : 0;
     const previewWidth = (_colWidths$reduce = colWidths === null || colWidths === void 0 ? void 0 : colWidths.reduce((sum, v, i) => sum + (v !== null && v !== void 0 ? v : tableCellMinWidth) * (indexes.includes(i) ? 1 : 0), 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : tableCellMinWidth;
     return /*#__PURE__*/React.createElement("div", {
+      contentEditable: false,
       key: type,
       style: {
         gridColumn,

package/dist/es2019/ui/consts.js

@@ -70,4 +70,5 @@ export const TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 export const dragMenuDropdownWidth = 250;
 export const dragTableInsertColumnButtonSize = 16;
 export const dropTargetExtendedWidth = 150;
-export const colorPalletteColumns = 7;
+export const colorPalletteColumns = 7;
+export const tableResizerWidth = 8;

package/dist/es2019/utils/snapping.js

@@ -1,12 +1,13 @@
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { tableResizerWidth } from '../ui/consts';
 const numberOfLanesInDefaultLayoutWidth = 12;
 const calculateSubSnappingWidths = (totalLanes, totalWidth) => new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map((v, i) => v * (i + 1) * 2);
 export const calculateDefaultSnappings = (lengthOffset = 0) => [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, akEditorFullWidthLayoutWidth + lengthOffset];
 
 // FF TablePreserve for calculateDefaultSnappings
 export const calculateDefaultTablePreserveSnappings = (lengthOffset = 0, editorContainerWith = akEditorFullWidthLayoutWidth) => {
-  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
+  const dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
   return [...calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset), akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset];
 };
 export const defaultSnappingWidths = calculateDefaultSnappings();

package/dist/esm/nodeviews/TableComponent.js

@@ -719,6 +719,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           return ((_this4$wrapper3 = _this4.wrapper) === null || _this4$wrapper3 === void 0 ? void 0 : _this4$wrapper3.clientWidth) || 760;
         }
       }), /*#__PURE__*/React.createElement("div", {
+        contentEditable: false,
         style: shadowStyle(showBeforeShadow),
         className: ClassName.TABLE_LEFT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {
@@ -756,6 +757,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
           height: '100%'
         }
       })), /*#__PURE__*/React.createElement("div", {
+        contentEditable: false,
         style: shadowStyle(showAfterShadow),
         className: ClassName.TABLE_RIGHT_SHADOW
       }), this.state.stickyHeader && /*#__PURE__*/React.createElement("div", {

package/dist/esm/ui/TableFloatingColumnControls/ColumnControls/index.js

@@ -120,6 +120,7 @@ export var ColumnControls = function ColumnControls(_ref) {
       return sum + (v !== null && v !== void 0 ? v : tableCellMinWidth) * (indexes.includes(i) ? 1 : 0);
     }, 0)) !== null && _colWidths$reduce !== void 0 ? _colWidths$reduce : tableCellMinWidth;
     return /*#__PURE__*/React.createElement("div", {
+      contentEditable: false,
       key: type,
       style: {
         gridColumn: gridColumn,

package/dist/esm/ui/consts.js

@@ -70,4 +70,5 @@ export var TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = -68;
 export var dragMenuDropdownWidth = 250;
 export var dragTableInsertColumnButtonSize = 16;
 export var dropTargetExtendedWidth = 150;
-export var colorPalletteColumns = 7;
+export var colorPalletteColumns = 7;
+export var tableResizerWidth = 8;

package/dist/esm/utils/snapping.js

@@ -1,6 +1,7 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { isVerticalPosition } from '@atlaskit/editor-common/guideline';
-import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding, akEditorMediaResizeHandlerPaddingWide } from '@atlaskit/editor-shared-styles';
+import { akEditorCalculatedWideLayoutWidth, akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorGutterPadding } from '@atlaskit/editor-shared-styles';
+import { tableResizerWidth } from '../ui/consts';
 var numberOfLanesInDefaultLayoutWidth = 12;
 var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
   return new Array(Math.round(totalLanes / 2) - 1).fill(totalWidth / totalLanes).map(function (v, i) {
@@ -16,7 +17,7 @@ export var calculateDefaultSnappings = function calculateDefaultSnappings() {
 export var calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
   var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
   var editorContainerWith = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : akEditorFullWidthLayoutWidth;
-  var dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - akEditorMediaResizeHandlerPaddingWide;
+  var dynamicFullWidthLine = editorContainerWith - akEditorGutterPadding * 2 >= akEditorFullWidthLayoutWidth ? akEditorFullWidthLayoutWidth : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
   return [].concat(_toConsumableArray(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, akEditorDefaultLayoutWidth + lengthOffset)), [akEditorDefaultLayoutWidth + lengthOffset, akEditorCalculatedWideLayoutWidth + lengthOffset, dynamicFullWidthLine - lengthOffset]);
 };
 export var defaultSnappingWidths = calculateDefaultSnappings();

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

@@ -58,3 +58,4 @@ export declare const dragMenuDropdownWidth = 250;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;
 export declare const colorPalletteColumns = 7;
+export declare const tableResizerWidth = 8;

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

@@ -58,3 +58,4 @@ export declare const dragMenuDropdownWidth = 250;
 export declare const dragTableInsertColumnButtonSize = 16;
 export declare const dropTargetExtendedWidth = 150;
 export declare const colorPalletteColumns = 7;
+export declare const tableResizerWidth = 8;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "7.6.0",
+  "version": "7.6.2",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/nodeviews/TableComponent.tsx

@@ -711,6 +711,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           />
         )}
         <div
+          contentEditable={false}
           style={shadowStyle(showBeforeShadow)}
           className={ClassName.TABLE_LEFT_SHADOW}
         />
@@ -761,6 +762,7 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           </div>
         )}
         <div
+          contentEditable={false}
           style={shadowStyle(showAfterShadow)}
           className={ClassName.TABLE_RIGHT_SHADOW}
         />

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -198,6 +198,7 @@ export const ColumnControls = ({
 
     return (
       <div
+        contentEditable={false}
         key={type}
         style={{
           gridColumn,

package/src/ui/consts.ts

@@ -143,3 +143,5 @@ export const dragMenuDropdownWidth = 250;
 export const dragTableInsertColumnButtonSize = 16;
 export const dropTargetExtendedWidth = 150;
 export const colorPalletteColumns = 7;
+
+export const tableResizerWidth = 8;

package/src/utils/snapping.ts

@@ -5,9 +5,10 @@ import {
   akEditorDefaultLayoutWidth,
   akEditorFullWidthLayoutWidth,
   akEditorGutterPadding,
-  akEditorMediaResizeHandlerPaddingWide,
 } from '@atlaskit/editor-shared-styles';
 
+import { tableResizerWidth } from '../ui/consts';
+
 const numberOfLanesInDefaultLayoutWidth = 12;
 
 const calculateSubSnappingWidths = (totalLanes: number, totalWidth: number) =>
@@ -34,9 +35,7 @@ export const calculateDefaultTablePreserveSnappings = (
     editorContainerWith - akEditorGutterPadding * 2 >=
     akEditorFullWidthLayoutWidth
       ? akEditorFullWidthLayoutWidth
-      : editorContainerWith -
-        akEditorGutterPadding * 2 -
-        akEditorMediaResizeHandlerPaddingWide;
+      : editorContainerWith - akEditorGutterPadding * 2 - tableResizerWidth;
 
   return [
     ...calculateSubSnappingWidths(