@atlaskit/editor-plugin-table 5.2.2 → 5.3.1

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin-factory.js

@@ -1,8 +1,32 @@
 import { pluginFactory } from '@atlaskit/editor-common/utils';
+import { pluginKey as tablePluginKey } from '../plugin-key';
+import { handleDocOrSelectionChanged } from './handlers';
 import { pluginKey } from './plugin-key';
 import reducer from './reducer';
-const {
+export const {
   createPluginState,
-  createCommand
-} = pluginFactory(pluginKey, reducer);
-export { createPluginState, createCommand };
+  createCommand,
+  getPluginState
+} = pluginFactory(pluginKey, reducer, {
+  mapping: (tr, pluginState) => {
+    if (tr.docChanged) {
+      let decorationSet = pluginState.decorationSet;
+      const meta = tr.getMeta(tablePluginKey);
+      if (meta && meta.data && meta.data.decorationSet) {
+        decorationSet = meta.data.decorationSet;
+      }
+      if (decorationSet) {
+        decorationSet = decorationSet.map(tr.mapping, tr.doc);
+      }
+      return {
+        ...pluginState,
+        ...{
+          decorationSet
+        }
+      };
+    }
+    return pluginState;
+  },
+  onDocChanged: handleDocOrSelectionChanged,
+  onSelectionChanged: handleDocOrSelectionChanged
+});

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/plugin.js

@@ -1,22 +1,98 @@
 import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
+import { DecorationSet } from '@atlaskit/editor-prosemirror/view';
+import { moveColumn, moveRow } from '@atlaskit/editor-tables/utils';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { hasMergedCellsInColumn, hasMergedCellsInRow } from '../../utils/merged-cells';
+import { getPluginState as getTablePluginState } from '../plugin-factory';
 import { DropTargetType } from './consts';
-import { createPluginState } from './plugin-factory';
+import { createPluginState, getPluginState } from './plugin-factory';
 import { pluginKey } from './plugin-key';
+import { getDraggableDataFromEvent } from './utils/monitor';
 export const createPlugin = (dispatch, eventDispatcher) => {
   return new SafePlugin({
-    state: createPluginState(dispatch, {
+    state: createPluginState(dispatch, state => ({
+      decorationSet: DecorationSet.empty,
       // TODO: This is example placeholder state. We could use this to track which row/col is currently set as the drop target
       // This would result in a blue highlight being displayed on the corrisponding row/column to single the drop target location.
       dropTargetType: DropTargetType.NONE,
       dropTargetIndex: 0
-    }),
+    })),
     key: pluginKey,
     view: editorView => {
-      // TODO: Add Pragmatic DnD monitor when the view is constructed.
       return {
-        // TODO: Cleanup monitor instance
-        // destroy: cleanup,
+        destroy: monitorForElements({
+          canMonitor({
+            source
+          }) {
+            const {
+              type,
+              localId,
+              indexes
+            } = source.data;
+
+            // First; Perform any quick checks so we can abort early.
+            if (!indexes || !localId ||
+            // FIXME: We currently don't support DragNDrop of multiple elements. For now we will not bother to monitor drags
+            // of more then 1 item.
+            indexes.length !== 1 || !(type === 'table-row' || type === 'table-column')) {
+              return false;
+            }
+            const {
+              tableNode
+            } = getTablePluginState(editorView.state);
+            // If the draggable localId is the same as the current selected table localId then we will allow the monitor
+            // watch for changes
+            return localId === (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId);
+          },
+          onDrag(event) {
+            const data = getDraggableDataFromEvent(event);
+
+            // If no data can be found then it's most like we do not want to perform any drag actions
+            if (!data) {
+              return;
+            }
+
+            // TODO: as we drag an element around we are going to want to update the state to acurately reflect the current
+            // insert location as to where the draggable will most likely be go. For example;
+            // const { sourceType, targetAdjustedIndex } = data;
+            // const highlight = sourceType === 'table-row' ? highlightRow : highlightColumn;
+            // return editorView.dispatch(
+            //   highlight(targetAdjustedIndex)(editorView.state.tr),
+            // );
+          },
+
+          onDrop(event) {
+            const data = getDraggableDataFromEvent(event);
+
+            // If no data can be found then it's most like we do not want to perform any drop action
+            if (!data) {
+              return;
+            }
+            const {
+              sourceType,
+              sourceIndexes,
+              targetAdjustedIndex
+            } = data;
+
+            // If the drop target index contains merged cells then we should not allow the drop to occur.
+            const hasMergedCells = sourceType === 'table-row' ? hasMergedCellsInRow : hasMergedCellsInColumn;
+            if (hasMergedCells(targetAdjustedIndex)(editorView.state.selection)) {
+              return;
+            }
+            const move = sourceType === 'table-row' ? moveRow : moveColumn;
+            const [sourceIndex] = sourceIndexes;
+            return editorView.dispatch(move(sourceIndex, targetAdjustedIndex)(editorView.state.tr));
+          }
+        })
       };
+    },
+    props: {
+      decorations: state => {
+        const {
+          decorationSet
+        } = getPluginState(state);
+        return decorationSet;
+      }
     }
   });
 };

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/reducer.js

