@atlaskit/editor-plugin-table 27.0.6 → 27.0.7

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @atlaskit/editor-plugin-table
 
+## 27.0.7
+
+### Patch Changes
+
+- [`b53c8a7c458af`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b53c8a7c458af) -
+  Disable dragging table rows and columns while limited mode is active, behind the
+  platform_editor_table_limited_mode experiment. The row and column drag handles are no longer
+  registered as draggable, so no drag can start from them. The handles themselves still render and
+  still select the row/column and open its menu on click. Responds to limited mode being toggled
+  during a session.
+
 ## 27.0.6
 
 ### Patch Changes

package/dist/cjs/pm-plugins/utils/limited-mode.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isDragAndDropDisabledInLimitedMode = void 0;
+var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
+/**
+ * Limited mode strips expensive behaviour on very large documents, and dragging table rows and
+ * columns is one of those behaviours.
+ *
+ * This only covers *dragging*. The row and column drag handles keep rendering so that clicking one
+ * still selects the row/column and opens its menu.
+ *
+ * Limited mode can flip during a session — `false -> true` on any transaction as content loads, and
+ * `true -> false` on a `replaceDocument` transaction — so callers must re-evaluate at runtime rather
+ * than only when they first mount.
+ */
+var isDragAndDropDisabledInLimitedMode = exports.isDragAndDropDisabledInLimitedMode = function isDragAndDropDisabledInLimitedMode(limitedModeEnabled) {
+  return !!limitedModeEnabled && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_table_limited_mode');
+};

package/dist/cjs/ui/DragHandle/index.js

@@ -13,6 +13,7 @@ var _classnames2 = _interopRequireDefault(require("classnames"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntl = require("react-intl");
 var _browser = require("@atlaskit/editor-common/browser");
+var _hooks = require("@atlaskit/editor-common/hooks");
 var _messages = require("@atlaskit/editor-common/messages");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _editorTables = require("@atlaskit/editor-tables");
@@ -22,6 +23,7 @@ var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/ele
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _activeTableMenu = require("../../pm-plugins/commands/active-table-menu");
 var _pluginFactory = require("../../pm-plugins/drag-and-drop/plugin-factory");
+var _limitedMode = require("../../pm-plugins/utils/limited-mode");
 var _mergedCells = require("../../pm-plugins/utils/merged-cells");
 var _types = require("../../types");
 var _consts = require("../consts");
@@ -66,6 +68,18 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     isHovered = _useState4[0],
     setIsHovered = _useState4[1];
+
+  // Limited mode disables dragging rows and columns, but the handle itself keeps working as the
+  // selection and menu affordance. Subscribing here (rather than reading the plugin state once) means
+  // the effect below re-runs and un-registers the draggable if limited mode flips mid-session.
+  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['limitedMode'], function (states) {
+      var _states$limitedModeSt;
+      return {
+        limitedModeEnabled: (_states$limitedModeSt = states.limitedModeState) === null || _states$limitedModeSt === void 0 ? void 0 : _states$limitedModeSt.enabled
+      };
+    }),
+    limitedModeEnabled = _useSharedPluginState.limitedModeEnabled;
+  var isDraggingEnabled = !(0, _limitedMode.isDragAndDropDisabledInLimitedMode)(limitedModeEnabled);
   var isRow = direction === 'row';
   var isColumn = direction === 'column';
   var hasMergedCells = (0, _react.useMemo)(function () {
@@ -108,6 +122,12 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   (0, _react.useEffect)(function () {
     var dragHandleDivRefCurrent = dragHandleDivRef.current;
     var browser = (0, _browser.getBrowserInfo)();
+
+    // Skipping the registration entirely (rather than returning false from `canDrag`) means the
+    // `draggable="true"` attribute is never added, so no drag can start from the handle at all.
+    if (!isDraggingEnabled) {
+      return;
+    }
     if (dragHandleDivRefCurrent) {
       return (0, _adapter.draggable)({
         element: dragHandleDivRefCurrent,
@@ -160,7 +180,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
         }
       });
     }
-  }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
+  }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells, isDraggingEnabled]);
   var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   var browser = (0, _browser.getBrowserInfo)();
 

