@atlaskit/editor-plugin-table 3.2.1 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/editor-plugin-table
 
+## 4.0.1
+
+### Patch Changes
+
+- [#40684](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40684) [`9aa958ee692`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9aa958ee692) - [ux] Makes sticky scrollbar visible in Safari and Firefox by setting height.
+
+## 4.0.0
+
+### Major Changes
+
+- [`151b0d45db4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/151b0d45db4) - Changed Resizer API. Removed handleComponent, innerPadding & handleMarginTop. Also renamed HandleHeightSizeType to HandleSize. The resizer should be opionated and control the handle component itself. innerPadding & handleMarginTop can also be controlled via the handleStyles override property.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.2.1
 
 ### Patch Changes

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

@@ -559,7 +559,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/_react.default.createElement("div", {
         style: {
-          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth
+          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
+          height: '100%'
         }
       })), /*#__PURE__*/_react.default.createElement("div", {
         style: shadowStyle(showAfterShadow),

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

@@ -38,15 +38,16 @@ var messages = (0, _reactIntlNext.defineMessages)({
 var handles = {
   right: true
 };
-var tableHandleMarginTop = 12;
-var tableHandlePosition = 14;
-var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
-  var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
-  var handleHeightSize = 'small';
-  if (!tableHeight) {
-    return handleHeightSize;
+var handleStyles = {
+  right: {
+    // eslint-disable-next-line
+    right: '-14px',
+    marginTop: "var(--ds-space-150, 12px)"
   }
-
+};
+var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
+  var _tableRef$clientHeigh;
+  var tableHeight = (_tableRef$clientHeigh = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight) !== null && _tableRef$clientHeigh !== void 0 ? _tableRef$clientHeigh : 0;
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -55,12 +56,13 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight > 46 && tableHeight < 96) {
-    handleHeightSize = 'medium';
-  } else if (tableHeight >= 96) {
-    handleHeightSize = 'large';
+  if (tableHeight >= 96) {
+    return 'large';
+  }
+  if (tableHeight > 46) {
+    return 'medium';
   }
-  return handleHeightSize;
+  return 'small';
 };
 var getResizerMinWidth = function getResizerMinWidth(node) {
   var currentColumnCount = (0, _utils2.getColgroupChildrenLength)(node);
@@ -107,7 +109,7 @@ var TableResizer = function TableResizer(_ref) {
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var resizerMinWidth = getResizerMinWidth(node);
-  var handleHeightSize = getResizerHandleHeight(tableRef);
+  var handleSize = getResizerHandleHeight(tableRef);
   var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
     isInDanger = _getPluginState.isInDanger;
   var _useMeasureFramerate = (0, _analytics2.useMeasureFramerate)(),
@@ -244,8 +246,8 @@ var TableResizer = function TableResizer(_ref) {
     enable: handles,
     width: width,
     handleAlignmentMethod: "sticky",
-    handleHeightSize: handleHeightSize,
-    handleMarginTop: tableHandleMarginTop,
+    handleSize: handleSize,
+    handleStyles: handleStyles,
     handleResizeStart: handleResizeStart,
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
@@ -255,7 +257,6 @@ var TableResizer = function TableResizer(_ref) {
     snapGap: _consts.TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    innerPadding: tableHandlePosition,
     isHandleVisible: isTableSelected,
     appearance: isInDanger && isTableSelected ? 'danger' : undefined,
     handleHighlight: "shadow",

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

@@ -560,7 +560,8 @@ class TableComponent extends React.Component {
       }
     }, /*#__PURE__*/React.createElement("div", {
       style: {
-        width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth
+        width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
+        height: '100%'
       }
     })), /*#__PURE__*/React.createElement("div", {
       style: shadowStyle(showAfterShadow),

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

@@ -24,15 +24,16 @@ const messages = defineMessages({
 const handles = {
   right: true
 };
-const tableHandleMarginTop = 12;
-const tableHandlePosition = 14;
-const getResizerHandleHeight = tableRef => {
-  const tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
-  let handleHeightSize = 'small';
-  if (!tableHeight) {
-    return handleHeightSize;
+const handleStyles = {
+  right: {
+    // eslint-disable-next-line
+    right: '-14px',
+    marginTop: "var(--ds-space-150, 12px)"
   }
-
+};
+const getResizerHandleHeight = tableRef => {
+  var _tableRef$clientHeigh;
+  const tableHeight = (_tableRef$clientHeigh = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight) !== null && _tableRef$clientHeigh !== void 0 ? _tableRef$clientHeigh : 0;
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -41,12 +42,13 @@ const getResizerHandleHeight = tableRef => {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight > 46 && tableHeight < 96) {
-    handleHeightSize = 'medium';
-  } else if (tableHeight >= 96) {
-    handleHeightSize = 'large';
+  if (tableHeight >= 96) {
+    return 'large';
+  }
+  if (tableHeight > 46) {
+    return 'medium';
   }
-  return handleHeightSize;
+  return 'small';
 };
 const getResizerMinWidth = node => {
   const currentColumnCount = getColgroupChildrenLength(node);
@@ -92,7 +94,7 @@ export const TableResizer = ({
     formatMessage
   } = useIntl();
   const resizerMinWidth = getResizerMinWidth(node);
-  const handleHeightSize = getResizerHandleHeight(tableRef);
+  const handleSize = getResizerHandleHeight(tableRef);
   const {
     isInDanger
   } = getPluginState(editorView.state);
@@ -239,8 +241,8 @@ export const TableResizer = ({
     enable: handles,
     width: width,
     handleAlignmentMethod: "sticky",
-    handleHeightSize: handleHeightSize,
-    handleMarginTop: tableHandleMarginTop,
+    handleSize: handleSize,
+    handleStyles: handleStyles,
     handleResizeStart: handleResizeStart,
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
@@ -250,7 +252,6 @@ export const TableResizer = ({
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    innerPadding: tableHandlePosition,
     isHandleVisible: isTableSelected,
     appearance: isInDanger && isTableSelected ? 'danger' : undefined,
     handleHighlight: "shadow",

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

@@ -552,7 +552,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         }
       }, /*#__PURE__*/React.createElement("div", {
         style: {
-          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth
+          width: tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientWidth,
+          height: '100%'
         }
       })), /*#__PURE__*/React.createElement("div", {
         style: shadowStyle(showAfterShadow),

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

@@ -28,15 +28,16 @@ var messages = defineMessages({
 var handles = {
   right: true
 };
-var tableHandleMarginTop = 12;
-var tableHandlePosition = 14;
-var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
-  var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
-  var handleHeightSize = 'small';
-  if (!tableHeight) {
-    return handleHeightSize;
+var handleStyles = {
+  right: {
+    // eslint-disable-next-line
+    right: '-14px',
+    marginTop: "var(--ds-space-150, 12px)"
   }
-
+};
+var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
+  var _tableRef$clientHeigh;
+  var tableHeight = (_tableRef$clientHeigh = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight) !== null && _tableRef$clientHeigh !== void 0 ? _tableRef$clientHeigh : 0;
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -45,12 +46,13 @@ var getResizerHandleHeight = function getResizerHandleHeight(tableRef) {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight > 46 && tableHeight < 96) {
-    handleHeightSize = 'medium';
-  } else if (tableHeight >= 96) {
-    handleHeightSize = 'large';
+  if (tableHeight >= 96) {
+    return 'large';
+  }
+  if (tableHeight > 46) {
+    return 'medium';
   }
-  return handleHeightSize;
+  return 'small';
 };
 var getResizerMinWidth = function getResizerMinWidth(node) {
   var currentColumnCount = getColgroupChildrenLength(node);
@@ -97,7 +99,7 @@ export var TableResizer = function TableResizer(_ref) {
   var _useIntl = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var resizerMinWidth = getResizerMinWidth(node);
-  var handleHeightSize = getResizerHandleHeight(tableRef);
+  var handleSize = getResizerHandleHeight(tableRef);
   var _getPluginState = getPluginState(editorView.state),
     isInDanger = _getPluginState.isInDanger;
   var _useMeasureFramerate = useMeasureFramerate(),
@@ -234,8 +236,8 @@ export var TableResizer = function TableResizer(_ref) {
     enable: handles,
     width: width,
     handleAlignmentMethod: "sticky",
-    handleHeightSize: handleHeightSize,
-    handleMarginTop: tableHandleMarginTop,
+    handleSize: handleSize,
+    handleStyles: handleStyles,
     handleResizeStart: handleResizeStart,
     handleResize: scheduleResize,
     handleResizeStop: handleResizeStop,
@@ -245,7 +247,6 @@ export var TableResizer = function TableResizer(_ref) {
     snapGap: TABLE_SNAP_GAP,
     snap: guidelineSnaps,
     handlePositioning: "adjacent",
-    innerPadding: tableHandlePosition,
     isHandleVisible: isTableSelected,
     appearance: isInDanger && isTableSelected ? 'danger' : undefined,
     handleHighlight: "shadow",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "3.2.1",
+  "version": "4.0.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^29.1.0",
-    "@atlaskit/editor-common": "^75.8.0",
+    "@atlaskit/editor-common": "^76.0.0",
     "@atlaskit/editor-palette": "1.5.1",
     "@atlaskit/editor-plugin-analytics": "^0.2.0",
     "@atlaskit/editor-plugin-content-insertion": "^0.1.0",

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

@@ -524,7 +524,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
               display: 'none',
             }}
           >
-            <div style={{ width: tableRef?.clientWidth }}></div>
+            <div
+              style={{
+                width: tableRef?.clientWidth,
+                height: '100%',
+              }}
+            ></div>
           </div>
         )}
         <div

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

@@ -14,16 +14,14 @@ import type { TableEventPayload } from '@atlaskit/editor-common/analytics';
 import { TABLE_OVERFLOW_CHANGE_TRIGGER } from '@atlaskit/editor-common/analytics';
 import { getGuidelinesWithHighlights } from '@atlaskit/editor-common/guideline';
 import type { GuidelineConfig } from '@atlaskit/editor-common/guideline';
-import type {
-  HandleHeightSizeType,
-  HandleResize,
-} from '@atlaskit/editor-common/resizer';
+import type { HandleResize, HandleSize } from '@atlaskit/editor-common/resizer';
 import { ResizerNext } from '@atlaskit/editor-common/resizer';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Transaction } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { token } from '@atlaskit/tokens';
 
 import { getPluginState } from '../pm-plugins/plugin-factory';
 import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -77,17 +75,18 @@ const messages = defineMessages({
 });
 
 const handles = { right: true };
-const tableHandleMarginTop = 12;
-const tableHandlePosition = 14;
-
-const getResizerHandleHeight = (tableRef: HTMLTableElement | undefined) => {
-  const tableHeight = tableRef?.clientHeight;
-  let handleHeightSize: HandleHeightSizeType | undefined = 'small';
-
-  if (!tableHeight) {
-    return handleHeightSize;
-  }
+const handleStyles = {
+  right: {
+    // eslint-disable-next-line
+    right: '-14px',
+    marginTop: token('space.150', '12px'),
+  },
+};
 
+const getResizerHandleHeight = (
+  tableRef: HTMLTableElement | undefined,
+): HandleSize | undefined => {
+  const tableHeight = tableRef?.clientHeight ?? 0;
   /*
     - One row table height (minimum possible table height) ~ 45px
     - Two row table height ~ 90px
@@ -97,13 +96,15 @@ const getResizerHandleHeight = (tableRef: HTMLTableElement | undefined) => {
     - > 46 because the height of the table can be a float number like 45.44.
     - < 96 is the height of large resize handle.
   */
-  if (tableHeight > 46 && tableHeight < 96) {
-    handleHeightSize = 'medium';
-  } else if (tableHeight >= 96) {
-    handleHeightSize = 'large';
+  if (tableHeight >= 96) {
+    return 'large';
+  }
+
+  if (tableHeight > 46) {
+    return 'medium';
   }
 
-  return handleHeightSize;
+  return 'small';
 };
 
 const getResizerMinWidth = (node: PMNode) => {
@@ -160,7 +161,7 @@ export const TableResizer = ({
   const { formatMessage } = useIntl();
 
   const resizerMinWidth = getResizerMinWidth(node);
-  const handleHeightSize = getResizerHandleHeight(tableRef);
+  const handleSize = getResizerHandleHeight(tableRef);
   const { isInDanger } = getPluginState(editorView.state);
 
   const { startMeasure, endMeasure, countFrames } = useMeasureFramerate();
@@ -389,8 +390,8 @@ export const TableResizer = ({
       enable={handles}
       width={width}
       handleAlignmentMethod="sticky"
-      handleHeightSize={handleHeightSize}
-      handleMarginTop={tableHandleMarginTop}
+      handleSize={handleSize}
+      handleStyles={handleStyles}
       handleResizeStart={handleResizeStart}
       handleResize={scheduleResize}
       handleResizeStop={handleResizeStop}
@@ -400,7 +401,6 @@ export const TableResizer = ({
       snapGap={TABLE_SNAP_GAP}
       snap={guidelineSnaps}
       handlePositioning="adjacent"
-      innerPadding={tableHandlePosition}
       isHandleVisible={isTableSelected}
       appearance={isInDanger && isTableSelected ? 'danger' : undefined}
       handleHighlight="shadow"