@atlaskit/editor-plugin-table 0.0.10 → 0.1.0

package/.eslintrc.js

@@ -0,0 +1,35 @@
+module.exports = {
+  rules: {
+    // Ensure the table plugin is not coupled to editor-core and avoid circular dependencies
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: [
+          {
+            group: ['@atlaskit/editor-core/*', '@atlaskit/editor-core'],
+            message:
+              'Importing editor-core is not allowed in editor-plugin-table. Consider using editor-common instead.',
+          },
+        ],
+      },
+    ],
+  },
+  // Disable restricted import for tests
+  overrides: [
+    {
+      files: ['**/__tests__/**/*.{js,ts,tsx}', 'examples/**/*.{js,ts,tsx}'],
+      rules: {
+        'no-restricted-imports': [
+          'off',
+          {
+            patterns: [
+              {
+                group: ['@atlaskit/editor-core/*', '@atlaskit/editor-core'],
+              },
+            ],
+          },
+        ],
+      },
+    },
+  ],
+};

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/editor-plugin-table
 
+## 0.1.0
+
+### Minor Changes
+
+- [`90c44a68da2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/90c44a68da2) - Removed editor-core table plugin and replaced with new `editor-plugin-table` package. This change required adding copying new table changes from editor-core to the new table package, moving IconTable to shared package, and creating new entry-points from editor-plugin-table. `getPluginState` from `packages/editor/editor-plugin-table/src/plugins/table/pm-plugins/table-resizing` was also exported.
+
+  [ED-15674][ed15739] [ED-15633]
+
+- [`1e1ac6d1d15`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1e1ac6d1d15) - [ED-15501] Removal of coupled table-resizing code in `editor-core` media and card plugin. This makes entry-point `/table-resizing` from `editor-plugin-table` unused so removed the entry-point.
+
+### Patch Changes
+
+- [`29d7f84c649`](https://bitbucket.org/atlassian/atlassian-frontend/commits/29d7f84c649) - Removed styled-components peerDependency
+- [`30e8425f7d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30e8425f7d6) - [ux] ED-15706 Reenable copy button on editor-plugin-table. Added property copyButton to floatingToolbarConfig.
+- [`e9168851af4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e9168851af4) - This changes addresses a bug that occurs when a user is resizing tables and receives a TypeError (found on Sentry). This change adds a null check on columns existing in the growColumn and shrinkColumn functions so that we do not try to access a column that doesn't exist.
+- [`ac8b10d645e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ac8b10d645e) - This change addresses a RangeError on `getRelativeDomCellWidths` found on Sentry. It sets the check for `colspan` to be strict equals to one as the value comes from the first table row's colspan DOM attribute and cannot be negative.
+
+  Reference: https://sentry.io/organizations/atlassian-2y/issues/3434914334/?project=5988900
+
+- [`46703fdde00`](https://bitbucket.org/atlassian/atlassian-frontend/commits/46703fdde00) - This change addresses a bug that occurs when a user is clicking into an element inside the table and receives a RangeError (found on Sentry). This change adds bounds, NaN, and type checks when reading a cellIndex from tableMap so that we don't pass NaN or undefined to the call to nodeAt.
+- [`edb93baa953`](https://bitbucket.org/atlassian/atlassian-frontend/commits/edb93baa953) - Moved sendLogs to editor-common. Re-exported in editor-core and import sendLogs from editor-common in editor-plugin-table package.
+- Updated dependencies
+
 ## 0.0.10
 
 ### Patch Changes

package/commands/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@atlaskit/editor-plugin-table/commands",
+  "main": "../dist/cjs/plugins/table/commands/index.js",
+  "module": "../dist/esm/plugins/table/commands/index.js",
+  "module:es2019": "../dist/es2019/plugins/table/commands/index.js",
+  "types": "../dist/types/plugins/table/commands/index.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/plugins/table/commands/index.d.ts"
+      ]
+    }
+  }
+}

package/dist/cjs/plugins/table/commands/hover.js