package/dist/es2019/pm-plugins/utils/limited-mode.js

@@ -0,0 +1,14 @@
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+
+/**
+ * Limited mode strips expensive behaviour on very large documents, and dragging table rows and
+ * columns is one of those behaviours.
+ *
+ * This only covers *dragging*. The row and column drag handles keep rendering so that clicking one
+ * still selects the row/column and opens its menu.
+ *
+ * Limited mode can flip during a session — `false -> true` on any transaction as content loads, and
+ * `true -> false` on a `replaceDocument` transaction — so callers must re-evaluate at runtime rather
+ * than only when they first mount.
+ */
+export const isDragAndDropDisabledInLimitedMode = limitedModeEnabled => !!limitedModeEnabled && isExperimentEnabled('platform_editor_table_limited_mode');

package/dist/es2019/ui/DragHandle/index.js

@@ -5,6 +5,7 @@ import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
@@ -14,6 +15,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/el
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { closeActiveTableMenu } from '../../pm-plugins/commands/active-table-menu';
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
+import { isDragAndDropDisabledInLimitedMode } from '../../pm-plugins/utils/limited-mode';
 import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugins/utils/merged-cells';
 import { TableCssClassName as ClassName } from '../../types';
 import { dragTableInsertColumnButtonSize } from '../consts';
