@atlaskit/editor-plugin-table 0.1.2 → 0.2.1

package/dist/esm/plugins/table/utils/decoration.js

@@ -238,7 +238,7 @@ var makeArray = function makeArray(n) {
  */
 
 
-export var createResizeHandleDecoration = function createResizeHandleDecoration(tr, columnEndIndexTarget) {
+export var createResizeHandleDecoration = function createResizeHandleDecoration(tr, rowIndexTarget, columnEndIndexTarget) {
   var emptyResult = [[], []];
   var table = findTable(tr.selection);
 
@@ -292,6 +292,10 @@ export var createResizeHandleDecoration = function createResizeHandleDecoration(
   for (var rowIndex = 0; rowIndex < map.height; rowIndex++) {
     var seen = {};
 
+    if (rowIndex !== rowIndexTarget) {
+      continue;
+    }
+
     for (var columnIndex = 0; columnIndex < map.width; columnIndex++) {
       var cellPosition = map.map[map.width * rowIndex + columnIndex];
 
@@ -380,16 +384,23 @@ export var createColumnLineResize = function createColumnLineResize(selection, c
     return [];
   }
 
-  var columnIndex = cellColumnPositioning.right - 1;
+  var columnIndex = cellColumnPositioning.right;
   var map = TableMap.get(table.node);
+  var isLastColumn = columnIndex === map.width;
+
+  if (isLastColumn) {
+    columnIndex -= 1;
+  }
+
+  var decorationClassName = isLastColumn ? ClassName.WITH_RESIZE_LINE_LAST_COLUMN : ClassName.WITH_RESIZE_LINE;
   var cellPositions = makeArray(map.height).map(function (rowIndex) {
     return map.map[map.width * rowIndex + columnIndex];
   }).filter(function (cellPosition, rowIndex) {
-    if (columnIndex === map.width) {
+    if (isLastColumn) {
       return true; // If is the last column no filter applied
     }
 
-    var nextPosition = map.map[map.width * rowIndex + columnIndex + 1];
+    var nextPosition = map.map[map.width * rowIndex + columnIndex - 1];
     return cellPosition !== nextPosition; // Removed it if next position is merged
   });
   var cells = cellPositions.map(function (pos) {
@@ -404,7 +415,7 @@ export var createColumnLineResize = function createColumnLineResize(selection, c
     }
 
     return Decoration.node(cell.pos, cell.pos + cell.node.nodeSize, {
-      class: ClassName.WITH_RESIZE_LINE
+      class: decorationClassName
     }, {
       key: "".concat(TableDecorations.COLUMN_RESIZING_HANDLE_LINE, "_").concat(cellColumnPositioning.right, "_").concat(index)
     });

package/dist/esm/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "0.1.2"
+	"version": "0.2.1"
 }

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

@@ -20,7 +20,7 @@ export declare const selectRow: (row: number, expand?: boolean | undefined) => C
 export declare const showInsertColumnButton: (columnIndex: number) => Command;
 export declare const showInsertRowButton: (rowIndex: number) => Command;
 export declare const hideInsertColumnOrRowButton: () => Command;
-export declare const addResizeHandleDecorations: (columnIndex: number) => Command;
+export declare const addResizeHandleDecorations: (rowIndex: number, columnIndex: number) => Command;
 export declare const autoSizeTable: (view: EditorView, node: PMNode, table: HTMLTableElement, basePos: number, opts: {
     containerWidth: number;
 }) => boolean;

package/dist/types/plugins/table/pm-plugins/decorations/utils/column-resizing.d.ts

@@ -1,2 +1,2 @@
 import { DecorationTransformer } from './types';
-export declare const buildColumnResizingDecorations: (columnEndIndex: number) => DecorationTransformer;
+export declare const buildColumnResizingDecorations: (rowEndIndex: number, columnEndIndex: number) => DecorationTransformer;

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

@@ -32,7 +32,6 @@ export interface PluginConfig {
     allowAddColumnWithCustomStep?: boolean;
     allowCollapse?: boolean;
     isHeaderRowRequired?: boolean;
-    stickToolbarToBottom?: boolean;
     permittedLayouts?: PermittedLayoutsDescriptor;
     allowControls?: boolean;
     stickyHeaders?: boolean;
@@ -79,6 +78,7 @@ export interface TablePluginState {
     isFullWidthModeEnabled?: boolean;
     layout?: TableLayout;
     ordering?: TableColumnOrdering;
+    resizeHandleRowIndex?: number;
     resizeHandleColumnIndex?: number;
     tableCellOptimization?: boolean;
     isTableCollapsed?: boolean;
@@ -139,6 +139,7 @@ export declare type TablePluginAction = {
     type: 'ADD_RESIZE_HANDLE_DECORATIONS';
     data: {
         decorationSet: DecorationSet;
+        resizeHandleRowIndex: number;
         resizeHandleColumnIndex: number;
     };
 } | {
@@ -281,6 +282,7 @@ export declare const TableCssClassName: {
     TOP_LEFT_CELL: string;
     LAST_ITEM_IN_CELL: string;
     WITH_RESIZE_LINE: string;
+    WITH_RESIZE_LINE_LAST_COLUMN: string;
     TABLE_CONTAINER: string;
     TABLE_NODE_WRAPPER: string;
     TABLE_LEFT_SHADOW: string;

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

@@ -9,5 +9,5 @@ export declare const createControlsHoverDecoration: (cells: Cell[], type: 'row'
 export declare const createColumnSelectedDecoration: (tr: Transaction | ReadonlyTransaction) => Decoration[];
 export declare const createColumnControlsDecoration: (selection: Selection) => Decoration[];
 export declare const updateDecorations: (node: PmNode, decorationSet: DecorationSet, decorations: Decoration[], key: TableDecorations) => DecorationSet;
-export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>) => [Decoration[], Decoration[]];
+export declare const createResizeHandleDecoration: (tr: Transaction | ReadonlyTransaction, rowIndexTarget: number, columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>) => [Decoration[], Decoration[]];
 export declare const createColumnLineResize: (selection: Selection, cellColumnPositioning: Omit<CellColumnPositioning, 'left'>) => Decoration[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "0.1.2",
+  "version": "0.2.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -18,7 +18,7 @@
   },
   "dependencies": {
     "@atlaskit/adf-schema": "^24.0.0",
-    "@atlaskit/editor-common": "^70.2.0",
+    "@atlaskit/editor-common": "^70.3.0",
     "@atlaskit/editor-shared-styles": "^2.2.0",
     "@atlaskit/editor-tables": "^2.2.0",
     "@atlaskit/icon": "^21.11.0",

package/src/__tests__/unit/event-handlers.ts

@@ -208,7 +208,7 @@ describe('table event handlers', () => {
         );
         const { state, dispatch } = editorView;
 
-        addResizeHandleDecorations(0)(state, dispatch);
+        addResizeHandleDecorations(0, 0)(state, dispatch);
 
         const firstCell = editorView.domAtPos(refs['<>']);
         const event = {

package/src/__tests__/unit/pm-plugins/decorations/column-resizing.ts

@@ -66,17 +66,18 @@ describe('tables: column resizing decorations', () => {
 
   describe('#buildColumnResizingDecorations', () => {
     describe.each([
-      [-1, TableDecorations.COLUMN_RESIZING_HANDLE, 0],
-      [0, TableDecorations.COLUMN_RESIZING_HANDLE, 0],
-      [1, TableDecorations.COLUMN_RESIZING_HANDLE, 1],
+      [0, -1, TableDecorations.COLUMN_RESIZING_HANDLE, 0],
+      [0, 0, TableDecorations.COLUMN_RESIZING_HANDLE, 0],
+      [0, 1, TableDecorations.COLUMN_RESIZING_HANDLE, 1],
     ])(
       'when columnEndIndex is %i',
-      (columnEndIndex, decorationKey, expectedDecorations) => {
+      (rowEndIndex, columnEndIndex, decorationKey, expectedDecorations) => {
         it(`should return a decorationSet with ${expectedDecorations} ${decorationKey} type`, () => {
           const {
             editorView: { state },
           } = editor(doc(table()(tr(tdCursor, tdEmpty))));
           const nextDecorationSet = buildColumnResizingDecorations(
+            rowEndIndex,
             columnEndIndex,
           )({
             decorationSet: DecorationSet.empty,

package/src/__tests__/unit/ui/FloatingDeleteButton.tsx

@@ -134,28 +134,36 @@ describe('Floating Delete Button', () => {
       expect(screen.getAllByLabelText('Delete row').length).toBe(1);
     });
   });
+
   describe('when deleting with the delete button', () => {
     describe('Columns', () => {
       it('should move cursor within the table after delete', () => {
         selectColumns([0, 1])(editorView.state, editorView.dispatch);
         component({ selection: editorView.state.selection, editorView });
+
         const { tr } = editorView.state;
         const { pos } = getCellsInColumn(2)(tr.selection)![2];
         const lastCellPos = tr.doc.resolve(pos).pos + 1;
+
         fireEvent.click(screen.getByLabelText('Delete column'));
+
         expect(editorView.state.selection.from).toBeLessThanOrEqual(
           lastCellPos,
         );
       });
     });
+
     describe('Rows', () => {
       it('should move cursor within the table after delete', () => {
         selectRows([0, 1])(editorView.state, editorView.dispatch);
         component({ selection: editorView.state.selection, editorView });
+
         const { tr } = editorView.state;
         const { pos } = getCellsInColumn(2)(tr.selection)![2];
         const lastCellPos = tr.doc.resolve(pos).pos + 1;
+
         fireEvent.click(screen.getByLabelText('Delete row'));
+
         expect(editorView.state.selection.from).toBeLessThanOrEqual(
           lastCellPos,
         );