@@ -61,13 +61,13 @@ exports.hoverMergedCells = hoverMergedCells;
 
 var hoverColumns = function hoverColumns(hoveredColumns, isInDanger) {
   return (0, _pluginFactory.createCommand)(function (state) {
-    var cells = (0, _utils.getCellsInColumn)(hoveredColumns)(state.selection);
+    var cells = (0, _utils.getCellsInColumn)(hoveredColumns)(state.tr.selection);
 
     if (!cells) {
       return false;
     }
 
-    var decorations = (0, _utils2.createControlsHoverDecoration)(cells, 'column', isInDanger);
+    var decorations = (0, _utils2.createControlsHoverDecoration)(cells, 'column', state.tr, isInDanger);
     return {
       type: 'HOVER_COLUMNS',
       data: {
@@ -91,7 +91,7 @@ var hoverRows = function hoverRows(hoveredRows, isInDanger) {
       return false;
     }
 
-    var decorations = (0, _utils2.createControlsHoverDecoration)(cells, 'row', isInDanger);
+    var decorations = (0, _utils2.createControlsHoverDecoration)(cells, 'row', state.tr, isInDanger);
     return {
       type: 'HOVER_ROWS',
       data: {
@@ -125,7 +125,7 @@ var hoverTable = function hoverTable(isInDanger, isSelected) {
       return false;
     }
 
-    var decorations = (0, _utils2.createControlsHoverDecoration)(cells, 'table', isInDanger, isSelected);
+    var decorations = (0, _utils2.createControlsHoverDecoration)(cells, 'table', state.tr, isInDanger, isSelected);
     return {
       type: 'HOVER_TABLE',
       data: {

package/dist/cjs/plugins/table/commands-with-analytics.js

@@ -84,81 +84,83 @@ var emptyMultipleCellsWithAnalytics = function emptyMultipleCellsWithAnalytics(e
 exports.emptyMultipleCellsWithAnalytics = emptyMultipleCellsWithAnalytics;
 
 var mergeCellsWithAnalytics = function mergeCellsWithAnalytics(editorAnalyticsAPI) {
-  return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref2) {
-    var selection = _ref2.selection;
-
-    var _getSelectedCellInfo2 = (0, _utils2.getSelectedCellInfo)(selection),
-        horizontalCells = _getSelectedCellInfo2.horizontalCells,
-        verticalCells = _getSelectedCellInfo2.verticalCells,
-        totalCells = _getSelectedCellInfo2.totalCells,
-        totalRowCount = _getSelectedCellInfo2.totalRowCount,
-        totalColumnCount = _getSelectedCellInfo2.totalColumnCount;
-
-    return {
-      action: _analytics.TABLE_ACTION.MERGED,
-      actionSubject: _analytics.ACTION_SUBJECT.TABLE,
-      actionSubjectId: null,
-      attributes: {
-        inputMethod: _analytics.INPUT_METHOD.CONTEXT_MENU,
-        // TODO: merge with floating toolbar once command is updated
-        horizontalCells: horizontalCells,
-        verticalCells: verticalCells,
-        totalCells: totalCells,
-        totalRowCount: totalRowCount,
-        totalColumnCount: totalColumnCount
-      },
-      eventType: _analytics.EVENT_TYPE.TRACK
-    };
-  })(editorAnalyticsAPI)(function (state, dispatch) {
-    if (dispatch) {
-      dispatch((0, _transforms.mergeCells)(state.tr));
-    }
-
-    return true;
-  });
-};
-
-exports.mergeCellsWithAnalytics = mergeCellsWithAnalytics;
-
-var splitCellWithAnalytics = function splitCellWithAnalytics(editorAnalyticsAPI) {
-  return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref3) {
-    var selection = _ref3.selection;
-
-    var _getSelectedCellInfo3 = (0, _utils2.getSelectedCellInfo)(selection),
-        totalRowCount = _getSelectedCellInfo3.totalRowCount,
-        totalColumnCount = _getSelectedCellInfo3.totalColumnCount;
+  return function (inputMethod) {
+    return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref2) {
+      var selection = _ref2.selection;
 
-    var cell = (0, _utils.findCellClosestToPos)(selection.$anchor);
+      var _getSelectedCellInfo2 = (0, _utils2.getSelectedCellInfo)(selection),
+          horizontalCells = _getSelectedCellInfo2.horizontalCells,
+          verticalCells = _getSelectedCellInfo2.verticalCells,
+          totalCells = _getSelectedCellInfo2.totalCells,
+          totalRowCount = _getSelectedCellInfo2.totalRowCount,
+          totalColumnCount = _getSelectedCellInfo2.totalColumnCount;
 
-    if (cell) {
-      var _cell$node$attrs = cell.node.attrs,
-          verticalCells = _cell$node$attrs.rowspan,
-          horizontalCells = _cell$node$attrs.colspan;
       return {
-        action: _analytics.TABLE_ACTION.SPLIT,
+        action: _analytics.TABLE_ACTION.MERGED,
         actionSubject: _analytics.ACTION_SUBJECT.TABLE,
         actionSubjectId: null,
         attributes: {
-          inputMethod: _analytics.INPUT_METHOD.CONTEXT_MENU,
-          // TODO: merge with floating toolbar once command is updated
+          inputMethod: inputMethod,
           horizontalCells: horizontalCells,
           verticalCells: verticalCells,
-          totalCells: horizontalCells * verticalCells,
+          totalCells: totalCells,
           totalRowCount: totalRowCount,
           totalColumnCount: totalColumnCount
         },
         eventType: _analytics.EVENT_TYPE.TRACK
       };
-    }
+    })(editorAnalyticsAPI)(function (state, dispatch) {
+      if (dispatch) {
+        dispatch((0, _transforms.mergeCells)(state.tr));
+      }
 
-    return;
-  })(editorAnalyticsAPI)(_splitCell.splitCell);
+      return true;
+    });
+  };
+};
+
+exports.mergeCellsWithAnalytics = mergeCellsWithAnalytics;
+
+var splitCellWithAnalytics = function splitCellWithAnalytics(editorAnalyticsAPI) {
+  return function (inputMethod) {
+    return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref3) {
+      var selection = _ref3.selection;
+
+      var _getSelectedCellInfo3 = (0, _utils2.getSelectedCellInfo)(selection),
+          totalRowCount = _getSelectedCellInfo3.totalRowCount,
+          totalColumnCount = _getSelectedCellInfo3.totalColumnCount;
+
+      var cell = (0, _utils.findCellClosestToPos)(selection.$anchor);
+
+      if (cell) {
+        var _cell$node$attrs = cell.node.attrs,
+            verticalCells = _cell$node$attrs.rowspan,
+            horizontalCells = _cell$node$attrs.colspan;
+        return {
+          action: _analytics.TABLE_ACTION.SPLIT,
+          actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+          actionSubjectId: null,
+          attributes: {
+            inputMethod: inputMethod,
+            horizontalCells: horizontalCells,
+            verticalCells: verticalCells,
+            totalCells: horizontalCells * verticalCells,
+            totalRowCount: totalRowCount,
+            totalColumnCount: totalColumnCount
+          },
+          eventType: _analytics.EVENT_TYPE.TRACK
+        };
+      }
+
+      return;
+    })(editorAnalyticsAPI)(_splitCell.splitCell);
+  };
 };
 
 exports.splitCellWithAnalytics = splitCellWithAnalytics;
 
 var setColorWithAnalytics = function setColorWithAnalytics(editorAnalyticsAPI) {
-  return function (cellColor, targetCellPosition) {
+  return function (inputMethod, cellColor, targetCellPosition) {
     return (0, _analytics2.withEditorAnalyticsAPI)(function (_ref4) {
       var selection = _ref4.selection;
 
@@ -174,8 +176,7 @@ var setColorWithAnalytics = function setColorWithAnalytics(editorAnalyticsAPI) {
         actionSubject: _analytics.ACTION_SUBJECT.TABLE,
         actionSubjectId: null,
         attributes: {
-          inputMethod: _analytics.INPUT_METHOD.CONTEXT_MENU,
-          // TODO: merge with floating toolbar once command is updated
+          inputMethod: inputMethod,
           cellColor: (_adfSchema.tableBackgroundColorPalette.get(cellColor.toLowerCase()) || cellColor).toLowerCase(),
           horizontalCells: horizontalCells,
           verticalCells: verticalCells,

package/dist/cjs/plugins/table/event-handlers.js

@@ -37,7 +37,6 @@ var _utils3 = require("./utils");
 
 var _getAllowAddColumnCustomStep = require("./utils/get-allow-add-column-custom-step");
 
-// import { closestElement } from '@atlaskit/editor-core/src/utils/dom';
 var isFocusingCalendar = function isFocusingCalendar(event) {
   return event instanceof FocusEvent && event.relatedTarget instanceof HTMLElement && event.relatedTarget.getAttribute('aria-label') === 'calendar';
 };

package/dist/cjs/plugins/table/index.js

@@ -166,21 +166,38 @@ var tablesPlugin = function tablesPlugin(options) {
       }, {
         name: 'tableEditing',
         plugin: function plugin() {
-          return (0, _pmPlugins.tableEditing)();
+          return (0, _pmPlugins.tableEditing)({
+            reportFixedTable: function reportFixedTable(_ref5) {
+              var _options$editorAnalyt;
+
+              var state = _ref5.state,
+                  tr = _ref5.tr,
+                  reason = _ref5.reason;
+              options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+                action: _analytics.TABLE_ACTION.FIXED,
+                actionSubject: _analytics.ACTION_SUBJECT.TABLE,
+                actionSubjectId: null,
+                attributes: {
+                  reason: reason
+                },
+                eventType: _analytics.EVENT_TYPE.TRACK
+              })(tr);
+            }
+          });
         }
       }, {
         name: 'tableStickyHeaders',
-        plugin: function plugin(_ref5) {
-          var dispatch = _ref5.dispatch,
-              eventDispatcher = _ref5.eventDispatcher;
+        plugin: function plugin(_ref6) {
+          var dispatch = _ref6.dispatch,
+              eventDispatcher = _ref6.eventDispatcher;
           return options && options.tableOptions.stickyHeaders ? (0, _stickyHeaders.createPlugin)(dispatch, eventDispatcher, function () {
             return [];
           }, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags) : undefined;
         }
       }, {
         name: 'tableLocalId',
-        plugin: function plugin(_ref6) {
-          var dispatch = _ref6.dispatch;
+        plugin: function plugin(_ref7) {
+          var dispatch = _ref7.dispatch;
           return (0, _tableLocalId.createPlugin)(dispatch);
         }
       }, {
@@ -225,12 +242,12 @@ var tablesPlugin = function tablesPlugin(options) {
 
       return plugins;
     },
-    contentComponent: function contentComponent(_ref7) {
-      var editorView = _ref7.editorView,
-          popupsMountPoint = _ref7.popupsMountPoint,
-          popupsBoundariesElement = _ref7.popupsBoundariesElement,
-          popupsScrollableElement = _ref7.popupsScrollableElement,
-          dispatchAnalyticsEvent = _ref7.dispatchAnalyticsEvent;
+    contentComponent: function contentComponent(_ref8) {
+      var editorView = _ref8.editorView,
+          popupsMountPoint = _ref8.popupsMountPoint,
+          popupsBoundariesElement = _ref8.popupsBoundariesElement,
+          popupsScrollableElement = _ref8.popupsScrollableElement,
+          dispatchAnalyticsEvent = _ref8.dispatchAnalyticsEvent;
       return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
         component: _analytics.ACTION_SUBJECT.TABLES_PLUGIN,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent,
@@ -241,25 +258,25 @@ var tablesPlugin = function tablesPlugin(options) {
           tableResizingPluginState: _tableResizing.pluginKey,
           stickyHeadersState: _stickyHeaders.pluginKey
         },
-        render: function render(_ref8) {
-          var resizingPluginState = _ref8.tableResizingPluginState,
-              stickyHeadersState = _ref8.stickyHeadersState,
-              tablePluginState = _ref8.tablePluginState;
+        render: function render(_ref9) {
+          var resizingPluginState = _ref9.tableResizingPluginState,
+              stickyHeadersState = _ref9.stickyHeadersState,
+              tablePluginState = _ref9.tablePluginState;
           var state = editorView.state;
           var isDragging = resizingPluginState === null || resizingPluginState === void 0 ? void 0 : resizingPluginState.dragging;
-          var _ref9 = tablePluginState,
-              tableNode = _ref9.tableNode,
-              tablePos = _ref9.tablePos,
-              targetCellPosition = _ref9.targetCellPosition,
-              isContextualMenuOpen = _ref9.isContextualMenuOpen,
-              layout = _ref9.layout,
-              tableRef = _ref9.tableRef,
-              pluginConfig = _ref9.pluginConfig,
-              insertColumnButtonIndex = _ref9.insertColumnButtonIndex,
-              insertRowButtonIndex = _ref9.insertRowButtonIndex,
-              isHeaderColumnEnabled = _ref9.isHeaderColumnEnabled,
-              isHeaderRowEnabled = _ref9.isHeaderRowEnabled,
-              tableWrapperTarget = _ref9.tableWrapperTarget;
+          var _ref10 = tablePluginState,
+              tableNode = _ref10.tableNode,
+              tablePos = _ref10.tablePos,
+              targetCellPosition = _ref10.targetCellPosition,
+              isContextualMenuOpen = _ref10.isContextualMenuOpen,
+              layout = _ref10.layout,
+              tableRef = _ref10.tableRef,
+              pluginConfig = _ref10.pluginConfig,
+              insertColumnButtonIndex = _ref10.insertColumnButtonIndex,
+              insertRowButtonIndex = _ref10.insertRowButtonIndex,
+              isHeaderColumnEnabled = _ref10.isHeaderColumnEnabled,
+              isHeaderRowEnabled = _ref10.isHeaderRowEnabled,
+              tableWrapperTarget = _ref10.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
           return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, targetCellPosition && tableRef && !isDragging && options && options.allowContextualMenu && /*#__PURE__*/_react.default.createElement(_FloatingContextualButton.default, {
@@ -324,9 +341,9 @@ var tablesPlugin = function tablesPlugin(options) {
     pluginsOptions: {
       // TODO: ED-14676 This is not the final API design
       // For now, we are using this on (insert-api/api.ts) but we may create a proper place for it
-      createNodeHandler: function createNodeHandler(_ref10) {
-        var nodeName = _ref10.nodeName,
-            schema = _ref10.schema;
+      createNodeHandler: function createNodeHandler(_ref11) {
+        var nodeName = _ref11.nodeName,
+            schema = _ref11.schema;
 
         // An EditorPlugin may manage more than one node.
         if (nodeName !== 'table') {
@@ -338,8 +355,8 @@ var tablesPlugin = function tablesPlugin(options) {
         });
         return table;
       },
-      quickInsert: function quickInsert(_ref11) {
-        var formatMessage = _ref11.formatMessage;
+      quickInsert: function quickInsert(_ref12) {
+        var formatMessage = _ref12.formatMessage;
         return [{
           id: 'table',
           title: formatMessage(_messages.toolbarInsertBlockMessages.table),
@@ -351,12 +368,12 @@ var tablesPlugin = function tablesPlugin(options) {
             return /*#__PURE__*/_react.default.createElement(_icons.IconTable, null);
           },
           action: function action(insert, state) {
-            var _options$editorAnalyt;
+            var _options$editorAnalyt2;
 
             var tr = insert((0, _utils2.createTable)({
               schema: state.schema
             }));
-            options === null || options === void 0 ? void 0 : (_options$editorAnalyt = options.editorAnalyticsAPI) === null || _options$editorAnalyt === void 0 ? void 0 : _options$editorAnalyt.attachAnalyticsEvent({
+            options === null || options === void 0 ? void 0 : (_options$editorAnalyt2 = options.editorAnalyticsAPI) === null || _options$editorAnalyt2 === void 0 ? void 0 : _options$editorAnalyt2.attachAnalyticsEvent({
               action: _analytics.ACTION.INSERTED,
               actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,
               actionSubjectId: _analytics.ACTION_SUBJECT_ID.TABLE,
@@ -369,7 +386,7 @@ var tablesPlugin = function tablesPlugin(options) {
           }
         }];
       },
-      floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
+      floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, options === null || options === void 0 ? void 0 : options.editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
     }
   };
 };

package/dist/cjs/plugins/table/pm-plugins/table-resizing/index.js

@@ -9,6 +9,12 @@ Object.defineProperty(exports, "createPlugin", {
     return _plugin.createPlugin;
   }
 });
+Object.defineProperty(exports, "getPluginState", {
+  enumerable: true,
+  get: function get() {
+    return _pluginFactory.getPluginState;
+  }
+});
 Object.defineProperty(exports, "pluginKey", {
   enumerable: true,
   get: function get() {
@@ -26,4 +32,6 @@ var _plugin = require("./plugin");
 
 var _commands = require("./commands");
 
-var _pluginKey = require("./plugin-key");
+var _pluginKey = require("./plugin-key");
+
+var _pluginFactory = require("./plugin-factory");