@atlaskit/editor-plugin-table 23.1.0 → 23.1.2

package/dist/es2019/nodeviews/TableRow.js

@@ -5,6 +5,7 @@ import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -437,17 +438,38 @@ export default class TableRow extends TableNodeView {
     navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome')) {
       const pos = this.getPos();
       if (typeof pos === 'number') {
-        const $tableRowPos = this.view.state.doc.resolve(pos);
-
-        // layout -> layout column -> table -> table row
-        if ($tableRowPos.depth >= 3) {
-          var _findParentNodeCloses;
-          const isInsideLayout = (_findParentNodeCloses = findParentNodeClosestToPos($tableRowPos, node => {
-            return node.type.name === 'layoutColumn';
-          })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
-          if (isInsideLayout) {
+        if (fg('platform_editor_ai_table_ai_streaming_pos_fix')) {
+          try {
+            // getPos can return stale positions during AI streaming which cannot be resolved
+            const $tableRowPos = this.view.state.doc.resolve(pos);
+
+            // layout -> layout column -> table -> table row
+            if ($tableRowPos.depth >= 3) {
+              var _findParentNodeCloses;
+              const isInsideLayout = (_findParentNodeCloses = findParentNodeClosestToPos($tableRowPos, node => {
+                return node.type.name === 'layoutColumn';
+              })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
+              if (isInsideLayout) {
+                return false;
+              }
+            }
+          } catch {
+            // getPos can return stale positions during AI streaming — fall back to non-sticky
             return false;
           }
+        } else {
+          const $tableRowPos = this.view.state.doc.resolve(pos);
+
+          // layout -> layout column -> table -> table row
+          if ($tableRowPos.depth >= 3) {
+            var _findParentNodeCloses2;
+            const isInsideLayout = (_findParentNodeCloses2 = findParentNodeClosestToPos($tableRowPos, node => {
+              return node.type.name === 'layoutColumn';
+            })) === null || _findParentNodeCloses2 === void 0 ? void 0 : _findParentNodeCloses2.node;
+            if (isInsideLayout) {
+              return false;
+            }
+          }
         }
       }
     }

package/dist/es2019/nodeviews/TableRowNativeStickyWithFallback.js

@@ -106,8 +106,22 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     }
     const pos = this.getPos();
     this.isInNestedTable = false;
-    if (pos) {
-      this.isInNestedTable = getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
+    if (fg('platform_editor_ai_table_ai_streaming_pos_fix')) {
+      try {
+        // We cannot trust that the value from getPos will be defined
+        // https://discuss.prosemirror.net/t/getpos-is-undefined-in-nodeview-constructor/1246/4
+        // There are also scenarios where the value it brings back does not tally with the current doc
+        // E.g. when AI streaming brings in new content, this position brings back incorrect values that cannot be resolved
+        if (pos) {
+          this.isInNestedTable = getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
+        }
+      } catch {
+        // Intentionally swallowed — getPos can return stale positions during AI streaming
+      }
+    } else {
+      if (pos) {
+        this.isInNestedTable = getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
+      }
     }
     if (this.isHeaderRow) {
       this.dom.setAttribute('data-vc-nvs', 'true');
@@ -663,17 +677,38 @@ export default class TableRowNativeStickyWithFallback extends TableNodeView {
     navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome')) {
       const pos = this.getPos();
       if (typeof pos === 'number') {
-        const $tableRowPos = this.view.state.doc.resolve(pos);
-
-        // layout -> layout column -> table -> table row
-        if ($tableRowPos.depth >= 3) {
-          var _findParentNodeCloses;
-          const isInsideLayout = (_findParentNodeCloses = findParentNodeClosestToPos($tableRowPos, node => {
-            return node.type.name === 'layoutColumn';
-          })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
-          if (isInsideLayout) {
+        if (fg('platform_editor_ai_table_ai_streaming_pos_fix')) {
+          try {
+            // getPos can return stale positions during AI streaming which cannot be resolved
+            const $tableRowPos = this.view.state.doc.resolve(pos);
+
+            // layout -> layout column -> table -> table row
+            if ($tableRowPos.depth >= 3) {
+              var _findParentNodeCloses;
+              const isInsideLayout = (_findParentNodeCloses = findParentNodeClosestToPos($tableRowPos, node => {
+                return node.type.name === 'layoutColumn';
+              })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
+              if (isInsideLayout) {
+                return false;
+              }
+            }
+          } catch {
+            // getPos can return stale positions during AI streaming — fall back to non-sticky
             return false;
           }
+        } else {
+          const $tableRowPos = this.view.state.doc.resolve(pos);
+
+          // layout -> layout column -> table -> table row
+          if ($tableRowPos.depth >= 3) {
+            var _findParentNodeCloses2;
+            const isInsideLayout = (_findParentNodeCloses2 = findParentNodeClosestToPos($tableRowPos, node => {
+              return node.type.name === 'layoutColumn';
+            })) === null || _findParentNodeCloses2 === void 0 ? void 0 : _findParentNodeCloses2.node;
+            if (isInsideLayout) {
+              return false;
+            }
+          }
         }
       }
     }

package/dist/es2019/ui/common-styles.js

@@ -9,6 +9,7 @@ import { getBrowserInfo } from '@atlaskit/editor-common/browser';
 import { ANCHOR_VARIABLE_NAME, tableMarginTop, tableSharedStyle, TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { SORTABLE_COLUMN_ICON_CLASSNAME } from '@atlaskit/editor-common/table';
 import { akEditorSelectedNodeClassName, akEditorSmallZIndex, akEditorStickyHeaderZIndex, akEditorTableCellOnStickyHeaderZIndex, akEditorTableNumberColumnWidth, akEditorTableToolbarSize, akEditorUnitZIndex, getSelectionStyles, MAX_BROWSER_SCROLLBAR_HEIGHT, SelectionStyle, relativeSizeToBaseFontSize, relativeFontSizeToBase16, akEditorSelectedBorderColor } from '@atlaskit/editor-shared-styles';
+import { akEditorTableContainerBg } from '@atlaskit/editor-shared-styles/consts';
 import { scrollbarStyles } from '@atlaskit/editor-shared-styles/scrollbar';
 import { hideNativeBrowserTextSelectionStyles } from '@atlaskit/editor-shared-styles/selection';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -665,6 +666,28 @@ const baseTableStylesWithoutSharedStyle = props => css`
 	${rangeSelectionStyles};
 	${rangeSelectionStylesForFakeBorders};
 	${viewModeSortStyles()};
+
+	${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `
+		.ak-editor-panel:not([data-panel-type="custom"]) .${ClassName.TABLE_CONTAINER} {
+			${akEditorTableContainerBg}: ${"var(--ds-background-accent-blue-subtlest, #E9F2FE)"};
+		}
+		.ak-editor-panel[data-panel-type="note"] .${ClassName.TABLE_CONTAINER} {
+			${akEditorTableContainerBg}: ${"var(--ds-background-accent-purple-subtlest, #F8EEFE)"};
+		}
+		.ak-editor-panel[data-panel-type="tip"] .${ClassName.TABLE_CONTAINER} {
+			${akEditorTableContainerBg}: ${"var(--ds-background-accent-green-subtlest, #DCFFF1)"};
+		}
+		.ak-editor-panel[data-panel-type="warning"] .${ClassName.TABLE_CONTAINER} {
+			${akEditorTableContainerBg}: ${"var(--ds-background-accent-yellow-subtlest, #FEF7C8)"};
+		}
+		.ak-editor-panel[data-panel-type="error"] .${ClassName.TABLE_CONTAINER} {
+			${akEditorTableContainerBg}: ${"var(--ds-background-accent-red-subtlest, #FFECEB)"};
+		}
+		.ak-editor-panel[data-panel-type="success"] .${ClassName.TABLE_CONTAINER} {
+			${akEditorTableContainerBg}: ${"var(--ds-background-accent-green-subtlest, #DCFFF1)"};
+		}
+	` : ''}
+
 	${expValEquals('platform_editor_table_sticky_header_improvements', 'cohort', 'test_with_overflow') && tableAnchorStyles};
 
 	.${ClassName.TABLE_NODE_WRAPPER} {
@@ -714,7 +737,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 
 		position: fixed !important;
 		z-index: ${akEditorStickyHeaderZIndex} !important;
-		box-shadow: 0px -${stickyRowOffsetTop}px ${"var(--ds-surface, #FFFFFF)"};
+		box-shadow: 0px -${stickyRowOffsetTop}px ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		border-right: 0 none;
 		/* top set by NumberColumn component */
 	}
@@ -723,7 +746,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		position: fixed !important;
 		/* needs to be above row controls */
 		z-index: ${akEditorSmallZIndex} !important;
-		background: ${"var(--ds-surface, #FFFFFF)"};
+		background: ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 
 		width: ${tableToolbarSize}px;
 		height: ${tableToolbarSize}px;
@@ -747,13 +770,13 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		position: fixed !important;
 		z-index: ${akEditorStickyHeaderZIndex} !important;
 		display: flex;
-		border-left: ${tableToolbarSize}px solid ${"var(--ds-surface, #FFFFFF)"};
+		border-left: ${tableToolbarSize}px solid ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		margin-left: -${tableToolbarSize}px;
 	}
 
 	.${ClassName.TABLE_STICKY} col:first-of-type {
 		/* moving rows out of a table layout does weird things in Chrome */
-		border-right: 1px solid ${"var(--ds-surface, #FFFFFF)"};
+		border-right: 1px solid ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 	}
 
 	tr.sticky {
@@ -770,7 +793,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		grid-auto-flow: column;
 
 		/* background for where controls apply */
-		background: ${"var(--ds-surface, #FFFFFF)"};
+		background: ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		box-sizing: content-box;
 		box-shadow: 0 6px 4px -4px ${"var(--ds-shadow-overflow-perimeter, #1E1F211f)"};
 
@@ -890,7 +913,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		height: 0;
 		margin-bottom: -${tableMarginTop}px;
 		position: sticky;
-		border-top: ${tableMarginTop}px solid ${"var(--ds-surface, #FFFFFF)"};
+		border-top: ${tableMarginTop}px solid ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		z-index: ${stickyRowZIndex};
 	}
 
@@ -901,7 +924,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		}
 
 		.${ClassName.TABLE_NODE_WRAPPER}:has(tr.${ClassName.NATIVE_STICKY_ACTIVE})::before {
-			border-top: ${tableMarginTop}px solid ${"var(--ds-surface, #FFFFFF)"};
+			border-top: ${tableMarginTop}px solid ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		}` : fg('platform_editor_table_sticky_header_patch_1') ? `
 			.${ClassName.TABLE_NODE_WRAPPER}:has(tr.${ClassName.NATIVE_STICKY})::before {
 				margin-top: 1px;
@@ -974,7 +997,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 	}
 
 	.${ClassName.CORNER_CONTROLS}.sticky {
-		border-top: ${tableControlsSpacing - tableToolbarSize}px solid ${"var(--ds-surface, #FFFFFF)"};
+		border-top: ${tableControlsSpacing - tableToolbarSize}px solid ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 	}
 
 	${sentinelStyles}
@@ -1597,7 +1620,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		/* +2px is to overlap the table border on the sides */
 		width: calc(anchor-size(width) + 2px);
 		height: ${tableMarginTop}px;
-		background: ${"var(--ds-surface, #FFFFFF)"};
+		background: ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		top: unset;
 		position: fixed;
 		position-area: top center;
@@ -1607,7 +1630,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		/* +2px is to overlap the table border on the sides */
 		width: calc(anchor-size(width) + 2px);
 		height: ${tableMarginTop}px;
-		background: ${"var(--ds-surface, #FFFFFF)"};
+		background: ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		position: fixed;
 		position-area: top center;
 		position-visibility: anchors-visible;
@@ -1623,7 +1646,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		margin-left: -${akEditorTableNumberColumnWidth + dragRowControlsWidth}px;
 		width: ${akEditorTableNumberColumnWidth + dragRowControlsWidth}px;
 		height: ${tableMarginTop}px;
-		background: ${"var(--ds-surface, #FFFFFF)"};
+		background: ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "var(--ds-surface, #FFFFFF)"};
 		z-index: ${nativeStickyHeaderZIndex - 1};
 	}
 

package/dist/esm/nodeviews/TableRow.js

@@ -12,6 +12,7 @@ import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
 import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
 import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
 import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
 import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
@@ -469,17 +470,38 @@ var TableRow = /*#__PURE__*/function (_TableNodeView) {
       navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome')) {
         var pos = this.getPos();
         if (typeof pos === 'number') {
-          var $tableRowPos = this.view.state.doc.resolve(pos);
-
-          // layout -> layout column -> table -> table row
-          if ($tableRowPos.depth >= 3) {
-            var _findParentNodeCloses;
-            var isInsideLayout = (_findParentNodeCloses = findParentNodeClosestToPos($tableRowPos, function (node) {
-              return node.type.name === 'layoutColumn';
-            })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
-            if (isInsideLayout) {
+          if (fg('platform_editor_ai_table_ai_streaming_pos_fix')) {
+            try {
+              // getPos can return stale positions during AI streaming which cannot be resolved
+              var $tableRowPos = this.view.state.doc.resolve(pos);
+
+              // layout -> layout column -> table -> table row
+              if ($tableRowPos.depth >= 3) {
+                var _findParentNodeCloses;
+                var isInsideLayout = (_findParentNodeCloses = findParentNodeClosestToPos($tableRowPos, function (node) {
+                  return node.type.name === 'layoutColumn';
+                })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
+                if (isInsideLayout) {
+                  return false;
+                }
+              }
+            } catch (_unused2) {
+              // getPos can return stale positions during AI streaming — fall back to non-sticky
               return false;
             }
+          } else {
+            var _$tableRowPos = this.view.state.doc.resolve(pos);
+
+            // layout -> layout column -> table -> table row
+            if (_$tableRowPos.depth >= 3) {
+              var _findParentNodeCloses2;
+              var _isInsideLayout = (_findParentNodeCloses2 = findParentNodeClosestToPos(_$tableRowPos, function (node) {
+                return node.type.name === 'layoutColumn';
+              })) === null || _findParentNodeCloses2 === void 0 ? void 0 : _findParentNodeCloses2.node;
+              if (_isInsideLayout) {
+                return false;
+              }
+            }
           }
         }
       }

package/dist/esm/nodeviews/TableRowNativeStickyWithFallback.js

@@ -114,8 +114,22 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
     }
     var pos = _this.getPos();
     _this.isInNestedTable = false;
-    if (pos) {
-      _this.isInNestedTable = getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
+    if (fg('platform_editor_ai_table_ai_streaming_pos_fix')) {
+      try {
+        // We cannot trust that the value from getPos will be defined
+        // https://discuss.prosemirror.net/t/getpos-is-undefined-in-nodeview-constructor/1246/4
+        // There are also scenarios where the value it brings back does not tally with the current doc
+        // E.g. when AI streaming brings in new content, this position brings back incorrect values that cannot be resolved
+        if (pos) {
+          _this.isInNestedTable = getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
+        }
+      } catch (_unused) {
+        // Intentionally swallowed — getPos can return stale positions during AI streaming
+      }
+    } else {
+      if (pos) {
+        _this.isInNestedTable = getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
+      }
     }
     if (_this.isHeaderRow) {
       _this.dom.setAttribute('data-vc-nvs', 'true');
@@ -704,17 +718,38 @@ var TableRowNativeStickyWithFallback = /*#__PURE__*/function (_TableNodeView) {
       navigator.userAgent.includes('AppleWebKit') && !navigator.userAgent.includes('Chrome')) {
         var pos = this.getPos();
         if (typeof pos === 'number') {
-          var $tableRowPos = this.view.state.doc.resolve(pos);
-
-          // layout -> layout column -> table -> table row
-          if ($tableRowPos.depth >= 3) {
-            var _findParentNodeCloses;
-            var isInsideLayout = (_findParentNodeCloses = findParentNodeClosestToPos($tableRowPos, function (node) {
-              return node.type.name === 'layoutColumn';
-            })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
-            if (isInsideLayout) {
+          if (fg('platform_editor_ai_table_ai_streaming_pos_fix')) {
+            try {
+              // getPos can return stale positions during AI streaming which cannot be resolved
+              var $tableRowPos = this.view.state.doc.resolve(pos);
+
+              // layout -> layout column -> table -> table row
+              if ($tableRowPos.depth >= 3) {
+                var _findParentNodeCloses;
+                var isInsideLayout = (_findParentNodeCloses = findParentNodeClosestToPos($tableRowPos, function (node) {
+                  return node.type.name === 'layoutColumn';
+                })) === null || _findParentNodeCloses === void 0 ? void 0 : _findParentNodeCloses.node;
+                if (isInsideLayout) {
+                  return false;
+                }
+              }
+            } catch (_unused2) {
+              // getPos can return stale positions during AI streaming — fall back to non-sticky
               return false;
             }
+          } else {
+            var _$tableRowPos = this.view.state.doc.resolve(pos);
+
+            // layout -> layout column -> table -> table row
+            if (_$tableRowPos.depth >= 3) {
+              var _findParentNodeCloses2;
+              var _isInsideLayout = (_findParentNodeCloses2 = findParentNodeClosestToPos(_$tableRowPos, function (node) {
+                return node.type.name === 'layoutColumn';
+              })) === null || _findParentNodeCloses2 === void 0 ? void 0 : _findParentNodeCloses2.node;
+              if (_isInsideLayout) {
+                return false;
+              }
+            }
           }
         }
       }