@atlaskit/editor-plugin-table 10.0.0 → 10.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 10.1.0
+
+### Minor Changes
+
+- [#116320](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/116320)
+  [`53a3a2613a2ea`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/53a3a2613a2ea) -
+  ED-26488 disable table dnd in live pages
+
+### Patch Changes
+
+- [#117960](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117960)
+  [`0e8738357b54c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0e8738357b54c) -
+  [ux] ED-26725 Bugfix to bring back the blue highlighted border when resizing columns in nested
+  tables
+- Updated dependencies
+
 ## 10.0.0
 
 ### Major Changes

package/dist/cjs/nodeviews/TableComponentWithSharedState.js

@@ -29,11 +29,13 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     forwardRef = _ref.forwardRef,
     allowTableAlignment = _ref.allowTableAlignment,
     allowTableResizing = _ref.allowTableResizing;
-  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection']),
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['width', 'table', 'media', 'selection', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     tableState = _useSharedPluginState.tableState,
     mediaState = _useSharedPluginState.mediaState,
-    selectionState = _useSharedPluginState.selectionState;
+    selectionState = _useSharedPluginState.selectionState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   if (!tableState) {
     return null;
   }
@@ -73,7 +75,7 @@ var TableComponentWithSharedState = exports.TableComponentWithSharedState = func
     allowControls: allowControls,
     isHeaderRowEnabled: isHeaderRowEnabled,
     isHeaderColumnEnabled: isHeaderColumnEnabled,
-    isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
+    isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
     allowTableAlignment: allowTableAlignment,
     allowTableResizing: allowTableResizing,

package/dist/cjs/ui/event-handlers.js

@@ -17,6 +17,7 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils3 = require("@atlaskit/editor-tables/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../pm-plugins/commands");
 var _pluginFactory = require("../pm-plugins/drag-and-drop/plugin-factory");
 var _pluginFactory2 = require("../pm-plugins/plugin-factory");
@@ -157,8 +158,14 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, m
     var nearestTable = (0, _utils.closestElement)(target, 'table');
     var nestedTable = (0, _utils2.findParentNodeOfTypeClosestToPos)(state.doc.resolve(state.selection.from), [state.schema.nodes.table]);
     var parentTable = (0, _utils2.findParentNodeOfTypeClosestToPos)(state.doc.resolve((nestedTable === null || nestedTable === void 0 ? void 0 : nestedTable.pos) || 0), [state.schema.nodes.table]);
-    if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId)) {
-      return (0, _commands.hideInsertColumnOrRowButton)()(state, dispatch);
+    if ((0, _platformFeatureFlags.fg)('platform_editor_nested_tables_resize_border_fix')) {
+      if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId) && ((0, _dom.isCell)(target) || (0, _dom.isCornerButton)(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
+        return (0, _commands.hideInsertColumnOrRowButton)()(state, dispatch);
+      }
+    } else {
+      if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId)) {
+        return (0, _commands.hideInsertColumnOrRowButton)()(state, dispatch);
+      }
     }
   } else if (((0, _dom.isCell)(target) || (0, _dom.isCornerButton)(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
     return (0, _commands.hideInsertColumnOrRowButton)()(state, dispatch);

package/dist/es2019/nodeviews/TableComponentWithSharedState.js

@@ -28,8 +28,10 @@ export const TableComponentWithSharedState = ({
     widthState,
     tableState,
     mediaState,
-    selectionState
-  } = useSharedPluginState(api, ['width', 'table', 'media', 'selection']);
+    selectionState,
+    editorViewModeState
+  } = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
+  const isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   if (!tableState) {
     return null;
   }
@@ -70,7 +72,7 @@ export const TableComponentWithSharedState = ({
     allowControls: allowControls,
     isHeaderRowEnabled: isHeaderRowEnabled,
     isHeaderColumnEnabled: isHeaderColumnEnabled,
-    isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
+    isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
     allowTableAlignment: allowTableAlignment,
     allowTableResizing: allowTableResizing,

package/dist/es2019/ui/event-handlers.js

@@ -7,6 +7,7 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, setTableHovered, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from '../pm-plugins/commands';
 import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -148,8 +149,14 @@ export const handleMouseOver = (view, mouseEvent) => {
     const nearestTable = closestElement(target, 'table');
     const nestedTable = findParentNodeOfTypeClosestToPos(state.doc.resolve(state.selection.from), [state.schema.nodes.table]);
     const parentTable = findParentNodeOfTypeClosestToPos(state.doc.resolve((nestedTable === null || nestedTable === void 0 ? void 0 : nestedTable.pos) || 0), [state.schema.nodes.table]);
-    if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId)) {
-      return hideInsertColumnOrRowButton()(state, dispatch);
+    if (fg('platform_editor_nested_tables_resize_border_fix')) {
+      if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId) && (isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
+        return hideInsertColumnOrRowButton()(state, dispatch);
+      }
+    } else {
+      if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId)) {
+        return hideInsertColumnOrRowButton()(state, dispatch);
+      }
     }
   } else if ((isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
     return hideInsertColumnOrRowButton()(state, dispatch);

package/dist/esm/nodeviews/TableComponentWithSharedState.js

@@ -23,11 +23,13 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     forwardRef = _ref.forwardRef,
     allowTableAlignment = _ref.allowTableAlignment,
     allowTableResizing = _ref.allowTableResizing;
-  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection']),
+  var _useSharedPluginState = useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']),
     widthState = _useSharedPluginState.widthState,
     tableState = _useSharedPluginState.tableState,
     mediaState = _useSharedPluginState.mediaState,
-    selectionState = _useSharedPluginState.selectionState;
+    selectionState = _useSharedPluginState.selectionState,
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  var isLivePageViewMode = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view';
   if (!tableState) {
     return null;
   }
@@ -67,7 +69,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
     allowControls: allowControls,
     isHeaderRowEnabled: isHeaderRowEnabled,
     isHeaderColumnEnabled: isHeaderColumnEnabled,
-    isDragAndDropEnabled: options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled,
+    isDragAndDropEnabled: (options === null || options === void 0 ? void 0 : options.isDragAndDropEnabled) && !isLivePageViewMode,
     isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
     allowTableAlignment: allowTableAlignment,
     allowTableResizing: allowTableResizing,

package/dist/esm/ui/event-handlers.js

@@ -8,6 +8,7 @@ import { findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/u
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { cellAround, findCellRectClosestToPos, findTable, getSelectionRect, removeTable } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { addResizeHandleDecorations, clearHoverSelection, hideInsertColumnOrRowButton, hideResizeHandleLine, hoverCell, hoverColumns, selectColumn, setEditorFocus, setTableHovered, showInsertColumnButton, showInsertRowButton, showResizeHandleLine } from '../pm-plugins/commands';
 import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
 import { getPluginState } from '../pm-plugins/plugin-factory';
@@ -148,8 +149,14 @@ export var handleMouseOver = function handleMouseOver(view, mouseEvent) {
     var nearestTable = closestElement(target, 'table');
     var nestedTable = findParentNodeOfTypeClosestToPos(state.doc.resolve(state.selection.from), [state.schema.nodes.table]);
     var parentTable = findParentNodeOfTypeClosestToPos(state.doc.resolve((nestedTable === null || nestedTable === void 0 ? void 0 : nestedTable.pos) || 0), [state.schema.nodes.table]);
-    if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId)) {
-      return hideInsertColumnOrRowButton()(state, dispatch);
+    if (fg('platform_editor_nested_tables_resize_border_fix')) {
+      if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId) && (isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
+        return hideInsertColumnOrRowButton()(state, dispatch);
+      }
+    } else {
+      if ((nearestTable === null || nearestTable === void 0 ? void 0 : nearestTable.dataset.tableLocalId) !== (parentTable === null || parentTable === void 0 ? void 0 : parentTable.node.attrs.localId)) {
+        return hideInsertColumnOrRowButton()(state, dispatch);
+      }
     }
   } else if ((isCell(target) || isCornerButton(target)) && (typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')) {
     return hideInsertColumnOrRowButton()(state, dispatch);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.0.0",
+	"version": "10.1.0",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,9 +28,9 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.2.1",
-		"@atlaskit/button": "^21.0.0",
+		"@atlaskit/button": "^21.1.0",
 		"@atlaskit/custom-steps": "^0.10.0",
-		"@atlaskit/editor-common": "^100.0.0",
+		"@atlaskit/editor-common": "^100.1.0",
 		"@atlaskit/editor-palette": "2.0.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.0.0",
@@ -51,9 +51,9 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^14.0.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.0.0",
+		"@atlaskit/tmp-editor-statsig": "^3.1.0",
 		"@atlaskit/toggle": "^15.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tokens": "^4.1.0",
 		"@atlaskit/tooltip": "^20.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -167,6 +167,9 @@
 		},
 		"platform_editor_nested_tables_bodied_extension_fix": {
 			"type": "boolean"
+		},
+		"platform_editor_nested_tables_resize_border_fix": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/TableComponentWithSharedState.tsx

@@ -51,12 +51,10 @@ export const TableComponentWithSharedState = ({
 	allowTableAlignment,
 	allowTableResizing,
 }: TableComponentWithSharedStateProps) => {
-	const { widthState, tableState, mediaState, selectionState } = useSharedPluginState(api, [
-		'width',
-		'table',
-		'media',
-		'selection',
-	]);
+	const { widthState, tableState, mediaState, selectionState, editorViewModeState } =
+		useSharedPluginState(api, ['width', 'table', 'media', 'selection', 'editorViewMode']);
+
+	const isLivePageViewMode = editorViewModeState?.mode === 'view';
 
 	if (!tableState) {
 		return null;
@@ -108,7 +106,7 @@ export const TableComponentWithSharedState = ({
 			allowControls={allowControls}
 			isHeaderRowEnabled={isHeaderRowEnabled}
 			isHeaderColumnEnabled={isHeaderColumnEnabled}
-			isDragAndDropEnabled={options?.isDragAndDropEnabled}
+			isDragAndDropEnabled={options?.isDragAndDropEnabled && !isLivePageViewMode}
 			isTableScalingEnabled={options?.isTableScalingEnabled}
 			allowTableAlignment={allowTableAlignment}
 			allowTableResizing={allowTableResizing}

package/src/ui/event-handlers.ts

@@ -25,6 +25,7 @@ import {
 	getSelectionRect,
 	removeTable,
 } from '@atlaskit/editor-tables/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 
 import {
 	addResizeHandleDecorations,
@@ -239,8 +240,18 @@ export const handleMouseOver = (view: EditorView, mouseEvent: Event): boolean =>
 			state.schema.nodes.table,
 		]);
 
-		if (nearestTable?.dataset.tableLocalId !== parentTable?.node.attrs.localId) {
-			return hideInsertColumnOrRowButton()(state, dispatch);
+		if (fg('platform_editor_nested_tables_resize_border_fix')) {
+			if (
+				nearestTable?.dataset.tableLocalId !== parentTable?.node.attrs.localId &&
+				(isCell(target) || isCornerButton(target)) &&
+				(typeof insertColumnButtonIndex === 'number' || typeof insertRowButtonIndex === 'number')
+			) {
+				return hideInsertColumnOrRowButton()(state, dispatch);
+			}
+		} else {
+			if (nearestTable?.dataset.tableLocalId !== parentTable?.node.attrs.localId) {
+				return hideInsertColumnOrRowButton()(state, dispatch);
+			}
 		}
 	} else if (
 		(isCell(target) || isCornerButton(target)) &&