@atlaskit/editor-plugin-table 17.0.0 → 17.1.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 +17 -0
- package/dist/cjs/nodeviews/TableComponent.js +45 -47
- package/dist/cjs/nodeviews/TableComponentWithSharedState.js +3 -1
- package/dist/cjs/nodeviews/TableContainer.js +4 -4
- package/dist/cjs/nodeviews/TableResizer.js +3 -3
- package/dist/cjs/nodeviews/table-node-views.js +1 -1
- package/dist/cjs/nodeviews/table.js +15 -10
- package/dist/cjs/pm-plugins/commands/misc.js +10 -4
- package/dist/cjs/pm-plugins/main.js +3 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js +2 -2
- package/dist/cjs/tablePlugin.js +3 -3
- package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +2 -0
- package/dist/es2019/nodeviews/TableComponent.js +8 -10
- package/dist/es2019/nodeviews/TableComponentWithSharedState.js +3 -1
- package/dist/es2019/nodeviews/TableContainer.js +4 -4
- package/dist/es2019/nodeviews/TableResizer.js +3 -3
- package/dist/es2019/nodeviews/table-node-views.js +1 -1
- package/dist/es2019/nodeviews/table.js +13 -9
- package/dist/es2019/pm-plugins/commands/misc.js +10 -4
- package/dist/es2019/pm-plugins/main.js +3 -2
- package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +2 -2
- package/dist/es2019/tablePlugin.js +3 -3
- package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +2 -0
- package/dist/esm/nodeviews/TableComponent.js +45 -47
- package/dist/esm/nodeviews/TableComponentWithSharedState.js +3 -1
- package/dist/esm/nodeviews/TableContainer.js +4 -4
- package/dist/esm/nodeviews/TableResizer.js +3 -3
- package/dist/esm/nodeviews/table-node-views.js +1 -1
- package/dist/esm/nodeviews/table.js +15 -10
- package/dist/esm/pm-plugins/commands/misc.js +10 -4
- package/dist/esm/pm-plugins/main.js +3 -2
- package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js +2 -2
- package/dist/esm/tablePlugin.js +3 -3
- package/dist/esm/ui/FloatingDragMenu/DragMenu.js +2 -0
- package/dist/types/nodeviews/TableComponent.d.ts +1 -0
- package/dist/types/nodeviews/TableComponentWithSharedState.d.ts +2 -1
- package/dist/types/nodeviews/TableContainer.d.ts +4 -4
- package/dist/types/nodeviews/TableResizer.d.ts +2 -2
- package/dist/types/nodeviews/table-node-views.d.ts +1 -0
- package/dist/types/nodeviews/table.d.ts +1 -1
- package/dist/types/nodeviews/types.d.ts +1 -0
- package/dist/types/pm-plugins/main.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/utils/scale-table.d.ts +1 -1
- package/dist/types/tablePluginType.d.ts +6 -0
- package/dist/types/types/index.d.ts +1 -0
- package/dist/types-ts4.5/nodeviews/TableComponent.d.ts +1 -0
- package/dist/types-ts4.5/nodeviews/TableComponentWithSharedState.d.ts +2 -1
- package/dist/types-ts4.5/nodeviews/TableContainer.d.ts +4 -4
- package/dist/types-ts4.5/nodeviews/TableResizer.d.ts +2 -2
- package/dist/types-ts4.5/nodeviews/table-node-views.d.ts +1 -0
- package/dist/types-ts4.5/nodeviews/table.d.ts +1 -1
- package/dist/types-ts4.5/nodeviews/types.d.ts +1 -0
- package/dist/types-ts4.5/pm-plugins/main.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/scale-table.d.ts +1 -1
- package/dist/types-ts4.5/tablePluginType.d.ts +6 -0
- package/dist/types-ts4.5/types/index.d.ts +1 -0
- package/package.json +6 -3
|
@@ -5,6 +5,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
|
5
5
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
6
6
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
7
7
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
8
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
8
9
|
import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
|
|
9
10
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
10
11
|
import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
|
|
@@ -72,11 +73,12 @@ export default class TableView extends ReactNodeView {
|
|
|
72
73
|
}).toDOM(this.node);
|
|
73
74
|
const rendered = DOMSerializer.renderSpec(document, tableDOMStructure);
|
|
74
75
|
if (rendered.dom) {
|
|
75
|
-
var _this$
|
|
76
|
+
var _this$reactComponentP5, _this$getEditorFeatur, _this$options, _this$options2;
|
|
76
77
|
const tableElement = rendered.dom.querySelector('table');
|
|
77
78
|
this.table = tableElement ? tableElement : rendered.dom;
|
|
78
79
|
this.renderedDOM = rendered.dom;
|
|
79
|
-
|
|
80
|
+
const allowFixedColumnWidthOption = (fg('platform_editor_table_fixed_column_width_prop') ? (_this$reactComponentP5 = this.reactComponentProps) === null || _this$reactComponentP5 === void 0 ? void 0 : _this$reactComponentP5.allowFixedColumnWidthOption : (_this$getEditorFeatur = this.getEditorFeatureFlags) === null || _this$getEditorFeatur === void 0 ? void 0 : _this$getEditorFeatur.call(this).tableWithFixedColumnWidthsOption) || false;
|
|
81
|
+
if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && allowFixedColumnWidthOption && this.node.attrs.displayMode === 'fixed') {
|
|
80
82
|
const tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos(), this.reactComponentProps.allowTableResizing);
|
|
81
83
|
if (tableInlineWidth) {
|
|
82
84
|
handleInlineTableWidth(this.table, tableInlineWidth);
|
|
@@ -153,7 +155,7 @@ export default class TableView extends ReactNodeView {
|
|
|
153
155
|
}
|
|
154
156
|
}
|
|
155
157
|
setDomAttrs(node) {
|
|
156
|
-
var _this$
|
|
158
|
+
var _this$reactComponentP6, _this$getEditorFeatur2, _this$options3, _this$options4;
|
|
157
159
|
if (!this.table) {
|
|
158
160
|
return; // width / attribute application to actual table will happen later when table is set
|
|
159
161
|
}
|
|
@@ -163,9 +165,9 @@ export default class TableView extends ReactNodeView {
|
|
|
163
165
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
164
166
|
this.table.setAttribute(attr, attrs[attr]);
|
|
165
167
|
});
|
|
166
|
-
|
|
168
|
+
const isTableFixedColumnWidthsOptionEnabled = (fg('platform_editor_table_fixed_column_width_prop') ? (_this$reactComponentP6 = this.reactComponentProps) === null || _this$reactComponentP6 === void 0 ? void 0 : _this$reactComponentP6.allowFixedColumnWidthOption : (_this$getEditorFeatur2 = this.getEditorFeatureFlags) === null || _this$getEditorFeatur2 === void 0 ? void 0 : _this$getEditorFeatur2.call(this).tableWithFixedColumnWidthsOption) || false;
|
|
167
169
|
// Preserve Table Width cannot have inline width set on the table
|
|
168
|
-
if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled) || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.isTableScalingEnabled &&
|
|
170
|
+
if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled) || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && node.attrs.displayMode === 'fixed') {
|
|
169
171
|
var _tableWidthPluginKey$;
|
|
170
172
|
// handle inline style when table been resized
|
|
171
173
|
const tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos(), this.reactComponentProps.allowTableResizing);
|
|
@@ -189,7 +191,8 @@ export default class TableView extends ReactNodeView {
|
|
|
189
191
|
allowControls: props.allowControls,
|
|
190
192
|
getPos: props.getPos,
|
|
191
193
|
getEditorFeatureFlags: props.getEditorFeatureFlags,
|
|
192
|
-
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
|
|
194
|
+
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
|
|
195
|
+
allowFixedColumnWidthOption: props.allowFixedColumnWidthOption
|
|
193
196
|
});
|
|
194
197
|
}
|
|
195
198
|
viewShouldUpdate(nextNode) {
|
|
@@ -251,7 +254,7 @@ export default class TableView extends ReactNodeView {
|
|
|
251
254
|
super.destroy();
|
|
252
255
|
}
|
|
253
256
|
}
|
|
254
|
-
export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor) => {
|
|
257
|
+
export const createTableView = (node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) => {
|
|
255
258
|
var _pluginInjectionApi$t;
|
|
256
259
|
const {
|
|
257
260
|
pluginConfig,
|
|
@@ -267,7 +270,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
|
|
|
267
270
|
allowTableResizing,
|
|
268
271
|
allowTableAlignment
|
|
269
272
|
} = getPluginConfig(pluginConfig);
|
|
270
|
-
const isTableFixedColumnWidthsOptionEnabled = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().tableWithFixedColumnWidthsOption) || false;
|
|
273
|
+
const isTableFixedColumnWidthsOptionEnabled = (fg('platform_editor_table_fixed_column_width_prop') ? allowFixedColumnWidthOption : getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().tableWithFixedColumnWidthsOption) || false;
|
|
271
274
|
const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
|
|
272
275
|
return new TableView({
|
|
273
276
|
node,
|
|
@@ -292,6 +295,7 @@ export const createTableView = (node, view, getPos, portalProviderAPI, eventDisp
|
|
|
292
295
|
getEditorContainerWidth,
|
|
293
296
|
getEditorFeatureFlags,
|
|
294
297
|
dispatchAnalyticsEvent,
|
|
295
|
-
pluginInjectionApi
|
|
298
|
+
pluginInjectionApi,
|
|
299
|
+
allowFixedColumnWidthOption
|
|
296
300
|
}).init();
|
|
297
301
|
};
|
|
@@ -5,6 +5,7 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
5
5
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
6
6
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
7
7
|
import { findCellClosestToPos, findTable, getCellsInColumn, getCellsInRow, getSelectionRect, isSelectionType, isTableSelected, removeTable, selectColumns as selectColumnsTransform, selectColumn as selectColumnTransform, selectionCell, selectRows as selectRowsTransform, selectRow as selectRowTransform, setCellAttrs } from '@atlaskit/editor-tables/utils';
|
|
8
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
8
9
|
import { TableCssClassName as ClassName, TableDecorations } from '../../types';
|
|
9
10
|
import { getDecorations } from '../decorations/plugin';
|
|
10
11
|
import { buildColumnResizingDecorations, clearColumnResizingDecorations } from '../decorations/utils/column-resizing';
|
|
@@ -233,7 +234,7 @@ export const getTableElementMoveTypeBySlice = (slice, state) => {
|
|
|
233
234
|
const map = TableMap.get(currentTable.node);
|
|
234
235
|
const slicedMap = TableMap.get(slice.content.firstChild);
|
|
235
236
|
return map.width === slicedMap.width ? 'row' : map.height === slicedMap.height ? 'column' : undefined;
|
|
236
|
-
} catch
|
|
237
|
+
} catch {
|
|
237
238
|
return undefined;
|
|
238
239
|
}
|
|
239
240
|
};
|
|
@@ -373,11 +374,16 @@ export const setMultipleCellAttrs = (attrs, editorView) => (state, dispatch) =>
|
|
|
373
374
|
}
|
|
374
375
|
if (tr.docChanged && cursorPos !== undefined) {
|
|
375
376
|
if (dispatch) {
|
|
376
|
-
if (
|
|
377
|
+
if (expValEquals('platform_editor_table_cell_colour_change', 'isEnabled', true)) {
|
|
377
378
|
editorView === null || editorView === void 0 ? void 0 : editorView.focus();
|
|
378
|
-
|
|
379
|
+
dispatch(tr);
|
|
380
|
+
} else {
|
|
381
|
+
if (cursorPos !== undefined) {
|
|
382
|
+
editorView === null || editorView === void 0 ? void 0 : editorView.focus();
|
|
383
|
+
tr.setSelection(new TextSelection(tr.doc.resolve(cursorPos)));
|
|
384
|
+
}
|
|
385
|
+
dispatch(tr);
|
|
379
386
|
}
|
|
380
|
-
dispatch(tr);
|
|
381
387
|
}
|
|
382
388
|
return true;
|
|
383
389
|
}
|
|
@@ -24,7 +24,7 @@ import { fixTables } from './transforms/fix-tables';
|
|
|
24
24
|
import { replaceSelectedTable } from './transforms/replace-table';
|
|
25
25
|
import { findControlsHoverDecoration } from './utils/decoration';
|
|
26
26
|
import { transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable, transformSliceToRemoveNestedTables, isHeaderRowRequired, transformSliceTableLayoutDefaultToCenter } from './utils/paste';
|
|
27
|
-
export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) => {
|
|
27
|
+
export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) => {
|
|
28
28
|
var _accessibilityUtils;
|
|
29
29
|
const state = createPluginState(dispatch, {
|
|
30
30
|
pluginConfig,
|
|
@@ -63,7 +63,8 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
|
|
|
63
63
|
dispatchAnalyticsEvent,
|
|
64
64
|
pluginInjectionApi,
|
|
65
65
|
isCommentEditor,
|
|
66
|
-
isChromelessEditor
|
|
66
|
+
isChromelessEditor,
|
|
67
|
+
allowFixedColumnWidthOption
|
|
67
68
|
}),
|
|
68
69
|
tableRow: tableRowView({
|
|
69
70
|
eventDispatcher,
|
|
@@ -99,7 +99,7 @@ export function scaleTableTo(state, maxSize) {
|
|
|
99
99
|
}
|
|
100
100
|
return adjustColumnsWidths(newState, maxSize);
|
|
101
101
|
}
|
|
102
|
-
export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEnabled = false,
|
|
102
|
+
export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEnabled = false, allowFixedColumnWidthOption = false, isCommentEditor = false) => {
|
|
103
103
|
const {
|
|
104
104
|
node,
|
|
105
105
|
start,
|
|
@@ -114,7 +114,7 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
|
|
|
114
114
|
tableRef.style.width = `${width}px`;
|
|
115
115
|
}
|
|
116
116
|
let isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
|
|
117
|
-
const isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled &&
|
|
117
|
+
const isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && allowFixedColumnWidthOption;
|
|
118
118
|
if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
|
|
119
119
|
isTableScalingEnabledOnCurrentTable = isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
|
|
120
120
|
}
|
|
@@ -73,7 +73,7 @@ const tablePlugin = ({
|
|
|
73
73
|
};
|
|
74
74
|
};
|
|
75
75
|
const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
76
|
-
const isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 ? void 0 : (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
|
|
76
|
+
const isTableFixedColumnWidthsOptionEnabled = fg('platform_editor_table_fixed_column_width_prop') ? options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption : (options === null || options === void 0 ? void 0 : (_options$getEditorFea = options.getEditorFeatureFlags) === null || _options$getEditorFea === void 0 ? void 0 : _options$getEditorFea.call(options).tableWithFixedColumnWidthsOption) || false;
|
|
77
77
|
const shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
78
78
|
options === null || options === void 0 ? void 0 : options.isCommentEditor));
|
|
79
79
|
const isTableSelectorEnabled =
|
|
@@ -214,7 +214,7 @@ const tablePlugin = ({
|
|
|
214
214
|
} = pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions);
|
|
215
215
|
// TODO: ED-25901 - We need to move this into a plugin config option so we don't accidentally enable nested nodes in Jira
|
|
216
216
|
const isNestingSupported = Boolean(options === null || options === void 0 ? void 0 : (_options$tableOptions2 = options.tableOptions) === null || _options$tableOptions2 === void 0 ? void 0 : _options$tableOptions2.allowNestedTables);
|
|
217
|
-
const isTableFixedColumnWidthsOptionEnabled = (options === null || options === void 0 ? void 0 : (_options$getEditorFea3 = options.getEditorFeatureFlags) === null || _options$getEditorFea3 === void 0 ? void 0 : _options$getEditorFea3.call(options).tableWithFixedColumnWidthsOption) || false;
|
|
217
|
+
const isTableFixedColumnWidthsOptionEnabled = (fg('platform_editor_table_fixed_column_width_prop') ? options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption : options === null || options === void 0 ? void 0 : (_options$getEditorFea3 = options.getEditorFeatureFlags) === null || _options$getEditorFea3 === void 0 ? void 0 : _options$getEditorFea3.call(options).tableWithFixedColumnWidthsOption) || false;
|
|
218
218
|
const shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
219
219
|
options === null || options === void 0 ? void 0 : options.isCommentEditor));
|
|
220
220
|
const isTableScalingEnabled = options === null || options === void 0 ? void 0 : options.isTableScalingEnabled;
|
|
@@ -285,7 +285,7 @@ const tablePlugin = ({
|
|
|
285
285
|
isCommentEditor,
|
|
286
286
|
isChromelessEditor
|
|
287
287
|
} = options || {};
|
|
288
|
-
return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor);
|
|
288
|
+
return createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig(tableOptions), defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, getIntl, fullWidthEnabled, wasFullWidthEnabled, dragAndDropEnabled, editorAnalyticsAPI, api, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption);
|
|
289
289
|
}
|
|
290
290
|
}, {
|
|
291
291
|
name: 'tablePMColResizing',
|
|
@@ -462,6 +462,8 @@ const DragMenu = /*#__PURE__*/React.memo(({
|
|
|
462
462
|
if (shouldCloseMenu(state)) {
|
|
463
463
|
if (target && focusTarget === 'handle') {
|
|
464
464
|
target === null || target === void 0 ? void 0 : target.focus();
|
|
465
|
+
} else if (expValEquals('platform_editor_table_cell_colour_change', 'isEnabled', true)) {
|
|
466
|
+
editorView.focus();
|
|
465
467
|
} else {
|
|
466
468
|
editorView.dom.focus();
|
|
467
469
|
}
|
|
@@ -24,6 +24,7 @@ import { getParentNodeWidth, getTableContainerWidth } from '@atlaskit/editor-com
|
|
|
24
24
|
import { isValidPosition } from '@atlaskit/editor-common/utils';
|
|
25
25
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
26
26
|
import { isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
27
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
27
28
|
import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
|
|
28
29
|
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
29
30
|
import { autoSizeTable, clearHoverSelection, setTableRef } from '../pm-plugins/commands';
|
|
@@ -601,7 +602,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
601
602
|
var isFullWidthModeAndLineLengthChanged = this.updateColGroupFromFullWidthChange && isLineLengthChanged;
|
|
602
603
|
var maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth && !(options !== null && options !== void 0 && options.isCommentEditor) || isNumberColumnChanged || isNumberOfColumnsChanged || this.state.windowResized;
|
|
603
604
|
if (force || maybeScale || isFullWidthModeAndLineLengthChanged) {
|
|
604
|
-
var _this$containerWidth2, _this$props$options3, _this$props$options4, _this$props$options5;
|
|
605
|
+
var _this$containerWidth2, _this$props0, _getEditorFeatureFlag, _this$props$options3, _this$props$options4, _this$props$options5;
|
|
605
606
|
var isWidthChanged = ((_this$containerWidth2 = this.containerWidth) === null || _this$containerWidth2 === void 0 ? void 0 : _this$containerWidth2.width) !== containerWidthValue;
|
|
606
607
|
var wasTableResized = hasTableBeenResized(this.node);
|
|
607
608
|
var isTableResized = hasTableBeenResized(tableNode);
|
|
@@ -619,9 +620,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
619
620
|
isFullWidthModeAndLineLengthChanged: isFullWidthModeAndLineLengthChanged,
|
|
620
621
|
isTableResized: isTableResized
|
|
621
622
|
});
|
|
622
|
-
var _getEditorFeatureFlag = getEditorFeatureFlags()
|
|
623
|
-
_getEditorFeatureFlag2 = _getEditorFeatureFlag.tableWithFixedColumnWidthsOption,
|
|
624
|
-
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag2 === void 0 ? false : _getEditorFeatureFlag2;
|
|
623
|
+
var tableWithFixedColumnWidthsOption = (fg('platform_editor_table_fixed_column_width_prop') ? (_this$props0 = this.props) === null || _this$props0 === void 0 ? void 0 : _this$props0.allowFixedColumnWidthOption : (_getEditorFeatureFlag = getEditorFeatureFlags()) === null || _getEditorFeatureFlag === void 0 ? void 0 : _getEditorFeatureFlag.tableWithFixedColumnWidthsOption) || false;
|
|
625
624
|
var isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
|
|
626
625
|
var shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled || !!((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isTableScalingEnabled) && !!((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isCommentEditor);
|
|
627
626
|
if (force || !isResizing && shouldUpdateColgroup) {
|
|
@@ -686,22 +685,21 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
686
685
|
}, {
|
|
687
686
|
key: "componentDidUpdate",
|
|
688
687
|
value: function componentDidUpdate(_, prevState) {
|
|
689
|
-
var _this$props$options0, _this$props$options1;
|
|
690
|
-
var _this$
|
|
691
|
-
getNode = _this$
|
|
692
|
-
isMediaFullscreen = _this$
|
|
693
|
-
allowColumnResizing = _this$
|
|
694
|
-
allowTableResizing = _this$
|
|
695
|
-
isResizing = _this$
|
|
696
|
-
options = _this$
|
|
697
|
-
isTableScalingEnabled = _this$
|
|
698
|
-
getPos = _this$
|
|
699
|
-
getEditorFeatureFlags = _this$
|
|
688
|
+
var _getEditorFeatureFlag2, _this$props$options0, _this$props$options1;
|
|
689
|
+
var _this$props1 = this.props,
|
|
690
|
+
getNode = _this$props1.getNode,
|
|
691
|
+
isMediaFullscreen = _this$props1.isMediaFullscreen,
|
|
692
|
+
allowColumnResizing = _this$props1.allowColumnResizing,
|
|
693
|
+
allowTableResizing = _this$props1.allowTableResizing,
|
|
694
|
+
isResizing = _this$props1.isResizing,
|
|
695
|
+
options = _this$props1.options,
|
|
696
|
+
isTableScalingEnabled = _this$props1.isTableScalingEnabled,
|
|
697
|
+
getPos = _this$props1.getPos,
|
|
698
|
+
getEditorFeatureFlags = _this$props1.getEditorFeatureFlags,
|
|
699
|
+
allowFixedColumnWidthOption = _this$props1.allowFixedColumnWidthOption;
|
|
700
700
|
var shouldScale = false;
|
|
701
701
|
var shouldHandleColgroupUpdates = false;
|
|
702
|
-
var
|
|
703
|
-
_getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
|
|
704
|
-
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
|
|
702
|
+
var tableWithFixedColumnWidthsOption = (fg('platform_editor_table_fixed_column_width_prop') ? allowFixedColumnWidthOption : (_getEditorFeatureFlag2 = getEditorFeatureFlags()) === null || _getEditorFeatureFlag2 === void 0 ? void 0 : _getEditorFeatureFlag2.tableWithFixedColumnWidthsOption) || false;
|
|
705
703
|
if (isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
706
704
|
shouldScale = true;
|
|
707
705
|
shouldHandleColgroupUpdates = true;
|
|
@@ -764,31 +762,31 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
764
762
|
value: function render() {
|
|
765
763
|
var _this5 = this,
|
|
766
764
|
_this$props$options10;
|
|
767
|
-
var _this$
|
|
768
|
-
view = _this$
|
|
769
|
-
getNode = _this$
|
|
770
|
-
isResizing = _this$
|
|
771
|
-
_this$
|
|
772
|
-
allowControls = _this$
|
|
773
|
-
isHeaderRowEnabled = _this$
|
|
774
|
-
ordering = _this$
|
|
775
|
-
isHeaderColumnEnabled = _this$
|
|
776
|
-
tableActive = _this$
|
|
777
|
-
containerWidth = _this$
|
|
778
|
-
options = _this$
|
|
779
|
-
getPos = _this$
|
|
780
|
-
pluginInjectionApi = _this$
|
|
781
|
-
isDragAndDropEnabled = _this$
|
|
782
|
-
getEditorFeatureFlags = _this$
|
|
783
|
-
isTableScalingEnabled = _this$
|
|
784
|
-
allowTableResizing = _this$
|
|
785
|
-
allowTableAlignment = _this$
|
|
786
|
-
selection = _this$
|
|
787
|
-
isInDanger = _this$
|
|
788
|
-
hoveredRows = _this$
|
|
789
|
-
hoveredCell = _this$
|
|
790
|
-
isTableHovered = _this$
|
|
791
|
-
isWholeTableInDanger = _this$
|
|
765
|
+
var _this$props10 = this.props,
|
|
766
|
+
view = _this$props10.view,
|
|
767
|
+
getNode = _this$props10.getNode,
|
|
768
|
+
isResizing = _this$props10.isResizing,
|
|
769
|
+
_this$props10$allowCo = _this$props10.allowControls,
|
|
770
|
+
allowControls = _this$props10$allowCo === void 0 ? true : _this$props10$allowCo,
|
|
771
|
+
isHeaderRowEnabled = _this$props10.isHeaderRowEnabled,
|
|
772
|
+
ordering = _this$props10.ordering,
|
|
773
|
+
isHeaderColumnEnabled = _this$props10.isHeaderColumnEnabled,
|
|
774
|
+
tableActive = _this$props10.tableActive,
|
|
775
|
+
containerWidth = _this$props10.containerWidth,
|
|
776
|
+
options = _this$props10.options,
|
|
777
|
+
getPos = _this$props10.getPos,
|
|
778
|
+
pluginInjectionApi = _this$props10.pluginInjectionApi,
|
|
779
|
+
isDragAndDropEnabled = _this$props10.isDragAndDropEnabled,
|
|
780
|
+
getEditorFeatureFlags = _this$props10.getEditorFeatureFlags,
|
|
781
|
+
isTableScalingEnabled = _this$props10.isTableScalingEnabled,
|
|
782
|
+
allowTableResizing = _this$props10.allowTableResizing,
|
|
783
|
+
allowTableAlignment = _this$props10.allowTableAlignment,
|
|
784
|
+
selection = _this$props10.selection,
|
|
785
|
+
isInDanger = _this$props10.isInDanger,
|
|
786
|
+
hoveredRows = _this$props10.hoveredRows,
|
|
787
|
+
hoveredCell = _this$props10.hoveredCell,
|
|
788
|
+
isTableHovered = _this$props10.isTableHovered,
|
|
789
|
+
isWholeTableInDanger = _this$props10.isWholeTableInDanger;
|
|
792
790
|
var node = getNode();
|
|
793
791
|
var tableRef = this.table || undefined;
|
|
794
792
|
var headerRow = tableRef ? tableRef.querySelector('tr[data-header-row]') : undefined;
|
|
@@ -862,9 +860,9 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
862
860
|
tablePos = undefined;
|
|
863
861
|
}
|
|
864
862
|
var isNested = isTableNested(view.state, tablePos);
|
|
865
|
-
var
|
|
866
|
-
|
|
867
|
-
tableWithFixedColumnWidthsOption =
|
|
863
|
+
var _getEditorFeatureFlag3 = getEditorFeatureFlags(),
|
|
864
|
+
_getEditorFeatureFlag4 = _getEditorFeatureFlag3.tableWithFixedColumnWidthsOption,
|
|
865
|
+
tableWithFixedColumnWidthsOption = _getEditorFeatureFlag4 === void 0 ? false : _getEditorFeatureFlag4;
|
|
868
866
|
var shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption || !!((_this$props$options10 = this.props.options) !== null && _this$props$options10 !== void 0 && _this$props$options10.isCommentEditor));
|
|
869
867
|
return /*#__PURE__*/React.createElement(TableContainer
|
|
870
868
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
@@ -884,7 +882,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
|
|
|
884
882
|
isTableResizingEnabled: allowTableResizing,
|
|
885
883
|
isResizing: isResizing,
|
|
886
884
|
isTableScalingEnabled: isTableScalingEnabled,
|
|
887
|
-
|
|
885
|
+
allowFixedColumnWidthOption: tableWithFixedColumnWidthsOption,
|
|
888
886
|
isWholeTableInDanger: isWholeTableInDanger,
|
|
889
887
|
isTableAlignmentEnabled: allowTableAlignment,
|
|
890
888
|
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
|
|
@@ -22,7 +22,8 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
|
|
|
22
22
|
getPos = _ref.getPos,
|
|
23
23
|
forwardRef = _ref.forwardRef,
|
|
24
24
|
allowTableAlignment = _ref.allowTableAlignment,
|
|
25
|
-
allowTableResizing = _ref.allowTableResizing
|
|
25
|
+
allowTableResizing = _ref.allowTableResizing,
|
|
26
|
+
allowFixedColumnWidthOption = _ref.allowFixedColumnWidthOption;
|
|
26
27
|
var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['table', 'width', 'media', 'selection', 'editorViewMode', 'interaction'], function (states) {
|
|
27
28
|
var _states$tableState, _states$tableState2, _states$tableState3, _states$tableState4, _states$tableState5, _states$tableState6, _states$tableState7, _states$tableState8, _states$tableState9, _states$tableState0, _states$tableState1, _states$mediaState, _states$selectionStat, _states$editorViewMod, _states$widthState, _states$widthState2, _states$interactionSt;
|
|
28
29
|
return {
|
|
@@ -98,6 +99,7 @@ export var TableComponentWithSharedState = function TableComponentWithSharedStat
|
|
|
98
99
|
isTableScalingEnabled: options === null || options === void 0 ? void 0 : options.isTableScalingEnabled,
|
|
99
100
|
allowTableAlignment: allowTableAlignment,
|
|
100
101
|
allowTableResizing: allowTableResizing,
|
|
102
|
+
allowFixedColumnWidthOption: allowFixedColumnWidthOption,
|
|
101
103
|
tableActive: tableActive && !isLivePageViewMode && interaction !== 'hasNotHadInteraction',
|
|
102
104
|
ordering: ordering,
|
|
103
105
|
isResizing: isResizing,
|
|
@@ -133,7 +133,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
|
|
|
133
133
|
tableWrapperHeight = _ref4.tableWrapperHeight,
|
|
134
134
|
isWholeTableInDanger = _ref4.isWholeTableInDanger,
|
|
135
135
|
isTableScalingEnabled = _ref4.isTableScalingEnabled,
|
|
136
|
-
|
|
136
|
+
allowFixedColumnWidthOption = _ref4.allowFixedColumnWidthOption,
|
|
137
137
|
isTableAlignmentEnabled = _ref4.isTableAlignmentEnabled,
|
|
138
138
|
shouldUseIncreasedScalingPercent = _ref4.shouldUseIncreasedScalingPercent,
|
|
139
139
|
isCommentEditor = _ref4.isCommentEditor,
|
|
@@ -295,7 +295,7 @@ export var ResizableTableContainer = /*#__PURE__*/React.memo(function (_ref4) {
|
|
|
295
295
|
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
296
296
|
isFullWidthModeEnabled: isFullWidthModeEnabled,
|
|
297
297
|
isTableScalingEnabled: isTableScalingEnabled,
|
|
298
|
-
|
|
298
|
+
allowFixedColumnWidthOption: allowFixedColumnWidthOption,
|
|
299
299
|
isWholeTableInDanger: isWholeTableInDanger,
|
|
300
300
|
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
|
|
301
301
|
pluginInjectionApi: pluginInjectionApi,
|
|
@@ -348,7 +348,7 @@ export var TableContainer = function TableContainer(_ref5) {
|
|
|
348
348
|
isWholeTableInDanger = _ref5.isWholeTableInDanger,
|
|
349
349
|
isTableResizingEnabled = _ref5.isTableResizingEnabled,
|
|
350
350
|
isTableScalingEnabled = _ref5.isTableScalingEnabled,
|
|
351
|
-
|
|
351
|
+
allowFixedColumnWidthOption = _ref5.allowFixedColumnWidthOption,
|
|
352
352
|
isTableAlignmentEnabled = _ref5.isTableAlignmentEnabled,
|
|
353
353
|
shouldUseIncreasedScalingPercent = _ref5.shouldUseIncreasedScalingPercent,
|
|
354
354
|
isCommentEditor = _ref5.isCommentEditor,
|
|
@@ -374,7 +374,7 @@ export var TableContainer = function TableContainer(_ref5) {
|
|
|
374
374
|
isResizing: isResizing,
|
|
375
375
|
pluginInjectionApi: pluginInjectionApi,
|
|
376
376
|
isTableScalingEnabled: isTableScalingEnabled,
|
|
377
|
-
|
|
377
|
+
allowFixedColumnWidthOption: allowFixedColumnWidthOption,
|
|
378
378
|
isWholeTableInDanger: isWholeTableInDanger,
|
|
379
379
|
isTableAlignmentEnabled: isTableAlignmentEnabled,
|
|
380
380
|
shouldUseIncreasedScalingPercent: shouldUseIncreasedScalingPercent,
|
|
@@ -128,7 +128,7 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
128
128
|
attachAnalyticsEvent = _ref.attachAnalyticsEvent,
|
|
129
129
|
displayGapCursor = _ref.displayGapCursor,
|
|
130
130
|
isTableScalingEnabled = _ref.isTableScalingEnabled,
|
|
131
|
-
|
|
131
|
+
allowFixedColumnWidthOption = _ref.allowFixedColumnWidthOption,
|
|
132
132
|
isTableAlignmentEnabled = _ref.isTableAlignmentEnabled,
|
|
133
133
|
isWholeTableInDanger = _ref.isWholeTableInDanger,
|
|
134
134
|
shouldUseIncreasedScalingPercent = _ref.shouldUseIncreasedScalingPercent,
|
|
@@ -306,13 +306,13 @@ export var TableResizer = function TableResizer(_ref) {
|
|
|
306
306
|
prevNode: node,
|
|
307
307
|
start: pos + 1,
|
|
308
308
|
parentWidth: previewParentWidth
|
|
309
|
-
}, editorView.domAtPos.bind(editorView), isTableScalingEnabled,
|
|
309
|
+
}, editorView.domAtPos.bind(editorView), isTableScalingEnabled, allowFixedColumnWidthOption, isCommentEditor);
|
|
310
310
|
chainCommands(function (state, dispatch) {
|
|
311
311
|
return switchToCenterAlignment(pos, node, newWidth, state, dispatch);
|
|
312
312
|
}, updateWidthToWidest(_defineProperty({}, currentTableNodeLocalId, shouldUpdateWidthToWidest)))(state, dispatch);
|
|
313
313
|
updateWidth(shouldUpdateWidthToWidest ? tableMaxWidth : newWidth);
|
|
314
314
|
return newWidth;
|
|
315
|
-
}, [countFrames, isCommentEditor, isTableScalingEnabled,
|
|
315
|
+
}, [countFrames, isCommentEditor, isTableScalingEnabled, allowFixedColumnWidthOption, isFullWidthModeEnabled, excludeGuidelineConfig, tableRef, node, editorView, updateActiveGuidelines, containerWidth, lineLength, updateWidth, getPos, switchToCenterAlignment]);
|
|
316
316
|
var scheduleResize = useMemo(function () {
|
|
317
317
|
return rafSchd(handleResize);
|
|
318
318
|
}, [handleResize]);
|
|
@@ -7,7 +7,7 @@ import TableRow from './TableRow';
|
|
|
7
7
|
import TableRowNativeStickyWithFallback from './TableRowNativeStickyWithFallback';
|
|
8
8
|
export var tableView = function tableView(options) {
|
|
9
9
|
return function (node, view, getPos) {
|
|
10
|
-
return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isCommentEditor, options.isChromelessEditor);
|
|
10
|
+
return createTableView(node, view, getPos, options.portalProviderAPI, options.eventDispatcher, options.getEditorContainerWidth, options.getEditorFeatureFlags, options.dispatchAnalyticsEvent, options.pluginInjectionApi, options.isCommentEditor, options.isChromelessEditor, options === null || options === void 0 ? void 0 : options.allowFixedColumnWidthOption);
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
13
|
export var tableCellView = function tableCellView(options) {
|
|
@@ -15,6 +15,7 @@ import ReactNodeView from '@atlaskit/editor-common/react-node-view';
|
|
|
15
15
|
import { DOMSerializer } from '@atlaskit/editor-prosemirror/model';
|
|
16
16
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
17
17
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
18
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
18
19
|
import { pluginConfig as getPluginConfig } from '../pm-plugins/create-plugin-config';
|
|
19
20
|
import { getPluginState } from '../pm-plugins/plugin-factory';
|
|
20
21
|
import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
|
|
@@ -90,11 +91,12 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
90
91
|
}).toDOM(this.node);
|
|
91
92
|
var rendered = DOMSerializer.renderSpec(document, tableDOMStructure);
|
|
92
93
|
if (rendered.dom) {
|
|
93
|
-
var _this$
|
|
94
|
+
var _this$reactComponentP5, _this$getEditorFeatur, _this$options, _this$options2;
|
|
94
95
|
var tableElement = rendered.dom.querySelector('table');
|
|
95
96
|
this.table = tableElement ? tableElement : rendered.dom;
|
|
96
97
|
this.renderedDOM = rendered.dom;
|
|
97
|
-
|
|
98
|
+
var allowFixedColumnWidthOption = (fg('platform_editor_table_fixed_column_width_prop') ? (_this$reactComponentP5 = this.reactComponentProps) === null || _this$reactComponentP5 === void 0 ? void 0 : _this$reactComponentP5.allowFixedColumnWidthOption : (_this$getEditorFeatur = this.getEditorFeatureFlags) === null || _this$getEditorFeatur === void 0 ? void 0 : _this$getEditorFeatur.call(this).tableWithFixedColumnWidthsOption) || false;
|
|
99
|
+
if (!((_this$options = this.options) !== null && _this$options !== void 0 && _this$options.isTableScalingEnabled) || (_this$options2 = this.options) !== null && _this$options2 !== void 0 && _this$options2.isTableScalingEnabled && allowFixedColumnWidthOption && this.node.attrs.displayMode === 'fixed') {
|
|
98
100
|
var tableInlineWidth = getInlineWidth(this.node, this.reactComponentProps.options, this.reactComponentProps.view.state, this.reactComponentProps.getPos(), this.reactComponentProps.allowTableResizing);
|
|
99
101
|
if (tableInlineWidth) {
|
|
100
102
|
handleInlineTableWidth(this.table, tableInlineWidth);
|
|
@@ -177,9 +179,10 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
177
179
|
key: "setDomAttrs",
|
|
178
180
|
value: function setDomAttrs(node) {
|
|
179
181
|
var _this3 = this,
|
|
182
|
+
_this$reactComponentP6,
|
|
183
|
+
_this$getEditorFeatur2,
|
|
180
184
|
_this$options3,
|
|
181
|
-
_this$options4
|
|
182
|
-
_this$getEditorFeatur2;
|
|
185
|
+
_this$options4;
|
|
183
186
|
if (!this.table) {
|
|
184
187
|
return; // width / attribute application to actual table will happen later when table is set
|
|
185
188
|
}
|
|
@@ -189,9 +192,9 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
189
192
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
190
193
|
_this3.table.setAttribute(attr, attrs[attr]);
|
|
191
194
|
});
|
|
192
|
-
|
|
195
|
+
var isTableFixedColumnWidthsOptionEnabled = (fg('platform_editor_table_fixed_column_width_prop') ? (_this$reactComponentP6 = this.reactComponentProps) === null || _this$reactComponentP6 === void 0 ? void 0 : _this$reactComponentP6.allowFixedColumnWidthOption : (_this$getEditorFeatur2 = this.getEditorFeatureFlags) === null || _this$getEditorFeatur2 === void 0 ? void 0 : _this$getEditorFeatur2.call(this).tableWithFixedColumnWidthsOption) || false;
|
|
193
196
|
// Preserve Table Width cannot have inline width set on the table
|
|
194
|
-
if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled) || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.isTableScalingEnabled &&
|
|
197
|
+
if (!((_this$options3 = this.options) !== null && _this$options3 !== void 0 && _this$options3.isTableScalingEnabled) || (_this$options4 = this.options) !== null && _this$options4 !== void 0 && _this$options4.isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && node.attrs.displayMode === 'fixed') {
|
|
195
198
|
var _tableWidthPluginKey$;
|
|
196
199
|
// handle inline style when table been resized
|
|
197
200
|
var tableInlineWidth = getInlineWidth(node, this.reactComponentProps.options, this.view.state, this.getPos(), this.reactComponentProps.allowTableResizing);
|
|
@@ -217,7 +220,8 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
217
220
|
allowControls: props.allowControls,
|
|
218
221
|
getPos: props.getPos,
|
|
219
222
|
getEditorFeatureFlags: props.getEditorFeatureFlags,
|
|
220
|
-
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent
|
|
223
|
+
dispatchAnalyticsEvent: props.dispatchAnalyticsEvent,
|
|
224
|
+
allowFixedColumnWidthOption: props.allowFixedColumnWidthOption
|
|
221
225
|
});
|
|
222
226
|
}
|
|
223
227
|
}, {
|
|
@@ -283,7 +287,7 @@ var TableView = /*#__PURE__*/function (_ReactNodeView) {
|
|
|
283
287
|
}]);
|
|
284
288
|
}(ReactNodeView);
|
|
285
289
|
export { TableView as default };
|
|
286
|
-
export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor) {
|
|
290
|
+
export var createTableView = function createTableView(node, view, getPos, portalProviderAPI, eventDispatcher, getEditorContainerWidth, getEditorFeatureFlags, dispatchAnalyticsEvent, pluginInjectionApi, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) {
|
|
287
291
|
var _pluginInjectionApi$t;
|
|
288
292
|
var _getPluginState2 = getPluginState(view.state),
|
|
289
293
|
pluginConfig = _getPluginState2.pluginConfig,
|
|
@@ -297,7 +301,7 @@ export var createTableView = function createTableView(node, view, getPos, portal
|
|
|
297
301
|
allowControls = _getPluginConfig.allowControls,
|
|
298
302
|
allowTableResizing = _getPluginConfig.allowTableResizing,
|
|
299
303
|
allowTableAlignment = _getPluginConfig.allowTableAlignment;
|
|
300
|
-
var isTableFixedColumnWidthsOptionEnabled = (getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().tableWithFixedColumnWidthsOption) || false;
|
|
304
|
+
var isTableFixedColumnWidthsOptionEnabled = (fg('platform_editor_table_fixed_column_width_prop') ? allowFixedColumnWidthOption : getEditorFeatureFlags === null || getEditorFeatureFlags === void 0 ? void 0 : getEditorFeatureFlags().tableWithFixedColumnWidthsOption) || false;
|
|
301
305
|
var shouldUseIncreasedScalingPercent = isTableScalingEnabled && (isTableFixedColumnWidthsOptionEnabled || isCommentEditor);
|
|
302
306
|
return new TableView({
|
|
303
307
|
node: node,
|
|
@@ -322,6 +326,7 @@ export var createTableView = function createTableView(node, view, getPos, portal
|
|
|
322
326
|
getEditorContainerWidth: getEditorContainerWidth,
|
|
323
327
|
getEditorFeatureFlags: getEditorFeatureFlags,
|
|
324
328
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
325
|
-
pluginInjectionApi: pluginInjectionApi
|
|
329
|
+
pluginInjectionApi: pluginInjectionApi,
|
|
330
|
+
allowFixedColumnWidthOption: allowFixedColumnWidthOption
|
|
326
331
|
}).init();
|
|
327
332
|
};
|
|
@@ -9,6 +9,7 @@ import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
|
9
9
|
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
10
10
|
import { TableMap } from '@atlaskit/editor-tables/table-map';
|
|
11
11
|
import { findCellClosestToPos, findTable, getCellsInColumn, getCellsInRow, getSelectionRect, isSelectionType, isTableSelected, removeTable, selectColumns as selectColumnsTransform, selectColumn as selectColumnTransform, selectionCell, selectRows as selectRowsTransform, selectRow as selectRowTransform, setCellAttrs } from '@atlaskit/editor-tables/utils';
|
|
12
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
12
13
|
import { TableCssClassName as ClassName, TableDecorations } from '../../types';
|
|
13
14
|
import { getDecorations } from '../decorations/plugin';
|
|
14
15
|
import { buildColumnResizingDecorations, clearColumnResizingDecorations } from '../decorations/utils/column-resizing';
|
|
@@ -217,7 +218,7 @@ export var getTableElementMoveTypeBySlice = function getTableElementMoveTypeBySl
|
|
|
217
218
|
var map = TableMap.get(currentTable.node);
|
|
218
219
|
var slicedMap = TableMap.get(slice.content.firstChild);
|
|
219
220
|
return map.width === slicedMap.width ? 'row' : map.height === slicedMap.height ? 'column' : undefined;
|
|
220
|
-
} catch (
|
|
221
|
+
} catch (_unused) {
|
|
221
222
|
return undefined;
|
|
222
223
|
}
|
|
223
224
|
};
|
|
@@ -354,11 +355,16 @@ export var setMultipleCellAttrs = function setMultipleCellAttrs(attrs, editorVie
|
|
|
354
355
|
}
|
|
355
356
|
if (tr.docChanged && cursorPos !== undefined) {
|
|
356
357
|
if (dispatch) {
|
|
357
|
-
if (
|
|
358
|
+
if (expValEquals('platform_editor_table_cell_colour_change', 'isEnabled', true)) {
|
|
358
359
|
editorView === null || editorView === void 0 || editorView.focus();
|
|
359
|
-
|
|
360
|
+
dispatch(tr);
|
|
361
|
+
} else {
|
|
362
|
+
if (cursorPos !== undefined) {
|
|
363
|
+
editorView === null || editorView === void 0 || editorView.focus();
|
|
364
|
+
tr.setSelection(new TextSelection(tr.doc.resolve(cursorPos)));
|
|
365
|
+
}
|
|
366
|
+
dispatch(tr);
|
|
360
367
|
}
|
|
361
|
-
dispatch(tr);
|
|
362
368
|
}
|
|
363
369
|
return true;
|
|
364
370
|
}
|
|
@@ -27,7 +27,7 @@ import { fixTables } from './transforms/fix-tables';
|
|
|
27
27
|
import { replaceSelectedTable } from './transforms/replace-table';
|
|
28
28
|
import { findControlsHoverDecoration } from './utils/decoration';
|
|
29
29
|
import { transformSliceToCorrectEmptyTableCells, transformSliceToFixHardBreakProblemOnCopyFromCell, transformSliceToRemoveOpenTable, transformSliceToRemoveNestedTables, isHeaderRowRequired, transformSliceTableLayoutDefaultToCenter } from './utils/paste';
|
|
30
|
-
export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor) {
|
|
30
|
+
export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch, portalProviderAPI, nodeViewPortalProviderAPI, eventDispatcher, pluginConfig, getEditorContainerWidth, getEditorFeatureFlags, getIntl, fullWidthModeEnabled, previousFullWidthModeEnabled, dragAndDropEnabled, editorAnalyticsAPI, pluginInjectionApi, isTableScalingEnabled, shouldUseIncreasedScalingPercent, isCommentEditor, isChromelessEditor, allowFixedColumnWidthOption) {
|
|
31
31
|
var _accessibilityUtils;
|
|
32
32
|
var state = createPluginState(dispatch, _objectSpread(_objectSpread(_objectSpread({
|
|
33
33
|
pluginConfig: pluginConfig,
|
|
@@ -65,7 +65,8 @@ export var createPlugin = function createPlugin(dispatchAnalyticsEvent, dispatch
|
|
|
65
65
|
dispatchAnalyticsEvent: dispatchAnalyticsEvent,
|
|
66
66
|
pluginInjectionApi: pluginInjectionApi,
|
|
67
67
|
isCommentEditor: isCommentEditor,
|
|
68
|
-
isChromelessEditor: isChromelessEditor
|
|
68
|
+
isChromelessEditor: isChromelessEditor,
|
|
69
|
+
allowFixedColumnWidthOption: allowFixedColumnWidthOption
|
|
69
70
|
}),
|
|
70
71
|
tableRow: tableRowView({
|
|
71
72
|
eventDispatcher: eventDispatcher,
|
|
@@ -104,7 +104,7 @@ export function scaleTableTo(state, maxSize) {
|
|
|
104
104
|
}
|
|
105
105
|
export var previewScaleTable = function previewScaleTable(tableRef, options, domAtPos) {
|
|
106
106
|
var isTableScalingEnabled = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
|
|
107
|
-
var
|
|
107
|
+
var allowFixedColumnWidthOption = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
|
|
108
108
|
var isCommentEditor = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
|
|
109
109
|
var node = options.node,
|
|
110
110
|
start = options.start,
|
|
@@ -118,7 +118,7 @@ export var previewScaleTable = function previewScaleTable(tableRef, options, dom
|
|
|
118
118
|
tableRef.style.width = "".concat(width, "px");
|
|
119
119
|
}
|
|
120
120
|
var isTableScalingEnabledOnCurrentTable = isTableScalingEnabled;
|
|
121
|
-
var isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled &&
|
|
121
|
+
var isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && allowFixedColumnWidthOption;
|
|
122
122
|
if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
|
|
123
123
|
isTableScalingEnabledOnCurrentTable = isTableScalingEnabled && node.attrs.displayMode !== 'fixed';
|
|
124
124
|
}
|