@atlaskit/editor-plugin-table 0.1.2 → 0.2.1

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

@@ -28,7 +28,6 @@ import {
   tableCellDeleteColor,
   tableBorderDeleteColor,
   tableToolbarDeleteColor,
-  lineMarkerOffsetFromColumnControls,
   lineMarkerSize,
   columnControlsDecorationHeight,
   columnControlsZIndex,
@@ -39,7 +38,6 @@ import {
   tableToolbarSize,
   tableInsertColumnButtonSize,
   tableDeleteButtonSize,
-  tableControlsSpacing,
 } from './consts';
 
 import { TableCssClassName as ClassName } from '../types';
@@ -211,13 +209,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;
-    }
   }
 `;
 
@@ -281,11 +272,6 @@ export const OverflowShadow = (props: ThemeProps) => css`
       border-left: 1px solid ${tableBorderColor(props)};
     }
   }
-  .${ClassName.WITH_CONTROLS}.${ClassName.TABLE_STICKY} {
-    .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-      top: ${tableControlsSpacing}px;
-    }
-  }
 `;
 /* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
@@ -320,6 +306,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 +339,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 +441,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/column-controls.ts

@@ -195,7 +195,7 @@ export const colWidthsForRow = (
   if (copyTarget) {
     // either from the first row while it's still in the table
     const cellInfos = maphElem(copyTarget, (cell) => ({
-      width: cell.offsetWidth,
+      width: cell.getBoundingClientRect().width,
       colspan: Number(cell.getAttribute('colspan') || 1),
       colwidth: cell.dataset.colwidth,
     }));

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}`,