@atlaskit/editor-plugin-table 10.9.0 → 10.9.2

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-table
 
+## 10.9.2
+
+### Patch Changes
+
+- [#144209](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144209)
+  [`7110eac24db43`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7110eac24db43) -
+  ED-26373: Remove parentOffset logic from \_handleTableRef. This was preventing the users cursor
+  selection from being the first cell in the table upon table creation.
+- Updated dependencies
+
+## 10.9.1
+
+### Patch Changes
+
+- [#145186](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/145186)
+  [`6a555b119bc46`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6a555b119bc46) -
+  ED-27719: Add checks to \_handleTableRef so this.dom is not used if it is undefined. This was
+  causing sentry errors.
+- [#144194](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/144194)
+  [`542b82e03416e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/542b82e03416e) -
+  [ux] Remove separators within group in Editor floating toolbar
+- Updated dependencies
+
 ## 10.9.0
 
 ### Minor Changes

package/dist/cjs/nodeviews/table.js

@@ -143,12 +143,10 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
       var _this2 = this;
       var oldIgnoreMutation;
       var selectionBookmark;
-      var parentOffset = 0;
       var mutationsIgnored = false;
 
       // Only proceed if we have both a node and table, and the table isn't already inside the node
       if (node && this.table && !node.contains(this.table)) {
-        var _this$view$state$sele;
         // Store the current ignoreMutation handler so we can restore it later
         oldIgnoreMutation = this.ignoreMutation;
 
@@ -156,7 +154,7 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
         // - Ignores all DOM mutations except selection changes
         // - Tracks when mutations have been ignored via mutationsIgnored flag
         this.ignoreMutation = function (m) {
-          var isSelectionMutation = m.target instanceof Selection;
+          var isSelectionMutation = m.type === 'selection';
           if (!isSelectionMutation) {
             mutationsIgnored = true;
           }
@@ -169,15 +167,8 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
           selectionBookmark = this.view.state.selection.getBookmark();
         }
 
-        // Store the current cursor position within the parent node
-        // Used to determine if we need to restore selection later
-        if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
-          var _this$view$state$sele2, _this$view$state$sele3;
-          parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 || (_this$view$state$sele3 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele3 === void 0 ? void 0 : _this$view$state$sele3.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
-        }
-
         // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
-        if (this.renderedDOM) {
+        if (this.dom && this.renderedDOM) {
           this.dom.removeChild(this.renderedDOM);
         }
         // Move the table from the ProseMirror table structure into the React rendered table node.
@@ -191,9 +182,13 @@ var TableView = exports.default = /*#__PURE__*/function (_ReactNodeView) {
           // Restore the selection only if:
           // - We have a selection bookmark
           // - Mutations were ignored during the table move
-          // - The cursor wasn't at the start of the node
-          if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
-            _this2.view.dispatch(_this2.view.state.tr.setSelection(selectionBookmark.resolve(_this2.view.state.tr.doc)));
+          // - The bookmarked selection is different from the current selection.
+          if (selectionBookmark && mutationsIgnored) {
+            var resolvedSelection = selectionBookmark.resolve(_this2.view.state.tr.doc);
+            // Don't set the selection if it's the same as the current selection.
+            if (!resolvedSelection.eq(_this2.view.state.selection)) {
+              _this2.view.dispatch(_this2.view.state.tr.setSelection(resolvedSelection));
+            }
           }
         });
       }

package/dist/cjs/ui/toolbar.js

@@ -494,6 +494,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
             onBlur: (0, _commands.clearHoverSelection)()
           };
         };
+        var shouldGroupWithoutSeparators = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6');
         return {
           title: toolbarTitle,
           getDomRef: getDomRef,
@@ -504,12 +505,15 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
           },
           zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu, separator(menu.hidden)].concat((0, _toConsumableArray2.default)(alignmentMenu), [separator(alignmentMenu.length === 0)], (0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), (0, _toConsumableArray2.default)(colorPicker), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
+          items: [menu].concat((0, _toConsumableArray2.default)(!shouldGroupWithoutSeparators ? [separator(menu.hidden)] : []), (0, _toConsumableArray2.default)(alignmentMenu), (0, _toConsumableArray2.default)(!shouldGroupWithoutSeparators ? [separator(alignmentMenu.length === 0)] : []), (0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), (0, _toConsumableArray2.default)(colorPicker), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, copyButton, {
             type: 'separator'
-          }, deleteButton] : [{
+          }, deleteButton] : [shouldGroupWithoutSeparators && {
+            type: 'separator',
+            fullHeight: true
+          }, {
             type: 'overflow-dropdown',
             dropdownWidth: 220,
             options: [{
@@ -639,7 +643,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
       disabled: !wouldChange
     });
   }
-  if (items.length !== 0) {
+  if (items.length !== 0 && (!(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') || !(0, _platformFeatureFlags.fg)('platform_editor_controls_patch_6'))) {
     items.push({
       type: 'separator'
     });

package/dist/es2019/nodeviews/table.js

@@ -114,12 +114,10 @@ export default class TableView extends ReactNodeView {
   _handleTableRef(node) {
     let oldIgnoreMutation;
     let selectionBookmark;
-    let parentOffset = 0;
     let mutationsIgnored = false;
 
     // Only proceed if we have both a node and table, and the table isn't already inside the node
     if (node && this.table && !node.contains(this.table)) {
-      var _this$view$state$sele;
       // Store the current ignoreMutation handler so we can restore it later
       oldIgnoreMutation = this.ignoreMutation;
 
@@ -127,7 +125,7 @@ export default class TableView extends ReactNodeView {
       // - Ignores all DOM mutations except selection changes
       // - Tracks when mutations have been ignored via mutationsIgnored flag
       this.ignoreMutation = m => {
-        const isSelectionMutation = m.target instanceof Selection;
+        const isSelectionMutation = m.type === 'selection';
         if (!isSelectionMutation) {
           mutationsIgnored = true;
         }
@@ -140,15 +138,8 @@ export default class TableView extends ReactNodeView {
         selectionBookmark = this.view.state.selection.getBookmark();
       }
 
-      // Store the current cursor position within the parent node
-      // Used to determine if we need to restore selection later
-      if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
-        var _this$view$state$sele2, _this$view$state$sele3, _this$view$state$sele4;
-        parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 ? void 0 : (_this$view$state$sele4 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele4 === void 0 ? void 0 : _this$view$state$sele4.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
-      }
-
       // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
-      if (this.renderedDOM) {
+      if (this.dom && this.renderedDOM) {
         this.dom.removeChild(this.renderedDOM);
       }
       // Move the table from the ProseMirror table structure into the React rendered table node.
@@ -162,9 +153,13 @@ export default class TableView extends ReactNodeView {
         // Restore the selection only if:
         // - We have a selection bookmark
         // - Mutations were ignored during the table move
-        // - The cursor wasn't at the start of the node
-        if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
-          this.view.dispatch(this.view.state.tr.setSelection(selectionBookmark.resolve(this.view.state.tr.doc)));
+        // - The bookmarked selection is different from the current selection.
+        if (selectionBookmark && mutationsIgnored) {
+          const resolvedSelection = selectionBookmark.resolve(this.view.state.tr.doc);
+          // Don't set the selection if it's the same as the current selection.
+          if (!resolvedSelection.eq(this.view.state.selection)) {
+            this.view.dispatch(this.view.state.tr.setSelection(resolvedSelection));
+          }
         }
       });
     }

package/dist/es2019/ui/toolbar.js

@@ -463,6 +463,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
       onFocus: hoverTable(isInDanger, isSelected),
       onBlur: clearHoverSelection()
     });
+    const shouldGroupWithoutSeparators = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6');
     return {
       title: toolbarTitle,
       getDomRef,
@@ -473,12 +474,15 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
       },
       zIndex: akEditorFloatingPanelZIndex + 1,
       // Place the context menu slightly above the others
-      items: [menu, separator(menu.hidden), ...alignmentMenu, separator(alignmentMenu.length === 0), ...cellItems, ...columnSettingsItems, ...colorPicker, ...(editorExperiment('platform_editor_controls', 'control') ? [{
+      items: [menu, ...(!shouldGroupWithoutSeparators ? [separator(menu.hidden)] : []), ...alignmentMenu, ...(!shouldGroupWithoutSeparators ? [separator(alignmentMenu.length === 0)] : []), ...cellItems, ...columnSettingsItems, ...colorPicker, ...(editorExperiment('platform_editor_controls', 'control') ? [{
         type: 'extensions-placeholder',
         separator: 'end'
       }, copyButton, {
         type: 'separator'
-      }, deleteButton] : [{
+      }, deleteButton] : [shouldGroupWithoutSeparators && {
+        type: 'separator',
+        fullHeight: true
+      }, {
         type: 'overflow-dropdown',
         dropdownWidth: 220,
         options: [{
@@ -594,7 +598,7 @@ const getColumnSettingItems = (editorState, editorView, {
       disabled: !wouldChange
     });
   }
-  if (items.length !== 0) {
+  if (items.length !== 0 && (!editorExperiment('platform_editor_controls', 'variant1') || !fg('platform_editor_controls_patch_6'))) {
     items.push({
       type: 'separator'
     });

package/dist/esm/nodeviews/table.js

@@ -136,12 +136,10 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
       var _this2 = this;
       var oldIgnoreMutation;
       var selectionBookmark;
-      var parentOffset = 0;
       var mutationsIgnored = false;
 
       // Only proceed if we have both a node and table, and the table isn't already inside the node
       if (node && this.table && !node.contains(this.table)) {
-        var _this$view$state$sele;
         // Store the current ignoreMutation handler so we can restore it later
         oldIgnoreMutation = this.ignoreMutation;
 
@@ -149,7 +147,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
         // - Ignores all DOM mutations except selection changes
         // - Tracks when mutations have been ignored via mutationsIgnored flag
         this.ignoreMutation = function (m) {
-          var isSelectionMutation = m.target instanceof Selection;
+          var isSelectionMutation = m.type === 'selection';
           if (!isSelectionMutation) {
             mutationsIgnored = true;
           }
@@ -162,15 +160,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           selectionBookmark = this.view.state.selection.getBookmark();
         }
 
-        // Store the current cursor position within the parent node
-        // Used to determine if we need to restore selection later
-        if (((_this$view$state$sele = this.view.state.selection) === null || _this$view$state$sele === void 0 ? void 0 : _this$view$state$sele.ranges.length) > 0) {
-          var _this$view$state$sele2, _this$view$state$sele3;
-          parentOffset = (_this$view$state$sele2 = (_this$view$state$sele3 = this.view.state.selection) === null || _this$view$state$sele3 === void 0 || (_this$view$state$sele3 = _this$view$state$sele3.ranges[0].$from) === null || _this$view$state$sele3 === void 0 ? void 0 : _this$view$state$sele3.parentOffset) !== null && _this$view$state$sele2 !== void 0 ? _this$view$state$sele2 : 0;
-        }
-
         // Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
-        if (this.renderedDOM) {
+        if (this.dom && this.renderedDOM) {
           this.dom.removeChild(this.renderedDOM);
         }
         // Move the table from the ProseMirror table structure into the React rendered table node.
@@ -184,9 +175,13 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
           // Restore the selection only if:
           // - We have a selection bookmark
           // - Mutations were ignored during the table move
-          // - The cursor wasn't at the start of the node
-          if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
-            _this2.view.dispatch(_this2.view.state.tr.setSelection(selectionBookmark.resolve(_this2.view.state.tr.doc)));
+          // - The bookmarked selection is different from the current selection.
+          if (selectionBookmark && mutationsIgnored) {
+            var resolvedSelection = selectionBookmark.resolve(_this2.view.state.tr.doc);
+            // Don't set the selection if it's the same as the current selection.
+            if (!resolvedSelection.eq(_this2.view.state.selection)) {
+              _this2.view.dispatch(_this2.view.state.tr.setSelection(resolvedSelection));
+            }
           }
         });
       }

package/dist/esm/ui/toolbar.js

@@ -486,6 +486,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
             onBlur: clearHoverSelection()
           };
         };
+        var shouldGroupWithoutSeparators = editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_6');
         return {
           title: toolbarTitle,
           getDomRef: getDomRef,
@@ -496,12 +497,15 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
           },
           zIndex: akEditorFloatingPanelZIndex + 1,
           // Place the context menu slightly above the others
-          items: [menu, separator(menu.hidden)].concat(_toConsumableArray(alignmentMenu), [separator(alignmentMenu.length === 0)], _toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), _toConsumableArray(colorPicker), _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
+          items: [menu].concat(_toConsumableArray(!shouldGroupWithoutSeparators ? [separator(menu.hidden)] : []), _toConsumableArray(alignmentMenu), _toConsumableArray(!shouldGroupWithoutSeparators ? [separator(alignmentMenu.length === 0)] : []), _toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), _toConsumableArray(colorPicker), _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
             type: 'extensions-placeholder',
             separator: 'end'
           }, copyButton, {
             type: 'separator'
-          }, deleteButton] : [{
+          }, deleteButton] : [shouldGroupWithoutSeparators && {
+            type: 'separator',
+            fullHeight: true
+          }, {
             type: 'overflow-dropdown',
             dropdownWidth: 220,
             options: [{
@@ -631,7 +635,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
       disabled: !wouldChange
     });
   }
-  if (items.length !== 0) {
+  if (items.length !== 0 && (!editorExperiment('platform_editor_controls', 'variant1') || !fg('platform_editor_controls_patch_6'))) {
     items.push({
       type: 'separator'
     });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "10.9.0",
+	"version": "10.9.2",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -32,14 +32,14 @@
 		"@atlaskit/adf-schema": "^47.6.0",
 		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/custom-steps": "^0.11.0",
-		"@atlaskit/editor-common": "^103.12.0",
+		"@atlaskit/editor-common": "^103.15.0",
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-batch-attribute-updates": "^2.1.0",
 		"@atlaskit/editor-plugin-content-insertion": "^2.1.0",
 		"@atlaskit/editor-plugin-editor-viewmode": "^3.1.0",
-		"@atlaskit/editor-plugin-extension": "5.2.5",
+		"@atlaskit/editor-plugin-extension": "5.2.6",
 		"@atlaskit/editor-plugin-guideline": "^2.0.0",
 		"@atlaskit/editor-plugin-selection": "^2.1.0",
 		"@atlaskit/editor-plugin-width": "^3.0.0",
@@ -203,6 +203,9 @@
 		},
 		"platform_editor_controls_table_picker": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_6": {
+			"type": "boolean"
 		}
 	}
 }

package/src/nodeviews/table.tsx

@@ -15,7 +15,11 @@ import type {
 import { WithPluginState } from '@atlaskit/editor-common/with-plugin-state';
 import type { DOMOutputSpec, Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
-import type { EditorState, PluginKey, SelectionBookmark } from '@atlaskit/editor-prosemirror/state';
+import {
+	type EditorState,
+	type PluginKey,
+	type SelectionBookmark,
+} from '@atlaskit/editor-prosemirror/state';
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
@@ -177,7 +181,6 @@ export default class TableView extends ReactNodeView<Props> {
 		let oldIgnoreMutation: (mutation: MutationRecord) => boolean;
 
 		let selectionBookmark: SelectionBookmark;
-		let parentOffset = 0;
 		let mutationsIgnored = false;
 
 		// Only proceed if we have both a node and table, and the table isn't already inside the node
@@ -188,8 +191,8 @@ export default class TableView extends ReactNodeView<Props> {
 			// Set up a temporary mutation handler that:
 			// - Ignores all DOM mutations except selection changes
 			// - Tracks when mutations have been ignored via mutationsIgnored flag
-			this.ignoreMutation = (m: MutationRecord) => {
-				const isSelectionMutation = m.target instanceof Selection;
+			this.ignoreMutation = (m: MutationRecord | { type: string; target: Node }) => {
+				const isSelectionMutation = m.type === 'selection';
 				if (!isSelectionMutation) {
 					mutationsIgnored = true;
 				}
@@ -202,14 +205,8 @@ export default class TableView extends ReactNodeView<Props> {
 				selectionBookmark = this.view.state.selection.getBookmark();
 			}
 
-			// Store the current cursor position within the parent node
-			// Used to determine if we need to restore selection later
-			if (this.view.state.selection?.ranges.length > 0) {
-				parentOffset = this.view.state.selection?.ranges[0].$from?.parentOffset ?? 0;
-			}
-
 			// Remove the ProseMirror table DOM structure to avoid duplication, as it's replaced with the React table node.
-			if (this.renderedDOM) {
+			if (this.dom && this.renderedDOM) {
 				this.dom.removeChild(this.renderedDOM);
 			}
 			// Move the table from the ProseMirror table structure into the React rendered table node.
@@ -223,11 +220,13 @@ export default class TableView extends ReactNodeView<Props> {
 				// Restore the selection only if:
 				// - We have a selection bookmark
 				// - Mutations were ignored during the table move
-				// - The cursor wasn't at the start of the node
-				if (selectionBookmark && mutationsIgnored && parentOffset > 0) {
-					this.view.dispatch(
-						this.view.state.tr.setSelection(selectionBookmark.resolve(this.view.state.tr.doc)),
-					);
+				// - The bookmarked selection is different from the current selection.
+				if (selectionBookmark && mutationsIgnored) {
+					const resolvedSelection = selectionBookmark.resolve(this.view.state.tr.doc);
+					// Don't set the selection if it's the same as the current selection.
+					if (!resolvedSelection.eq(this.view.state.selection)) {
+						this.view.dispatch(this.view.state.tr.setSelection(resolvedSelection));
+					}
 				}
 			});
 		}

package/src/ui/toolbar.tsx

@@ -672,6 +672,10 @@ export const getToolbarConfig =
 				onBlur: clearHoverSelection(),
 			});
 
+			const shouldGroupWithoutSeparators =
+				editorExperiment('platform_editor_controls', 'variant1') &&
+				fg('platform_editor_controls_patch_6');
+
 			return {
 				title: toolbarTitle,
 				getDomRef,
@@ -681,9 +685,9 @@ export const getToolbarConfig =
 				zIndex: akEditorFloatingPanelZIndex + 1, // Place the context menu slightly above the others
 				items: [
 					menu,
-					separator(menu.hidden),
+					...(!shouldGroupWithoutSeparators ? [separator(menu.hidden)] : []),
 					...alignmentMenu,
-					separator(alignmentMenu.length === 0),
+					...(!shouldGroupWithoutSeparators ? [separator(alignmentMenu.length === 0)] : []),
 					...cellItems,
 					...columnSettingsItems,
 					...colorPicker,
@@ -698,6 +702,7 @@ export const getToolbarConfig =
 								deleteButton,
 							] as Array<FloatingToolbarItem<Command>>)
 						: [
+								shouldGroupWithoutSeparators && { type: 'separator', fullHeight: true },
 								{
 									type: 'overflow-dropdown',
 									dropdownWidth: 220,
@@ -900,7 +905,11 @@ const getColumnSettingItems = (
 		});
 	}
 
-	if (items.length !== 0) {
+	if (
+		items.length !== 0 &&
+		(!editorExperiment('platform_editor_controls', 'variant1') ||
+			!fg('platform_editor_controls_patch_6'))
+	) {
 		items.push({
 			type: 'separator',
 		});