@atlaskit/editor-plugin-table 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-table
 
+## 1.0.1
+
+### Patch Changes
+
+- [`04f178ea323`](https://bitbucket.org/atlassian/atlassian-frontend/commits/04f178ea323) - [ux] ED-15823 - Table cells on the second column would change their color upon unchecking "Header Column" table option when the selection cursor was placed in the 3rd column. This was caused by a view update not identifying the cells to update correctly. This was causing table data cells to be changed to table header cells.
+
 ## 1.0.0
 
 ### Major Changes

package/dist/cjs/plugins/table/nodeviews/tableCell.js

@@ -106,7 +106,11 @@ var TableCellNodeView = /*#__PURE__*/function () {
     key: "update",
     value: function update(node) {
       var didUpdate = this.updateNodeView(node);
-      this.node = node;
+
+      if (didUpdate) {
+        this.node = node;
+      }
+
       return didUpdate;
     }
   }, {

package/dist/cjs/plugins/table/pm-plugins/decorations/plugin.js

@@ -63,6 +63,7 @@ var createPlugin = function createPlugin() {
         }
 
         if (tr.docChanged || tr.selectionSet) {
+          pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(tr, pluginState, oldState);
         }
 

package/dist/cjs/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -9,8 +9,6 @@ var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
 
 var _utils = require("@atlaskit/editor-tables/utils");
 
-var _prosemirrorView = require("prosemirror-view");
-
 var _types = require("../../../types");
 
 var _decoration = require("../../../utils/decoration");
@@ -80,7 +78,7 @@ var buildColumnControlsDecorations = function buildColumnControlsDecorations(_re
   var decorationSet = _ref6.decorationSet,
       tr = _ref6.tr;
   return (0, _composeDecorations.composeDecorations)([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
-    decorationSet: _prosemirrorView.DecorationSet.empty,
+    decorationSet: decorationSet,
     tr: tr
   });
 };

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

@@ -163,16 +163,21 @@ var createColumnControlsDecoration = function createColumnControlsDecoration(sel
   var cells = (0, _utils.getCellsInRow)(0)(selection) || [];
   var index = 0;
   return cells.map(function (cell) {
-    var colspan = cell.node.attrs.colspan || 1;
-    var element = document.createElement('div');
-    element.classList.add(_types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
-    element.dataset.startIndex = "".concat(index);
-    index += colspan;
-    element.dataset.endIndex = "".concat(index);
+    var colspan = cell.node.attrs.colspan || 1; // 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
+
+    var startIndex = index;
+    var endIndex = startIndex + colspan; // The next cell start index will commence from the current cell end index.
+
+    index = endIndex;
     return _prosemirrorView.Decoration.widget(cell.pos + 1, function () {
+      var element = document.createElement('div');
+      element.classList.add(_types.TableCssClassName.COLUMN_CONTROLS_DECORATIONS);
+      element.dataset.startIndex = "".concat(startIndex);
+      element.dataset.endIndex = "".concat(endIndex);
       return element;
     }, {
-      key: "".concat(_types.TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(index),
+      key: "".concat(_types.TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(endIndex),
       // this decoration should be the first one, even before gap cursor.
       side: -100
     });
@@ -288,12 +293,14 @@ var createResizeHandleDecoration = function createResizeHandleDecoration(tr, row
   }
 
   var createResizerHandleDecoration = function createResizerHandleDecoration(cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) {
-    var element = document.createElement('div');
-    element.classList.add(_types.TableCssClassName.RESIZE_HANDLE_DECORATION);
-    element.dataset.startIndex = "".concat(cellColumnPositioning.left);
-    element.dataset.endIndex = "".concat(cellColumnPositioning.right);
     var position = cellPos + cellNode.nodeSize - 1;
-    return _prosemirrorView.Decoration.widget(position, element, {
+    return _prosemirrorView.Decoration.widget(position, function () {
+      var element = document.createElement('div');
+      element.classList.add(_types.TableCssClassName.RESIZE_HANDLE_DECORATION);
+      element.dataset.startIndex = "".concat(cellColumnPositioning.left);
+      element.dataset.endIndex = "".concat(cellColumnPositioning.right);
+      return element;
+    }, {
       key: "".concat(_types.TableDecorations.COLUMN_RESIZING_HANDLE, "_").concat(rowIndex, "_").concat(columnIndex)
     });
   };

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"sideEffects": false
 }

package/dist/es2019/plugins/table/nodeviews/tableCell.js

@@ -63,7 +63,11 @@ export default class TableCellNodeView {
 
   update(node) {
     const didUpdate = this.updateNodeView(node);
-    this.node = node;
+
+    if (didUpdate) {
+      this.node = node;
+    }
+
     return didUpdate;
   }
 

package/dist/es2019/plugins/table/pm-plugins/decorations/plugin.js

@@ -38,6 +38,7 @@ export const createPlugin = () => {
         }
 
         if (tr.docChanged || tr.selectionSet) {
+          pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(tr, pluginState, oldState);
         }
 

package/dist/es2019/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -1,6 +1,5 @@
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { DecorationSet } from 'prosemirror-view';
 import { TableDecorations } from '../../../types';
 import { createColumnControlsDecoration, createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../../utils/decoration';
 import { composeDecorations } from './compose-decorations';
@@ -61,7 +60,7 @@ export const buildColumnControlsDecorations = ({
   tr
 }) => {
   return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
-    decorationSet: DecorationSet.empty,
+    decorationSet,
     tr
   });
 };

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

@@ -110,14 +110,21 @@ export const createColumnControlsDecoration = selection => {
   const cells = getCellsInRow(0)(selection) || [];
   let index = 0;
   return cells.map(cell => {
-    const colspan = cell.node.attrs.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}`,
+    const colspan = cell.node.attrs.colspan || 1; // 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
     });
@@ -226,12 +233,14 @@ export const createResizeHandleDecoration = (tr, rowIndexTarget, columnEndIndexT
   }
 
   const createResizerHandleDecoration = (cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) => {
-    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, {
+    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}`
     });
   };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"sideEffects": false
 }

package/dist/esm/plugins/table/nodeviews/tableCell.js

@@ -92,7 +92,11 @@ var TableCellNodeView = /*#__PURE__*/function () {
     key: "update",
     value: function update(node) {
       var didUpdate = this.updateNodeView(node);
-      this.node = node;
+
+      if (didUpdate) {
+        this.node = node;
+      }
+
       return didUpdate;
     }
   }, {

package/dist/esm/plugins/table/pm-plugins/decorations/plugin.js

@@ -42,6 +42,7 @@ export var createPlugin = function createPlugin() {
         }
 
         if (tr.docChanged || tr.selectionSet) {
+          pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(tr, pluginState, oldState);
         }
 

package/dist/esm/plugins/table/pm-plugins/decorations/utils/column-controls.js

@@ -1,6 +1,5 @@
 import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
 import { findTable } from '@atlaskit/editor-tables/utils';
-import { DecorationSet } from 'prosemirror-view';
 import { TableDecorations } from '../../../types';
 import { createColumnControlsDecoration, createColumnSelectedDecoration, findColumnControlSelectedDecoration, findControlsHoverDecoration, updateDecorations } from '../../../utils/decoration';
 import { composeDecorations } from './compose-decorations';
@@ -65,7 +64,7 @@ export var buildColumnControlsDecorations = function buildColumnControlsDecorati
   var decorationSet = _ref6.decorationSet,
       tr = _ref6.tr;
   return composeDecorations([removeColumnControlsSelectedDecoration, removeControlsHoverDecoration, maybeUpdateColumnSelectedDecoration, maybeUpdateColumnControlsDecoration])({
-    decorationSet: DecorationSet.empty,
+    decorationSet: decorationSet,
     tr: tr
   });
 };

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

@@ -133,16 +133,21 @@ export var createColumnControlsDecoration = function createColumnControlsDecorat
   var cells = getCellsInRow(0)(selection) || [];
   var index = 0;
   return cells.map(function (cell) {
-    var colspan = cell.node.attrs.colspan || 1;
-    var element = document.createElement('div');
-    element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
-    element.dataset.startIndex = "".concat(index);
-    index += colspan;
-    element.dataset.endIndex = "".concat(index);
+    var colspan = cell.node.attrs.colspan || 1; // 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
+
+    var startIndex = index;
+    var endIndex = startIndex + colspan; // The next cell start index will commence from the current cell end index.
+
+    index = endIndex;
     return Decoration.widget(cell.pos + 1, function () {
+      var element = document.createElement('div');
+      element.classList.add(ClassName.COLUMN_CONTROLS_DECORATIONS);
+      element.dataset.startIndex = "".concat(startIndex);
+      element.dataset.endIndex = "".concat(endIndex);
       return element;
     }, {
-      key: "".concat(TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(index),
+      key: "".concat(TableDecorations.COLUMN_CONTROLS_DECORATIONS, "_").concat(endIndex),
       // this decoration should be the first one, even before gap cursor.
       side: -100
     });
@@ -253,12 +258,14 @@ export var createResizeHandleDecoration = function createResizeHandleDecoration(
   }
 
   var createResizerHandleDecoration = function createResizerHandleDecoration(cellColumnPositioning, columnIndex, rowIndex, cellPos, cellNode) {
-    var element = document.createElement('div');
-    element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
-    element.dataset.startIndex = "".concat(cellColumnPositioning.left);
-    element.dataset.endIndex = "".concat(cellColumnPositioning.right);
     var position = cellPos + cellNode.nodeSize - 1;
-    return Decoration.widget(position, element, {
+    return Decoration.widget(position, function () {
+      var element = document.createElement('div');
+      element.classList.add(ClassName.RESIZE_HANDLE_DECORATION);
+      element.dataset.startIndex = "".concat(cellColumnPositioning.left);
+      element.dataset.endIndex = "".concat(cellColumnPositioning.right);
+      return element;
+    }, {
       key: "".concat(TableDecorations.COLUMN_RESIZING_HANDLE, "_").concat(rowIndex, "_").concat(columnIndex)
     });
   };

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-table",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Table plugin for the @atlaskit/editor",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/src/__tests__/visual-regression/__image_snapshots__/cell-options-menu-ts-table-cell-options-menu-delete-row-menu-item-should-remove-the-table-row-on-click-1-snap.png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5cd747accdc40bfc52f004ff689a3df00173ee2f27d15c68f3a76172c11050fd
-size 13990
+oid sha256:185a432916fe30487eec362617c510dd132f2a37a56bfceeca674da4c6512dc9
+size 13986

package/src/plugins/table/nodeviews/tableCell.tsx

@@ -99,7 +99,9 @@ export default class TableCellNodeView implements NodeView {
 
   update(node: Node) {
     const didUpdate = this.updateNodeView(node);
-    this.node = node;
+    if (didUpdate) {
+      this.node = node;
+    }
     return didUpdate;
   }
 

package/src/plugins/table/pm-plugins/decorations/plugin.ts

@@ -60,6 +60,7 @@ export const createPlugin = () => {
         }
 
         if (tr.docChanged || tr.selectionSet) {
+          pluginState = pluginState.map(tr.mapping, tr.doc);
           return handleDocOrSelectionChanged(tr, pluginState, oldState);
         }
 

package/src/plugins/table/pm-plugins/decorations/utils/column-controls.ts

@@ -83,5 +83,5 @@ export const buildColumnControlsDecorations: DecorationTransformer = ({
     removeControlsHoverDecoration,
     maybeUpdateColumnSelectedDecoration,
     maybeUpdateColumnControlsDecoration,
-  ])({ decorationSet: DecorationSet.empty, tr });
+  ])({ decorationSet, tr });
 };

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 = (