@atlaskit/editor-plugin-table 8.4.5 → 8.4.7

package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js

@@ -1,11 +1,10 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import classnames from 'classnames';
@@ -17,19 +16,17 @@ import { getRowHeights } from '../../../pm-plugins/utils';
 import { TableCssClassName as ClassName } from '../../../types';
 import { tableBorderColor } from '../../consts';
 var NumberColumn = /*#__PURE__*/function (_Component) {
-  _inherits(NumberColumn, _Component);
-  var _super = _createSuper(NumberColumn);
   function NumberColumn() {
     var _this;
     _classCallCheck(this, NumberColumn);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "hoverRows", function (index) {
+    _this = _callSuper(this, NumberColumn, [].concat(args));
+    _defineProperty(_this, "hoverRows", function (index) {
       return _this.props.tableActive ? _this.props.hoverRows([index]) : null;
     });
-    _defineProperty(_assertThisInitialized(_this), "selectRow", function (index, event) {
+    _defineProperty(_this, "selectRow", function (index, event) {
       var _this$props = _this.props,
         tableActive = _this$props.tableActive,
         editorView = _this$props.editorView,
@@ -52,7 +49,7 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
       }
       selectRow(index, event.shiftKey);
     });
-    _defineProperty(_assertThisInitialized(_this), "clearHoverSelection", function () {
+    _defineProperty(_this, "clearHoverSelection", function () {
       var _this$props2 = _this.props,
         tableActive = _this$props2.tableActive,
         editorView = _this$props2.editorView;
@@ -62,7 +59,7 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
         clearHoverSelection()(state, dispatch);
       }
     });
-    _defineProperty(_assertThisInitialized(_this), "getCellStyles", function (index, rowHeight) {
+    _defineProperty(_this, "getCellStyles", function (index, rowHeight) {
       var _this$props3 = _this.props,
         stickyTop = _this$props3.stickyTop,
         hasHeaderRow = _this$props3.hasHeaderRow;
@@ -77,8 +74,7 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
         height: rowHeight
       };
     });
-    _defineProperty(_assertThisInitialized(_this), "getClassNames", function (index) {
-      var _classnames;
+    _defineProperty(_this, "getClassNames", function (index) {
       var isButtonDisabled = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
       var _this$props4 = _this.props,
         hoveredRows = _this$props4.hoveredRows,
@@ -86,11 +82,12 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
         isInDanger = _this$props4.isInDanger,
         isResizing = _this$props4.isResizing;
       var isActive = isRowSelected(index)(editorView.state.selection) || (hoveredRows || []).indexOf(index) !== -1 && !isResizing;
-      return classnames(ClassName.NUMBERED_COLUMN_BUTTON, (_classnames = {}, _defineProperty(_classnames, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, isButtonDisabled), _defineProperty(_classnames, ClassName.HOVERED_CELL_IN_DANGER, isActive && isInDanger), _defineProperty(_classnames, ClassName.HOVERED_CELL_ACTIVE, isActive), _classnames));
+      return classnames(ClassName.NUMBERED_COLUMN_BUTTON, _defineProperty(_defineProperty(_defineProperty({}, ClassName.NUMBERED_COLUMN_BUTTON_DISABLED, isButtonDisabled), ClassName.HOVERED_CELL_IN_DANGER, isActive && isInDanger), ClassName.HOVERED_CELL_ACTIVE, isActive));
     });
     return _this;
   }
-  _createClass(NumberColumn, [{
+  _inherits(NumberColumn, _Component);
+  return _createClass(NumberColumn, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -157,6 +154,5 @@ var NumberColumn = /*#__PURE__*/function (_Component) {
       }));
     }
   }]);
-  return NumberColumn;
 }(Component);
 export { NumberColumn as default };

package/dist/esm/ui/TableFloatingControls/RowControls/ClassicControls.js

@@ -1,11 +1,10 @@
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = _getPrototypeOf(t); if (r) { var s = _getPrototypeOf(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return _possibleConstructorReturn(this, e); }; }
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React, { Component } from 'react';
 import { injectIntl } from 'react-intl-next';
@@ -16,16 +15,14 @@ import { getRowClassNames, getRowHeights, getRowsParams } from '../../../pm-plug
 import { TableCssClassName as ClassName } from '../../../types';
 import { tableControlsSpacing, tableToolbarSize } from '../../consts';
 var RowControlsComponent = /*#__PURE__*/function (_Component) {
-  _inherits(RowControlsComponent, _Component);
-  var _super = _createSuper(RowControlsComponent);
   function RowControlsComponent() {
     var _this;
     _classCallCheck(this, RowControlsComponent);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "clearHoverSelection", function () {
+    _this = _callSuper(this, RowControlsComponent, [].concat(args));
+    _defineProperty(_this, "clearHoverSelection", function () {
       var _this$props$editorVie = _this.props.editorView,
         state = _this$props$editorVie.state,
         dispatch = _this$props$editorVie.dispatch;
@@ -33,7 +30,8 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  _createClass(RowControlsComponent, [{
+  _inherits(RowControlsComponent, _Component);
+  return _createClass(RowControlsComponent, [{
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -110,6 +108,5 @@ var RowControlsComponent = /*#__PURE__*/function (_Component) {
       );
     }
   }]);
-  return RowControlsComponent;
 }(Component);
 export var RowControls = injectIntl(RowControlsComponent);

package/dist/esm/ui/common-styles.js

@@ -1,5 +1,8 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/dist/esm/ui/consts.js

@@ -1,3 +1,6 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableHeaderCellBackground, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
 import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';

package/dist/types/types/index.d.ts

@@ -415,6 +415,9 @@ export declare const TableCssClassName: {
     TABLE_SHADOW_SENTINEL_RIGHT: string;
     TABLE_CELL_NODEVIEW_CONTENT_DOM: string;
     TABLE_CELL_WRAPPER: string;
+    /**
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6877 Internal documentation for deprecation (no external access)}
+     **/
     TABLE_HEADER_CELL_WRAPPER: string;
     TABLE_ROW_CONTROLS_WRAPPER: string;
     TABLE_COLUMN_CONTROLS_DECORATIONS: string;

package/dist/types-ts4.5/types/index.d.ts

@@ -415,6 +415,9 @@ export declare const TableCssClassName: {
     TABLE_SHADOW_SENTINEL_RIGHT: string;
     TABLE_CELL_NODEVIEW_CONTENT_DOM: string;
     TABLE_CELL_WRAPPER: string;
+    /**
+     * @deprecated {@link https://hello.atlassian.net/browse/ENGHEALTH-6877 Internal documentation for deprecation (no external access)}
+     **/
     TABLE_HEADER_CELL_WRAPPER: string;
     TABLE_ROW_CONTROLS_WRAPPER: string;
     TABLE_COLUMN_CONTROLS_DECORATIONS: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "8.4.5",
+	"version": "8.4.7",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^46.1.0",
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/custom-steps": "^0.9.0",
-		"@atlaskit/editor-common": "^96.3.0",
+		"@atlaskit/editor-common": "^96.5.0",
 		"@atlaskit/editor-palette": "1.6.3",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.10.0",
@@ -51,8 +51,8 @@
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
 		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tmp-editor-statsig": "^2.25.0",
-		"@atlaskit/toggle": "^13.4.0",
+		"@atlaskit/tmp-editor-statsig": "^2.26.0",
+		"@atlaskit/toggle": "^14.0.0",
 		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/tooltip": "^19.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -137,6 +137,9 @@
 		},
 		"platform_editor_ed_25642": {
 			"type": "boolean"
+		},
+		"platform_editor_table_overflow_in_full_width_fix": {
+			"type": "boolean"
 		}
 	}
 }

package/src/index.ts

@@ -1,2 +1,5 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 export { default as tablesPlugin } from './tablePlugin';
 export type { TablePlugin, TablePluginOptions } from './tablePluginType';

package/src/nodeviews/TableComponent.tsx

@@ -173,6 +173,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 	private wrapperWidth?: number;
 	private wrapperReisizeObserver?: ResizeObserver;
 
+	private updateColGroupFromFullWidthChange?: boolean;
+
 	private dragAndDropCleanupFn?: CleanupFn;
 
 	constructor(props: ComponentProps) {
@@ -180,8 +182,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 		const { options, containerWidth, getNode } = props;
 		this.node = getNode();
 		this.containerWidth = containerWidth;
+
 		this.isInitialOverflowSent = false;
 
+		if (!this.updateColGroupFromFullWidthChange) {
+			this.updateColGroupFromFullWidthChange =
+				options?.isFullWidthModeEnabled && !options?.wasFullWidthModeEnabled;
+		}
+
 		// store table size using previous full-width mode so can detect if it has changed.
 		const isFullWidthModeEnabled = options ? options.wasFullWidthModeEnabled : false;
 		this.layoutSize = this.tableNodeLayoutSize(this.node, containerWidth.width, {
@@ -429,6 +437,14 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			tableNode.attrs.isNumberColumnEnabled !== this.node.attrs.isNumberColumnEnabled;
 		const isNumberOfColumnsChanged = tablesHaveDifferentNoOfColumns(tableNode, this.node);
 
+		const { width: containerWidthValue, lineLength: containerLineLength } = containerWidth;
+		const isLineLengthChanged = this.containerWidth?.lineLength !== containerLineLength;
+
+		const isFullWidthModeAndLineLengthChanged =
+			this.updateColGroupFromFullWidthChange &&
+			isLineLengthChanged &&
+			fg('platform_editor_table_overflow_in_full_width_fix');
+
 		const maybeScale =
 			isTableSquashed ||
 			isTableWidthChanged ||
@@ -436,14 +452,12 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 			isNumberColumnChanged ||
 			isNumberOfColumnsChanged;
 
-		if (force || maybeScale) {
-			const { width: containerWidthValue } = containerWidth;
+		if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
 			const isWidthChanged = this.containerWidth?.width !== containerWidthValue;
 			const wasTableResized = hasTableBeenResized(this.node);
 			const isTableResized = hasTableBeenResized(tableNode);
 			const isColumnsDistributed = wasTableResized && !isTableResized;
 			const isTableDisplayModeChanged = this.node.attrs.displayMode !== tableNode.attrs.displayMode;
-
 			const shouldUpdateColgroup =
 				isWidthChanged ||
 				isColumnsDistributed ||
@@ -451,7 +465,8 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				isTableWidthChanged ||
 				isTableDisplayModeChanged ||
 				isNumberColumnChanged ||
-				isNumberOfColumnsChanged;
+				isNumberOfColumnsChanged ||
+				isFullWidthModeAndLineLengthChanged;
 
 			const { tableWithFixedColumnWidthsOption = false } = getEditorFeatureFlags();
 
@@ -523,6 +538,11 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
 				});
 			}
 		}
+
+		if (isFullWidthModeAndLineLengthChanged) {
+			this.updateColGroupFromFullWidthChange = false;
+		}
+
 		this.tableNodeWidth = tableNodeWidth;
 		this.wasResizing = isResizing;
 		this.containerWidth = containerWidth;

package/src/nodeviews/table.tsx

@@ -19,6 +19,7 @@ import type { EditorState, PluginKey } from '@atlaskit/editor-prosemirror/state'
 import type { EditorView, NodeView } from '@atlaskit/editor-prosemirror/view';
 import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 
 import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
@@ -382,6 +383,10 @@ export const createTableView = (
 		isDragAndDropEnabled,
 		isTableScalingEnabled, // same as options.isTableScalingEnabled
 	} = getPluginState(view.state);
+
+	// Use shared state for isFullWidthModeEnabled and wasFullWidthModeEnabled for most up-to-date values
+	const tableState = pluginInjectionApi?.table?.sharedState.currentState();
+
 	const { allowColumnResizing, allowControls, allowTableResizing, allowTableAlignment } =
 		getPluginConfig(pluginConfig);
 
@@ -396,8 +401,12 @@ export const createTableView = (
 		eventDispatcher,
 		getPos: getPos as getPosHandlerNode,
 		options: {
-			isFullWidthModeEnabled,
-			wasFullWidthModeEnabled,
+			isFullWidthModeEnabled: fg('platform_editor_table_overflow_in_full_width_fix')
+				? tableState?.isFullWidthModeEnabled
+				: isFullWidthModeEnabled,
+			wasFullWidthModeEnabled: fg('platform_editor_table_overflow_in_full_width_fix')
+				? tableState?.wasFullWidthModeEnabled
+				: wasFullWidthModeEnabled,
 			isDragAndDropEnabled,
 			isTableScalingEnabled, // same as options.isTableScalingEnabled
 			isCommentEditor,

package/src/pm-plugins/commands/index.ts

@@ -1,3 +1,6 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 export {
 	hoverColumns,
 	hoverRows,

package/src/pm-plugins/plugin-key.ts

@@ -1,3 +1,6 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 import { PluginKey } from '@atlaskit/editor-prosemirror/state';
 
 import type { TablePluginState } from '../types';

package/src/types/index.ts

@@ -1,3 +1,6 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 import type { IntlShape } from 'react-intl-next';
 
 import type { TableLayout } from '@atlaskit/adf-schema';

package/src/ui/common-styles.ts

@@ -1,3 +1,6 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 /* eslint-disable @atlaskit/design-system/no-css-tagged-template-expression */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

package/src/ui/consts.ts

@@ -1,3 +1,6 @@
+/* eslint-disable @atlaskit/editor/no-re-export */
+// Entry file in package.json
+
 import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
 import {
 	akEditorTableBorder,