@atlaskit/editor-plugin-table 2.9.0 → 2.9.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 2.9.1
+
+### Patch Changes
+
+- [`84cf99bc0f0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/84cf99bc0f0) - ED-19153:Update table container width to be consistent with table resizer.
+
 ## 2.9.0
 
 ### Minor Changes

package/dist/cjs/plugins/table/nodeviews/TableContainer.js

@@ -58,6 +58,14 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
       return;
     }
     var marginLeft = getMarginLeft(lineLength, width);
+
+    // make sure during resizing
+    // the pm-table-resizer-container width is the same as its child div resizer-item
+    // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
+    // and cause the fabric-editor-popup-scroll-parent to overflow
+    if (containerRef.current.style.width !== "".concat(width, "px")) {
+      containerRef.current.style.width = "".concat(width, "px");
+    }
     if (marginLeftRef.current !== marginLeft) {
       marginLeftRef.current = marginLeft;
       if (Number.isFinite(marginLeft)) {
@@ -91,6 +99,7 @@ var ResizableTableContainer = function ResizableTableContainer(_ref2) {
   }, /*#__PURE__*/_react.default.createElement(_TableResizer.TableResizer, {
     width: width,
     maxWidth: maxResizerWidth,
+    containerWidth: containerWidth,
     updateWidth: updateWidth,
     editorView: editorView,
     getPos: getPos,

package/dist/cjs/plugins/table/nodeviews/TableResizer.js

@@ -54,11 +54,24 @@ var getResizerMinWidth = function getResizerMinWidth(node) {
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;
 };
+
+/**
+ * When guidelines are outside the viewport, filter them out, do not show
+ * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
+ * @param guidelines
+ * @param containerWidth editorWidth
+ */
+var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWidth) {
+  return guidelines.filter(function (guideline) {
+    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth;
+  });
+};
 var TableResizer = function TableResizer(_ref) {
   var _findTable, _editorView$state;
   var children = _ref.children,
     width = _ref.width,
     maxWidth = _ref.maxWidth,
+    containerWidth = _ref.containerWidth,
     updateWidth = _ref.updateWidth,
     editorView = _ref.editorView,
     getPos = _ref.getPos,
@@ -82,9 +95,10 @@ var TableResizer = function TableResizer(_ref) {
       keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, _guidelines.defaultGuidelines));
+      var visibleGuidelines = getVisibleGuidelines(_guidelines.defaultGuidelines, containerWidth);
+      displayGuideline((0, _guideline.getGuidelinesWithHighlights)(gap, _consts.TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [displayGuideline]);
+  }, [displayGuideline, containerWidth]);
   var guidelineSnaps = (0, _react.useMemo)(function () {
     return snappingEnabled ? {
       x: _snapping.defaultSnappingWidths
@@ -97,8 +111,9 @@ var TableResizer = function TableResizer(_ref) {
     dispatch(tr.setMeta(_tableWidth.pluginKey, {
       resizing: true
     }));
-    setSnappingEnabled(displayGuideline(_guidelines.defaultGuidelines));
-  }, [displayGuideline, editorView, startMeasure]);
+    var visibleGuidelines = getVisibleGuidelines(_guidelines.defaultGuidelines, containerWidth);
+    setSnappingEnabled(displayGuideline(visibleGuidelines));
+  }, [displayGuideline, containerWidth, editorView, startMeasure]);
   var handleResize = (0, _react.useCallback)(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;

package/dist/es2019/plugins/table/nodeviews/TableContainer.js

@@ -49,6 +49,14 @@ export const ResizableTableContainer = ({
       return;
     }
     const marginLeft = getMarginLeft(lineLength, width);
+
+    // make sure during resizing
+    // the pm-table-resizer-container width is the same as its child div resizer-item
+    // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
+    // and cause the fabric-editor-popup-scroll-parent to overflow
+    if (containerRef.current.style.width !== `${width}px`) {
+      containerRef.current.style.width = `${width}px`;
+    }
     if (marginLeftRef.current !== marginLeft) {
       marginLeftRef.current = marginLeft;
       if (Number.isFinite(marginLeft)) {
@@ -82,6 +90,7 @@ export const ResizableTableContainer = ({
   }, /*#__PURE__*/React.createElement(TableResizer, {
     width: width,
     maxWidth: maxResizerWidth,
+    containerWidth: containerWidth,
     updateWidth: updateWidth,
     editorView: editorView,
     getPos: getPos,

package/dist/es2019/plugins/table/nodeviews/TableResizer.js

@@ -40,10 +40,23 @@ const getResizerMinWidth = node => {
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;
 };
+
+/**
+ * When guidelines are outside the viewport, filter them out, do not show
+ * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
+ * @param guidelines
+ * @param containerWidth editorWidth
+ */
+const getVisibleGuidelines = (guidelines, containerWidth) => {
+  return guidelines.filter(guideline => {
+    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth;
+  });
+};
 export const TableResizer = ({
   children,
   width,
   maxWidth,
+  containerWidth,
   updateWidth,
   editorView,
   getPos,
@@ -68,9 +81,10 @@ export const TableResizer = ({
   }) => {
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, defaultGuidelines));
+      const visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+      displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [displayGuideline]);
+  }, [displayGuideline, containerWidth]);
   const guidelineSnaps = useMemo(() => snappingEnabled ? {
     x: defaultSnappingWidths
   } : undefined, [snappingEnabled]);
@@ -85,8 +99,9 @@ export const TableResizer = ({
     dispatch(tr.setMeta(tableWidthPluginKey, {
       resizing: true
     }));
-    setSnappingEnabled(displayGuideline(defaultGuidelines));
-  }, [displayGuideline, editorView, startMeasure]);
+    const visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+    setSnappingEnabled(displayGuideline(visibleGuidelines));
+  }, [displayGuideline, containerWidth, editorView, startMeasure]);
   const handleResize = useCallback((originalState, delta) => {
     countFrames();
     const newWidth = originalState.width + delta.width;

package/dist/esm/plugins/table/nodeviews/TableContainer.js

@@ -47,6 +47,14 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
       return;
     }
     var marginLeft = getMarginLeft(lineLength, width);
+
+    // make sure during resizing
+    // the pm-table-resizer-container width is the same as its child div resizer-item
+    // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
+    // and cause the fabric-editor-popup-scroll-parent to overflow
+    if (containerRef.current.style.width !== "".concat(width, "px")) {
+      containerRef.current.style.width = "".concat(width, "px");
+    }
     if (marginLeftRef.current !== marginLeft) {
       marginLeftRef.current = marginLeft;
       if (Number.isFinite(marginLeft)) {
@@ -80,6 +88,7 @@ export var ResizableTableContainer = function ResizableTableContainer(_ref2) {
   }, /*#__PURE__*/React.createElement(TableResizer, {
     width: width,
     maxWidth: maxResizerWidth,
+    containerWidth: containerWidth,
     updateWidth: updateWidth,
     editorView: editorView,
     getPos: getPos,

package/dist/esm/plugins/table/nodeviews/TableResizer.js

@@ -44,11 +44,24 @@ var getResizerMinWidth = function getResizerMinWidth(node) {
   // the table can't scale past its min-width, so instead restrict table container min width to avoid that situation
   return minColumnWidth + 1;
 };
+
+/**
+ * When guidelines are outside the viewport, filter them out, do not show
+ * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
+ * @param guidelines
+ * @param containerWidth editorWidth
+ */
+var getVisibleGuidelines = function getVisibleGuidelines(guidelines, containerWidth) {
+  return guidelines.filter(function (guideline) {
+    return guideline.position && guideline.position.x !== undefined && typeof guideline.position.x === 'number' && Math.abs(guideline.position.x * 2) < containerWidth;
+  });
+};
 export var TableResizer = function TableResizer(_ref) {
   var _findTable, _editorView$state;
   var children = _ref.children,
     width = _ref.width,
     maxWidth = _ref.maxWidth,
+    containerWidth = _ref.containerWidth,
     updateWidth = _ref.updateWidth,
     editorView = _ref.editorView,
     getPos = _ref.getPos,
@@ -72,9 +85,10 @@ export var TableResizer = function TableResizer(_ref) {
       keys = _ref2.keys;
     if (gap !== currentGap.current) {
       currentGap.current = gap;
-      displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, defaultGuidelines));
+      var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+      displayGuideline(getGuidelinesWithHighlights(gap, TABLE_SNAP_GAP, keys, visibleGuidelines));
     }
-  }, [displayGuideline]);
+  }, [displayGuideline, containerWidth]);
   var guidelineSnaps = useMemo(function () {
     return snappingEnabled ? {
       x: defaultSnappingWidths
@@ -87,8 +101,9 @@ export var TableResizer = function TableResizer(_ref) {
     dispatch(tr.setMeta(tableWidthPluginKey, {
       resizing: true
     }));
-    setSnappingEnabled(displayGuideline(defaultGuidelines));
-  }, [displayGuideline, editorView, startMeasure]);
+    var visibleGuidelines = getVisibleGuidelines(defaultGuidelines, containerWidth);
+    setSnappingEnabled(displayGuideline(visibleGuidelines));
+  }, [displayGuideline, containerWidth, editorView, startMeasure]);
   var handleResize = useCallback(function (originalState, delta) {
     countFrames();
     var newWidth = originalState.width + delta.width;

package/dist/types/plugins/table/nodeviews/TableContainer.d.ts

@@ -1,8 +1,9 @@
-import React, { PropsWithChildren } from 'react';
-import { EditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { PluginInjectionAPI } from '../types';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../types';
 type InnerContainerProps = {
     className: string;
     style?: {

package/dist/types/plugins/table/nodeviews/TableResizer.d.ts

@@ -7,6 +7,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 interface TableResizerProps {
     width: number;
     maxWidth: number;
+    containerWidth: number;
     updateWidth: (width: number) => void;
     editorView: EditorView;
     getPos: () => number | undefined;
@@ -15,5 +16,5 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
 }
-export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};

package/dist/types-ts4.5/plugins/table/nodeviews/TableContainer.d.ts

@@ -1,8 +1,9 @@
-import React, { PropsWithChildren } from 'react';
-import { EditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { PluginInjectionAPI } from '../types';
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { PluginInjectionAPI } from '../types';
 type InnerContainerProps = {
     className: string;
     style?: {

package/dist/types-ts4.5/plugins/table/nodeviews/TableResizer.d.ts

@@ -7,6 +7,7 @@ import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 interface TableResizerProps {
     width: number;
     maxWidth: number;
+    containerWidth: number;
     updateWidth: (width: number) => void;
     editorView: EditorView;
     getPos: () => number | undefined;
@@ -15,5 +16,5 @@ interface TableResizerProps {
     displayGuideline: (guideline: GuidelineConfig[]) => boolean;
     attachAnalyticsEvent: (payload: TableEventPayload) => ((tr: Transaction) => boolean) | undefined;
 }
-export declare const TableResizer: ({ children, width, maxWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
+export declare const TableResizer: ({ children, width, maxWidth, containerWidth, updateWidth, editorView, getPos, node, tableRef, displayGuideline, attachAnalyticsEvent, }: PropsWithChildren<TableResizerProps>) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "2.9.0",
+  "version": "2.9.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/plugins/table/nodeviews/TableContainer.tsx

@@ -1,23 +1,20 @@
-import React, {
-  forwardRef,
-  PropsWithChildren,
-  useCallback,
-  useRef,
-} from 'react';
+import type { PropsWithChildren } from 'react';
+import React, { forwardRef, useCallback, useRef } from 'react';
 
 import classNames from 'classnames';
 
-import { TableEventPayload } from '@atlaskit/editor-common/analytics';
+import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
 import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
 import { calcTableWidth } from '@atlaskit/editor-common/styles';
-import { EditorContainerWidth } from '@atlaskit/editor-common/types';
-import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { EditorContainerWidth } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
 
 import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils';
-import { TableCssClassName as ClassName, PluginInjectionAPI } from '../types';
+import type { PluginInjectionAPI } from '../types';
+import { TableCssClassName as ClassName } from '../types';
 
 import { TableResizer } from './TableResizer';
 
@@ -94,6 +91,14 @@ export const ResizableTableContainer = ({
 
       const marginLeft = getMarginLeft(lineLength, width);
 
+      // make sure during resizing
+      // the pm-table-resizer-container width is the same as its child div resizer-item
+      // otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
+      // and cause the fabric-editor-popup-scroll-parent to overflow
+      if (containerRef.current.style.width !== `${width}px`) {
+        containerRef.current.style.width = `${width}px`;
+      }
+
       if (marginLeftRef.current !== marginLeft) {
         marginLeftRef.current = marginLeft;
 
@@ -141,6 +146,7 @@ export const ResizableTableContainer = ({
       <TableResizer
         width={width}
         maxWidth={maxResizerWidth}
+        containerWidth={containerWidth}
         updateWidth={updateWidth}
         editorView={editorView}
         getPos={getPos}

package/src/plugins/table/nodeviews/TableResizer.tsx

@@ -40,6 +40,7 @@ import { defaultSnappingWidths, findClosestSnap } from '../utils/snapping';
 interface TableResizerProps {
   width: number;
   maxWidth: number;
+  containerWidth: number;
   updateWidth: (width: number) => void;
   editorView: EditorView;
   getPos: () => number | undefined;
@@ -87,10 +88,31 @@ const getResizerMinWidth = (node: PMNode) => {
   return minColumnWidth + 1;
 };
 
+/**
+ * When guidelines are outside the viewport, filter them out, do not show
+ * So the guideline container won't make the fabric-editor-popup-scroll-parent overflow
+ * @param guidelines
+ * @param containerWidth editorWidth
+ */
+const getVisibleGuidelines = (
+  guidelines: GuidelineConfig[],
+  containerWidth: number,
+) => {
+  return guidelines.filter((guideline) => {
+    return (
+      guideline.position &&
+      guideline.position.x !== undefined &&
+      typeof guideline.position.x === 'number' &&
+      Math.abs(guideline.position.x * 2) < containerWidth
+    );
+  });
+};
+
 export const TableResizer = ({
   children,
   width,
   maxWidth,
+  containerWidth,
   updateWidth,
   editorView,
   getPos,
@@ -111,17 +133,21 @@ export const TableResizer = ({
     ({ gap, keys }: { gap: number; keys: string[] }) => {
       if (gap !== currentGap.current) {
         currentGap.current = gap;
+        const visibleGuidelines = getVisibleGuidelines(
+          defaultGuidelines,
+          containerWidth,
+        );
         displayGuideline(
           getGuidelinesWithHighlights(
             gap,
             TABLE_SNAP_GAP,
             keys,
-            defaultGuidelines,
+            visibleGuidelines,
           ),
         );
       }
     },
-    [displayGuideline],
+    [displayGuideline, containerWidth],
   );
 
   const guidelineSnaps = useMemo(
@@ -144,8 +170,12 @@ export const TableResizer = ({
 
     dispatch(tr.setMeta(tableWidthPluginKey, { resizing: true }));
 
-    setSnappingEnabled(displayGuideline(defaultGuidelines));
-  }, [displayGuideline, editorView, startMeasure]);
+    const visibleGuidelines = getVisibleGuidelines(
+      defaultGuidelines,
+      containerWidth,
+    );
+    setSnappingEnabled(displayGuideline(visibleGuidelines));
+  }, [displayGuideline, containerWidth, editorView, startMeasure]);
 
   const handleResize = useCallback(
     (originalState, delta) => {

package/dist/cjs/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.9.0",
-	"sideEffects": false
-}

package/dist/es2019/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.9.0",
-	"sideEffects": false
-}

package/dist/esm/version.json

@@ -1,5 +0,0 @@
-{
-	"name": "@atlaskit/editor-plugin-table",
-	"version": "2.9.0",
-	"sideEffects": false
-}