@atlaskit/editor-plugin-table 10.11.5 → 10.11.7

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-table
 
+## 10.11.7
+
+### Patch Changes
+
+- [#164047](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/164047)
+  [`823d00b1d1429`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/823d00b1d1429) -
+  ED-27604: Fixed table drag menu flickers when hover background color menu
+- Updated dependencies
+
+## 10.11.6
+
+### Patch Changes
+
+- [#162726](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/162726)
+  [`05c3aa3d6cd0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/05c3aa3d6cd0c) -
+  NOISSUE - Remove lazy node view for tables. Includes cleaning up the feature gates:
+  platform_editor_disable_table_lnv & platform_editor_enable_table_lnv.
+
 ## 10.11.5
 
 ### Patch Changes

package/dist/cjs/nodeviews/table-node-views.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.tableView = exports.tableRowView = exports.tableHeaderView = exports.tableCellView = void 0;
+var _table = require("./table");
+var _TableCell = _interopRequireDefault(require("./TableCell"));
+var _TableRow = _interopRequireDefault(require("./TableRow"));
+// TODO: ED-23976 - Clean up
+
+var tableView = exports.tableView = function tableView(options) {
+  return function (node, view, getPos) {
+    return (0, _table.createTableView)(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isCommentEditor, options.isChromelessEditor);
+  };
+};
+var tableCellView = exports.tableCellView = function tableCellView(options) {
+  return function (node, view, getPos) {
+    var _options$pluginInject;
+    return new _TableCell.default(node, view, getPos, options.eventDispatcher, (_options$pluginInject = options.pluginInjectionApi) === null || _options$pluginInject === void 0 || (_options$pluginInject = _options$pluginInject.analytics) === null || _options$pluginInject === void 0 ? void 0 : _options$pluginInject.actions);
+  };
+};
+var tableHeaderView = exports.tableHeaderView = function tableHeaderView(options) {
+  return function (node, view, getPos) {
+    var _options$pluginInject2;
+    return new _TableCell.default(node, view, getPos, options.eventDispatcher, (_options$pluginInject2 = options.pluginInjectionApi) === null || _options$pluginInject2 === void 0 || (_options$pluginInject2 = _options$pluginInject2.analytics) === null || _options$pluginInject2 === void 0 ? void 0 : _options$pluginInject2.actions);
+  };
+};
+var tableRowView = exports.tableRowView = function tableRowView(options) {
+  return function (node, view, getPos) {
+    return new _TableRow.default(node, view, getPos, options.eventDispatcher);
+  };
+};

package/dist/cjs/pm-plugins/main.js

@@ -15,7 +15,7 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _editorTables = require("@atlaskit/editor-tables");
 var _utils3 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _lazyNodeViews = require("../nodeviews/lazy-node-views");
+var _tableNodeViews = require("../nodeviews/table-node-views");
 var _plugin = require("../pm-plugins/decorations/plugin");
 var _types = require("../types");
 var _eventHandlers = require("../ui/event-handlers");
@@ -60,7 +60,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
     return editorView.state;
   };
   var nodeViews = (0, _coreUtils.isSSR)() && (0, _platformFeatureFlags.fg)('platform_editor_table_fallback_to_dom_on_ssr') ? undefined : {
-    table: (0, _lazyNodeViews.lazyTableView)({
+    table: (0, _tableNodeViews.tableView)({
       portalProviderAPI: portalProviderAPI,
       eventDispatcher: eventDispatcher,
       getEditorContainerWidth: getEditorContainerWidth,
@@ -70,14 +70,14 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
       isCommentEditor: isCommentEditor,
       isChromelessEditor: isChromelessEditor
     }),
-    tableRow: (0, _lazyNodeViews.lazyTableRowView)({
+    tableRow: (0, _tableNodeViews.tableRowView)({
       eventDispatcher: eventDispatcher
     }),
-    tableCell: (0, _lazyNodeViews.lazyTableCellView)({
+    tableCell: (0, _tableNodeViews.tableCellView)({
       eventDispatcher: eventDispatcher,
       pluginInjectionApi: pluginInjectionApi
     }),
-    tableHeader: (0, _lazyNodeViews.lazyTableHeaderView)({
+    tableHeader: (0, _tableNodeViews.tableHeaderView)({
       eventDispatcher: eventDispatcher,
       pluginInjectionApi: pluginInjectionApi
     })

package/dist/cjs/ui/FloatingDragMenu/DropdownMenu.js

@@ -14,6 +14,7 @@ var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _uiReact = require("@atlaskit/editor-common/ui-react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _menu = require("@atlaskit/menu");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _consts = require("../consts");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
@@ -32,7 +33,7 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
     section = _ref.section,
     disableKeyboardHandling = _ref.disableKeyboardHandling,
     onItemActivated = _ref.onItemActivated,
-    _handleClose = _ref.handleClose,
+    handleClose = _ref.handleClose,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave,
     fitWidth = _ref.fitWidth,
@@ -62,11 +63,11 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
       shouldFitContainer: true,
       position: popupPlacement.join(' '),
       handleClickOutside: function handleClickOutside() {
-        return _handleClose('editor');
+        return handleClose('editor');
       },
       handleEscapeKeydown: function handleEscapeKeydown() {
         if (!disableKeyboardHandling) {
-          _handleClose('handle');
+          handleClose('handle');
         }
       },
       handleEnterKeydown: function handleEnterKeydown(e) {
@@ -104,6 +105,51 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
       }));
     })));
   };
+  var onClose = (0, _react.useCallback)(function () {
+    return handleClose('handle');
+  }, [handleClose]);
+  var onSelection = (0, _react.useCallback)(function (index) {
+    var results = items.flatMap(function (item) {
+      return 'items' in item ? item.items : item;
+    });
+
+    // onSelection is called when any focusable element is 'activated'
+    // this is an issue as some menu items have toggles, which cause the index value
+    // in the callback to be outside of array length.
+    // The logic below normalises the index value based on the number
+    // of menu items with 2 focusable elements, and adjusts the index to ensure
+    // the correct menu item is sent in onItemActivated callback
+    var keys = ['row_numbers', 'header_row', 'header_column'];
+    var doubleItemCount = 0;
+    var firstIndex = results.findIndex(function (value) {
+      var key = value.key;
+      return key !== undefined && keys.includes(key);
+    });
+    if (firstIndex === -1 || index <= firstIndex) {
+      onItemActivated && onItemActivated({
+        item: results[index]
+      });
+      return;
+    }
+    for (var i = firstIndex; i < results.length; i += 1) {
+      var key = results[i].key;
+      if (key !== undefined && keys.includes(key)) {
+        doubleItemCount += 1;
+      }
+      if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+        onItemActivated && onItemActivated({
+          item: results[i]
+        });
+        return;
+      }
+      if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+        onItemActivated && onItemActivated({
+          item: results[i]
+        });
+        return;
+      }
+    }
+  }, [items, onItemActivated]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -128,57 +174,23 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
       zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex,
       offset: [offsetX, offsetY],
       allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
-    }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+    }, (0, _platformFeatureFlags.fg)('platform_editor_table_drag_menu_flickers_fix') ? /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+      closeOnTab: !disableKeyboardHandling,
+      type: _uiMenu.ArrowKeyNavigationType.MENU,
+      handleClose: onClose,
+      onSelection: onSelection
+      // disableKeyboardHandling is linked with isSubmenuOpen in DragMenu
+      // When isSubmenuOpen is true, the background color picker palette is open, and the picker is a ColorPaletteArrowKeyNavigationProvider
+      // At the same time the MenuArrowKeyNavigationProvider are renderer too, as it is the wrapper for all other DragMenu items
+      // In this case we want the ColorPaletteArrowKeyNavigationProvider to handle the keyboard event, not the MenuArrowKeyNavigationProvider
+      // Hence set disableArrowKeyNavigation to true when disableKeyboardHandling is true
+      ,
+      disableArrowKeyNavigation: disableKeyboardHandling
+    }, innerMenu()) : disableKeyboardHandling ? innerMenu() : /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
       closeOnTab: true,
       type: _uiMenu.ArrowKeyNavigationType.MENU,
-      handleClose: function handleClose() {
-        return _handleClose('handle');
-      },
-      onSelection: function onSelection(index) {
-        var results = items.flatMap(function (item) {
-          return 'items' in item ? item.items : item;
-        });
-
-        // onSelection is called when any focusable element is 'activated'
-        // this is an issue as some menu items have toggles, which cause the index value
-        // in the callback to be outside of array length.
-        // The logic below normalises the index value based on the number
-        // of menu items with 2 focusable elements, and adjusts the index to ensure
-        // the correct menu item is sent in onItemActivated callback
-        var keys = ['row_numbers', 'header_row', 'header_column'];
-        var doubleItemCount = 0;
-
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        var firstIndex = results.findIndex(function (value) {
-          return keys.includes(value.key);
-        });
-        if (firstIndex === -1 || index <= firstIndex) {
-          onItemActivated && onItemActivated({
-            item: results[index]
-          });
-          return;
-        }
-        for (var i = firstIndex; i < results.length; i += 1) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          if (keys.includes(results[i].key)) {
-            doubleItemCount += 1;
-          }
-          if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-            onItemActivated && onItemActivated({
-              item: results[i]
-            });
-            return;
-          }
-          if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-            onItemActivated && onItemActivated({
-              item: results[i]
-            });
-            return;
-          }
-        }
-      }
+      handleClose: onClose,
+      onSelection: onSelection
     }, innerMenu())))
   );
 };

package/dist/es2019/nodeviews/table-node-views.js

@@ -0,0 +1,26 @@
+// TODO: ED-23976 - Clean up
+import { createTableView } from './table';
+import TableCell from './TableCell';
+import TableRow from './TableRow';
+export const tableView = options => {
+  return (node, view, getPos) => {
+    return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isCommentEditor, options.isChromelessEditor);
+  };
+};
+export const tableCellView = options => {
+  return (node, view, getPos) => {
+    var _options$pluginInject, _options$pluginInject2;
+    return new TableCell(node, view, getPos, options.eventDispatcher, (_options$pluginInject = options.pluginInjectionApi) === null || _options$pluginInject === void 0 ? void 0 : (_options$pluginInject2 = _options$pluginInject.analytics) === null || _options$pluginInject2 === void 0 ? void 0 : _options$pluginInject2.actions);
+  };
+};
+export const tableHeaderView = options => {
+  return (node, view, getPos) => {
+    var _options$pluginInject3, _options$pluginInject4;
+    return new TableCell(node, view, getPos, options.eventDispatcher, (_options$pluginInject3 = options.pluginInjectionApi) === null || _options$pluginInject3 === void 0 ? void 0 : (_options$pluginInject4 = _options$pluginInject3.analytics) === null || _options$pluginInject4 === void 0 ? void 0 : _options$pluginInject4.actions);
+  };
+};
+export const tableRowView = options => {
+  return (node, view, getPos) => {
+    return new TableRow(node, view, getPos, options.eventDispatcher);
+  };
+};

package/dist/es2019/pm-plugins/main.js

@@ -7,7 +7,7 @@ import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-p
 import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { lazyTableCellView, lazyTableHeaderView, lazyTableRowView, lazyTableView } from '../nodeviews/lazy-node-views';
+import { tableCellView, tableHeaderView, tableRowView, tableView } from '../nodeviews/table-node-views';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { TableCssClassName as ClassName } from '../types';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleTripleClick, whenTableInFocus, withCellTracking } from '../ui/event-handlers';
@@ -51,7 +51,7 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
     return editorView.state;
   };
   const nodeViews = isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr') ? undefined : {
-    table: lazyTableView({
+    table: tableView({
       portalProviderAPI,
       eventDispatcher,
       getEditorContainerWidth,
@@ -61,14 +61,14 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
       isCommentEditor,
       isChromelessEditor
     }),
-    tableRow: lazyTableRowView({
+    tableRow: tableRowView({
       eventDispatcher
     }),
-    tableCell: lazyTableCellView({
+    tableCell: tableCellView({
       eventDispatcher,
       pluginInjectionApi
     }),
-    tableHeader: lazyTableHeaderView({
+    tableHeader: tableHeaderView({
       eventDispatcher,
       pluginInjectionApi
     })

package/dist/es2019/ui/FloatingDragMenu/DropdownMenu.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
-import React, { useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { DropList, Popup } from '@atlaskit/editor-common/ui';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenuItem } from '@atlaskit/editor-common/ui-menu';
 import { OutsideClickTargetRefContext, withReactEditorViewOuterListeners } from '@atlaskit/editor-common/ui-react';
 import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 import { MenuGroup, Section } from '@atlaskit/menu';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { dragMenuDropdownWidth } from '../consts';
 const DropListWithOutsideClickTargetRef = props => {
   const setOutsideClickTargetRef = React.useContext(OutsideClickTargetRefContext);
@@ -84,6 +85,47 @@ export const DropdownMenu = ({
       });
     })))));
   };
+  const onClose = useCallback(() => handleClose('handle'), [handleClose]);
+  const onSelection = useCallback(index => {
+    const results = items.flatMap(item => 'items' in item ? item.items : item);
+
+    // onSelection is called when any focusable element is 'activated'
+    // this is an issue as some menu items have toggles, which cause the index value
+    // in the callback to be outside of array length.
+    // The logic below normalises the index value based on the number
+    // of menu items with 2 focusable elements, and adjusts the index to ensure
+    // the correct menu item is sent in onItemActivated callback
+    const keys = ['row_numbers', 'header_row', 'header_column'];
+    let doubleItemCount = 0;
+    const firstIndex = results.findIndex(value => {
+      const key = value.key;
+      return key !== undefined && keys.includes(key);
+    });
+    if (firstIndex === -1 || index <= firstIndex) {
+      onItemActivated && onItemActivated({
+        item: results[index]
+      });
+      return;
+    }
+    for (let i = firstIndex; i < results.length; i += 1) {
+      const key = results[i].key;
+      if (key !== undefined && keys.includes(key)) {
+        doubleItemCount += 1;
+      }
+      if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
+        onItemActivated && onItemActivated({
+          item: results[i]
+        });
+        return;
+      }
+      if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
+        onItemActivated && onItemActivated({
+          item: results[i]
+        });
+        return;
+      }
+    }
+  }, [items, onItemActivated]);
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -108,51 +150,23 @@ export const DropdownMenu = ({
       zIndex: akEditorFloatingPanelZIndex,
       offset: [offsetX, offsetY],
       allowOutOfBounds: true // required as this popup is child of a parent popup, should be allowed to be out of bound of the parent popup, otherwise horizontal offset is not right
-    }, disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+    }, fg('platform_editor_table_drag_menu_flickers_fix') ? /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
+      closeOnTab: !disableKeyboardHandling,
+      type: ArrowKeyNavigationType.MENU,
+      handleClose: onClose,
+      onSelection: onSelection
+      // disableKeyboardHandling is linked with isSubmenuOpen in DragMenu
+      // When isSubmenuOpen is true, the background color picker palette is open, and the picker is a ColorPaletteArrowKeyNavigationProvider
+      // At the same time the MenuArrowKeyNavigationProvider are renderer too, as it is the wrapper for all other DragMenu items
+      // In this case we want the ColorPaletteArrowKeyNavigationProvider to handle the keyboard event, not the MenuArrowKeyNavigationProvider
+      // Hence set disableArrowKeyNavigation to true when disableKeyboardHandling is true
+      ,
+      disableArrowKeyNavigation: disableKeyboardHandling
+    }, innerMenu()) : disableKeyboardHandling ? innerMenu() : /*#__PURE__*/React.createElement(ArrowKeyNavigationProvider, {
       closeOnTab: true,
       type: ArrowKeyNavigationType.MENU,
-      handleClose: () => handleClose('handle'),
-      onSelection: index => {
-        const results = items.flatMap(item => 'items' in item ? item.items : item);
-
-        // onSelection is called when any focusable element is 'activated'
-        // this is an issue as some menu items have toggles, which cause the index value
-        // in the callback to be outside of array length.
-        // The logic below normalises the index value based on the number
-        // of menu items with 2 focusable elements, and adjusts the index to ensure
-        // the correct menu item is sent in onItemActivated callback
-        const keys = ['row_numbers', 'header_row', 'header_column'];
-        let doubleItemCount = 0;
-
-        // Ignored via go/ees005
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        const firstIndex = results.findIndex(value => keys.includes(value.key));
-        if (firstIndex === -1 || index <= firstIndex) {
-          onItemActivated && onItemActivated({
-            item: results[index]
-          });
-          return;
-        }
-        for (let i = firstIndex; i < results.length; i += 1) {
-          // Ignored via go/ees005
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          if (keys.includes(results[i].key)) {
-            doubleItemCount += 1;
-          }
-          if (firstIndex % 2 === 0 && index - doubleItemCount === i) {
-            onItemActivated && onItemActivated({
-              item: results[i]
-            });
-            return;
-          }
-          if (firstIndex % 2 === 1 && index - doubleItemCount === i) {
-            onItemActivated && onItemActivated({
-              item: results[i]
-            });
-            return;
-          }
-        }
-      }
+      handleClose: onClose,
+      onSelection: onSelection
     }, innerMenu())))
   );
 };

package/dist/esm/nodeviews/table-node-views.js

@@ -0,0 +1,26 @@
+// TODO: ED-23976 - Clean up
+import { createTableView } from './table';
+import TableCell from './TableCell';
+import TableRow from './TableRow';
+export var tableView = function tableView(options) {
+  return function (node, view, getPos) {
+    return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isCommentEditor, options.isChromelessEditor);
+  };
+};
+export var tableCellView = function tableCellView(options) {
+  return function (node, view, getPos) {
+    var _options$pluginInject;
+    return new TableCell(node, view, getPos, options.eventDispatcher, (_options$pluginInject = options.pluginInjectionApi) === null || _options$pluginInject === void 0 || (_options$pluginInject = _options$pluginInject.analytics) === null || _options$pluginInject === void 0 ? void 0 : _options$pluginInject.actions);
+  };
+};
+export var tableHeaderView = function tableHeaderView(options) {
+  return function (node, view, getPos) {
+    var _options$pluginInject2;
+    return new TableCell(node, view, getPos, options.eventDispatcher, (_options$pluginInject2 = options.pluginInjectionApi) === null || _options$pluginInject2 === void 0 || (_options$pluginInject2 = _options$pluginInject2.analytics) === null || _options$pluginInject2 === void 0 ? void 0 : _options$pluginInject2.actions);
+  };
+};
+export var tableRowView = function tableRowView(options) {
+  return function (node, view, getPos) {
+    return new TableRow(node, view, getPos, options.eventDispatcher);
+  };
+};

package/dist/esm/pm-plugins/main.js

@@ -10,7 +10,7 @@ import { findParentDomRefOfType, findParentNodeOfType } from '@atlaskit/editor-p
 import { TableMap } from '@atlaskit/editor-tables';
 import { findTable } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { lazyTableCellView, lazyTableHeaderView, lazyTableRowView, lazyTableView } from '../nodeviews/lazy-node-views';
+import { tableCellView, tableHeaderView, tableRowView, tableView } from '../nodeviews/table-node-views';
 import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
 import { TableCssClassName as ClassName } from '../types';
 import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseUp, handleTripleClick, whenTableInFocus, withCellTracking } from '../ui/event-handlers';
@@ -53,7 +53,7 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
     return editorView.state;
   };
   var nodeViews = isSSR() && fg('platform_editor_table_fallback_to_dom_on_ssr') ? undefined : {
-    table: lazyTableView({
+    table: tableView({
       portalProviderAPI: portalProviderAPI,
       eventDispatcher: eventDispatcher,
       getEditorContainerWidth: getEditorContainerWidth,
@@ -63,14 +63,14 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
       isCommentEditor: isCommentEditor,
       isChromelessEditor: isChromelessEditor
     }),
-    tableRow: lazyTableRowView({
+    tableRow: tableRowView({
       eventDispatcher: eventDispatcher
     }),
-    tableCell: lazyTableCellView({
+    tableCell: tableCellView({
       eventDispatcher: eventDispatcher,
       pluginInjectionApi: pluginInjectionApi
     }),
-    tableHeader: lazyTableHeaderView({
+    tableHeader: tableHeaderView({
       eventDispatcher: eventDispatcher,
       pluginInjectionApi: pluginInjectionApi
     })