@@ -53,6 +55,19 @@ const DragHandleComponent = ({
     isDragMenuOpen = false
   } = getDnDPluginState(state);
   const [isHovered, setIsHovered] = useState(false);
+
+  // Limited mode disables dragging rows and columns, but the handle itself keeps working as the
+  // selection and menu affordance. Subscribing here (rather than reading the plugin state once) means
+  // the effect below re-runs and un-registers the draggable if limited mode flips mid-session.
+  const {
+    limitedModeEnabled
+  } = useSharedPluginStateWithSelector(api, ['limitedMode'], states => {
+    var _states$limitedModeSt;
+    return {
+      limitedModeEnabled: (_states$limitedModeSt = states.limitedModeState) === null || _states$limitedModeSt === void 0 ? void 0 : _states$limitedModeSt.enabled
+    };
+  });
+  const isDraggingEnabled = !isDragAndDropDisabledInLimitedMode(limitedModeEnabled);
   const isRow = direction === 'row';
   const isColumn = direction === 'column';
   const hasMergedCells = useMemo(() => {
@@ -95,6 +110,12 @@ const DragHandleComponent = ({
   useEffect(() => {
     const dragHandleDivRefCurrent = dragHandleDivRef.current;
     const browser = getBrowserInfo();
+
+    // Skipping the registration entirely (rather than returning false from `canDrag`) means the
+    // `draggable="true"` attribute is never added, so no drag can start from the handle at all.
+    if (!isDraggingEnabled) {
+      return;
+    }
     if (dragHandleDivRefCurrent) {
       return draggable({
         element: dragHandleDivRefCurrent,
@@ -148,7 +169,7 @@ const DragHandleComponent = ({
         }
       });
     }
-  }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
+  }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells, isDraggingEnabled]);
   const showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   const browser = getBrowserInfo();
 

package/dist/esm/pm-plugins/utils/limited-mode.js

@@ -0,0 +1,16 @@
+import { isExperimentEnabled } from '@atlaskit/platform-feature-experiments/is-experiment-enabled';
+
+/**
+ * Limited mode strips expensive behaviour on very large documents, and dragging table rows and
+ * columns is one of those behaviours.
+ *
+ * This only covers *dragging*. The row and column drag handles keep rendering so that clicking one
+ * still selects the row/column and opens its menu.
+ *
+ * Limited mode can flip during a session — `false -> true` on any transaction as content loads, and
+ * `true -> false` on a `replaceDocument` transaction — so callers must re-evaluate at runtime rather
+ * than only when they first mount.
+ */
+export var isDragAndDropDisabledInLimitedMode = function isDragAndDropDisabledInLimitedMode(limitedModeEnabled) {
+  return !!limitedModeEnabled && isExperimentEnabled('platform_editor_table_limited_mode');
+};

package/dist/esm/ui/DragHandle/index.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
 import ReactDOM from 'react-dom';
 import { injectIntl } from 'react-intl';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
+import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
 import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { findTable, TableMap } from '@atlaskit/editor-tables';
@@ -16,6 +17,7 @@ import { setCustomNativeDragPreview } from '@atlaskit/pragmatic-drag-and-drop/el
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { closeActiveTableMenu } from '../../pm-plugins/commands/active-table-menu';
 import { getPluginState as getDnDPluginState } from '../../pm-plugins/drag-and-drop/plugin-factory';
+import { isDragAndDropDisabledInLimitedMode } from '../../pm-plugins/utils/limited-mode';
 import { findDuplicatePosition, hasMergedCellsInSelection } from '../../pm-plugins/utils/merged-cells';
 import { TableCssClassName as ClassName } from '../../types';
 import { dragTableInsertColumnButtonSize } from '../consts';
@@ -57,6 +59,18 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     isHovered = _useState4[0],
     setIsHovered = _useState4[1];
+
+  // Limited mode disables dragging rows and columns, but the handle itself keeps working as the
+  // selection and menu affordance. Subscribing here (rather than reading the plugin state once) means
+  // the effect below re-runs and un-registers the draggable if limited mode flips mid-session.
+  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['limitedMode'], function (states) {
+      var _states$limitedModeSt;
+      return {
+        limitedModeEnabled: (_states$limitedModeSt = states.limitedModeState) === null || _states$limitedModeSt === void 0 ? void 0 : _states$limitedModeSt.enabled
+      };
+    }),
+    limitedModeEnabled = _useSharedPluginState.limitedModeEnabled;
+  var isDraggingEnabled = !isDragAndDropDisabledInLimitedMode(limitedModeEnabled);
   var isRow = direction === 'row';
   var isColumn = direction === 'column';
   var hasMergedCells = useMemo(function () {
@@ -99,6 +113,12 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
   useEffect(function () {
     var dragHandleDivRefCurrent = dragHandleDivRef.current;
     var browser = getBrowserInfo();
+
+    // Skipping the registration entirely (rather than returning false from `canDrag`) means the
+    // `draggable="true"` attribute is never added, so no drag can start from the handle at all.
+    if (!isDraggingEnabled) {
+      return;
+    }
     if (dragHandleDivRefCurrent) {
       return draggable({
         element: dragHandleDivRefCurrent,
@@ -151,7 +171,7 @@ var DragHandleComponent = function DragHandleComponent(_ref) {
         }
       });
     }
-  }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells]);
+  }, [tableLocalId, direction, indexes, isRow, editorView.state.selection, hasMergedCells, isDraggingEnabled]);
   var showDragMenuAnchorId = isRow ? 'drag-handle-button-row' : 'drag-handle-button-column';
   var browser = getBrowserInfo();
 

package/dist/types/pm-plugins/utils/limited-mode.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Limited mode strips expensive behaviour on very large documents, and dragging table rows and
+ * columns is one of those behaviours.
+ *
+ * This only covers *dragging*. The row and column drag handles keep rendering so that clicking one
+ * still selects the row/column and opens its menu.
+ *
+ * Limited mode can flip during a session — `false -> true` on any transaction as content loads, and
+ * `true -> false` on a `replaceDocument` transaction — so callers must re-evaluate at runtime rather
+ * than only when they first mount.
+ */
+export declare const isDragAndDropDisabledInLimitedMode: (limitedModeEnabled: boolean | undefined) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "27.0.6",
+	"version": "27.0.7",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -21,7 +21,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^57.0.0",
-		"@atlaskit/button": "^25.0.0",
+		"@atlaskit/button": "^25.1.0",
 		"@atlaskit/custom-steps": "^1.0.0",
 		"@atlaskit/editor-palette": "^3.4.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^15.0.0",
@@ -68,7 +68,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^119.7.0",
+		"@atlaskit/editor-common": "^119.9.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"