@@ -5,12 +5,14 @@ export default ((pluginState, action) => {
     case DragAndDropActionType.SET_DROP_TARGET:
       return {
         ...pluginState,
+        decorationSet: action.data.decorationSet,
         dropTargetType: action.data.type,
         dropTargetIndex: action.data.index
       };
     case DragAndDropActionType.CLEAR_DROP_TARGET:
       return {
         ...pluginState,
+        decorationSet: action.data.decorationSet,
         dropTargetType: DropTargetType.NONE,
         dropTargetIndex: 0
       };

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/utils/index.js

@@ -0,0 +1 @@
+export { getDraggableDataFromEvent } from './monitor';

package/dist/es2019/plugins/table/pm-plugins/drag-and-drop/utils/monitor.js

@@ -0,0 +1,56 @@
+import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+export const getDraggableDataFromEvent = ({
+  location,
+  source
+}) => {
+  var _extractClosestEdge;
+  const destination = location.current.dropTargets.at(0);
+  // If no target exists at the current location, then the current draggable is not over a target or the target doesn't support
+  // the current draggable.
+  if (!destination) {
+    return undefined;
+  }
+
+  // This is the draggable elements data
+  const {
+    indexes: sourceIndexes,
+    type: sourceType,
+    localId: sourceLocalId
+  } = source.data;
+
+  // This is the drop target's data
+  const {
+    targetIndex,
+    type: targetType,
+    localId: targetLocalId
+  } = destination.data;
+
+  // Some basic check to abort early with...
+  if (!sourceIndexes || targetIndex < 0 ||
+  // abort if the type of the draggable is different to the target, for eg. rows cannot be dropped onto column targets.
+  sourceType !== targetType ||
+  // abort if the draggable is coming from a different table that the target is on.
+  sourceLocalId !== targetLocalId) {
+    return undefined;
+  }
+
+  // FIXME: currently we only support a single row/col index being moved, remove this clause when this is no longer the case.
+  if (sourceIndexes.length > 1) {
+    return undefined;
+  }
+  const targetClosestEdge = (_extractClosestEdge = extractClosestEdge(destination.data)) !== null && _extractClosestEdge !== void 0 ? _extractClosestEdge : targetType === 'table-row' ? 'top' : 'left';
+  // NOTE: By default we always insert row/cols at the target index to the top/left (retrospectively of row/cols).
+  // This introduces an offset in the event the drop occured closer to the bottom/right of the target. We want
+  // the new target index to be 1 index higher.
+  const targetOffset = targetClosestEdge === 'right' || targetClosestEdge === 'bottom' ? 1 : 0;
+  return {
+    sourceType,
+    sourceLocalId,
+    sourceIndexes,
+    targetType,
+    targetLocalId,
+    targetIndex,
+    targetAdjustedIndex: targetIndex + targetOffset,
+    targetClosestEdge
+  };
+};

package/dist/es2019/plugins/table/types.js

@@ -34,10 +34,13 @@ export let TableDecorations = /*#__PURE__*/function (TableDecorations) {
   TableDecorations["TABLE_CONTROLS_HOVER"] = "TABLE_CONTROLS_HOVER";
   TableDecorations["CELL_CONTROLS_HOVER"] = "CELL_CONTROLS_HOVER";
   TableDecorations["COLUMN_CONTROLS_DECORATIONS"] = "COLUMN_CONTROLS_DECORATIONS";
+  TableDecorations["COLUMN_DROP_TARGET_DECORATIONS"] = "COLUMN_DROP_TARGET_DECORATIONS";
   TableDecorations["COLUMN_SELECTED"] = "COLUMN_SELECTED";
   TableDecorations["COLUMN_RESIZING_HANDLE"] = "COLUMN_RESIZING_HANDLE";
   TableDecorations["COLUMN_RESIZING_HANDLE_WIDGET"] = "COLUMN_RESIZING_HANDLE_WIDGET";
   TableDecorations["COLUMN_RESIZING_HANDLE_LINE"] = "COLUMN_RESIZING_HANDLE_LINE";
+  TableDecorations["COLUMN_INSERT_LINE"] = "COLUMN_INSERT_LINE";
+  TableDecorations["ROW_INSERT_LINE"] = "ROW_INSERT_LINE";
   TableDecorations["LAST_CELL_ELEMENT"] = "LAST_CELL_ELEMENT";
   return TableDecorations;
 }({});
@@ -46,6 +49,9 @@ export const TableCssClassName = {
   COLUMN_CONTROLS: `${tablePrefixSelector}-column-controls`,
   COLUMN_CONTROLS_DECORATIONS: `${tablePrefixSelector}-column-controls-decoration`,
   COLUMN_SELECTED: `${tablePrefixSelector}-column__selected`,
+  COLUMN_CONTROLS_WRAPPER: `${tablePrefixSelector}-col-controls-wrapper`,
+  COLUMN_DROP_TARGET_CONTROLS: `${tablePrefixSelector}-col-drop-target-controls`,
+  COLUMN_CONTROLS_INNER: `${tablePrefixSelector}-col-controls__inner`,
   ROW_CONTROLS_WRAPPER: `${tablePrefixSelector}-row-controls-wrapper`,
   ROW_CONTROLS: `${tablePrefixSelector}-row-controls`,
   ROW_CONTROLS_INNER: `${tablePrefixSelector}-row-controls__inner`,
@@ -102,8 +108,13 @@ export const TableCssClassName = {
   TABLE_STICKY: `${tablePrefixSelector}-sticky`,
   TOP_LEFT_CELL: 'table > tbody > tr:nth-child(2) > td:nth-child(1)',
   LAST_ITEM_IN_CELL: `${tablePrefixSelector}-last-item-in-cell`,
+  WITH_COLUMN_INSERT_LINE: `${tablePrefixSelector}-column-insert-line`,
+  WITH_FIRST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-first-column-insert-line`,
+  WITH_LAST_COLUMN_INSERT_LINE: `${tablePrefixSelector}-last-column-insert-line`,
   WITH_RESIZE_LINE: `${tablePrefixSelector}-column-resize-line`,
-  WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`
+  WITH_RESIZE_LINE_LAST_COLUMN: `${tablePrefixSelector}-column-resize-line-last-column`,
+  WITH_ROW_INSERT_LINE: `${tablePrefixSelector}-row-insert-line`,
+  WITH_LAST_ROW_INSERT_LINE: `${tablePrefixSelector}-last-row-insert-line`
 };
 export let ShadowEvent = /*#__PURE__*/function (ShadowEvent) {
   ShadowEvent["SHOW_BEFORE_SHADOW"] = "showBeforeShadow";

package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/ColumnDropTargets/index.js

@@ -0,0 +1,101 @@
+import React, { useEffect, useMemo, useRef } from 'react';
+import { attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/addon/closest-edge';
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element';
+import { TableCssClassName as ClassName } from '../../../types';
+import { getColumnsWidths, getRowHeights } from '../../../utils';
+export const ColumnDropTargets = ({
+  editorView,
+  tableRef,
+  tableHeight,
+  stickyTop,
+  localId
+}) => {
+  var _rowHeights$;
+  const colWidths = getColumnsWidths(editorView);
+  const rowHeights = useMemo(() => {
+    // NOTE: we don't care so much as to what tableHeight is, we only care that it changed and is a sane value.
+    if (tableRef && !!tableHeight) {
+      return getRowHeights(tableRef);
+    }
+    return [0];
+  }, [tableRef, tableHeight]);
+  if (!tableRef) {
+    return null;
+  }
+  const firstRow = tableRef.querySelector('tr');
+  const hasHeaderRow = firstRow ? firstRow.getAttribute('data-header-row') : false;
+  const marginTop = hasHeaderRow && stickyTop !== undefined ? (_rowHeights$ = rowHeights === null || rowHeights === void 0 ? void 0 : rowHeights[0]) !== null && _rowHeights$ !== void 0 ? _rowHeights$ : 0 : 0;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ClassName.COLUMN_DROP_TARGET_CONTROLS
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ClassName.COLUMN_CONTROLS_INNER,
+    "data-testid": "table-floating-column-controls-drop-targets"
+  }, colWidths.map((width, index) => {
+    return /*#__PURE__*/React.createElement(ColumnDropTarget, {
+      key: index,
+      index: index,
+      localId: localId,
+      width: width,
+      height: tableHeight,
+      marginTop: marginTop
+    });
+  })));
+};
+export default ColumnDropTargets;
+const ColumnDropTarget = ({
+  index,
+  localId,
+  width,
+  height,
+  marginTop
+}) => {
+  const dropTargetRef = useRef(null);
+  useEffect(() => {
+    if (!dropTargetRef.current) {
+      return;
+    }
+    return dropTargetForElements({
+      element: dropTargetRef.current,
+      canDrop({
+        source
+      }) {
+        var _data$indexes, _data$indexes2;
+        const data = source.data;
+        return (
+          // Only draggables of row type can be dropped on this target
+          data.type === 'table-column' &&
+          // Only draggables which came from the same table can be dropped on this target
+          data.localId === localId &&
+          // Only draggables which DO NOT include this drop targets index can be dropped
+          !!((_data$indexes = data.indexes) !== null && _data$indexes !== void 0 && _data$indexes.length) && ((_data$indexes2 = data.indexes) === null || _data$indexes2 === void 0 ? void 0 : _data$indexes2.indexOf(index)) === -1
+        );
+      },
+      getData({
+        input,
+        element
+      }) {
+        const data = {
+          localId,
+          type: 'table-column',
+          targetIndex: index
+        };
+        return attachClosestEdge(data, {
+          input,
+          element,
+          allowedEdges: ['left', 'right']
+        });
+      }
+    });
+  }, [index, localId]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: dropTargetRef,
+    style: {
+      width: width && `${width - 1}px`,
+      height: height && `${height}px`,
+      marginTop: marginTop && `${marginTop}px`
+    },
+    "data-drop-target-index": index,
+    "data-drop-target-localid": localId,
+    "data-testid": "table-floating-column-controls-drop-target"
+  });
+};

package/dist/es2019/plugins/table/ui/TableFloatingColumnControls/index.js

@@ -0,0 +1,60 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { findTable } from '@atlaskit/editor-tables';
+import { ColumnDropTargets } from './ColumnDropTargets';
+export const TableFloatingColumnControls = ({
+  editorView,
+  tableRef,
+  tableActive,
+  hasHeaderRow,
+  stickyHeader,
+  selection
+}) => {
+  const [tableRect, setTableRect] = useState({
+    width: 0,
+    height: 0
+  });
+  useEffect(() => {
+    var _window;
+    if (tableRef && (_window = window) !== null && _window !== void 0 && _window.ResizeObserver) {
+      const resizeObserver = new ResizeObserver(entries => {
+        for (let entry of entries) {
+          setTableRect(prev => {
+            if (prev.width !== entry.contentRect.width || prev.height !== entry.contentRect.height) {
+              return entry.contentRect;
+            }
+            return prev;
+          });
+        }
+      });
+      resizeObserver.observe(tableRef);
+      return () => {
+        resizeObserver.disconnect();
+      };
+    }
+  }, [tableRef]);
+  const selectedLocalId = useMemo(() => {
+    if (!selection) {
+      return undefined;
+    }
+    const tableNode = findTable(selection);
+    if (!tableNode) {
+      return undefined;
+    }
+    return tableNode.node.attrs.localId;
+  }, [selection]);
+  if (!tableRef) {
+    return null;
+  }
+  const stickyTop = stickyHeader && stickyHeader.sticky && hasHeaderRow ? stickyHeader.top : undefined;
+  return /*#__PURE__*/React.createElement("div", {
+    onMouseDown: e => e.preventDefault(),
+    "data-testid": "table-floating-column-controls-wrapper"
+  }, tableActive && /*#__PURE__*/React.createElement(ColumnDropTargets, {
+    editorView: editorView,
+    tableRef: tableRef,
+    stickyTop: tableActive ? stickyTop : undefined,
+    tableHeight: tableRect.height,
+    localId: selectedLocalId
+  }));
+};
+export default TableFloatingColumnControls;

package/dist/es2019/plugins/table/ui/common-styles.js

@@ -7,7 +7,7 @@ import { B300, N0, N20A, N300, N40A, R500 } from '@atlaskit/theme/colors';
 import { fontSize } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
 import { columnControlsDecorationHeight, resizeHandlerAreaWidth, resizeLineWidth, stickyHeaderBorderBottomWidth, stickyRowOffsetTop, tableBorderColor, tableBorderDeleteColor, tableBorderRadiusSize, tableBorderSelectedColor, tableCellBackgroundColor, tableCellDeleteColor, tableCellSelectedColor, tableControlsSpacing, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tablePadding, tableScrollbarOffset, tableTextColor, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
-import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle } from './ui-styles';
+import { columnControlsDecoration, columnControlsLineMarker, DeleteButton, floatingColumnControls, HeaderButton, HeaderButtonDanger, HeaderButtonHover, hoveredCell, hoveredDeleteButton, hoveredWarningCell, insertColumnButtonWrapper, insertLine, InsertMarker, insertRowButtonWrapper, OverflowShadow, resizeHandle } from './ui-styles';
 const cornerControlHeight = tableToolbarSize + 1;
 
 /*
@@ -210,6 +210,7 @@ export const tableStyles = props => {
     ${hoveredDeleteButton(props)};
     ${hoveredCell(props)};
     ${hoveredWarningCell};
+    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
     ${resizeHandle(props)};
     ${rangeSelectionStyles};
 
@@ -435,6 +436,10 @@ export const tableStyles = props => {
         }
       }
 
+      .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+        padding: 0 ${tablePadding}px;
+      }
+
       &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
         padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
       }
@@ -579,6 +584,8 @@ export const tableStyles = props => {
       `)}
     }
 
+    ${floatingColumnControls(props)}
+
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
       ${HeaderButtonHover(props)}
       ${HeaderButtonDanger(props)}
@@ -760,6 +767,12 @@ export const tableStyles = props => {
     .${ClassName.ROW_CONTROLS_WRAPPER} {
       left: -${tableToolbarSize}px;
     }
+
+    .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+      position: absolute;
+      top: ${tableMarginTop + 1}px;
+    }
+
     ${tableWrapperStyles()}
   }
 

package/dist/es2019/plugins/table/ui/consts.js

@@ -89,6 +89,7 @@ export const columnControlsDecorationHeight = 25;
 export const columnControlsZIndex = akEditorUnitZIndex * 10;
 export const columnControlsSelectedZIndex = columnControlsZIndex + 1;
 export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
+export const insertLineWidth = 3;
 export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
 export const resizeLineWidth = 2;
 export const resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;

package/dist/es2019/plugins/table/ui/ui-styles.js

@@ -5,7 +5,7 @@ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N0, N300, N40A, N60A, Y200, Y50 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { TableCssClassName as ClassName } from '../types';
-import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
+import { columnControlsDecorationHeight, columnControlsSelectedZIndex, columnControlsZIndex, insertLineWidth, lineMarkerSize, resizeHandlerAreaWidth, resizeHandlerZIndex, resizeLineWidth, tableBorderColor, tableBorderDeleteColor, tableBorderSelectedColor, tableCellDeleteColor, tableCellHoverDeleteIconBackground, tableCellHoverDeleteIconColor, tableCellSelectedDeleteIconBackground, tableCellSelectedDeleteIconColor, tableDeleteButtonSize, tableHeaderCellBackgroundColor, tableInsertColumnButtonSize, tableOverflowShadowWidth, tableOverflowShadowWidthWide, tableToolbarDeleteColor, tableToolbarSelectedColor, tableToolbarSize } from './consts';
 const InsertLine = (props, cssString) => css`
   .${ClassName.CONTROLS_INSERT_LINE} {
     background: ${tableBorderSelectedColor(props)};
@@ -286,6 +286,19 @@ const getFloatingDotOverrides = props => {
         }
       ` : '';
 };
+export const floatingColumnControls = props => {
+  return css`
+    .${ClassName.COLUMN_DROP_TARGET_CONTROLS} {
+      box-sizing: border-box;
+      position: absolute;
+
+      .${ClassName.COLUMN_CONTROLS_INNER} {
+        display: flex;
+        flex-direction: row;
+      }
+    }
+  `;
+};
 export const columnControlsDecoration = props => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
@@ -622,4 +635,117 @@ export const resizeHandle = props => css`
       height: calc(100% + ${tableToolbarSize + tableCellBorderWidth}px);
     }
   }
+`;
+export const insertLine = props => css`
+  .${ClassName.TABLE_CONTAINER} {
+    td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: -1px;
+      top: -1px;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      left: -1px;
+      position: absolute;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -${tableCellBorderWidth}px;
+    }
+
+    td.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      top: -1px;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      position: absolute;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -${tableCellBorderWidth}px;
+    }
+
+    td.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      right: -1px;
+      top: -1px;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_LAST_COLUMN_INSERT_LINE}::before {
+      content: ' ';
+      right: -1px;
+      position: absolute;
+      width: ${insertLineWidth}px;
+      height: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -${tableCellBorderWidth}px;
+    }
+
+    td.${ClassName.WITH_ROW_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      top: -1px;
+      height: ${insertLineWidth}px;
+      width: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_ROW_INSERT_LINE}::before {
+      content: ' ';
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      position: absolute;
+      height: ${insertLineWidth}px;
+      width: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+      top: -1px;
+    }
+
+    td.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
+      content: ' ';
+      position: absolute;
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      bottom: 0;
+      height: ${insertLineWidth}px;
+      width: calc(100% + 2px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+
+    th.${ClassName.WITH_LAST_ROW_INSERT_LINE}::before {
+      content: ' ';
+      left: ${"var(--ds-space-negative-025, -2px)"};
+      bottom: 0;
+      position: absolute;
+      height: ${insertLineWidth}px;
+      width: calc(100% + ${tableCellBorderWidth * 2}px);
+      background-color: ${tableBorderSelectedColor(props)};
+      z-index: ${columnControlsZIndex * 2};
+    }
+  }
 `;