@atlaskit/editor-plugin-table 15.3.22 → 15.4.0
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 +15 -0
- package/dist/cjs/nodeviews/TableContainer.js +2 -1
- package/dist/cjs/nodeviews/TableResizer.js +3 -3
- package/dist/cjs/nodeviews/TableRow.js +15 -2
- package/dist/cjs/nodeviews/toDOM.js +1 -1
- package/dist/cjs/pm-plugins/commands/insert.js +7 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/consts.js +4 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/misc.js +2 -1
- package/dist/cjs/pm-plugins/table-width.js +7 -4
- package/dist/cjs/pm-plugins/utils/create.js +9 -3
- package/dist/cjs/pm-plugins/utils/snapping.js +10 -5
- package/dist/cjs/tablePlugin.js +8 -2
- package/dist/es2019/nodeviews/TableContainer.js +3 -2
- package/dist/es2019/nodeviews/TableResizer.js +4 -4
- package/dist/es2019/nodeviews/TableRow.js +15 -2
- package/dist/es2019/nodeviews/toDOM.js +2 -2
- package/dist/es2019/pm-plugins/commands/insert.js +6 -2
- package/dist/es2019/pm-plugins/table-resizing/utils/consts.js +3 -1
- package/dist/es2019/pm-plugins/table-resizing/utils/misc.js +3 -2
- package/dist/es2019/pm-plugins/table-width.js +9 -6
- package/dist/es2019/pm-plugins/utils/create.js +10 -4
- package/dist/es2019/pm-plugins/utils/snapping.js +11 -6
- package/dist/es2019/tablePlugin.js +8 -2
- package/dist/esm/nodeviews/TableContainer.js +3 -2
- package/dist/esm/nodeviews/TableResizer.js +4 -4
- package/dist/esm/nodeviews/TableRow.js +15 -2
- package/dist/esm/nodeviews/toDOM.js +2 -2
- package/dist/esm/pm-plugins/commands/insert.js +7 -2
- package/dist/esm/pm-plugins/table-resizing/utils/consts.js +3 -1
- package/dist/esm/pm-plugins/table-resizing/utils/misc.js +3 -2
- package/dist/esm/pm-plugins/table-width.js +9 -6
- package/dist/esm/pm-plugins/utils/create.js +10 -4
- package/dist/esm/pm-plugins/utils/snapping.js +11 -6
- package/dist/esm/tablePlugin.js +8 -2
- package/dist/types/pm-plugins/commands/insert.d.ts +3 -2
- package/dist/types/pm-plugins/table-resizing/utils/consts.d.ts +2 -1
- package/dist/types/pm-plugins/table-width.d.ts +1 -1
- package/dist/types/pm-plugins/utils/create.d.ts +2 -1
- package/dist/types/pm-plugins/utils/snapping.d.ts +1 -1
- package/dist/types/tablePluginType.d.ts +2 -0
- package/dist/types/types/index.d.ts +4 -2
- package/dist/types-ts4.5/pm-plugins/commands/insert.d.ts +3 -2
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/consts.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/table-width.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/utils/create.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/utils/snapping.d.ts +1 -1
- package/dist/types-ts4.5/tablePluginType.d.ts +2 -0
- package/dist/types-ts4.5/types/index.d.ts +4 -2
- package/package.json +13 -10
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 15.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`8f759171c089b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8f759171c089b) -
|
|
8
|
+
[EDITOR-3322] Make sure that tables are able to handle the new max-width
|
|
9
|
+
|
|
10
|
+
## 15.3.23
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- [`a05464ea42678`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a05464ea42678) -
|
|
15
|
+
EDITOR-2791 bump adf-schema
|
|
16
|
+
- Updated dependencies
|
|
17
|
+
|
|
3
18
|
## 15.3.22
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -15,6 +15,7 @@ var _hooks = require("@atlaskit/editor-common/hooks");
|
|
|
15
15
|
var _nodeWidth = require("@atlaskit/editor-common/node-width");
|
|
16
16
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
17
17
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
18
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
18
19
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
19
20
|
var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
|
|
20
21
|
var _pluginFactory = require("../pm-plugins/plugin-factory");
|
|
@@ -257,7 +258,7 @@ var ResizableTableContainer = exports.ResizableTableContainer = /*#__PURE__*/_re
|
|
|
257
258
|
|
|
258
259
|
// Ensure minimum width for usability while respecting container constraints
|
|
259
260
|
var width = Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300));
|
|
260
|
-
var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, _consts.TABLE_MAX_WIDTH);
|
|
261
|
+
var maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH);
|
|
261
262
|
return {
|
|
262
263
|
width: width,
|
|
263
264
|
maxResizerWidth: maxResizerWidth
|
|
@@ -306,8 +306,8 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
306
306
|
var fullWidthGuideline = (0, _guidelines.defaultGuidelinesForPreserveTable)(_guidelines.PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(function (guideline) {
|
|
307
307
|
return guideline.isFullWidth;
|
|
308
308
|
})[0];
|
|
309
|
-
var isFullWidthGuidelineActive = closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
|
|
310
|
-
var tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR) : _consts.TABLE_MAX_WIDTH;
|
|
309
|
+
var isFullWidthGuidelineActive = (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? closestSnap && fullWidthGuideline && closestSnap.keys.includes(fullWidthGuideline.key) : closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
|
|
310
|
+
var tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - _consts.TABLE_OFFSET_IN_COMMENT_EDITOR) : (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH;
|
|
311
311
|
var shouldUpdateWidthToWidest = isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
|
|
312
312
|
var previewParentWidth = isCommentEditor && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
|
|
313
313
|
(0, _scaleTable.previewScaleTable)(tableRef, {
|
|
@@ -335,7 +335,7 @@ var TableResizer = exports.TableResizer = function TableResizer(_ref) {
|
|
|
335
335
|
var pos = getPos();
|
|
336
336
|
var currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
|
|
337
337
|
var tableMaxWidth = isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
|
|
338
|
-
: _consts.TABLE_MAX_WIDTH;
|
|
338
|
+
: (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH;
|
|
339
339
|
newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
|
|
340
340
|
var tr = state.tr.setMeta(_tableWidth.pluginKey, {
|
|
341
341
|
resizing: false,
|
|
@@ -17,6 +17,7 @@ var _nesting = require("@atlaskit/editor-common/nesting");
|
|
|
17
17
|
var _nodeVisibility = require("@atlaskit/editor-common/node-visibility");
|
|
18
18
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
19
19
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
20
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
21
|
var _pluginFactory = require("../pm-plugins/plugin-factory");
|
|
21
22
|
var _pluginKey = require("../pm-plugins/plugin-key");
|
|
22
23
|
var _commands = require("../pm-plugins/sticky-headers/commands");
|
|
@@ -100,8 +101,20 @@ var TableRow = exports.default = /*#__PURE__*/function (_TableNodeView) {
|
|
|
100
101
|
}
|
|
101
102
|
var pos = _this.getPos();
|
|
102
103
|
_this.isInNestedTable = false;
|
|
103
|
-
if (
|
|
104
|
-
|
|
104
|
+
if ((0, _platformFeatureFlags.fg)('platform_editor_ai_aifc_patch_ga')) {
|
|
105
|
+
try {
|
|
106
|
+
// We cannot trust that the value from getPos will be defined
|
|
107
|
+
// https://discuss.prosemirror.net/t/getpos-is-undefined-in-nodeview-constructor/1246/4
|
|
108
|
+
// There are also scenarios where the value it brings back does not tally with the current doc
|
|
109
|
+
// E.g. when AI streaming brings in new content, this position brings back incorrect values that cannot be resolved
|
|
110
|
+
if (pos) {
|
|
111
|
+
_this.isInNestedTable = (0, _nesting.getParentOfTypeCount)(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
|
|
112
|
+
}
|
|
113
|
+
} catch (e) {}
|
|
114
|
+
} else {
|
|
115
|
+
if (pos) {
|
|
116
|
+
_this.isInNestedTable = (0, _nesting.getParentOfTypeCount)(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
|
|
117
|
+
}
|
|
105
118
|
}
|
|
106
119
|
if (_this.isHeaderRow) {
|
|
107
120
|
_this.dom.setAttribute('data-vc-nvs', 'true');
|
|
@@ -119,7 +119,7 @@ var tableNodeSpecWithFixedToDOM = exports.tableNodeSpecWithFixedToDOM = function
|
|
|
119
119
|
position: 'relative',
|
|
120
120
|
userSelect: 'auto',
|
|
121
121
|
boxSizing: 'border-box',
|
|
122
|
-
'--ak-editor-table-max-width': "".concat(_consts.TABLE_MAX_WIDTH, "px"),
|
|
122
|
+
'--ak-editor-table-max-width': "".concat((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH, "px"),
|
|
123
123
|
'--ak-editor-table-min-width': "".concat(tableMinWidth, "px"),
|
|
124
124
|
minWidth: 'var(--ak-editor-table-min-width)',
|
|
125
125
|
maxWidth: (0, _misc.getTableResizerContainerMaxWidthInCSS)(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),
|
|
@@ -163,12 +163,13 @@ var insertRow = exports.insertRow = function insertRow(row, moveCursorToTheNewRo
|
|
|
163
163
|
* @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
|
|
164
164
|
* (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
|
|
165
165
|
*/
|
|
166
|
-
var createTable = exports.createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
|
|
166
|
+
var createTable = exports.createTable = function createTable(isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, isMaxWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled) {
|
|
167
167
|
return function (state, dispatch) {
|
|
168
168
|
var table = (0, _create.createTableWithWidth)({
|
|
169
169
|
isTableScalingEnabled: isTableScalingEnabled,
|
|
170
170
|
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
171
171
|
isFullWidthModeEnabled: isFullWidthModeEnabled,
|
|
172
|
+
isMaxWidthModeEnabled: isMaxWidthModeEnabled,
|
|
172
173
|
isCommentEditor: isCommentEditor,
|
|
173
174
|
isChromelessEditor: isChromelessEditor,
|
|
174
175
|
isTableResizingEnabled: isTableResizingEnabled
|
|
@@ -197,13 +198,14 @@ var createTable = exports.createTable = function createTable(isTableScalingEnabl
|
|
|
197
198
|
* @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
|
|
198
199
|
* (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
|
|
199
200
|
*/
|
|
200
|
-
var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor) {
|
|
201
|
+
var insertTableWithSize = exports.insertTableWithSize = function insertTableWithSize(isFullWidthModeEnabled, isMaxWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor) {
|
|
201
202
|
return function (rowsCount, colsCount, inputMethod) {
|
|
202
203
|
return function (_ref) {
|
|
203
204
|
var tr = _ref.tr;
|
|
204
205
|
var tableNode = (0, _create.createTableWithWidth)({
|
|
205
206
|
isTableScalingEnabled: isTableScalingEnabled,
|
|
206
207
|
isFullWidthModeEnabled: isFullWidthModeEnabled,
|
|
208
|
+
isMaxWidthModeEnabled: isMaxWidthModeEnabled,
|
|
207
209
|
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
208
210
|
isCommentEditor: isCommentEditor,
|
|
209
211
|
isChromelessEditor: isChromelessEditor,
|
|
@@ -254,6 +256,8 @@ var insertTableWithNestingSupport = exports.insertTableWithNestingSupport = func
|
|
|
254
256
|
isTableAlignmentEnabled = _ref2$isTableAlignmen === void 0 ? false : _ref2$isTableAlignmen,
|
|
255
257
|
_ref2$isFullWidthMode = _ref2.isFullWidthModeEnabled,
|
|
256
258
|
isFullWidthModeEnabled = _ref2$isFullWidthMode === void 0 ? false : _ref2$isFullWidthMode,
|
|
259
|
+
_ref2$isMaxWidthModeE = _ref2.isMaxWidthModeEnabled,
|
|
260
|
+
isMaxWidthModeEnabled = _ref2$isMaxWidthModeE === void 0 ? false : _ref2$isMaxWidthModeE,
|
|
257
261
|
_ref2$isCommentEditor = _ref2.isCommentEditor,
|
|
258
262
|
isCommentEditor = _ref2$isCommentEditor === void 0 ? false : _ref2$isCommentEditor,
|
|
259
263
|
_ref2$isChromelessEdi = _ref2.isChromelessEditor,
|
|
@@ -289,6 +293,7 @@ var insertTableWithNestingSupport = exports.insertTableWithNestingSupport = func
|
|
|
289
293
|
isTableScalingEnabled: isTableScalingEnabled,
|
|
290
294
|
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
291
295
|
isFullWidthModeEnabled: isFullWidthModeEnabled,
|
|
296
|
+
isMaxWidthModeEnabled: isMaxWidthModeEnabled,
|
|
292
297
|
isCommentEditor: isCommentEditor,
|
|
293
298
|
isChromelessEditor: isChromelessEditor,
|
|
294
299
|
isTableResizingEnabled: isTableResizingEnabled,
|
|
@@ -3,9 +3,11 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.TABLE_OFFSET_IN_COMMENT_EDITOR = exports.TABLE_MAX_WIDTH = exports.TABLE_EDITOR_MARGIN = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT = exports.FULL_WIDTH_EDITOR_CONTENT_WIDTH = exports.COLUMN_MIN_WIDTH = void 0;
|
|
6
|
+
exports.TABLE_OFFSET_IN_COMMENT_EDITOR = exports.TABLE_MAX_WIDTH = exports.TABLE_FULL_WIDTH = exports.TABLE_EDITOR_MARGIN = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT = exports.FULL_WIDTH_EDITOR_CONTENT_WIDTH = exports.COLUMN_MIN_WIDTH = void 0;
|
|
7
7
|
var COLUMN_MIN_WIDTH = exports.COLUMN_MIN_WIDTH = 48;
|
|
8
|
-
|
|
8
|
+
// Remove TABLE_MAX_WIDTH_OLD when cleaning up editor_tinymce_full_width_mode experiment
|
|
9
|
+
var TABLE_FULL_WIDTH = exports.TABLE_FULL_WIDTH = 1800;
|
|
10
|
+
var TABLE_MAX_WIDTH = exports.TABLE_MAX_WIDTH = 4000;
|
|
9
11
|
var FULL_WIDTH_EDITOR_CONTENT_WIDTH = exports.FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
|
|
10
12
|
var MAX_SCALING_PERCENT = exports.MAX_SCALING_PERCENT = 0.3;
|
|
11
13
|
var MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = exports.MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
|
|
@@ -11,6 +11,7 @@ var _nodeWidth = require("@atlaskit/editor-common/node-width");
|
|
|
11
11
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
12
12
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
13
13
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
14
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
14
15
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
15
16
|
var _colgroup = require("./colgroup");
|
|
16
17
|
var _consts = require("./consts");
|
|
@@ -105,7 +106,7 @@ var getTableContainerElementWidth = exports.getTableContainerElementWidth = func
|
|
|
105
106
|
* @returns The CSS max-width value
|
|
106
107
|
*/
|
|
107
108
|
var getTableResizerContainerMaxWidthInCSS = exports.getTableResizerContainerMaxWidthInCSS = function getTableResizerContainerMaxWidthInCSS(isCommentEditor, isChromelessEditor, isTableScalingEnabled) {
|
|
108
|
-
var maxResizerWidthForNonCommentEditor = isTableScalingEnabled ? "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ".concat(_consts.TABLE_MAX_WIDTH, "px)") : "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ".concat(_consts.TABLE_MAX_WIDTH, "px)");
|
|
109
|
+
var maxResizerWidthForNonCommentEditor = isTableScalingEnabled ? "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ".concat((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH, "px)") : "min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ".concat((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH, "px)");
|
|
109
110
|
return isCommentEditor || isChromelessEditor ? '100%' : maxResizerWidthForNonCommentEditor;
|
|
110
111
|
};
|
|
111
112
|
|
|
@@ -12,6 +12,7 @@ var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
|
|
|
12
12
|
var _document = require("@atlaskit/editor-common/utils/document");
|
|
13
13
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
14
14
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
15
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
15
16
|
var _consts = require("./table-resizing/utils/consts");
|
|
16
17
|
var _alignment = require("./utils/alignment");
|
|
17
18
|
var _excluded = ["width"];
|
|
@@ -22,7 +23,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
22
23
|
* Also holds resizing state to hide / show table controls
|
|
23
24
|
*/
|
|
24
25
|
var pluginKey = exports.pluginKey = new _state.PluginKey('tableWidthPlugin');
|
|
25
|
-
var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) {
|
|
26
|
+
var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispatchAnalyticsEvent, fullWidthEnabled, maxWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) {
|
|
26
27
|
return new _safePlugin.SafePlugin({
|
|
27
28
|
key: pluginKey,
|
|
28
29
|
state: {
|
|
@@ -72,7 +73,9 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
|
|
|
72
73
|
var layout = node.attrs.layout;
|
|
73
74
|
if (!width && layout) {
|
|
74
75
|
var tableWidthCal;
|
|
75
|
-
if (
|
|
76
|
+
if (maxWidthEnabled) {
|
|
77
|
+
tableWidthCal = _editorSharedStyles.akEditorMaxWidthLayoutWidth;
|
|
78
|
+
} else if (fullWidthEnabled) {
|
|
76
79
|
tableWidthCal = _editorSharedStyles.akEditorFullWidthLayoutWidth;
|
|
77
80
|
} else {
|
|
78
81
|
switch (layout) {
|
|
@@ -106,8 +109,8 @@ var createPlugin = exports.createPlugin = function createPlugin(dispatch, dispat
|
|
|
106
109
|
step.getMap().forEach(function (_, __, newStart, newEnd) {
|
|
107
110
|
newState.doc.nodesBetween(newStart, newEnd, function (node, pos) {
|
|
108
111
|
if (node.type === table) {
|
|
109
|
-
if (shouldPatchTableWidth && node.attrs.width !== _consts.TABLE_MAX_WIDTH) {
|
|
110
|
-
tr.setNodeAttribute(pos, 'width', _consts.TABLE_MAX_WIDTH);
|
|
112
|
+
if (shouldPatchTableWidth && node.attrs.width !== (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH) {
|
|
113
|
+
tr.setNodeAttribute(pos, 'width', (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) ? _consts.TABLE_MAX_WIDTH : _consts.TABLE_FULL_WIDTH);
|
|
111
114
|
}
|
|
112
115
|
if (shouldPatchTableAlignment) {
|
|
113
116
|
tr.setNodeAttribute(pos, 'layout', _alignment.ALIGN_START);
|
|
@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.createTableWithWidth = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
10
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
10
11
|
var _consts = require("../table-resizing/utils/consts");
|
|
11
12
|
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; }
|
|
12
13
|
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; }
|
|
@@ -16,6 +17,7 @@ var createTableWithWidth = exports.createTableWithWidth = function createTableWi
|
|
|
16
17
|
var isTableScalingEnabled = _ref.isTableScalingEnabled,
|
|
17
18
|
isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
|
|
18
19
|
isFullWidthModeEnabled = _ref.isFullWidthModeEnabled,
|
|
20
|
+
isMaxWidthModeEnabled = _ref.isMaxWidthModeEnabled,
|
|
19
21
|
isCommentEditor = _ref.isCommentEditor,
|
|
20
22
|
isChromelessEditor = _ref.isChromelessEditor,
|
|
21
23
|
isTableResizingEnabled = _ref.isTableResizingEnabled,
|
|
@@ -27,10 +29,14 @@ var createTableWithWidth = exports.createTableWithWidth = function createTableWi
|
|
|
27
29
|
attrsOverrides.rowsCount = createTableProps !== null && createTableProps !== void 0 && createTableProps.rowsCount ? createTableProps === null || createTableProps === void 0 ? void 0 : createTableProps.rowsCount : NESTED_TABLE_DEFAULT_ROWS;
|
|
28
30
|
attrsOverrides.colsCount = createTableProps !== null && createTableProps !== void 0 && createTableProps.colsCount ? createTableProps === null || createTableProps === void 0 ? void 0 : createTableProps.colsCount : NESTED_TABLE_DEFAULT_COLS;
|
|
29
31
|
}
|
|
30
|
-
if (isTableScalingEnabled &&
|
|
31
|
-
|
|
32
|
+
if (isTableScalingEnabled && !isCommentEditor) {
|
|
33
|
+
if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) && isMaxWidthModeEnabled) {
|
|
34
|
+
attrsOverrides.tableWidth = _consts.TABLE_MAX_WIDTH;
|
|
35
|
+
} else if (isFullWidthModeEnabled) {
|
|
36
|
+
attrsOverrides.tableWidth = _consts.TABLE_FULL_WIDTH;
|
|
37
|
+
}
|
|
32
38
|
}
|
|
33
|
-
if (isTableAlignmentEnabled && (isFullWidthModeEnabled || isCommentEditor)) {
|
|
39
|
+
if (isTableAlignmentEnabled && (isFullWidthModeEnabled || (0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true) && isMaxWidthModeEnabled || isCommentEditor)) {
|
|
34
40
|
attrsOverrides.layout = 'align-start';
|
|
35
41
|
}
|
|
36
42
|
if (isCommentEditor && isTableResizingEnabled || isChromelessEditor) {
|
|
@@ -8,6 +8,7 @@ exports.findClosestSnap = exports.defaultTablePreserveSnappingWidths = exports.d
|
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
9
|
var _guideline = require("@atlaskit/editor-common/guideline");
|
|
10
10
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
11
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
11
12
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
12
13
|
var numberOfLanesInDefaultLayoutWidth = 12;
|
|
13
14
|
var calculateSubSnappingWidths = function calculateSubSnappingWidths(totalLanes, totalWidth) {
|
|
@@ -19,8 +20,8 @@ var calculateDefaultSnappings = exports.calculateDefaultSnappings = function cal
|
|
|
19
20
|
var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
20
21
|
return [].concat((0, _toConsumableArray2.default)(calculateSubSnappingWidths(numberOfLanesInDefaultLayoutWidth, _editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset)), [_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset, _editorSharedStyles.akEditorFullWidthLayoutWidth + lengthOffset]);
|
|
21
22
|
};
|
|
22
|
-
var getPadding = function getPadding(
|
|
23
|
-
return
|
|
23
|
+
var getPadding = function getPadding(editorContainerWidth) {
|
|
24
|
+
return editorContainerWidth <= _editorSharedStyles.akEditorFullPageNarrowBreakout && (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
|
|
24
25
|
exposure: true
|
|
25
26
|
}) ? _editorSharedStyles.akEditorGutterPaddingReduced : (0, _editorSharedStyles.akEditorGutterPaddingDynamic)();
|
|
26
27
|
};
|
|
@@ -28,14 +29,18 @@ var getPadding = function getPadding(editorContainerWith) {
|
|
|
28
29
|
// FF TablePreserve for calculateDefaultSnappings
|
|
29
30
|
var calculateDefaultTablePreserveSnappings = exports.calculateDefaultTablePreserveSnappings = function calculateDefaultTablePreserveSnappings() {
|
|
30
31
|
var lengthOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
|
|
31
|
-
var
|
|
32
|
+
var editorContainerWidth = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _editorSharedStyles.akEditorFullWidthLayoutWidth;
|
|
32
33
|
var exclude = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
|
|
33
34
|
innerGuidelines: false,
|
|
34
35
|
breakoutPoints: false
|
|
35
36
|
};
|
|
36
|
-
var padding = getPadding(
|
|
37
|
-
var dynamicFullWidthLine =
|
|
37
|
+
var padding = getPadding(editorContainerWidth);
|
|
38
|
+
var dynamicFullWidthLine = editorContainerWidth - padding * 2 >= _editorSharedStyles.akEditorFullWidthLayoutWidth ? _editorSharedStyles.akEditorFullWidthLayoutWidth : editorContainerWidth - padding * 2;
|
|
39
|
+
var dynamicMaxWidthLine = editorContainerWidth - padding * 2 >= _editorSharedStyles.akEditorMaxWidthLayoutWidth ? _editorSharedStyles.akEditorMaxWidthLayoutWidth : editorContainerWidth - padding * 2;
|
|
38
40
|
var guides = [dynamicFullWidthLine - lengthOffset];
|
|
41
|
+
if ((0, _expValEquals.expValEquals)('editor_tinymce_full_width_mode', 'isEnabled', true)) {
|
|
42
|
+
guides.push(dynamicMaxWidthLine - lengthOffset);
|
|
43
|
+
}
|
|
39
44
|
if (!exclude.breakoutPoints) {
|
|
40
45
|
guides.unshift(_editorSharedStyles.akEditorDefaultLayoutWidth + lengthOffset, _editorSharedStyles.akEditorCalculatedWideLayoutWidth + lengthOffset);
|
|
41
46
|
}
|
package/dist/cjs/tablePlugin.js
CHANGED
|
@@ -105,6 +105,8 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
105
105
|
var sharedStateInternal = {
|
|
106
106
|
isFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.fullWidthEnabled),
|
|
107
107
|
wasFullWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasFullWidthEnabled),
|
|
108
|
+
isMaxWidthModeEnabled: !!(options !== null && options !== void 0 && options.maxWidthEnabled),
|
|
109
|
+
wasMaxWidthModeEnabled: !!(options !== null && options !== void 0 && options.wasMaxWidthEnabled),
|
|
108
110
|
isHeaderRowEnabled: tablePluginState.isHeaderRowEnabled,
|
|
109
111
|
isHeaderColumnEnabled: tablePluginState.isHeaderColumnEnabled,
|
|
110
112
|
ordering: tablePluginState.ordering,
|
|
@@ -150,6 +152,7 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
150
152
|
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
|
|
151
153
|
isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
|
|
152
154
|
isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
|
|
155
|
+
isMaxWidthModeEnabled: options === null || options === void 0 ? void 0 : options.maxWidthEnabled,
|
|
153
156
|
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
|
|
154
157
|
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
|
|
155
158
|
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
|
|
@@ -160,6 +163,7 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
160
163
|
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
|
|
161
164
|
isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
|
|
162
165
|
isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
|
|
166
|
+
isMaxWidthModeEnabled: options === null || options === void 0 ? void 0 : options.maxWidthEnabled,
|
|
163
167
|
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
|
|
164
168
|
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
|
|
165
169
|
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
|
|
@@ -187,6 +191,7 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
187
191
|
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
|
|
188
192
|
isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
|
|
189
193
|
isFullWidthModeEnabled: options === null || options === void 0 ? void 0 : options.fullWidthEnabled,
|
|
194
|
+
isMaxWidthModeEnabled: options === null || options === void 0 ? void 0 : options.maxWidthEnabled,
|
|
190
195
|
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
|
|
191
196
|
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
|
|
192
197
|
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing,
|
|
@@ -384,10 +389,10 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
384
389
|
}, {
|
|
385
390
|
name: 'tableWidth',
|
|
386
391
|
plugin: function plugin(_ref13) {
|
|
387
|
-
var _options$fullWidthEna, _options$isTableScali, _options$tableOptions3, _options$isCommentEdi;
|
|
392
|
+
var _options$fullWidthEna, _options$maxWidthEnab, _options$isTableScali, _options$tableOptions3, _options$isCommentEdi;
|
|
388
393
|
var dispatchAnalyticsEvent = _ref13.dispatchAnalyticsEvent,
|
|
389
394
|
dispatch = _ref13.dispatch;
|
|
390
|
-
return options !== null && options !== void 0 && options.tableOptions.allowTableResizing ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$isTableScali = options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$tableOptions3 = options.tableOptions.allowTableResizing) !== null && _options$tableOptions3 !== void 0 ? _options$tableOptions3 : false, (_options$isCommentEdi = options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
|
|
395
|
+
return options !== null && options !== void 0 && options.tableOptions.allowTableResizing ? (0, _tableWidth.createPlugin)(dispatch, dispatchAnalyticsEvent, (_options$fullWidthEna = options.fullWidthEnabled) !== null && _options$fullWidthEna !== void 0 ? _options$fullWidthEna : false, (_options$maxWidthEnab = options.maxWidthEnabled) !== null && _options$maxWidthEnab !== void 0 ? _options$maxWidthEnab : false, (_options$isTableScali = options.isTableScalingEnabled) !== null && _options$isTableScali !== void 0 ? _options$isTableScali : false, (_options$tableOptions3 = options.tableOptions.allowTableResizing) !== null && _options$tableOptions3 !== void 0 ? _options$tableOptions3 : false, (_options$isCommentEdi = options.isCommentEditor) !== null && _options$isCommentEdi !== void 0 ? _options$isCommentEdi : false) : undefined;
|
|
391
396
|
}
|
|
392
397
|
}, {
|
|
393
398
|
name: 'tableWidthInCommentFix',
|
|
@@ -539,6 +544,7 @@ var tablePlugin = function tablePlugin(_ref) {
|
|
|
539
544
|
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
|
|
540
545
|
isTableAlignmentEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableAlignment,
|
|
541
546
|
isFullWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isFullWidthModeEnabled,
|
|
547
|
+
isMaxWidthModeEnabled: tableState === null || tableState === void 0 ? void 0 : tableState.isMaxWidthModeEnabled,
|
|
542
548
|
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor,
|
|
543
549
|
isChromelessEditor: options === null || options === void 0 ? void 0 : options.isChromelessEditor,
|
|
544
550
|
isTableResizingEnabled: options === null || options === void 0 ? void 0 : options.tableOptions.allowTableResizing
|
|
@@ -6,10 +6,11 @@ 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 { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
9
10
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
11
|
import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
|
|
11
12
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
12
|
-
import { TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
|
|
13
|
+
import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
|
|
13
14
|
import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
|
|
14
15
|
import { ALIGN_CENTER, ALIGN_START } from '../pm-plugins/utils/alignment';
|
|
15
16
|
import { TableCssClassName as ClassName } from '../types';
|
|
@@ -253,7 +254,7 @@ export const ResizableTableContainer = /*#__PURE__*/React.memo(({
|
|
|
253
254
|
|
|
254
255
|
// Ensure minimum width for usability while respecting container constraints
|
|
255
256
|
const width = Math.max(calculatedWidth, Math.min(responsiveContainerWidth * 0.5, 300));
|
|
256
|
-
const maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, TABLE_MAX_WIDTH);
|
|
257
|
+
const maxResizerWidth = isCommentEditor ? responsiveContainerWidth : Math.min(responsiveContainerWidth, expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH);
|
|
257
258
|
return {
|
|
258
259
|
width,
|
|
259
260
|
maxResizerWidth
|
|
@@ -21,7 +21,7 @@ import { setTableAlignmentWithTableContentWithPosWithAnalytics } from '../pm-plu
|
|
|
21
21
|
import { updateWidthToWidest } from '../pm-plugins/commands/misc';
|
|
22
22
|
import { META_KEYS } from '../pm-plugins/table-analytics';
|
|
23
23
|
import { getColgroupChildrenLength } from '../pm-plugins/table-resizing/utils/colgroup';
|
|
24
|
-
import { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
|
|
24
|
+
import { COLUMN_MIN_WIDTH, TABLE_MAX_WIDTH, TABLE_FULL_WIDTH, TABLE_OFFSET_IN_COMMENT_EDITOR } from '../pm-plugins/table-resizing/utils/consts';
|
|
25
25
|
import { previewScaleTable, scaleTable } from '../pm-plugins/table-resizing/utils/scale-table';
|
|
26
26
|
import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
|
|
27
27
|
import { ALIGN_CENTER, ALIGN_START, normaliseAlignment, shouldChangeAlignmentToCenterResized } from '../pm-plugins/utils/alignment';
|
|
@@ -299,8 +299,8 @@ export const TableResizer = ({
|
|
|
299
299
|
} = editorView;
|
|
300
300
|
const currentTableNodeLocalId = (_node$attrs$localId = node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.localId) !== null && _node$attrs$localId !== void 0 ? _node$attrs$localId : '';
|
|
301
301
|
const fullWidthGuideline = defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig).filter(guideline => guideline.isFullWidth)[0];
|
|
302
|
-
const isFullWidthGuidelineActive = closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
|
|
303
|
-
const tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR) : TABLE_MAX_WIDTH;
|
|
302
|
+
const isFullWidthGuidelineActive = expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? closestSnap && fullWidthGuideline && closestSnap.keys.includes(fullWidthGuideline.key) : closestSnap && closestSnap.keys.includes(fullWidthGuideline.key);
|
|
303
|
+
const tableMaxWidth = isCommentEditor ? Math.floor(containerWidth - TABLE_OFFSET_IN_COMMENT_EDITOR) : expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH;
|
|
304
304
|
const shouldUpdateWidthToWidest = isCommentEditor ? tableMaxWidth <= newWidth : !!isTableScalingEnabled && isFullWidthGuidelineActive;
|
|
305
305
|
const previewParentWidth = isCommentEditor && shouldUpdateWidthToWidest ? tableMaxWidth : newWidth;
|
|
306
306
|
previewScaleTable(tableRef, {
|
|
@@ -330,7 +330,7 @@ export const TableResizer = ({
|
|
|
330
330
|
const pos = getPos();
|
|
331
331
|
const currentTableNodeLocalId = (_node$attrs$localId2 = node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.localId) !== null && _node$attrs$localId2 !== void 0 ? _node$attrs$localId2 : '';
|
|
332
332
|
const tableMaxWidth = isCommentEditor ? undefined // Table's full-width in comment appearance inherit the width of the Editor/Renderer
|
|
333
|
-
: TABLE_MAX_WIDTH;
|
|
333
|
+
: expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH;
|
|
334
334
|
newWidth = widthToWidest && currentTableNodeLocalId && widthToWidest[currentTableNodeLocalId] ? tableMaxWidth : newWidth;
|
|
335
335
|
let tr = state.tr.setMeta(tableWidthPluginKey, {
|
|
336
336
|
resizing: false,
|
|
@@ -5,6 +5,7 @@ import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
|
|
|
5
5
|
import { nodeVisibilityManager } from '@atlaskit/editor-common/node-visibility';
|
|
6
6
|
import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
|
|
7
7
|
import { findParentNodeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
|
|
8
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
9
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
9
10
|
import { pluginKey as tablePluginKey } from '../pm-plugins/plugin-key';
|
|
10
11
|
import { updateStickyState } from '../pm-plugins/sticky-headers/commands';
|
|
@@ -85,8 +86,20 @@ export default class TableRow extends TableNodeView {
|
|
|
85
86
|
}
|
|
86
87
|
const pos = this.getPos();
|
|
87
88
|
this.isInNestedTable = false;
|
|
88
|
-
if (
|
|
89
|
-
|
|
89
|
+
if (fg('platform_editor_ai_aifc_patch_ga')) {
|
|
90
|
+
try {
|
|
91
|
+
// We cannot trust that the value from getPos will be defined
|
|
92
|
+
// https://discuss.prosemirror.net/t/getpos-is-undefined-in-nodeview-constructor/1246/4
|
|
93
|
+
// There are also scenarios where the value it brings back does not tally with the current doc
|
|
94
|
+
// E.g. when AI streaming brings in new content, this position brings back incorrect values that cannot be resolved
|
|
95
|
+
if (pos) {
|
|
96
|
+
this.isInNestedTable = getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
|
|
97
|
+
}
|
|
98
|
+
} catch (e) {}
|
|
99
|
+
} else {
|
|
100
|
+
if (pos) {
|
|
101
|
+
this.isInNestedTable = getParentOfTypeCount(view.state.schema.nodes.table)(view.state.doc.resolve(pos)) > 1;
|
|
102
|
+
}
|
|
90
103
|
}
|
|
91
104
|
if (this.isHeaderRow) {
|
|
92
105
|
this.dom.setAttribute('data-vc-nvs', 'true');
|
|
@@ -3,7 +3,7 @@ import { table, tableWithNestedTable } from '@atlaskit/adf-schema';
|
|
|
3
3
|
import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
|
|
4
4
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
5
5
|
import { generateColgroupFromNode, getResizerMinWidth } from '../pm-plugins/table-resizing/utils/colgroup';
|
|
6
|
-
import { TABLE_MAX_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
|
|
6
|
+
import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from '../pm-plugins/table-resizing/utils/consts';
|
|
7
7
|
import { getTableResizerContainerMaxWidthInCSS, getTableResizerContainerForFullPageWidthInCSS, getTableResizerItemWidthInCSS } from '../pm-plugins/table-resizing/utils/misc';
|
|
8
8
|
import { getAlignmentStyle } from './table-container-styles';
|
|
9
9
|
export const tableNodeSpecWithFixedToDOM = config => {
|
|
@@ -103,7 +103,7 @@ export const tableNodeSpecWithFixedToDOM = config => {
|
|
|
103
103
|
position: 'relative',
|
|
104
104
|
userSelect: 'auto',
|
|
105
105
|
boxSizing: 'border-box',
|
|
106
|
-
'--ak-editor-table-max-width': `${TABLE_MAX_WIDTH}px`,
|
|
106
|
+
'--ak-editor-table-max-width': `${expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH}px`,
|
|
107
107
|
'--ak-editor-table-min-width': `${tableMinWidth}px`,
|
|
108
108
|
minWidth: 'var(--ak-editor-table-min-width)',
|
|
109
109
|
maxWidth: getTableResizerContainerMaxWidthInCSS(config.isCommentEditor, config.isChromelessEditor, config.isTableScalingEnabled),
|
|
@@ -130,11 +130,12 @@ export const insertRow = (row, moveCursorToTheNewRow) => (state, dispatch) => {
|
|
|
130
130
|
* @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
|
|
131
131
|
* (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
|
|
132
132
|
*/
|
|
133
|
-
export const createTable = (isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled) => (state, dispatch) => {
|
|
133
|
+
export const createTable = (isTableScalingEnabled, isTableAlignmentEnabled, isFullWidthModeEnabled, isMaxWidthModeEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor, isTableResizingEnabled) => (state, dispatch) => {
|
|
134
134
|
const table = createTableWithWidth({
|
|
135
135
|
isTableScalingEnabled,
|
|
136
136
|
isTableAlignmentEnabled,
|
|
137
137
|
isFullWidthModeEnabled,
|
|
138
|
+
isMaxWidthModeEnabled,
|
|
138
139
|
isCommentEditor,
|
|
139
140
|
isChromelessEditor,
|
|
140
141
|
isTableResizingEnabled
|
|
@@ -162,13 +163,14 @@ export const createTable = (isTableScalingEnabled, isTableAlignmentEnabled, isFu
|
|
|
162
163
|
* @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
|
|
163
164
|
* (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
|
|
164
165
|
*/
|
|
165
|
-
export const insertTableWithSize = (isFullWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor) => (rowsCount, colsCount, inputMethod) => {
|
|
166
|
+
export const insertTableWithSize = (isFullWidthModeEnabled, isMaxWidthModeEnabled, isTableScalingEnabled, isTableAlignmentEnabled, editorAnalyticsAPI, isCommentEditor, isChromelessEditor) => (rowsCount, colsCount, inputMethod) => {
|
|
166
167
|
return ({
|
|
167
168
|
tr
|
|
168
169
|
}) => {
|
|
169
170
|
const tableNode = createTableWithWidth({
|
|
170
171
|
isTableScalingEnabled,
|
|
171
172
|
isFullWidthModeEnabled,
|
|
173
|
+
isMaxWidthModeEnabled,
|
|
172
174
|
isTableAlignmentEnabled,
|
|
173
175
|
isCommentEditor,
|
|
174
176
|
isChromelessEditor,
|
|
@@ -215,6 +217,7 @@ export const insertTableWithNestingSupport = ({
|
|
|
215
217
|
isTableScalingEnabled = false,
|
|
216
218
|
isTableAlignmentEnabled = false,
|
|
217
219
|
isFullWidthModeEnabled = false,
|
|
220
|
+
isMaxWidthModeEnabled = false,
|
|
218
221
|
isCommentEditor = false,
|
|
219
222
|
isChromelessEditor = false,
|
|
220
223
|
isTableResizingEnabled = false,
|
|
@@ -249,6 +252,7 @@ export const insertTableWithNestingSupport = ({
|
|
|
249
252
|
isTableScalingEnabled,
|
|
250
253
|
isTableAlignmentEnabled,
|
|
251
254
|
isFullWidthModeEnabled,
|
|
255
|
+
isMaxWidthModeEnabled,
|
|
252
256
|
isCommentEditor,
|
|
253
257
|
isChromelessEditor,
|
|
254
258
|
isTableResizingEnabled,
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
export const COLUMN_MIN_WIDTH = 48;
|
|
2
|
-
|
|
2
|
+
// Remove TABLE_MAX_WIDTH_OLD when cleaning up editor_tinymce_full_width_mode experiment
|
|
3
|
+
export const TABLE_FULL_WIDTH = 1800;
|
|
4
|
+
export const TABLE_MAX_WIDTH = 4000;
|
|
3
5
|
export const FULL_WIDTH_EDITOR_CONTENT_WIDTH = 1800;
|
|
4
6
|
export const MAX_SCALING_PERCENT = 0.3;
|
|
5
7
|
export const MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION = 0.4;
|
|
@@ -2,9 +2,10 @@ import { getParentNodeWidth, getTableContainerWidth, layoutToWidth } from '@atla
|
|
|
2
2
|
import { calcTableWidth } from '@atlaskit/editor-common/styles';
|
|
3
3
|
import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
|
|
4
4
|
import { akEditorFullWidthLayoutWidth, akEditorGutterPaddingDynamic, akEditorTableNumberColumnWidth, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
|
|
5
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
5
6
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
7
|
import { hasTableBeenResized, hasTableColumnBeenResized } from './colgroup';
|
|
7
|
-
import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION, TABLE_MAX_WIDTH } from './consts';
|
|
8
|
+
import { MAX_SCALING_PERCENT, MAX_SCALING_PERCENT_TABLES_WITH_FIXED_COLUMN_WIDTHS_OPTION, TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from './consts';
|
|
8
9
|
|
|
9
10
|
// Translates named layouts in number values.
|
|
10
11
|
export function getLayoutSize(tableLayout, containerWidth = 0, options) {
|
|
@@ -97,7 +98,7 @@ export const getTableContainerElementWidth = table => {
|
|
|
97
98
|
* @returns The CSS max-width value
|
|
98
99
|
*/
|
|
99
100
|
export const getTableResizerContainerMaxWidthInCSS = (isCommentEditor, isChromelessEditor, isTableScalingEnabled) => {
|
|
100
|
-
const maxResizerWidthForNonCommentEditor = isTableScalingEnabled ? `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${TABLE_MAX_WIDTH}px)` : `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ${TABLE_MAX_WIDTH}px)`;
|
|
101
|
+
const maxResizerWidthForNonCommentEditor = isTableScalingEnabled ? `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2)), ${expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH}px)` : `min(calc(100cqw - calc(var(--ak-editor--large-gutter-padding) * 2) - var(--ak-editor--resizer-handle-spacing)), ${expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH}px)`;
|
|
101
102
|
return isCommentEditor || isChromelessEditor ? '100%' : maxResizerWidthForNonCommentEditor;
|
|
102
103
|
};
|
|
103
104
|
|
|
@@ -8,11 +8,12 @@ import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
|
|
|
8
8
|
import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
|
|
9
9
|
import { isReplaceDocOperation } from '@atlaskit/editor-common/utils/document';
|
|
10
10
|
import { PluginKey } from '@atlaskit/editor-prosemirror/state';
|
|
11
|
-
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
12
|
-
import {
|
|
11
|
+
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth, akEditorWideLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
12
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
13
|
+
import { TABLE_MAX_WIDTH, TABLE_FULL_WIDTH } from './table-resizing/utils/consts';
|
|
13
14
|
import { ALIGN_START } from './utils/alignment';
|
|
14
15
|
export const pluginKey = new PluginKey('tableWidthPlugin');
|
|
15
|
-
const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
|
|
16
|
+
const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, maxWidthEnabled, isTableScalingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
|
|
16
17
|
return new SafePlugin({
|
|
17
18
|
key: pluginKey,
|
|
18
19
|
state: {
|
|
@@ -65,7 +66,9 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTabl
|
|
|
65
66
|
const layout = node.attrs.layout;
|
|
66
67
|
if (!width && layout) {
|
|
67
68
|
let tableWidthCal;
|
|
68
|
-
if (
|
|
69
|
+
if (maxWidthEnabled) {
|
|
70
|
+
tableWidthCal = akEditorMaxWidthLayoutWidth;
|
|
71
|
+
} else if (fullWidthEnabled) {
|
|
69
72
|
tableWidthCal = akEditorFullWidthLayoutWidth;
|
|
70
73
|
} else {
|
|
71
74
|
switch (layout) {
|
|
@@ -101,8 +104,8 @@ const createPlugin = (dispatch, dispatchAnalyticsEvent, fullWidthEnabled, isTabl
|
|
|
101
104
|
step.getMap().forEach((_, __, newStart, newEnd) => {
|
|
102
105
|
newState.doc.nodesBetween(newStart, newEnd, (node, pos) => {
|
|
103
106
|
if (node.type === table) {
|
|
104
|
-
if (shouldPatchTableWidth && node.attrs.width !== TABLE_MAX_WIDTH) {
|
|
105
|
-
tr.setNodeAttribute(pos, 'width', TABLE_MAX_WIDTH);
|
|
107
|
+
if (shouldPatchTableWidth && node.attrs.width !== expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH) {
|
|
108
|
+
tr.setNodeAttribute(pos, 'width', expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) ? TABLE_MAX_WIDTH : TABLE_FULL_WIDTH);
|
|
106
109
|
}
|
|
107
110
|
if (shouldPatchTableAlignment) {
|
|
108
111
|
tr.setNodeAttribute(pos, 'layout', ALIGN_START);
|