@atlaskit/editor-plugin-table 23.1.1 → 23.2.0

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/nodeviews/table.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
+import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
@@ -378,6 +379,22 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
   } = getPluginConfig(pluginConfig);
   const isTableFixedColumnWidthsOptionEnabled = (fg('platform_editor_table_fixed_column_width_prop') ? allowFixedColumnWidthOption : getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().tableWithFixedColumnWidthsOption) || false;
   const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
+
+  // In SSR use native ProseMirror spec-based render for table nodes
+  if (isSSR() && isSSRStreaming()) {
+    const isNested = isTableNested(view.state, typeof getPos === 'function' ? getPos() : undefined);
+    const tableDOMStructure = tableNodeSpecWithFixedToDOM({
+      allowColumnResizing: allowColumnResizing !== null && allowColumnResizing !== void 0 ? allowColumnResizing : false,
+      tableResizingEnabled: allowTableResizing !== null && allowTableResizing !== void 0 ? allowTableResizing : false,
+      getEditorContainerWidth,
+      isTableScalingEnabled,
+      shouldUseIncreasedScalingPercent,
+      isCommentEditor,
+      isChromelessEditor,
+      isNested
+    }).toDOM(node);
+    return DOMSerializer.renderSpec(document, tableDOMStructure);
+  }
   return new TableView({
     node,
     view,

package/dist/es2019/pm-plugins/main.js

@@ -1,7 +1,7 @@
 import { bind } from 'bind-event-listener';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { insideTable, isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
+import { insideTable } from '@atlaskit/editor-common/core-utils';
 import { isNestedTablesSupported } from '@atlaskit/editor-common/nesting';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension, transformSliceToRemoveOpenNestedExpand } from '@atlaskit/editor-common/transforms';
@@ -59,19 +59,16 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
   };
   const getNodeView = () => {
     return {
-      // In SSR use native ProseMirror spec-based render for table nodes
-      ...(isSSR() && isSSRStreaming() ? {} : {
-        table: tableView({
-          portalProviderAPI,
-          eventDispatcher,
-          getEditorContainerWidth,
-          getEditorFeatureFlags,
-          dispatchAnalyticsEvent,
-          pluginInjectionApi,
-          isCommentEditor,
-          isChromelessEditor,
-          allowFixedColumnWidthOption
-        })
+      table: tableView({
+        portalProviderAPI,
+        eventDispatcher,
+        getEditorContainerWidth,
+        getEditorFeatureFlags,
+        dispatchAnalyticsEvent,
+        pluginInjectionApi,
+        isCommentEditor,
+        isChromelessEditor,
+        allowFixedColumnWidthOption
       }),
       tableRow: tableRowView({
         eventDispatcher,

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

@@ -737,7 +737,8 @@ const baseTableStylesWithoutSharedStyle = props => css`
 
 		position: fixed !important;
 		z-index: ${akEditorStickyHeaderZIndex} !important;
-		box-shadow: 0px -${stickyRowOffsetTop}px ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "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 */
 	}
@@ -770,13 +771,15 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		position: fixed !important;
 		z-index: ${akEditorStickyHeaderZIndex} !important;
 		display: flex;
-		border-left: ${tableToolbarSize}px solid ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "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 ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "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 {
@@ -913,7 +916,8 @@ const baseTableStylesWithoutSharedStyle = props => css`
 		height: 0;
 		margin-bottom: -${tableMarginTop}px;
 		position: sticky;
-		border-top: ${tableMarginTop}px solid ${expValEquals('platform_editor_nest_table_in_panel', 'isEnabled', true) ? `var(${akEditorTableContainerBg}, ${"var(--ds-surface, #FFFFFF)"})` : "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};
 	}
 
@@ -997,7 +1001,8 @@ const baseTableStylesWithoutSharedStyle = props => css`
 	}
 
 	.${ClassName.CORNER_CONTROLS}.sticky {
-		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)"};
+		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}
@@ -1749,6 +1754,7 @@ const baseTableStylesWithoutSharedStyle = props => css`
 	}
 `;
 
+// TODO: EDITOR-7593 - No usage found accross AFM, deprecate when EditorContentContainer in editor-core has finished compiled css migration under experiment 'platform_editor_core_static_css'
 // re-exporting these styles to use in Gemini test when table node view is rendered outside of PM
 export const baseTableStyles = props => css`
 	${tableSharedStyle()};

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;
+              }
+            }
           }
         }
       }

package/dist/esm/nodeviews/table.js

@@ -10,6 +10,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 function _superPropGet(t, o, e, r) { var p = _get(_getPrototypeOf(1 & r ? t.prototype : t), o, e); return 2 & r && "function" == typeof p ? function (t) { return p.apply(e, t); } : p; }
 import React from 'react';
+import { isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { isTableInContentMode } from '@atlaskit/editor-common/table';
@@ -417,6 +418,22 @@ export var createTableView = function createTableView(node, view, getPos, portal
     allowTableAlignment = _getPluginConfig.allowTableAlignment;
   var isTableFixedColumnWidthsOptionEnabled = (fg('platform_editor_table_fixed_column_width_prop') ? allowFixedColumnWidthOption : getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().tableWithFixedColumnWidthsOption) || false;
   var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
+
+  // In SSR use native ProseMirror spec-based render for table nodes
+  if (isSSR() && isSSRStreaming()) {
+    var isNested = isTableNested(view.state, typeof getPos === 'function' ? getPos() : undefined);
+    var tableDOMStructure = tableNodeSpecWithFixedToDOM({
+      allowColumnResizing: allowColumnResizing !== null && allowColumnResizing !== void 0 ? allowColumnResizing : false,
+      tableResizingEnabled: allowTableResizing !== null && allowTableResizing !== void 0 ? allowTableResizing : false,
+      getEditorContainerWidth: getEditorContainerWidth,
+      isTableScalingEnabled: isTableScalingEnabled,
+      shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
+      isCommentEditor: isCommentEditor,
+      isChromelessEditor: isChromelessEditor,
+      isNested: isNested
+    }).toDOM(node);
+    return DOMSerializer.renderSpec(document, tableDOMStructure);
+  }
   return new TableView({
     node: node,
     view: view,

package/dist/esm/pm-plugins/main.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { bind } from 'bind-event-listener';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE, INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { getBrowserInfo } from '@atlaskit/editor-common/browser';
-import { insideTable, isSSR, isSSRStreaming } from '@atlaskit/editor-common/core-utils';
+import { insideTable } from '@atlaskit/editor-common/core-utils';
 import { isNestedTablesSupported } from '@atlaskit/editor-common/nesting';
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
 import { transformSliceToRemoveOpenBodiedExtension, transformSliceToRemoveOpenExpand, transformSliceToRemoveOpenLayoutNodes, transformSliceToRemoveOpenMultiBodiedExtension, transformSliceToRemoveOpenNestedExpand } from '@atlaskit/editor-common/transforms';
@@ -60,7 +60,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
     return editorView.state;
   };
   var getNodeView = function getNodeView() {
-    return _objectSpread(_objectSpread({}, isSSR() && isSSRStreaming() ? {} : {
+    return {
       table: tableView({
         portalProviderAPI: portalProviderAPI,
         eventDispatcher: eventDispatcher,
@@ -71,8 +71,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         isCommentEditor: isCommentEditor,
         isChromelessEditor: isChromelessEditor,
         allowFixedColumnWidthOption: allowFixedColumnWidthOption
-      })
-    }), {}, {
+      }),
       tableRow: tableRowView({
         eventDispatcher: eventDispatcher,
         pluginInjectionApi: pluginInjectionApi
@@ -85,7 +84,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
         eventDispatcher: eventDispatcher,
         pluginInjectionApi: pluginInjectionApi
       })
-    });
+    };
   };
   var nodeViews = getNodeView();
   return new SafePlugin({