@atlaskit/editor-plugin-table 7.4.7 → 7.4.9

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-table
 
+## 7.4.9
+
+### Patch Changes
+
+- [#78202](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/78202) [`287432cbca17`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/287432cbca17) - [ux] ED-22099: Fixed drag menu position when close to edge of view port.
+
+## 7.4.8
+
+### Patch Changes
+
+- [#77796](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77796) [`eab996d08513`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/eab996d08513) - Add new statsig experiement for preserve table width, add support for passing through width to create table. Allow tables to be inserted at full width
+
 ## 7.4.7
 
 ### Patch Changes

package/dist/cjs/commands/insert.js

@@ -89,8 +89,6 @@ var addColumnAfter = exports.addColumnAfter = function addColumnAfter(getEditorC
     return true;
   };
 };
-
-// #region Commands
 var insertColumn = exports.insertColumn = function insertColumn(getEditorContainerWidth) {
   return function (column) {
     return function (state, dispatch, view) {
@@ -143,28 +141,23 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
     return true;
   };
 };
-var createTable = exports.createTable = function createTable() {
+var createTable = exports.createTable = function createTable(isFullWidthModeEnabled, getEditorFeatureFlags) {
   return function (state, dispatch) {
-    var table = (0, _utils2.createTable)({
-      schema: state.schema
-    });
+    var table = (0, _utils3.createTableWithWidth)(isFullWidthModeEnabled, getEditorFeatureFlags)(state.schema);
     if (dispatch) {
       dispatch((0, _utils.safeInsert)(table)(state.tr).scrollIntoView());
     }
     return true;
   };
 };
-// #endregion
-
-var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(editorAnalyticsAPI) {
+var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, getEditorFeatureFlags, editorAnalyticsAPI) {
   return function (rowsCount, colsCount, inputMethod) {
     return function (_ref) {
       var tr = _ref.tr;
-      var tableNode = (0, _utils2.createTable)({
-        schema: tr.doc.type.schema,
+      var tableNode = (0, _utils3.createTableWithWidth)(isFullWidthModeEnabled, getEditorFeatureFlags, {
         rowsCount: rowsCount,
         colsCount: colsCount
-      });
+      })(tr.doc.type.schema);
       var newTr = (0, _utils.safeInsert)(tableNode)(tr).scrollIntoView();
       if (inputMethod) {
         editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({

package/dist/cjs/plugin.js

@@ -16,7 +16,6 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
 var _utils = require("@atlaskit/editor-common/utils");
 var _withPluginState = require("@atlaskit/editor-common/with-plugin-state");
 var _pmPlugins = require("@atlaskit/editor-tables/pm-plugins");
-var _utils2 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _insert = require("./commands/insert");
 var _createPluginConfig = require("./create-plugin-config");
@@ -41,7 +40,7 @@ var _FloatingDeleteButton = _interopRequireDefault(require("./ui/FloatingDeleteB
 var _FloatingDragMenu = _interopRequireDefault(require("./ui/FloatingDragMenu"));
 var _FloatingInsertButton = _interopRequireDefault(require("./ui/FloatingInsertButton"));
 var _LayoutButton = _interopRequireDefault(require("./ui/LayoutButton"));
-var _utils3 = require("./utils");
+var _utils2 = require("./utils");
 var defaultGetEditorFeatureFlags = function defaultGetEditorFeatureFlags() {
   return {};
 };
@@ -66,13 +65,19 @@ var tablesPlugin = function tablesPlugin(_ref) {
   var editorAnalyticsAPI = api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
   return {
     name: 'table',
+    // Use getSharedState to store fullWidthEnabled and wasFullWidthModeEnabled to guarantee access
+    // to most up to date values - passing to createPluginState will not re-initialise the state
+    getSharedState: function getSharedState() {
+      return {
+        isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
+        wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled)
+      };
+    },
     actions: {
       insertTable: function insertTable(analyticsPayload) {
         return function (state, dispatch) {
           var _api$contentInsertion, _api$contentInsertion2;
-          var node = (0, _utils2.createTable)({
-            schema: state.schema
-          });
+          var node = (0, _utils2.createTableWithWidth)(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags)(state.schema);
           return (_api$contentInsertion = api === null || api === void 0 || (_api$contentInsertion2 = api.contentInsertion) === null || _api$contentInsertion2 === void 0 || (_api$contentInsertion2 = _api$contentInsertion2.actions) === null || _api$contentInsertion2 === void 0 ? void 0 : _api$contentInsertion2.insert({
             state: state,
             dispatch: dispatch,
@@ -86,7 +91,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }
     },
     commands: {
-      insertTableWithSize: (0, _insert.insertTableWithSize)(api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
+      insertTableWithSize: (0, _insert.insertTableWithSize)(options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions)
     },
     nodes: function nodes() {
       var tableNode = options !== null && options !== void 0 && options.tableResizingEnabled ? _adfSchema.tableWithCustomWidth : _adfSchema.table;
@@ -208,7 +213,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
           var _options$fullWidthEna;
           var dispatchAnalyticsEvent = _ref12.dispatchAnalyticsEvent,
             dispatch = _ref12.dispatch;
-          return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false) : undefined;
+          return options !== null && options !== void 0 && options.tableResizingEnabled ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options === null || options === void 0 ? void 0 : options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) : undefined;
         }
       },
       // TODO: should be deprecated and eventually replaced with 'tableAnalyticsPlugin'
@@ -300,7 +305,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
             tableWrapperTarget = _ref17.tableWrapperTarget;
           var allowControls = pluginConfig.allowControls;
           var stickyHeader = stickyHeadersState ? (0, _stickyHeaders.findStickyHeaderForTable)(stickyHeadersState, tablePos) : undefined;
-          var LayoutContent = options && !options.tableResizingEnabled && (0, _utils3.isLayoutSupported)(state) && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
+          var LayoutContent = options && !options.tableResizingEnabled && (0, _utils2.isLayoutSupported)(state) && options.breakoutEnabled ? /*#__PURE__*/_react.default.createElement(_LayoutButton.default, {
             editorView: editorView,
             mountPoint: popupsMountPoint,
             boundariesElement: popupsBoundariesElement,
@@ -391,9 +396,10 @@ var tablesPlugin = function tablesPlugin(_ref) {
             return /*#__PURE__*/_react.default.createElement(_icons.IconTable, null);
           },
           action: function action(insert, state) {
-            var tr = insert((0, _utils2.createTable)({
-              schema: state.schema
-            }));
+            var _api$table;
+            // see comment on tablesPlugin.getSharedState on usage
+            var tableState = api === null || api === void 0 || (_api$table = api.table) === null || _api$table === void 0 ? void 0 : _api$table.sharedState.currentState();
+            var tr = insert((0, _utils2.createTableWithWidth)(tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled, options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags)(state.schema));
             editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 || editorAnalyticsAPI.attachAnalyticsEvent({
               action: _analytics.ACTION.INSERTED,
               actionSubject: _analytics.ACTION_SUBJECT.DOCUMENT,

package/dist/cjs/pm-plugins/table-width.js

@@ -14,6 +14,7 @@ var _state = require("@atlaskit/editor-prosemirror/state");
 var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _utils = require("@atlaskit/editor-tables/utils");
+var _utils2 = require("./table-resizing/utils");
 var _excluded = ["width"];
 /**
  * A plugin for handle table custom widths
@@ -23,7 +24,7 @@ var _excluded = ["width"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var pluginKey = exports.pluginKey = new _state.PluginKey('tableWidthPlugin');
-var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled) {
+var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, getEditorFeatureFlags) {
   return new _safePlugin.SafePlugin({
     key: pluginKey,
     state: {
@@ -65,6 +66,7 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
           }
         });
       }
+
       // When document first load in Confluence, initially it is an empty document
       // and Collab service triggers a transaction to replace the empty document with the real document that should be rendered.
       // what we need to do is to add width attr to all tables in the real document
@@ -86,11 +88,15 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
         });
         return hasStepReplacingEntireDocument;
       });
-      if (!isReplaceDocumentOperation) {
+      var referentialityTr = transactions.find(function (tr) {
+        return tr.getMeta('referentialityTableInserted');
+      });
+      var shouldPatchTable = fullWidthEnabled && getEditorFeatureFlags && getEditorFeatureFlags()['tablePreserveWidth'];
+      if (!isReplaceDocumentOperation && (!shouldPatchTable || !referentialityTr)) {
         return null;
       }
-      var tr = newState.tr;
       var table = newState.schema.nodes.table;
+      var tr = newState.tr;
 
       /**
        * Select table event
@@ -108,40 +114,53 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
           }
         });
       }
-      newState.doc.forEach(function (node, offset) {
-        if (node.type === table) {
-          var width = node.attrs.width;
-          var layout = node.attrs.layout;
-          if (!width && layout) {
-            var tableWidthCal;
-            if (fullWidthEnabled) {
-              tableWidthCal = _editorSharedStyles.akEditorFullWidthLayoutWidth;
-            } else {
-              switch (layout) {
-                case 'wide':
-                  tableWidthCal = _editorSharedStyles.akEditorWideLayoutWidth;
-                  break;
-                case 'full-width':
-                  tableWidthCal = _editorSharedStyles.akEditorFullWidthLayoutWidth;
-                  break;
-                // when in fix-width appearance, no need to assign value to table width attr
-                // as when table is created, width attr is null by default, table rendered using layout attr
-                default:
-                  tableWidthCal = _editorSharedStyles.akEditorDefaultLayoutWidth;
-                  break;
+      if (isReplaceDocumentOperation) {
+        newState.doc.forEach(function (node, offset) {
+          if (node.type === table) {
+            var width = node.attrs.width;
+            var layout = node.attrs.layout;
+            if (!width && layout) {
+              var tableWidthCal;
+              if (fullWidthEnabled) {
+                tableWidthCal = _editorSharedStyles.akEditorFullWidthLayoutWidth;
+              } else {
+                switch (layout) {
+                  case 'wide':
+                    tableWidthCal = _editorSharedStyles.akEditorWideLayoutWidth;
+                    break;
+                  case 'full-width':
+                    tableWidthCal = _editorSharedStyles.akEditorFullWidthLayoutWidth;
+                    break;
+                  // when in fix-width appearance, no need to assign value to table width attr
+                  // as when table is created, width attr is null by default, table rendered using layout attr
+                  default:
+                    tableWidthCal = _editorSharedStyles.akEditorDefaultLayoutWidth;
+                    break;
+                }
+              }
+              var _node$attrs = node.attrs,
+                _width = _node$attrs.width,
+                rest = (0, _objectWithoutProperties2.default)(_node$attrs, _excluded);
+              if (tableWidthCal) {
+                tr.step(new _steps.SetAttrsStep(offset, _objectSpread({
+                  width: tableWidthCal
+                }, rest)));
               }
-            }
-            var _node$attrs = node.attrs,
-              _width = _node$attrs.width,
-              rest = (0, _objectWithoutProperties2.default)(_node$attrs, _excluded);
-            if (tableWidthCal) {
-              tr.step(new _steps.SetAttrsStep(offset, _objectSpread({
-                width: tableWidthCal
-              }, rest)));
             }
           }
-        }
-      });
+        });
+      }
+      if (referentialityTr) {
+        referentialityTr.steps.forEach(function (step) {
+          step.getMap().forEach(function (oldStart, oldEnd, newStart, newEnd) {
+            newState.doc.nodesBetween(newStart, newEnd, function (node, pos) {
+              if (node.type === table && node.attrs.width !== _utils2.TABLE_MAX_WIDTH) {
+                tr.setNodeAttribute(pos, 'width', _utils2.TABLE_MAX_WIDTH);
+              }
+            });
+          });
+        });
+      }
       return tr;
     }
   });

package/dist/cjs/ui/FloatingContextualMenu/index.js

@@ -50,7 +50,7 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitHeight: 188,
+    fitHeight: _consts.tablePopupMenuFitHeight,
     fitWidth: isDragAndDropEnabled ? _consts.contextualMenuDropdownWidthDnD : _consts.contextualMenuDropdownWidth
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.

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

@@ -185,7 +185,12 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     getEditorContainerWidth = _ref.getEditorContainerWidth,
     editorAnalyticsAPI = _ref.editorAnalyticsAPI,
     pluginConfig = _ref.pluginConfig,
-    formatMessage = _ref.intl.formatMessage;
+    formatMessage = _ref.intl.formatMessage,
+    fitHeight = _ref.fitHeight,
+    fitWidth = _ref.fitWidth,
+    mountPoint = _ref.mountPoint,
+    scrollableElement = _ref.scrollableElement,
+    boundariesElement = _ref.boundariesElement;
   var state = editorView.state,
     dispatch = editorView.dispatch;
   var selection = state.selection;
@@ -457,12 +462,17 @@ var DragMenu = exports.DragMenu = /*#__PURE__*/_react.default.memo(function (_re
     section: {
       hasSeparator: true
     },
-    target: target,
     items: menuItems,
     onItemActivated: handleMenuItemActivated,
     onMouseEnter: handleItemMouseEnter,
     onMouseLeave: handleItemMouseLeave,
-    handleClose: closeMenu
+    handleClose: closeMenu,
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    direction: direction,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   });
 });
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(DragMenu);

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

@@ -1,32 +1,55 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DropdownMenu = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
 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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+
 var DropListWithOutsideListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.DropList);
 var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
-  var target = _ref.target,
-    items = _ref.items,
+  var items = _ref.items,
     section = _ref.section,
     disableKeyboardHandling = _ref.disableKeyboardHandling,
     onItemActivated = _ref.onItemActivated,
     handleClose = _ref.handleClose,
     onMouseEnter = _ref.onMouseEnter,
-    onMouseLeave = _ref.onMouseLeave;
+    onMouseLeave = _ref.onMouseLeave,
+    fitWidth = _ref.fitWidth,
+    fitHeight = _ref.fitHeight,
+    direction = _ref.direction,
+    mountPoint = _ref.mountPoint,
+    boundariesElement = _ref.boundariesElement,
+    scrollableElement = _ref.scrollableElement;
+  var _useState = (0, _react.useState)(['bottom', 'left']),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    popupPlacement = _useState2[0],
+    setPopupPlacement = _useState2[1];
+  var _useState3 = (0, _react.useState)(null),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    targetRefDiv = _useState4[0],
+    setTargetRefDiv = _useState4[1];
+  var handleRef = function handleRef(ref) {
+    setTargetRefDiv(ref);
+  };
   var innerMenu = function innerMenu() {
     return /*#__PURE__*/_react.default.createElement(DropListWithOutsideListeners, {
       isOpen: true,
       shouldFitContainer: true,
-      position: ['bottom', 'left'].join(' '),
+      position: popupPlacement.join(' '),
       handleClickOutside: function handleClickOutside() {
         return handleClose('editor');
       },
@@ -41,7 +64,7 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
           e.stopPropagation();
         }
       },
-      targetRef: target
+      targetRef: targetRefDiv
     }, /*#__PURE__*/_react.default.createElement("div", {
       style: {
         height: 0,
@@ -70,7 +93,29 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
   if (disableKeyboardHandling) {
     return innerMenu();
   }
-  return /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
+
+  // more offsets calculation as offsets depend on the direction and updated placement here
+  var offsetY = direction === 'row' ? popupPlacement[0] === 'bottom' ? -8 : -34 : 0;
+  var offsetX = direction === 'column' ? popupPlacement[1] === 'left' ? 0 : -7 : 0;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "drag-dropdown-menu-wrapper"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "drag-dropdown-menu-popup-ref",
+    ref: handleRef
+  }), /*#__PURE__*/_react.default.createElement(_ui.Popup, {
+    target: targetRefDiv,
+    mountTo: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    onPlacementChanged: function onPlacementChanged(placement) {
+      setPopupPlacement(placement);
+    },
+    fitHeight: fitHeight,
+    fitWidth: fitWidth,
+    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
+  }, /*#__PURE__*/_react.default.createElement(_uiMenu.ArrowKeyNavigationProvider, {
     closeOnTab: true,
     type: _uiMenu.ArrowKeyNavigationType.MENU,
     onSelection: function onSelection(index) {
@@ -119,5 +164,5 @@ var DropdownMenu = exports.DropdownMenu = function DropdownMenu(_ref) {
         });
       }
     }
-  }, innerMenu());
+  }, innerMenu())));
 };

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

@@ -30,12 +30,10 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
   }
   var inStickyMode = stickyHeaders === null || stickyHeaders === void 0 ? void 0 : stickyHeaders.sticky;
   var targetHandleRef = direction === 'row' ? document.querySelector('#drag-handle-button-row') : document.querySelector('#drag-handle-button-column');
-  var offset = direction === 'row' ? [-9, 6] : [0, -7];
+  var offset = direction === 'row' ? [-9, 0] : [0, -7];
   if (!targetHandleRef || !(editorView.state.selection instanceof _cellSelection.CellSelection)) {
     return null;
   }
-
-  // TODO: we will need to adjust the alignment and offset values depending on whether this is a row or column menu.
   return /*#__PURE__*/_react.default.createElement(_ui.Popup, {
     alignX: direction === 'row' ? 'right' : undefined,
     alignY: direction === 'row' ? 'start' : undefined,
@@ -43,7 +41,8 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     mountTo: mountPoint,
     boundariesElement: boundariesElement,
     scrollableElement: scrollableElement,
-    fitWidth: _consts.dragMenuDropdownWidth
+    fitWidth: _consts.dragMenuDropdownWidth,
+    fitHeight: _consts.tablePopupMenuFitHeight
     // z-index value below is to ensure that this menu is above other floating menu
     // in table, but below floating dialogs like typeaheads, pickers, etc.
     // In sticky mode, we want to show the menu above the sticky header
@@ -62,7 +61,12 @@ var FloatingDragMenu = function FloatingDragMenu(_ref) {
     targetCellPosition: targetCellPosition,
     getEditorContainerWidth: getEditorContainerWidth,
     editorAnalyticsAPI: editorAnalyticsAPI,
-    pluginConfig: pluginConfig
+    pluginConfig: pluginConfig,
+    fitWidth: _consts.dragMenuDropdownWidth,
+    fitHeight: _consts.tablePopupMenuFitHeight,
+    mountPoint: mountPoint,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement
   }));
 };
 FloatingDragMenu.displayName = 'FloatingDragMenu';

package/dist/cjs/ui/consts.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
+exports.tableToolbarSize = exports.tableToolbarSelectedColor = exports.tableToolbarDeleteColor = exports.tableToolbarColor = exports.tableTextColor = exports.tableScrollbarOffset = exports.tablePopupMenuFitHeight = exports.tablePadding = exports.tableOverflowShadowWidthWide = exports.tableOverflowShadowWidth = exports.tableMarginFullWidthMode = exports.tableInsertColumnButtonSize = exports.tableInsertColumnButtonOffset = exports.tableHeaderCellBackgroundColor = exports.tableFloatingControlsColor = exports.tableDeleteButtonSize = exports.tableDeleteButtonOffset = exports.tableControlsSpacing = exports.tableCellSelectedDeleteIconColor = exports.tableCellSelectedDeleteIconBackground = exports.tableCellSelectedColor = exports.tableCellHoverDeleteIconColor = exports.tableCellHoverDeleteIconBackground = exports.tableCellDeleteColor = exports.tableCellBackgroundColor = exports.tableBorderSelectedColor = exports.tableBorderRadiusSize = exports.tableBorderDeleteColor = exports.tableBorderColor = exports.stickyRowZIndex = exports.stickyRowOffsetTop = exports.stickyHeaderBorderBottomWidth = exports.rowControlsZIndex = exports.resizeLineWidth = exports.resizeHandlerZIndex = exports.resizeHandlerAreaWidth = exports.lineMarkerSize = exports.lineMarkerOffsetFromColumnControls = exports.layoutButtonSize = exports.insertLineWidth = exports.dropTargetsZIndex = exports.dropTargetExtendedWidth = exports.dragTableInsertColumnButtonSize = exports.dragMenuDropdownWidth = exports.contextualMenuTriggerSize = exports.contextualMenuDropdownWidthDnD = exports.contextualMenuDropdownWidth = exports.columnResizeHandleZIndex = exports.columnControlsZIndex = exports.columnControlsSelectedZIndex = exports.columnControlsDecorationHeight = exports.colorPalletteColumns = exports.TABLE_SNAP_GAP = exports.TABLE_HIGHLIGHT_TOLERANCE = exports.TABLE_HIGHLIGHT_GAP = exports.TABLE_GUIDELINE_VISIBLE_ADJUSTMENT = exports.STICKY_HEADER_TOGGLE_TOLERANCE_MS = void 0;
 var _styles = require("@atlaskit/editor-common/styles");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
@@ -61,6 +61,7 @@ var stickyRowOffsetTop = exports.stickyRowOffsetTop = 8;
 var stickyHeaderBorderBottomWidth = exports.stickyHeaderBorderBottomWidth = 1;
 var tableOverflowShadowWidth = exports.tableOverflowShadowWidth = 8;
 var tableOverflowShadowWidthWide = exports.tableOverflowShadowWidthWide = 32;
+var tablePopupMenuFitHeight = exports.tablePopupMenuFitHeight = 188;
 var dropTargetsZIndex = exports.dropTargetsZIndex = 14;
 var TABLE_SNAP_GAP = exports.TABLE_SNAP_GAP = 9;
 var TABLE_HIGHLIGHT_GAP = exports.TABLE_HIGHLIGHT_GAP = 10;

package/dist/cjs/utils/create.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createTableWithWidth = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _utils = require("@atlaskit/editor-tables/utils");
+var _utils2 = require("../pm-plugins/table-resizing/utils");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var createTableWithWidth = exports.createTableWithWidth = function createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags, createTableProps) {
+  return function (schema) {
+    var _ref = getEditorFeatureFlags ? getEditorFeatureFlags() : {},
+      _ref$tablePreserveWid = _ref.tablePreserveWidth,
+      tablePreserveWidth = _ref$tablePreserveWid === void 0 ? false : _ref$tablePreserveWid;
+    if (tablePreserveWidth && isFullWidthModeEnabled) {
+      return (0, _utils.createTable)(_objectSpread({
+        schema: schema,
+        tableWidth: _utils2.TABLE_MAX_WIDTH
+      }, createTableProps));
+    }
+    return (0, _utils.createTable)(_objectSpread({
+      schema: schema
+    }, createTableProps));
+  };
+};

package/dist/cjs/utils/index.js

@@ -105,6 +105,12 @@ Object.defineProperty(exports, "createRowInsertLine", {
     return _decoration.createRowInsertLine;
   }
 });
+Object.defineProperty(exports, "createTableWithWidth", {
+  enumerable: true,
+  get: function get() {
+    return _create.createTableWithWidth;
+  }
+});
 Object.defineProperty(exports, "findControlsHoverDecoration", {
   enumerable: true,
   get: function get() {
@@ -445,4 +451,5 @@ var _rowControls = require("./row-controls");
 var _analytics = require("./analytics");
 var _table = require("./table");
 var _updatePluginStateDecorations = require("./update-plugin-state-decorations");
-var _mergedCells = require("./merged-cells");
+var _mergedCells = require("./merged-cells");
+var _create = require("./create");

package/dist/es2019/commands/insert.js

@@ -4,12 +4,12 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, TABLE_OVERFLOW_C
 import { Selection } from '@atlaskit/editor-prosemirror/state';
 import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
-import { addColumnAt as addColumnAtPMUtils, addRowAt, createTable as createTableNode, findTable, selectedRect } from '@atlaskit/editor-tables/utils';
+import { addColumnAt as addColumnAtPMUtils, addRowAt, findTable, selectedRect } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { updateRowOrColumnMovedTransform } from '../pm-plugins/analytics/commands';
 import { META_KEYS } from '../pm-plugins/table-analytics';
 import { rescaleColumns } from '../transforms/column-width';
-import { checkIfHeaderRowEnabled, copyPreviousRow } from '../utils';
+import { checkIfHeaderRowEnabled, copyPreviousRow, createTableWithWidth } from '../utils';
 import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
 function addColumnAtCustomStep(column) {
   return tr => {
@@ -74,8 +74,6 @@ export const addColumnAfter = getEditorContainerWidth => (state, dispatch, view)
   }
   return true;
 };
-
-// #region Commands
 export const insertColumn = getEditorContainerWidth => column => (state, dispatch, view) => {
   let tr = addColumnAt(getEditorContainerWidth)(column, getAllowAddColumnCustomStep(state), view)(state.tr);
   const table = findTable(tr.selection);
@@ -124,26 +122,21 @@ export const insertRow = (row, moveCursorToTheNewRow) => (state, dispatch) => {
   }
   return true;
 };
-export const createTable = () => (state, dispatch) => {
-  const table = createTableNode({
-    schema: state.schema
-  });
+export const createTable = (isFullWidthModeEnabled, getEditorFeatureFlags) => (state, dispatch) => {
+  const table = createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags)(state.schema);
   if (dispatch) {
     dispatch(safeInsert(table)(state.tr).scrollIntoView());
   }
   return true;
 };
-// #endregion
-
-export const insertTableWithSize = editorAnalyticsAPI => (rowsCount, colsCount, inputMethod) => {
+export const insertTableWithSize = (isFullWidthModeEnabled, getEditorFeatureFlags, editorAnalyticsAPI) => (rowsCount, colsCount, inputMethod) => {
   return ({
     tr
   }) => {
-    const tableNode = createTableNode({
-      schema: tr.doc.type.schema,
+    const tableNode = createTableWithWidth(isFullWidthModeEnabled, getEditorFeatureFlags, {
       rowsCount: rowsCount,
       colsCount: colsCount
-    });
+    })(tr.doc.type.schema);
     const newTr = safeInsert(tableNode)(tr).scrollIntoView();
     if (inputMethod) {
       editorAnalyticsAPI === null || editorAnalyticsAPI === void 0 ? void 0 : editorAnalyticsAPI.attachAnalyticsEvent({