@atlaskit/editor-plugin-table 15.2.1 → 15.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/nodeviews/TableComponentLegacy.js +18 -34
- package/dist/cjs/nodeviews/TableComponentNext.js +19 -34
- package/dist/cjs/nodeviews/TableContainer.js +31 -215
- package/dist/cjs/nodeviews/TableResizer.js +3 -10
- package/dist/cjs/nodeviews/table.js +1 -2
- package/dist/cjs/nodeviews/toDOM.js +9 -27
- package/dist/cjs/pm-plugins/main.js +0 -31
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js +1 -2
- package/dist/cjs/ui/TableFloatingControls/NumberColumn/index.js +5 -8
- package/dist/es2019/nodeviews/TableComponentLegacy.js +9 -25
- package/dist/es2019/nodeviews/TableComponentNext.js +10 -25
- package/dist/es2019/nodeviews/TableContainer.js +9 -190
- package/dist/es2019/nodeviews/TableResizer.js +3 -10
- package/dist/es2019/nodeviews/table.js +1 -2
- package/dist/es2019/nodeviews/toDOM.js +9 -28
- package/dist/es2019/pm-plugins/main.js +1 -32
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js +1 -2
- package/dist/es2019/ui/TableFloatingControls/NumberColumn/index.js +2 -5
- package/dist/esm/nodeviews/TableComponentLegacy.js +18 -34
- package/dist/esm/nodeviews/TableComponentNext.js +19 -34
- package/dist/esm/nodeviews/TableContainer.js +31 -215
- package/dist/esm/nodeviews/TableResizer.js +3 -10
- package/dist/esm/nodeviews/table.js +1 -2
- package/dist/esm/nodeviews/toDOM.js +10 -28
- package/dist/esm/pm-plugins/main.js +1 -32
- package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js +1 -2
- package/dist/esm/ui/TableFloatingControls/NumberColumn/index.js +5 -8
- package/dist/types/nodeviews/TableContainer.d.ts +1 -3
- package/dist/types-ts4.5/nodeviews/TableContainer.d.ts +1 -3
- package/package.json +4 -4
|
@@ -11,9 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
11
11
|
var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
|
|
12
12
|
var _adfSchema = require("@atlaskit/adf-schema");
|
|
13
13
|
var _lazyNodeView = require("@atlaskit/editor-common/lazy-node-view");
|
|
14
|
-
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
15
14
|
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
16
|
-
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
17
15
|
var _colgroup = require("../pm-plugins/table-resizing/utils/colgroup");
|
|
18
16
|
var _consts = require("../pm-plugins/table-resizing/utils/consts");
|
|
19
17
|
var _misc = require("../pm-plugins/table-resizing/utils/misc");
|
|
@@ -24,16 +22,6 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
|
|
|
24
22
|
var tableNode = config.isNestingSupported ? _adfSchema.tableWithNestedTable : _adfSchema.table;
|
|
25
23
|
return _objectSpread(_objectSpread({}, tableNode), {}, {
|
|
26
24
|
toDOM: function toDOM(node) {
|
|
27
|
-
var _node$attrs$width;
|
|
28
|
-
var gutterPadding = function gutterPadding() {
|
|
29
|
-
if ((0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
|
|
30
|
-
exposure: true
|
|
31
|
-
})) {
|
|
32
|
-
return 'calc(var(--ak-editor--large-gutter-padding) * 2)';
|
|
33
|
-
} else {
|
|
34
|
-
return "".concat((0, _editorSharedStyles.akEditorGutterPaddingDynamic)() * 2, "px");
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
25
|
var alignmentStyle = Object.entries((0, _tableContainerStyles.getAlignmentStyle)(node.attrs.layout)).map(function (_ref) {
|
|
38
26
|
var _ref2 = (0, _slicedToArray2.default)(_ref, 2),
|
|
39
27
|
k = _ref2[0],
|
|
@@ -41,29 +29,23 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
|
|
|
41
29
|
return "".concat((0, _kebabCase.default)(k), ": ").concat((0, _kebabCase.default)(v));
|
|
42
30
|
}).join(';');
|
|
43
31
|
var tableMinWidth = (0, _colgroup.getResizerMinWidth)(node);
|
|
44
|
-
var tableWidthAttribute = node.attrs.width ? "".concat(node.attrs.width, "px") : "100%";
|
|
45
32
|
var isFullPageEditor = !config.isChromelessEditor && !config.isCommentEditor;
|
|
46
|
-
var attrs =
|
|
33
|
+
var attrs = {
|
|
47
34
|
'data-number-column': node.attrs.isNumberColumnEnabled,
|
|
48
35
|
'data-layout': node.attrs.layout,
|
|
49
36
|
'data-autosize': node.attrs.__autoSize,
|
|
50
37
|
'data-table-local-id': node.attrs.localId,
|
|
51
|
-
'data-table-width': node.attrs.width
|
|
52
|
-
}, (0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true) && {
|
|
38
|
+
'data-table-width': node.attrs.width,
|
|
53
39
|
'data-ssr-placeholder': "table-".concat(node.attrs.localId),
|
|
54
40
|
'data-ssr-placeholder-replace': "table-".concat(node.attrs.localId)
|
|
55
|
-
}
|
|
41
|
+
};
|
|
56
42
|
|
|
57
43
|
// This would be used for table scaling in colgroup CSS
|
|
58
44
|
// cqw, or px is well supported
|
|
59
|
-
var resizableTableWidth =
|
|
45
|
+
var resizableTableWidth = isFullPageEditor ? (0, _misc.getTableResizerContainerForFullPageWidthInCSS)(node, config.isTableScalingEnabled) : "calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))";
|
|
60
46
|
var colgroup = '';
|
|
61
47
|
if (config.allowColumnResizing) {
|
|
62
|
-
|
|
63
|
-
colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroupFromNode)(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
|
|
64
|
-
} else {
|
|
65
|
-
colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroup)(node)));
|
|
66
|
-
}
|
|
48
|
+
colgroup = ['colgroup', {}].concat((0, _toConsumableArray2.default)((0, _colgroup.generateColgroupFromNode)(node, config.isCommentEditor, config.isChromelessEditor, config.isNested, config.isTableScalingEnabled, config.shouldUseIncreasedScalingPercent)));
|
|
67
49
|
}
|
|
68
50
|
|
|
69
51
|
// For Chromeless editor, and nested tables in full page editor
|
|
@@ -112,7 +94,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
|
|
|
112
94
|
'data-testid': 'sticky-sentinel-bottom'
|
|
113
95
|
}]];
|
|
114
96
|
var tableContainerDiv = (0, _expValEquals.expValEquals)('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant1') || (0, _expValEquals.expValEquals)('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant2') || (0, _expValEquals.expValEquals)('platform_editor_disable_table_overflow_shadows', 'cohort', 'variant3') ? tableContainerDivNext : tableContainerDivLegacy;
|
|
115
|
-
if (!config.tableResizingEnabled ||
|
|
97
|
+
if (!config.tableResizingEnabled || config.isNested) {
|
|
116
98
|
return ['div', {
|
|
117
99
|
class: 'tableView-content-wrap',
|
|
118
100
|
'data-prosemirror-initial-toDOM-render': 'true',
|
|
@@ -129,7 +111,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
|
|
|
129
111
|
style: (0, _lazyNodeView.convertToInlineCss)({
|
|
130
112
|
'--ak-editor-table-gutter-padding': config.isTableScalingEnabled ? 'calc(var(--ak-editor--large-gutter-padding) * 2)' : 'calc(var(--ak-editor--large-gutter-padding) * 2 - var(--ak-editor-resizer-handle-spacing))',
|
|
131
113
|
'--ak-editor-table-width': resizableTableWidth,
|
|
132
|
-
width:
|
|
114
|
+
width: "var(--ak-editor-table-width)"
|
|
133
115
|
})
|
|
134
116
|
}, ['div', {
|
|
135
117
|
class: 'resizer-item display-handle',
|
|
@@ -140,8 +122,8 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
|
|
|
140
122
|
'--ak-editor-table-max-width': "".concat(_consts.TABLE_MAX_WIDTH, "px"),
|
|
141
123
|
'--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
|
|
142
124
|
minWidth: 'var(--ak-editor-table-min-width)',
|
|
143
|
-
maxWidth: (0,
|
|
144
|
-
width: (0,
|
|
125
|
+
maxWidth: (0, _misc.getTableResizerContainerMaxWidthInCSS)(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),
|
|
126
|
+
width: (0, _misc.getTableResizerItemWidthInCSS)(node, config.isCommentEditor, config.isChromelessEditor)
|
|
145
127
|
})
|
|
146
128
|
}, ['span', {
|
|
147
129
|
class: 'resizer-hover-zone'
|
|
@@ -15,7 +15,6 @@ var _utils2 = require("@atlaskit/editor-prosemirror/utils");
|
|
|
15
15
|
var _editorTables = require("@atlaskit/editor-tables");
|
|
16
16
|
var _utils3 = require("@atlaskit/editor-tables/utils");
|
|
17
17
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
19
18
|
var _tableNodeViews = require("../nodeviews/table-node-views");
|
|
20
19
|
var _plugin = require("../pm-plugins/decorations/plugin");
|
|
21
20
|
var _types = require("../types");
|
|
@@ -61,36 +60,6 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatchAnalytic
|
|
|
61
60
|
return editorView.state;
|
|
62
61
|
};
|
|
63
62
|
var getNodeView = function getNodeView() {
|
|
64
|
-
// Because the layout shift issues has been fixed under experiment platform_editor_tables_scaling_css, so still want to load nodeview on SSR if experiment is enabled
|
|
65
|
-
if ((0, _expValEquals.expValEquals)('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
66
|
-
return {
|
|
67
|
-
table: (0, _tableNodeViews.tableView)({
|
|
68
|
-
portalProviderAPI: portalProviderAPI,
|
|
69
|
-
eventDispatcher: eventDispatcher,
|
|
70
|
-
getEditorContainerWidth: getEditorContainerWidth,
|
|
71
|
-
getEditorFeatureFlags: getEditorFeatureFlags,
|
|
72
|
-
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
73
|
-
pluginInjectionApi: pluginInjectionApi,
|
|
74
|
-
isCommentEditor: isCommentEditor,
|
|
75
|
-
isChromelessEditor: isChromelessEditor
|
|
76
|
-
}),
|
|
77
|
-
tableRow: (0, _tableNodeViews.tableRowView)({
|
|
78
|
-
eventDispatcher: eventDispatcher,
|
|
79
|
-
pluginInjectionApi: pluginInjectionApi
|
|
80
|
-
}),
|
|
81
|
-
tableCell: (0, _tableNodeViews.tableCellView)({
|
|
82
|
-
eventDispatcher: eventDispatcher,
|
|
83
|
-
pluginInjectionApi: pluginInjectionApi
|
|
84
|
-
}),
|
|
85
|
-
tableHeader: (0, _tableNodeViews.tableHeaderView)({
|
|
86
|
-
eventDispatcher: eventDispatcher,
|
|
87
|
-
pluginInjectionApi: pluginInjectionApi
|
|
88
|
-
})
|
|
89
|
-
};
|
|
90
|
-
}
|
|
91
|
-
if ((0, _coreUtils.isSSR)()) {
|
|
92
|
-
return undefined;
|
|
93
|
-
}
|
|
94
63
|
return {
|
|
95
64
|
table: (0, _tableNodeViews.tableView)({
|
|
96
65
|
portalProviderAPI: portalProviderAPI,
|
|
@@ -9,7 +9,6 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
9
9
|
var _nodeWidth = require("@atlaskit/editor-common/node-width");
|
|
10
10
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
11
11
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
12
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
13
12
|
var _analytics = require("../../utils/analytics");
|
|
14
13
|
var _colgroup = require("./colgroup");
|
|
15
14
|
var _columnState = require("./column-state");
|
|
@@ -102,7 +101,7 @@ var getResizeState = exports.getResizeState = function getResizeState(_ref) {
|
|
|
102
101
|
|
|
103
102
|
// updates Colgroup DOM node with new widths
|
|
104
103
|
var updateColgroup = exports.updateColgroup = function updateColgroup(state, tableRef, tableNode, isTableScalingEnabled, scalePercent) {
|
|
105
|
-
var cols =
|
|
104
|
+
var cols = tableRef === null || tableRef === void 0 ? void 0 : tableRef.querySelectorAll(':scope > colgroup > col');
|
|
106
105
|
var columnsCount = cols === null || cols === void 0 ? void 0 : cols.length;
|
|
107
106
|
/**
|
|
108
107
|
updateColgroup will update whole table scale when click the column resize handle, this behavior will affect when table overflowed, when now resize handle been dragged and extend to make table overflowed, table will show overflow. This need to be confirmed because it conflict with how isTableScalingEnabled work.
|
|
@@ -17,14 +17,11 @@ var _classnames2 = _interopRequireDefault(require("classnames"));
|
|
|
17
17
|
var _coreUtils = require("@atlaskit/editor-common/core-utils");
|
|
18
18
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
19
19
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
20
|
-
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
21
20
|
var _commands = require("../../../pm-plugins/commands");
|
|
22
21
|
var _rowControls = require("../../../pm-plugins/utils/row-controls");
|
|
23
22
|
var _types = require("../../../types");
|
|
24
23
|
var _consts = require("../../consts");
|
|
25
24
|
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); }
|
|
26
|
-
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; }
|
|
27
|
-
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; }
|
|
28
25
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
29
26
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
30
27
|
// Ignored via go/ees005
|
|
@@ -113,7 +110,7 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
113
110
|
tableActive = _this$props5.tableActive,
|
|
114
111
|
updateCellHoverLocation = _this$props5.updateCellHoverLocation;
|
|
115
112
|
var rowHeights = (0, _rowControls.getRowHeights)(tableRef);
|
|
116
|
-
if ((0, _coreUtils.isSSR)()
|
|
113
|
+
if ((0, _coreUtils.isSSR)()) {
|
|
117
114
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
118
115
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
119
116
|
className: _types.TableCssClassName.NUMBERED_COLUMN,
|
|
@@ -132,15 +129,15 @@ var NumberColumn = exports.default = /*#__PURE__*/function (_Component) {
|
|
|
132
129
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
133
130
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
134
131
|
className: _types.TableCssClassName.NUMBERED_COLUMN,
|
|
135
|
-
style:
|
|
132
|
+
style: {
|
|
136
133
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
|
|
137
134
|
marginTop: hasHeaderRow && this.props.stickyTop !== undefined ? rowHeights[0] : undefined,
|
|
138
135
|
borderLeft:
|
|
139
136
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
140
|
-
isDragAndDropEnabled && tableActive ? "1px solid ".concat(_consts.tableBorderColor) : undefined
|
|
141
|
-
|
|
137
|
+
isDragAndDropEnabled && tableActive ? "1px solid ".concat(_consts.tableBorderColor) : undefined,
|
|
138
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
142
139
|
visibility: 'visible'
|
|
143
|
-
}
|
|
140
|
+
},
|
|
144
141
|
contentEditable: false
|
|
145
142
|
}, rowHeights.map(function (rowHeight, index) {
|
|
146
143
|
return isDragAndDropEnabled ?
|
|
@@ -364,7 +364,7 @@ class TableComponent extends React.Component {
|
|
|
364
364
|
isFullWidthModeAndLineLengthChanged
|
|
365
365
|
} = params;
|
|
366
366
|
const isFullPageEditor = !((_this$props$options = this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isCommentEditor) && !((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isChromelessEditor);
|
|
367
|
-
if (
|
|
367
|
+
if (isFullPageEditor) {
|
|
368
368
|
return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
369
369
|
}
|
|
370
370
|
return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
@@ -435,10 +435,8 @@ class TableComponent extends React.Component {
|
|
|
435
435
|
}
|
|
436
436
|
}
|
|
437
437
|
});
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
window.addEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
441
|
-
}
|
|
438
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
439
|
+
window.addEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
442
440
|
}
|
|
443
441
|
}
|
|
444
442
|
initialiseEventListenersAfterMount() {
|
|
@@ -448,9 +446,7 @@ class TableComponent extends React.Component {
|
|
|
448
446
|
allowTableResizing,
|
|
449
447
|
eventDispatcher,
|
|
450
448
|
isDragAndDropEnabled,
|
|
451
|
-
getNode
|
|
452
|
-
getEditorFeatureFlags,
|
|
453
|
-
isTableScalingEnabled
|
|
449
|
+
getNode
|
|
454
450
|
} = this.props;
|
|
455
451
|
|
|
456
452
|
// Ignored via go/ees005
|
|
@@ -464,17 +460,6 @@ class TableComponent extends React.Component {
|
|
|
464
460
|
// Ignored via go/ees005
|
|
465
461
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
466
462
|
this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.addEventListener('mouseover', this.handleMouseOver);
|
|
467
|
-
const {
|
|
468
|
-
tableWithFixedColumnWidthsOption = false
|
|
469
|
-
} = getEditorFeatureFlags();
|
|
470
|
-
if (!expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
471
|
-
if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
472
|
-
this.handleColgroupUpdates(true);
|
|
473
|
-
}
|
|
474
|
-
if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
|
|
475
|
-
this.handleColgroupUpdates(true);
|
|
476
|
-
}
|
|
477
|
-
}
|
|
478
463
|
if (this.wrapper) {
|
|
479
464
|
this.wrapperReisizeObserver = new ResizeObserver(entries => {
|
|
480
465
|
for (const entry of entries) {
|
|
@@ -569,10 +554,9 @@ class TableComponent extends React.Component {
|
|
|
569
554
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
570
555
|
window.removeEventListener('resize', this.handleWindowResizeDebounced);
|
|
571
556
|
}
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
}
|
|
557
|
+
|
|
558
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
559
|
+
window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
576
560
|
|
|
577
561
|
// Ignored via go/ees005
|
|
578
562
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -659,7 +643,7 @@ class TableComponent extends React.Component {
|
|
|
659
643
|
} = containerWidth;
|
|
660
644
|
const isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
|
|
661
645
|
const isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && fg('platform_editor_table_overflow_in_full_width_fix');
|
|
662
|
-
const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged ||
|
|
646
|
+
const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
|
|
663
647
|
if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
|
|
664
648
|
var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
|
|
665
649
|
const isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
|
|
@@ -774,7 +758,7 @@ class TableComponent extends React.Component {
|
|
|
774
758
|
shouldScale = true;
|
|
775
759
|
shouldHandleColgroupUpdates = true;
|
|
776
760
|
}
|
|
777
|
-
if (
|
|
761
|
+
if (this.state.windowResized) {
|
|
778
762
|
shouldHandleColgroupUpdates = true;
|
|
779
763
|
}
|
|
780
764
|
if (shouldHandleColgroupUpdates) {
|
|
@@ -297,7 +297,7 @@ class TableComponent extends React.Component {
|
|
|
297
297
|
isFullWidthModeAndLineLengthChanged
|
|
298
298
|
} = params;
|
|
299
299
|
const isFullPageEditor = !((_this$props$options = this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isCommentEditor) && !((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isChromelessEditor);
|
|
300
|
-
if (
|
|
300
|
+
if (isFullPageEditor) {
|
|
301
301
|
return !!isWindowResized || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
302
302
|
}
|
|
303
303
|
return isWidthChanged || isTableWidthChanged || isColumnsDistributed || !!isTableResizedFullWidth || isTableDisplayModeChanged || isNumberColumnChanged || isNumberOfColumnsChanged || !!isFullWidthModeAndLineLengthChanged;
|
|
@@ -366,10 +366,9 @@ class TableComponent extends React.Component {
|
|
|
366
366
|
}
|
|
367
367
|
}
|
|
368
368
|
});
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
}
|
|
369
|
+
|
|
370
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
371
|
+
window.addEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
373
372
|
}
|
|
374
373
|
}
|
|
375
374
|
initialiseEventListenersAfterMount() {
|
|
@@ -379,9 +378,7 @@ class TableComponent extends React.Component {
|
|
|
379
378
|
allowTableResizing,
|
|
380
379
|
eventDispatcher,
|
|
381
380
|
isDragAndDropEnabled,
|
|
382
|
-
getNode
|
|
383
|
-
getEditorFeatureFlags,
|
|
384
|
-
isTableScalingEnabled
|
|
381
|
+
getNode
|
|
385
382
|
} = this.props;
|
|
386
383
|
|
|
387
384
|
// Ignored via go/ees005
|
|
@@ -395,17 +392,6 @@ class TableComponent extends React.Component {
|
|
|
395
392
|
// Ignored via go/ees005
|
|
396
393
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
397
394
|
this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.addEventListener('mouseover', this.handleMouseOver);
|
|
398
|
-
const {
|
|
399
|
-
tableWithFixedColumnWidthsOption = false
|
|
400
|
-
} = getEditorFeatureFlags();
|
|
401
|
-
if (!expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true)) {
|
|
402
|
-
if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
403
|
-
this.handleColgroupUpdates(true);
|
|
404
|
-
}
|
|
405
|
-
if (isTableScalingEnabled && tableWithFixedColumnWidthsOption && getNode().attrs.displayMode !== 'fixed') {
|
|
406
|
-
this.handleColgroupUpdates(true);
|
|
407
|
-
}
|
|
408
|
-
}
|
|
409
395
|
if (this.wrapper) {
|
|
410
396
|
this.wrapperReisizeObserver = new ResizeObserver(entries => {
|
|
411
397
|
for (const entry of entries) {
|
|
@@ -496,10 +482,9 @@ class TableComponent extends React.Component {
|
|
|
496
482
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
497
483
|
window.removeEventListener('resize', this.handleWindowResizeDebounced);
|
|
498
484
|
}
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
}
|
|
485
|
+
|
|
486
|
+
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
487
|
+
window.removeEventListener('resize', this.handleWindowResizeNewDebounced);
|
|
503
488
|
|
|
504
489
|
// Ignored via go/ees005
|
|
505
490
|
// eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
|
|
@@ -583,7 +568,7 @@ class TableComponent extends React.Component {
|
|
|
583
568
|
} = containerWidth;
|
|
584
569
|
const isLineLengthChanged = ((_this$containerWidth = this.containerWidth) === null || _this$containerWidth === void 0 ? void 0 : _this$containerWidth.lineLength) !== containerLineLength;
|
|
585
570
|
const isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged && fg('platform_editor_table_overflow_in_full_width_fix');
|
|
586
|
-
const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged ||
|
|
571
|
+
const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
|
|
587
572
|
if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
|
|
588
573
|
var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
|
|
589
574
|
const isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
|
|
@@ -698,7 +683,7 @@ class TableComponent extends React.Component {
|
|
|
698
683
|
shouldScale = true;
|
|
699
684
|
shouldHandleColgroupUpdates = true;
|
|
700
685
|
}
|
|
701
|
-
if (
|
|
686
|
+
if (this.state.windowResized) {
|
|
702
687
|
shouldHandleColgroupUpdates = true;
|
|
703
688
|
}
|
|
704
689
|
if (shouldHandleColgroupUpdates) {
|
|
@@ -6,8 +6,6 @@ import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks'
|
|
|
6
6
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
7
7
|
import { akEditorDefaultLayoutWidth, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout, akEditorMobileBreakoutPoint } from '@atlaskit/editor-shared-styles';
|
|
8
8
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
|
-
import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
|
|
10
|
-
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
11
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
12
10
|
import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
|
|
13
11
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
@@ -79,8 +77,8 @@ const AlignmentTableContainer = ({
|
|
|
79
77
|
}, [alignment]);
|
|
80
78
|
return /*#__PURE__*/React.createElement("div", {
|
|
81
79
|
"data-testid": "table-alignment-container",
|
|
82
|
-
"data-ssr-placeholder":
|
|
83
|
-
"data-ssr-placeholder-replace":
|
|
80
|
+
"data-ssr-placeholder": `table-${node.attrs.localId}`,
|
|
81
|
+
"data-ssr-placeholder-replace": `table-${node.attrs.localId}`
|
|
84
82
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
85
83
|
,
|
|
86
84
|
style: style
|
|
@@ -97,8 +95,8 @@ const AlignmentTableContainerWrapper = ({
|
|
|
97
95
|
if (!isTableAlignmentEnabled) {
|
|
98
96
|
return /*#__PURE__*/React.createElement("div", {
|
|
99
97
|
"data-testid": "table-alignment-container",
|
|
100
|
-
"data-ssr-placeholder":
|
|
101
|
-
"data-ssr-placeholder-replace":
|
|
98
|
+
"data-ssr-placeholder": `table-${node.attrs.localId}`,
|
|
99
|
+
"data-ssr-placeholder-replace": `table-${node.attrs.localId}`,
|
|
102
100
|
style: {
|
|
103
101
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
104
102
|
display: 'flex',
|
|
@@ -123,7 +121,7 @@ const getPadding = containerWidth => {
|
|
|
123
121
|
exposure: true
|
|
124
122
|
}) ? akEditorGutterPaddingReduced : akEditorGutterPaddingDynamic();
|
|
125
123
|
};
|
|
126
|
-
const
|
|
124
|
+
export const ResizableTableContainer = /*#__PURE__*/React.memo(({
|
|
127
125
|
children,
|
|
128
126
|
className,
|
|
129
127
|
node,
|
|
@@ -140,8 +138,10 @@ const ResizableTableContainerLegacy = /*#__PURE__*/React.memo(({
|
|
|
140
138
|
isTableWithFixedColumnWidthsOptionEnabled,
|
|
141
139
|
isTableAlignmentEnabled,
|
|
142
140
|
shouldUseIncreasedScalingPercent,
|
|
143
|
-
isCommentEditor
|
|
141
|
+
isCommentEditor,
|
|
142
|
+
isChromelessEditor
|
|
144
143
|
}) => {
|
|
144
|
+
const tableWidth = getTableContainerWidth(node);
|
|
145
145
|
const containerRef = useRef(null);
|
|
146
146
|
const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
|
|
147
147
|
const [resizing, setIsResizing] = useState(false);
|
|
@@ -203,185 +203,6 @@ const ResizableTableContainerLegacy = /*#__PURE__*/React.memo(({
|
|
|
203
203
|
var _pluginInjectionApi$c, _pluginInjectionApi$c2, _pluginInjectionApi$s;
|
|
204
204
|
return (_pluginInjectionApi$c = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c2 = pluginInjectionApi.core) === null || _pluginInjectionApi$c2 === void 0 ? void 0 : _pluginInjectionApi$c2.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s = pluginInjectionApi.selection) === null || _pluginInjectionApi$s === void 0 ? void 0 : _pluginInjectionApi$s.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c !== void 0 ? _pluginInjectionApi$c : false;
|
|
205
205
|
}, [pluginInjectionApi]);
|
|
206
|
-
const tableWidth = getTableContainerWidth(node);
|
|
207
|
-
let responsiveContainerWidth = 0;
|
|
208
|
-
const resizeHandleSpacing = 12;
|
|
209
|
-
const padding = getPadding(containerWidth);
|
|
210
|
-
// When Full width editor enabled, a Mac OS user can change "ak-editor-content-area" width by
|
|
211
|
-
// updating Settings -> Appearance -> Show scroll bars from "When scrolling" to "Always". It causes
|
|
212
|
-
// issues when viwport width is less than full width Editor's width. To detect avoid them
|
|
213
|
-
// we need to use lineLength to defined responsiveWidth instead of containerWidth
|
|
214
|
-
// (which does not get updated when Mac setting changes) in Full-width editor.
|
|
215
|
-
if (isFullWidthModeEnabled) {
|
|
216
|
-
// When: Show scroll bars -> containerWidth = akEditorGutterPadding * 2 + lineLength;
|
|
217
|
-
// When: Always -> containerWidth = akEditorGutterPadding * 2 + lineLength + scrollbarWidth;
|
|
218
|
-
// scrollbarWidth can vary. Values can be 14, 15, 16 and up to 20px;
|
|
219
|
-
responsiveContainerWidth = isTableScalingEnabled ? lineLength : containerWidth - padding * 2 - resizeHandleSpacing;
|
|
220
|
-
|
|
221
|
-
// platform_editor_table_fw_numcol_overflow_fix:
|
|
222
|
-
// lineLength is undefined on first paint → width: NaN → wrapper expands to page
|
|
223
|
-
// width. rAF col-sizing then runs before the number-column padding and
|
|
224
|
-
// the final shrink, so column widths are locked in wrong.
|
|
225
|
-
// With the flag ON, if the value isn’t finite we fall back to gutterWidth
|
|
226
|
-
// for that first frame—no flash, no premature rAF.
|
|
227
|
-
//
|
|
228
|
-
// Type clean-up comes later:
|
|
229
|
-
// 1) ship this runtime guard (quick fix, no breakage);
|
|
230
|
-
// 2) TODO: widen lineLength to `number|undefined` and remove this block.
|
|
231
|
-
if (fg('platform_editor_table_fw_numcol_overflow_fix')) {
|
|
232
|
-
if (isTableScalingEnabled && !Number.isFinite(responsiveContainerWidth)) {
|
|
233
|
-
responsiveContainerWidth = containerWidth - padding * 2 - resizeHandleSpacing;
|
|
234
|
-
}
|
|
235
|
-
}
|
|
236
|
-
} else if (isCommentEditor) {
|
|
237
|
-
responsiveContainerWidth = containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR;
|
|
238
|
-
} else {
|
|
239
|
-
// 76 is currently an accepted padding value considering the spacing for resizer handle
|
|
240
|
-
// containerWidth = width of a DIV with test id="ak-editor-fp-content-area". It is a parent of
|
|
241
|
-
// a DIV with className="ak-editor-content-area". This DIV has padding left and padding right.
|
|
242
|
-
// padding left = padding right = akEditorGutterPadding = 32
|
|
243
|
-
responsiveContainerWidth = isTableScalingEnabled ? containerWidth - padding * 2 : containerWidth - padding * 2 - resizeHandleSpacing;
|
|
244
|
-
}
|
|
245
|
-
// Fix for HOT-119925: Ensure table width is properly constrained and responsive
|
|
246
|
-
// For wide tables, ensure they don't exceed container width and can be scrolled
|
|
247
|
-
const calculatedWidth = !node.attrs.width && isCommentEditor ? responsiveContainerWidth : Math.min(tableWidth, responsiveContainerWidth);
|
|
248
|
-
|
|
249
|
-
// Ensure minimum width for usability while respecting container constraints
|
|
250
|
-
const width = Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300));
|
|
251
|
-
if (!isResizing) {
|
|
252
|
-
tableWidthRef.current = width;
|
|
253
|
-
}
|
|
254
|
-
const maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
|
|
255
|
-
const tableResizerProps = {
|
|
256
|
-
width,
|
|
257
|
-
maxWidth: maxResizerWidth,
|
|
258
|
-
containerWidth,
|
|
259
|
-
lineLength,
|
|
260
|
-
updateWidth,
|
|
261
|
-
editorView,
|
|
262
|
-
getPos,
|
|
263
|
-
node,
|
|
264
|
-
tableRef,
|
|
265
|
-
displayGuideline,
|
|
266
|
-
attachAnalyticsEvent,
|
|
267
|
-
displayGapCursor,
|
|
268
|
-
isTableAlignmentEnabled,
|
|
269
|
-
isFullWidthModeEnabled,
|
|
270
|
-
isTableScalingEnabled,
|
|
271
|
-
isTableWithFixedColumnWidthsOptionEnabled,
|
|
272
|
-
isWholeTableInDanger,
|
|
273
|
-
shouldUseIncreasedScalingPercent,
|
|
274
|
-
pluginInjectionApi,
|
|
275
|
-
onResizeStart,
|
|
276
|
-
onResizeStop,
|
|
277
|
-
isCommentEditor
|
|
278
|
-
};
|
|
279
|
-
const isLivePageViewMode = mode === 'view';
|
|
280
|
-
return /*#__PURE__*/React.createElement(AlignmentTableContainerWrapper, {
|
|
281
|
-
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
282
|
-
node: node,
|
|
283
|
-
pluginInjectionApi: pluginInjectionApi,
|
|
284
|
-
getPos: getPos,
|
|
285
|
-
editorView: editorView
|
|
286
|
-
}, /*#__PURE__*/React.createElement("div", {
|
|
287
|
-
style: {
|
|
288
|
-
width: tableWidthRef.current,
|
|
289
|
-
height: resizing ? updateContainerHeight(tableWrapperHeight !== null && tableWrapperHeight !== void 0 ? tableWrapperHeight : 'auto') : 'auto',
|
|
290
|
-
position: isLivePageViewMode ? 'relative' : 'unset'
|
|
291
|
-
}
|
|
292
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
293
|
-
,
|
|
294
|
-
className: ClassName.TABLE_RESIZER_CONTAINER,
|
|
295
|
-
ref: containerRef
|
|
296
|
-
}, /*#__PURE__*/React.createElement(TableResizer, _extends({}, tableResizerProps, {
|
|
297
|
-
disabled: isLivePageViewMode
|
|
298
|
-
}), /*#__PURE__*/React.createElement(InnerContainer, {
|
|
299
|
-
className: className,
|
|
300
|
-
node: node
|
|
301
|
-
}, children))));
|
|
302
|
-
});
|
|
303
|
-
const ResizableTableContainerNext = /*#__PURE__*/React.memo(({
|
|
304
|
-
children,
|
|
305
|
-
className,
|
|
306
|
-
node,
|
|
307
|
-
containerWidth,
|
|
308
|
-
lineLength,
|
|
309
|
-
editorView,
|
|
310
|
-
getPos,
|
|
311
|
-
tableRef,
|
|
312
|
-
isResizing,
|
|
313
|
-
pluginInjectionApi,
|
|
314
|
-
tableWrapperHeight,
|
|
315
|
-
isWholeTableInDanger,
|
|
316
|
-
isTableScalingEnabled,
|
|
317
|
-
isTableWithFixedColumnWidthsOptionEnabled,
|
|
318
|
-
isTableAlignmentEnabled,
|
|
319
|
-
shouldUseIncreasedScalingPercent,
|
|
320
|
-
isCommentEditor,
|
|
321
|
-
isChromelessEditor
|
|
322
|
-
}) => {
|
|
323
|
-
const tableWidth = getTableContainerWidth(node);
|
|
324
|
-
const containerRef = useRef(null);
|
|
325
|
-
const tableWidthRef = useRef(akEditorDefaultLayoutWidth);
|
|
326
|
-
const [resizing, setIsResizing] = useState(false);
|
|
327
|
-
const {
|
|
328
|
-
tableState,
|
|
329
|
-
editorViewModeState
|
|
330
|
-
} = useSharedPluginStateWithSelector(pluginInjectionApi, ['table', 'editorViewMode'], selector);
|
|
331
|
-
const isFullWidthModeEnabled = tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled;
|
|
332
|
-
const mode = editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode;
|
|
333
|
-
const updateContainerHeight = useCallback(height => {
|
|
334
|
-
var _containerRef$current3;
|
|
335
|
-
// current StickyHeader State is not stable to be fetch.
|
|
336
|
-
// we need to update stickyHeader plugin to make sure state can be
|
|
337
|
-
// consistently fetch and refactor below
|
|
338
|
-
const stickyHeaders = (_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.getElementsByClassName('pm-table-sticky');
|
|
339
|
-
if (!stickyHeaders || stickyHeaders.length < 1) {
|
|
340
|
-
// when starting to drag, we need to keep the original space,
|
|
341
|
-
// -- When sticky header not appear, margin top(24px) and margin bottom(16px), should be 40px,
|
|
342
|
-
// 1px is border width but collapse make it 0.5.
|
|
343
|
-
// -- When sticky header appear, we should add first row height but reduce
|
|
344
|
-
// collapsed border
|
|
345
|
-
return typeof height === 'number' ? `${height + 40.5}px` : 'auto';
|
|
346
|
-
} else {
|
|
347
|
-
var _containerRef$current4;
|
|
348
|
-
const stickyHeaderHeight = ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.getElementsByTagName('th')[0].getBoundingClientRect().height) || 0;
|
|
349
|
-
return typeof height === 'number' ? `${height + stickyHeaderHeight + 39.5}px` : 'auto';
|
|
350
|
-
}
|
|
351
|
-
}, []);
|
|
352
|
-
const onResizeStart = useCallback(() => {
|
|
353
|
-
setIsResizing(true);
|
|
354
|
-
}, []);
|
|
355
|
-
const onResizeStop = useCallback(() => {
|
|
356
|
-
setIsResizing(false);
|
|
357
|
-
}, []);
|
|
358
|
-
const updateWidth = useCallback(width => {
|
|
359
|
-
if (!containerRef.current) {
|
|
360
|
-
return;
|
|
361
|
-
}
|
|
362
|
-
|
|
363
|
-
// make sure during resizing
|
|
364
|
-
// the pm-table-resizer-container width is the same as its child div resizer-item
|
|
365
|
-
// otherwise when resize table from wider to narrower , pm-table-resizer-container stays wider
|
|
366
|
-
// and cause the fabric-editor-popup-scroll-parent to overflow
|
|
367
|
-
if (containerRef.current.style.width !== `${width}px`) {
|
|
368
|
-
containerRef.current.style.width = `${width}px`;
|
|
369
|
-
}
|
|
370
|
-
}, []);
|
|
371
|
-
const displayGuideline = useCallback(guidelines => {
|
|
372
|
-
var _pluginInjectionApi$g4, _pluginInjectionApi$g5, _pluginInjectionApi$g6;
|
|
373
|
-
return (_pluginInjectionApi$g4 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$g5 = pluginInjectionApi.guideline) === null || _pluginInjectionApi$g5 === void 0 ? void 0 : (_pluginInjectionApi$g6 = _pluginInjectionApi$g5.actions) === null || _pluginInjectionApi$g6 === void 0 ? void 0 : _pluginInjectionApi$g6.displayGuideline(editorView)({
|
|
374
|
-
guidelines
|
|
375
|
-
})) !== null && _pluginInjectionApi$g4 !== void 0 ? _pluginInjectionApi$g4 : false;
|
|
376
|
-
}, [pluginInjectionApi, editorView]);
|
|
377
|
-
const attachAnalyticsEvent = useCallback(payload => {
|
|
378
|
-
var _pluginInjectionApi$a3;
|
|
379
|
-
return pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a3 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a3 === void 0 ? void 0 : _pluginInjectionApi$a3.actions.attachAnalyticsEvent(payload);
|
|
380
|
-
}, [pluginInjectionApi]);
|
|
381
|
-
const displayGapCursor = useCallback(toggle => {
|
|
382
|
-
var _pluginInjectionApi$c3, _pluginInjectionApi$c4, _pluginInjectionApi$s2;
|
|
383
|
-
return (_pluginInjectionApi$c3 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$c4 = pluginInjectionApi.core) === null || _pluginInjectionApi$c4 === void 0 ? void 0 : _pluginInjectionApi$c4.actions.execute(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$s2 = pluginInjectionApi.selection) === null || _pluginInjectionApi$s2 === void 0 ? void 0 : _pluginInjectionApi$s2.commands.displayGapCursor(toggle))) !== null && _pluginInjectionApi$c3 !== void 0 ? _pluginInjectionApi$c3 : false;
|
|
384
|
-
}, [pluginInjectionApi]);
|
|
385
206
|
const isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
|
|
386
207
|
const {
|
|
387
208
|
width,
|
|
@@ -512,7 +333,6 @@ const ResizableTableContainerNext = /*#__PURE__*/React.memo(({
|
|
|
512
333
|
node: node
|
|
513
334
|
}, children))));
|
|
514
335
|
});
|
|
515
|
-
export const ResizableTableContainer = componentWithCondition(() => expValEquals('platform_editor_tables_scaling_css', 'isEnabled', true), ResizableTableContainerNext, ResizableTableContainerLegacy);
|
|
516
336
|
export const TableContainer = ({
|
|
517
337
|
children,
|
|
518
338
|
node,
|
|
@@ -537,7 +357,6 @@ export const TableContainer = ({
|
|
|
537
357
|
isCommentEditor,
|
|
538
358
|
isChromelessEditor
|
|
539
359
|
}) => {
|
|
540
|
-
var _node$attrs$width;
|
|
541
360
|
if (isTableResizingEnabled && !isNested) {
|
|
542
361
|
return /*#__PURE__*/React.createElement(ResizableTableContainer
|
|
543
362
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -571,7 +390,7 @@ export const TableContainer = ({
|
|
|
571
390
|
isDragAndDropEnabled
|
|
572
391
|
} = getPluginState(editorView.state);
|
|
573
392
|
const isFullPageAppearance = !isCommentEditor && !isChromelessEditor;
|
|
574
|
-
const resizableTableWidth =
|
|
393
|
+
const resizableTableWidth = isFullPageAppearance ? getTableResizerContainerForFullPageWidthInCSS(node, isTableScalingEnabled) : `calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2))`;
|
|
575
394
|
return /*#__PURE__*/React.createElement(InnerContainer, {
|
|
576
395
|
node: node
|
|
577
396
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|