@atlaskit/editor-plugin-table 2.1.5 → 2.1.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 2.1.7
+
+### Patch Changes
+
+- [`018b27d3392`](https://bitbucket.org/atlassian/atlassian-frontend/commits/018b27d3392) - [ux] Makes new table resize handle sticky and of variable height based on the table height.
+
+## 2.1.6
+
+### Patch Changes
+
+- [`32ca42e82c3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/32ca42e82c3) - Extracted internal editor card plugin to new package `editor-plugin-card`.
+
 ## 2.1.5
 
 ### Patch Changes

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

@@ -15,6 +15,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var handles = {
   right: true
 };
+var tableHandleMarginTop = 11;
 var TableResizer = function TableResizer(_ref) {
   var children = _ref.children,
     width = _ref.width,
@@ -26,9 +27,27 @@ var TableResizer = function TableResizer(_ref) {
     tableRef = _ref.tableRef;
   var currentColumnCount = (0, _utils.getColgroupChildrenLength)(node);
   var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * _utils.COLUMN_MIN_WIDTH : 3 * _utils.COLUMN_MIN_WIDTH;
+  var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
+  var handleHeightSize = 'small';
+  /*
+    - One row table height (minimum possible table height) ~ 45px
+    - Two row table height ~ 90px
+    - Three row table height ~ 134px
+     In the if below we need to use:
+    - > 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 && tableHeight > 46 && tableHeight < 96) {
+    handleHeightSize = 'medium';
+  } else if (tableHeight && tableHeight >= 96) {
+    handleHeightSize = 'large';
+  }
   return /*#__PURE__*/_react.default.createElement(_resizer.ResizerNext, {
     enable: handles,
     width: width,
+    handleAlignmentMethod: "sticky",
+    handleHeightSize: handleHeightSize,
+    handleMarginTop: tableHandleMarginTop,
     handleResizeStart: function handleResizeStart() {
       return width;
     },

package/dist/cjs/version.json

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

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

@@ -5,6 +5,7 @@ import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WI
 const handles = {
   right: true
 };
+const tableHandleMarginTop = 11;
 export const TableResizer = ({
   children,
   width,
@@ -17,9 +18,27 @@ export const TableResizer = ({
 }) => {
   const currentColumnCount = getColgroupChildrenLength(node);
   const minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
+  const tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
+  let handleHeightSize = 'small';
+  /*
+    - One row table height (minimum possible table height) ~ 45px
+    - Two row table height ~ 90px
+    - Three row table height ~ 134px
+     In the if below we need to use:
+    - > 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 && tableHeight > 46 && tableHeight < 96) {
+    handleHeightSize = 'medium';
+  } else if (tableHeight && tableHeight >= 96) {
+    handleHeightSize = 'large';
+  }
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
+    handleAlignmentMethod: "sticky",
+    handleHeightSize: handleHeightSize,
+    handleMarginTop: tableHandleMarginTop,
     handleResizeStart: () => width,
     handleResize: rafSchd((originalState, delta) => {
       const newWidth = originalState.width + delta.width;

package/dist/es2019/version.json

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

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

@@ -8,6 +8,7 @@ import { scaleTable, previewScaleTable, getColgroupChildrenLength, COLUMN_MIN_WI
 var handles = {
   right: true
 };
+var tableHandleMarginTop = 11;
 export var TableResizer = function TableResizer(_ref) {
   var children = _ref.children,
     width = _ref.width,
@@ -19,9 +20,27 @@ export var TableResizer = function TableResizer(_ref) {
     tableRef = _ref.tableRef;
   var currentColumnCount = getColgroupChildrenLength(node);
   var minColumnWidth = currentColumnCount <= 3 ? currentColumnCount * COLUMN_MIN_WIDTH : 3 * COLUMN_MIN_WIDTH;
+  var tableHeight = tableRef === null || tableRef === void 0 ? void 0 : tableRef.clientHeight;
+  var handleHeightSize = 'small';
+  /*
+    - One row table height (minimum possible table height) ~ 45px
+    - Two row table height ~ 90px
+    - Three row table height ~ 134px
+     In the if below we need to use:
+    - > 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 && tableHeight > 46 && tableHeight < 96) {
+    handleHeightSize = 'medium';
+  } else if (tableHeight && tableHeight >= 96) {
+    handleHeightSize = 'large';
+  }
   return /*#__PURE__*/React.createElement(ResizerNext, {
     enable: handles,
     width: width,
+    handleAlignmentMethod: "sticky",
+    handleHeightSize: handleHeightSize,
+    handleMarginTop: tableHandleMarginTop,
     handleResizeStart: function handleResizeStart() {
       return width;
     },

package/dist/esm/version.json

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

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

@@ -44,19 +44,7 @@ export interface PluginConfig {
     tableOverflowShadowsOptimization?: boolean;
     allowDistributeColumns?: boolean;
 }
-export interface ColumnResizingPluginState {
-    resizeHandlePos: number | null;
-    dragging: {
-        startX: number;
-        startWidth: number;
-    } | null;
-    lastClick: {
-        x: number;
-        y: number;
-        time: number;
-    } | null;
-    lastColumnResizable?: boolean;
-}
+export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
 export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
 export interface TablePluginState {
     editorHasFocus?: boolean;

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

@@ -44,19 +44,7 @@ export interface PluginConfig {
     tableOverflowShadowsOptimization?: boolean;
     allowDistributeColumns?: boolean;
 }
-export interface ColumnResizingPluginState {
-    resizeHandlePos: number | null;
-    dragging: {
-        startX: number;
-        startWidth: number;
-    } | null;
-    lastClick: {
-        x: number;
-        y: number;
-        time: number;
-    } | null;
-    lastColumnResizable?: boolean;
-}
+export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
 export type CellColumnPositioning = Pick<Rect, 'right' | 'left'>;
 export interface TablePluginState {
     editorHasFocus?: boolean;

package/package.json

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

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

@@ -3,7 +3,10 @@ import { EditorView } from 'prosemirror-view';
 import { Node as PMNode } from 'prosemirror-model';
 import rafSchd from 'raf-schd';
 
-import { ResizerNext } from '@atlaskit/editor-common/resizer';
+import {
+  HandleHeightSizeType,
+  ResizerNext,
+} from '@atlaskit/editor-common/resizer';
 
 import {
   scaleTable,
@@ -23,6 +26,7 @@ interface TableResizerProps {
 }
 
 const handles = { right: true };
+const tableHandleMarginTop = 11;
 
 export const TableResizer = ({
   children,
@@ -40,10 +44,30 @@ export const TableResizer = ({
       ? currentColumnCount * COLUMN_MIN_WIDTH
       : 3 * COLUMN_MIN_WIDTH;
 
+  const tableHeight = tableRef?.clientHeight;
+  let handleHeightSize: HandleHeightSizeType | undefined = 'small';
+  /*
+    - One row table height (minimum possible table height) ~ 45px
+    - Two row table height ~ 90px
+    - Three row table height ~ 134px
+
+    In the if below we need to use:
+    - > 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 && tableHeight > 46 && tableHeight < 96) {
+    handleHeightSize = 'medium';
+  } else if (tableHeight && tableHeight >= 96) {
+    handleHeightSize = 'large';
+  }
+
   return (
     <ResizerNext
       enable={handles}
       width={width}
+      handleAlignmentMethod="sticky"
+      handleHeightSize={handleHeightSize}
+      handleMarginTop={tableHandleMarginTop}
       handleResizeStart={() => width}
       handleResize={rafSchd((originalState, delta) => {
         const newWidth = originalState.width + delta.width;

package/src/plugins/table/types.ts

@@ -59,12 +59,7 @@ export interface PluginConfig {
   allowDistributeColumns?: boolean;
 }
 
-export interface ColumnResizingPluginState {
-  resizeHandlePos: number | null;
-  dragging: { startX: number; startWidth: number } | null;
-  lastClick: { x: number; y: number; time: number } | null;
-  lastColumnResizable?: boolean;
-}
+export type { ColumnResizingPluginState } from '@atlaskit/editor-common/types';
 
 /*
  * This type represents the start and end from a cell in a column,

package/tmp/api-report-tmp.d.ts

@@ -0,0 +1,104 @@
+## API Report File for "@atlaskit/editor-plugin-table"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+
+import { AnalyticsEventPayload } from '@atlaskit/editor-common/analytics';
+import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { Command } from '@atlaskit/editor-common/types';
+import type { contentInsertionPlugin } from '@atlaskit/editor-plugin-content-insertion';
+import type { EditorSelectionAPI } from '@atlaskit/editor-common/selection';
+import type { GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
+import type { NextEditorPlugin } from '@atlaskit/editor-common/types';
+import { TableLayout } from '@atlaskit/adf-schema';
+import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+
+// @public (undocumented)
+type InsertTableAction = (analyticsPayload: AnalyticsEventPayload) => Command;
+
+// @public (undocumented)
+type PermittedLayoutsDescriptor = 'all' | TableLayout[];
+
+// @public (undocumented)
+interface PluginConfig {
+    // (undocumented)
+    advanced?: boolean;
+    // (undocumented)
+    allowAddColumnWithCustomStep?: boolean;
+    // (undocumented)
+    allowBackgroundColor?: boolean;
+    // (undocumented)
+    allowCellOptionsInFloatingToolbar?: boolean;
+    // (undocumented)
+    allowCollapse?: boolean;
+    // (undocumented)
+    allowColumnResizing?: boolean;
+    // (undocumented)
+    allowColumnSorting?: boolean;
+    // (undocumented)
+    allowControls?: boolean;
+    // (undocumented)
+    allowDistributeColumns?: boolean;
+    // (undocumented)
+    allowHeaderColumn?: boolean;
+    // (undocumented)
+    allowHeaderRow?: boolean;
+    // (undocumented)
+    allowMergeCells?: boolean;
+    // (undocumented)
+    allowNumberColumn?: boolean;
+    // (undocumented)
+    initialRenderOptimization?: boolean;
+    // (undocumented)
+    isHeaderRowRequired?: boolean;
+    // (undocumented)
+    mouseMoveOptimization?: boolean;
+    // (undocumented)
+    permittedLayouts?: PermittedLayoutsDescriptor;
+    // (undocumented)
+    stickyHeaders?: boolean;
+    // (undocumented)
+    stickyHeadersOptimization?: boolean;
+    // (undocumented)
+    tableCellOptimization?: boolean;
+    // (undocumented)
+    tableOverflowShadowsOptimization?: boolean;
+    // (undocumented)
+    tableRenderOptimization?: boolean;
+}
+
+// @public (undocumented)
+interface TablePluginOptions {
+    // (undocumented)
+    allowContextualMenu?: boolean;
+    // (undocumented)
+    breakoutEnabled?: boolean;
+    // (undocumented)
+    editorSelectionAPI?: EditorSelectionAPI;
+    // (undocumented)
+    fullWidthEnabled?: boolean;
+    // (undocumented)
+    getEditorFeatureFlags?: GetEditorFeatureFlags;
+    // (undocumented)
+    tableOptions: PluginConfig;
+    // (undocumented)
+    wasFullWidthEnabled?: boolean;
+}
+
+// @public (undocumented)
+export const tablesPlugin: NextEditorPlugin<'table', {
+    pluginConfiguration: TablePluginOptions | undefined;
+    actions: {
+        insertTable: InsertTableAction;
+    };
+    dependencies: [
+    typeof analyticsPlugin,
+    typeof contentInsertionPlugin,
+    typeof widthPlugin
+    ];
+}>;
+
+// (No @packageDocumentation comment for this package)
+
+```