@atlaskit/editor-plugin-table 0.1.2 → 0.2.0

package/src/plugins/table/types.ts

@@ -116,6 +116,7 @@ export interface TablePluginState {
   isFullWidthModeEnabled?: boolean;
   layout?: TableLayout;
   ordering?: TableColumnOrdering;
+  resizeHandleRowIndex?: number;
   resizeHandleColumnIndex?: number;
   tableCellOptimization?: boolean;
   // for table wrap/collapse
@@ -172,7 +173,11 @@ export type TablePluginAction =
     }
   | {
       type: 'ADD_RESIZE_HANDLE_DECORATIONS';
-      data: { decorationSet: DecorationSet; resizeHandleColumnIndex: number };
+      data: {
+        decorationSet: DecorationSet;
+        resizeHandleRowIndex: number;
+        resizeHandleColumnIndex: number;
+      };
     }
   | { type: 'CLEAR_HOVER_SELECTION'; data: { decorationSet: DecorationSet } }
   | { type: 'SHOW_RESIZE_HANDLE_LINE'; data: { decorationSet: DecorationSet } }
@@ -302,6 +307,7 @@ export const TableCssClassName = {
   LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,
 
   WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
+  WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
 };
 
 export interface ToolbarMenuConfig {

package/src/plugins/table/ui/common-styles.ts

@@ -394,18 +394,6 @@ export const tableStyles = (props: ThemeProps) => css`
         `,
         )};
       }
-
-      .${ClassName.CORNER_CONTROLS_INSERT_COLUMN_MARKER} {
-        position: relative;
-
-        ${InsertMarker(
-          props,
-          `
-          right: -1px;
-          top: -12px;
-        `,
-        )};
-      }
     }
 
     .${ClassName.CORNER_CONTROLS}.sticky {

package/src/plugins/table/ui/ui-styles.ts

@@ -28,7 +28,6 @@ import {
   tableCellDeleteColor,
   tableBorderDeleteColor,
   tableToolbarDeleteColor,
-  lineMarkerOffsetFromColumnControls,
   lineMarkerSize,
   columnControlsDecorationHeight,
   columnControlsZIndex,
@@ -211,13 +210,6 @@ export const columnControlsLineMarker = (props: ThemeProps) => css`
     tr:first-of-type
     th {
     position: relative;
-
-    &::before {
-      content: ' ';
-      ${Marker(props)};
-      top: -${tableToolbarSize + lineMarkerOffsetFromColumnControls}px;
-      right: -${lineMarkerSize / 2}px;
-    }
   }
 `;
 
@@ -320,6 +312,18 @@ export const columnControlsDecoration = (props: ThemeProps) => css`
     top: -${columnControlsDecorationHeight + tableCellBorderWidth}px;
     height: ${columnControlsDecorationHeight}px;
 
+    &::before {
+      content: ' ';
+      background-color: ${tableBorderColor(props)};
+      position: absolute;
+      height: ${lineMarkerSize}px;
+      width: ${lineMarkerSize}px;
+      border-radius: 50%;
+      pointer-events: none;
+      top: 2px;
+      right: -1px;
+    }
+
     &::after {
       content: ' ';
 
@@ -341,6 +345,18 @@ export const columnControlsDecoration = (props: ThemeProps) => css`
     }
   }
 
+  div.${ClassName.WITH_CONTROLS}>.${ClassName.ROW_CONTROLS_WRAPPER}::after {
+    content: ' ';
+    background-color: ${tableBorderColor(props)};
+    position: absolute;
+    height: ${lineMarkerSize}px;
+    width: ${lineMarkerSize}px;
+    border-radius: 50%;
+    pointer-events: none;
+    top: -${tableToolbarSize + tableCellBorderWidth}px;
+    right: -1px;
+  }
+
   .${ClassName.WITH_CONTROLS} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
     display: block;
   }
