@atlaskit/editor-plugin-table 0.2.6 → 1.0.1

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

@@ -243,22 +243,27 @@ export const DeleteButton = css`
   }
 `;
 
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4451
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 export const OverflowShadow = (props: ThemeProps) => css`
   .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
     display: block;
-    height: calc(
-      100% - ${tableMarginTop + tableMarginBottom + tableToolbarSize - 2}px
-    );
+    height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
     position: absolute;
     pointer-events: none;
-    top: ${tableMarginTop + tableToolbarSize - 1}px;
+    top: ${tableMarginTop}px;
     z-index: ${akEditorShadowZIndex};
     width: 8px;
   }
   .${ClassName.TABLE_LEFT_SHADOW} {
-    background: linear-gradient(to left, rgba(99, 114, 130, 0) 0, ${N40A} 100%);
+    background: linear-gradient(
+        to left,
+        transparent 0,
+        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+      ),
+      linear-gradient(
+        to right,
+        ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
+        transparent 1px
+      );
     left: 0px;
   }
   .${ClassName.TABLE_CONTAINER}[data-number-column='true'] > :not(.${ClassName.TABLE_STICKY_SHADOW}).${ClassName.TABLE_LEFT_SHADOW} {
@@ -266,23 +271,27 @@ export const OverflowShadow = (props: ThemeProps) => css`
   }
   .${ClassName.TABLE_RIGHT_SHADOW} {
     background: linear-gradient(
-      to right,
-      rgba(99, 114, 130, 0) 0,
-      ${N40A} 100%
-    );
+        to right,
+        transparent 0,
+        ${token('elevation.shadow.overflow.spread', N40A)} 100%
+      ),
+      linear-gradient(
+        to left,
+        ${token('elevation.shadow.overflow.perimeter', 'transparent')} 0px,
+        transparent 1px
+      );
     left: calc(100% + 2px);
   }
   .${ClassName.WITH_CONTROLS} {
     .${ClassName.TABLE_RIGHT_SHADOW}, .${ClassName.TABLE_LEFT_SHADOW} {
-      height: calc(100% - ${tableMarginTop + tableMarginBottom - 2}px);
-      top: ${tableMarginTop - 1}px;
+      height: calc(100% - ${tableMarginTop + tableMarginBottom}px);
+      top: ${tableMarginTop}px;
     }
     .${ClassName.TABLE_LEFT_SHADOW} {
       border-left: 1px solid ${tableBorderColor(props)};
     }
   }
 `;
-/* eslint-enable @atlaskit/design-system/ensure-design-token-usage */
 
 const columnHeaderButton = (props: ThemeProps, cssString?: string) => css`
   background: ${tableToolbarColor(props)};

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

@@ -182,17 +182,29 @@ export const createColumnControlsDecoration = (
   let index = 0;
   return cells.map((cell) => {
     const colspan = (cell.node.attrs as CellAttributes).colspan || 1;
-    const element = document.createElement('div');
-    element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
-    element.dataset.startIndex = `${index}`;
-    index += colspan;
-    element.dataset.endIndex = `${index}`;
-
-    return Decoration.widget(cell.pos + 1, () => element, {
-      key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${index}`,
-      // this decoration should be the first one, even before gap cursor.
-      side: -100,
-    });
+    // It's important these values are scoped locally as the widget callback could be executed anytime in the future
+    // and we want to avoid value leak
+    const startIndex = index;
+    const endIndex = startIndex + colspan;
+
+    // The next cell start index will commence from the current cell end index.
+    index = endIndex;
+
+    return Decoration.widget(
+      cell.pos + 1,
+      () => {
+        const element = document.createElement('div');
+        element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
+        element.dataset.startIndex = `${startIndex}`;
+        element.dataset.endIndex = `${endIndex}`;
+        return element;
+      },
+      {
+        key: `${TableDecorations.COLUMN_CONTROLS_DECORATIONS}_${endIndex}`,
+        // this decoration should be the first one, even before gap cursor.
+        side: -100,
+      },
+    );
   });
 };
 
@@ -312,16 +324,20 @@ export const createResizeHandleDecoration = (
     cellPos: number,
     cellNode: PmNode,
   ): Decoration => {
-    const element = document.createElement('div');
-    element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-
-    element.dataset.startIndex = `${cellColumnPositioning.left}`;
-    element.dataset.endIndex = `${cellColumnPositioning.right}`;
     const position = cellPos + cellNode.nodeSize - 1;
-
-    return Decoration.widget(position, element, {
-      key: `${TableDecorations.COLUMN_RESIZING_HANDLE}_${rowIndex}_${columnIndex}`,
-    });
+    return Decoration.widget(
+      position,
+      () => {
+        const element = document.createElement('div');
+        element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
+        element.dataset.startIndex = `${cellColumnPositioning.left}`;
+        element.dataset.endIndex = `${cellColumnPositioning.right}`;
+        return element;
+      },
+      {
+        key: `${TableDecorations.COLUMN_RESIZING_HANDLE}_${rowIndex}_${columnIndex}`,
+      },
+    );
   };
 
   const createLastCellElementDecoration = (

package/dist/cjs/plugins/table/utils/referentiality.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isReferencedSource = void 0;
-
-var isReferencedSource = function isReferencedSource(state, localId) {
-  var found = false;
-  state.doc.descendants(function (node) {
-    if (found) {
-      return false;
-    }
-
-    var dataConsumer = node.marks.find(function (mark) {
-      return mark.type === state.schema.marks.dataConsumer;
-    });
-
-    if (!dataConsumer) {
-      return true;
-    }
-
-    found = (dataConsumer.attrs.sources || []).includes(localId);
-    return !found;
-  });
-  return found;
-};
-
-exports.isReferencedSource = isReferencedSource;

package/dist/es2019/plugins/table/utils/referentiality.js

@@ -1,18 +0,0 @@
-export const isReferencedSource = (state, localId) => {
-  let found = false;
-  state.doc.descendants(node => {
-    if (found) {
-      return false;
-    }
-
-    const dataConsumer = node.marks.find(mark => mark.type === state.schema.marks.dataConsumer);
-
-    if (!dataConsumer) {
-      return true;
-    }
-
-    found = (dataConsumer.attrs.sources || []).includes(localId);
-    return !found;
-  });
-  return found;
-};

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

@@ -1,20 +0,0 @@
-export var isReferencedSource = function isReferencedSource(state, localId) {
-  var found = false;
-  state.doc.descendants(function (node) {
-    if (found) {
-      return false;
-    }
-
-    var dataConsumer = node.marks.find(function (mark) {
-      return mark.type === state.schema.marks.dataConsumer;
-    });
-
-    if (!dataConsumer) {
-      return true;
-    }
-
-    found = (dataConsumer.attrs.sources || []).includes(localId);
-    return !found;
-  });
-  return found;
-};

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

@@ -1,2 +0,0 @@
-import { EditorState } from 'prosemirror-state';
-export declare const isReferencedSource: (state: EditorState, localId: string) => boolean;

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

@@ -1,24 +0,0 @@
-import { EditorState } from 'prosemirror-state';
-
-export const isReferencedSource = (state: EditorState, localId: string) => {
-  let found = false;
-
-  state.doc.descendants((node) => {
-    if (found) {
-      return false;
-    }
-
-    const dataConsumer = node.marks.find(
-      (mark) => mark.type === state.schema.marks.dataConsumer,
-    );
-
-    if (!dataConsumer) {
-      return true;
-    }
-
-    found = (dataConsumer.attrs.sources || []).includes(localId);
-    return !found;
-  });
-
-  return found;
-};