@@ -431,17 +447,48 @@ export const resizeHandle = css`
       z-index: ${resizeHandlerZIndex};
     }
 
-    td.${ClassName.WITH_RESIZE_LINE}, th.${ClassName.WITH_RESIZE_LINE} {
-      .${ClassName.RESIZE_HANDLE_DECORATION}::after {
-        content: ' ';
-        right: ${(resizeHandlerAreaWidth - resizeLineWidth) / 2}px;
-        position: absolute;
-        width: ${resizeLineWidth}px;
-        height: calc(100% + 1px);
-        background-color: ${tableBorderSelectedColor};
-        z-index: ${columnControlsZIndex * 2};
-        top: 0;
-      }
+    td.${ClassName.WITH_RESIZE_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: -2px;
+      top: -1px;
+      width: ${resizeLineWidth}px;
+      height: calc(100% + 2px);
+      background-color: ${tableBorderSelectedColor};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_RESIZE_LINE}::before {
+      content: ' ';
+      left: -2px;
+      position: absolute;
+      width: ${resizeLineWidth}px;
+      height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
+      background-color: ${tableBorderSelectedColor};
+      z-index: ${columnControlsZIndex * 2};
+      top: -${tableToolbarSize + tableCellBorderWidth}px;
+    }
+
+    td.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before {
+      content: ' ';
+      position: absolute;
+      right: -1px;
+      top: -1px;
+      width: ${resizeLineWidth}px;
+      height: calc(100% + 2px);
+      background-color: ${tableBorderSelectedColor};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_RESIZE_LINE_LAST_COLUMN}::before {
+      content: ' ';
+      right: -1px;
+      position: absolute;
+      width: ${resizeLineWidth}px;
+      height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
+      background-color: ${tableBorderSelectedColor};
+      z-index: ${columnControlsZIndex * 2};
+      top: -${tableToolbarSize + tableCellBorderWidth}px;
     }
 
     table

package/src/plugins/table/utils/decoration.ts

@@ -291,6 +291,7 @@ const makeArray = (n: number) => Array.from(Array(n).keys());
  */
 export const createResizeHandleDecoration = (
   tr: Transaction | ReadonlyTransaction,
+  rowIndexTarget: number,
   columnEndIndexTarget: Omit<CellColumnPositioning, 'left'>,
 ): [Decoration[], Decoration[]] => {
   const emptyResult: [Decoration[], Decoration[]] = [[], []];
@@ -361,6 +362,10 @@ export const createResizeHandleDecoration = (
   for (let rowIndex = 0; rowIndex < map.height; rowIndex++) {
     const seen: { [key: number]: boolean } = {};
 
+    if (rowIndex !== rowIndexTarget) {
+      continue;
+    }
+
     for (let columnIndex = 0; columnIndex < map.width; columnIndex++) {
       const cellPosition = map.map[map.width * rowIndex + columnIndex];
       if (seen[cellPosition]) {
@@ -456,16 +461,24 @@ export const createColumnLineResize = (
     return [];
   }
 
-  const columnIndex = cellColumnPositioning.right - 1;
+  let columnIndex = cellColumnPositioning.right;
   const map = TableMap.get(table.node);
 
+  const isLastColumn = columnIndex === map.width;
+  if (isLastColumn) {
+    columnIndex -= 1;
+  }
+  const decorationClassName = isLastColumn
+    ? ClassName.WITH_RESIZE_LINE_LAST_COLUMN
+    : ClassName.WITH_RESIZE_LINE;
+
   const cellPositions = makeArray(map.height)
     .map((rowIndex) => map.map[map.width * rowIndex + columnIndex])
     .filter((cellPosition, rowIndex) => {
-      if (columnIndex === map.width) {
+      if (isLastColumn) {
         return true; // If is the last column no filter applied
       }
-      const nextPosition = map.map[map.width * rowIndex + columnIndex + 1];
+      const nextPosition = map.map[map.width * rowIndex + columnIndex - 1];
       return cellPosition !== nextPosition; // Removed it if next position is merged
     });
 
@@ -484,7 +497,7 @@ export const createColumnLineResize = (
         cell.pos,
         cell.pos + cell.node.nodeSize,
         {
-          class: ClassName.WITH_RESIZE_LINE,
+          class: decorationClassName,
         },
         {
           key: `${TableDecorations.COLUMN_RESIZING_HANDLE_LINE}_${cellColumnPositioning.right}_${index}`,