@atlaskit/editor-plugin-table 7.25.2 → 7.25.4
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 +18 -0
- package/dist/cjs/commands/column-resize.js +4 -1
- package/dist/cjs/commands-with-analytics.js +2 -1
- package/dist/cjs/event-handlers.js +3 -2
- package/dist/cjs/nodeviews/TableComponent.js +18 -19
- package/dist/cjs/nodeviews/TableResizer.js +1 -1
- package/dist/cjs/nodeviews/lazy-node-views.js +1 -5
- package/dist/cjs/nodeviews/table.js +18 -8
- package/dist/cjs/plugin.js +6 -4
- package/dist/cjs/pm-plugins/drag-and-drop/plugin.js +10 -5
- package/dist/cjs/pm-plugins/keymap.js +2 -2
- package/dist/cjs/pm-plugins/main.js +0 -1
- package/dist/cjs/pm-plugins/table-resizing/event-handlers.js +6 -4
- package/dist/cjs/pm-plugins/table-resizing/plugin.js +2 -2
- package/dist/cjs/pm-plugins/table-resizing/utils/resize-state.js +2 -1
- package/dist/cjs/pm-plugins/table-resizing/utils/scale-table.js +4 -1
- package/dist/cjs/toolbar.js +10 -6
- package/dist/cjs/ui/DragHandle/index.js +2 -1
- package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js +5 -2
- package/dist/cjs/ui/FloatingContextualMenu/index.js +4 -2
- package/dist/es2019/commands/column-resize.js +4 -1
- package/dist/es2019/commands-with-analytics.js +2 -1
- package/dist/es2019/event-handlers.js +2 -2
- package/dist/es2019/nodeviews/TableComponent.js +17 -19
- package/dist/es2019/nodeviews/TableResizer.js +1 -1
- package/dist/es2019/nodeviews/lazy-node-views.js +1 -5
- package/dist/es2019/nodeviews/table.js +21 -8
- package/dist/es2019/plugin.js +6 -4
- package/dist/es2019/pm-plugins/drag-and-drop/plugin.js +8 -6
- package/dist/es2019/pm-plugins/keymap.js +2 -2
- package/dist/es2019/pm-plugins/main.js +1 -2
- package/dist/es2019/pm-plugins/table-resizing/event-handlers.js +6 -4
- package/dist/es2019/pm-plugins/table-resizing/plugin.js +2 -2
- package/dist/es2019/pm-plugins/table-resizing/utils/resize-state.js +3 -3
- package/dist/es2019/pm-plugins/table-resizing/utils/scale-table.js +5 -3
- package/dist/es2019/toolbar.js +10 -10
- package/dist/es2019/ui/DragHandle/index.js +1 -1
- package/dist/es2019/ui/FloatingContextualMenu/ContextualMenu.js +5 -2
- package/dist/es2019/ui/FloatingContextualMenu/index.js +4 -2
- package/dist/esm/commands/column-resize.js +4 -1
- package/dist/esm/commands-with-analytics.js +2 -1
- package/dist/esm/event-handlers.js +3 -2
- package/dist/esm/nodeviews/TableComponent.js +18 -19
- package/dist/esm/nodeviews/TableResizer.js +1 -1
- package/dist/esm/nodeviews/lazy-node-views.js +1 -5
- package/dist/esm/nodeviews/table.js +18 -8
- package/dist/esm/plugin.js +6 -4
- package/dist/esm/pm-plugins/drag-and-drop/plugin.js +10 -5
- package/dist/esm/pm-plugins/keymap.js +2 -2
- package/dist/esm/pm-plugins/main.js +1 -2
- package/dist/esm/pm-plugins/table-resizing/event-handlers.js +6 -4
- package/dist/esm/pm-plugins/table-resizing/plugin.js +2 -2
- package/dist/esm/pm-plugins/table-resizing/utils/resize-state.js +3 -2
- package/dist/esm/pm-plugins/table-resizing/utils/scale-table.js +5 -2
- package/dist/esm/toolbar.js +10 -6
- package/dist/esm/ui/DragHandle/index.js +2 -1
- package/dist/esm/ui/FloatingContextualMenu/ContextualMenu.js +5 -2
- package/dist/esm/ui/FloatingContextualMenu/index.js +4 -2
- package/dist/types/commands/column-resize.d.ts +2 -1
- package/dist/types/commands-with-analytics.d.ts +1 -1
- package/dist/types/pm-plugins/drag-and-drop/plugin.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/event-handlers.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/plugin.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/utils/resize-state.d.ts +1 -1
- package/dist/types/pm-plugins/table-resizing/utils/scale-table.d.ts +1 -1
- package/dist/types/toolbar.d.ts +2 -2
- package/dist/types/ui/FloatingContextualMenu/ContextualMenu.d.ts +1 -0
- package/dist/types/ui/FloatingContextualMenu/index.d.ts +2 -1
- package/dist/types-ts4.5/commands/column-resize.d.ts +2 -1
- package/dist/types-ts4.5/commands-with-analytics.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/drag-and-drop/plugin.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/event-handlers.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/plugin.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/table-resizing/utils/resize-state.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/toolbar.d.ts +2 -2
- package/dist/types-ts4.5/ui/FloatingContextualMenu/ContextualMenu.d.ts +1 -0
- package/dist/types-ts4.5/ui/FloatingContextualMenu/index.d.ts +2 -1
- package/package.json +9 -12
- package/src/commands/column-resize.ts +7 -2
- package/src/commands-with-analytics.ts +2 -0
- package/src/event-handlers.ts +2 -1
- package/src/nodeviews/TableComponent.tsx +17 -14
- package/src/nodeviews/TableResizer.tsx +1 -0
- package/src/nodeviews/lazy-node-views.ts +0 -4
- package/src/nodeviews/table.tsx +30 -8
- package/src/plugin.tsx +8 -2
- package/src/pm-plugins/drag-and-drop/plugin.ts +9 -4
- package/src/pm-plugins/keymap.ts +2 -0
- package/src/pm-plugins/main.ts +0 -4
- package/src/pm-plugins/table-resizing/event-handlers.ts +11 -6
- package/src/pm-plugins/table-resizing/plugin.ts +2 -0
- package/src/pm-plugins/table-resizing/utils/resize-state.ts +5 -3
- package/src/pm-plugins/table-resizing/utils/scale-table.ts +6 -3
- package/src/toolbar.tsx +10 -1
- package/src/ui/DragHandle/index.tsx +1 -1
- package/src/ui/FloatingContextualMenu/ContextualMenu.tsx +6 -2
- package/src/ui/FloatingContextualMenu/index.tsx +3 -0
- package/dist/cjs/nodeviews/ignore-mutation-delegate.js +0 -23
- package/dist/es2019/nodeviews/ignore-mutation-delegate.js +0 -20
- package/dist/esm/nodeviews/ignore-mutation-delegate.js +0 -17
- package/dist/types/nodeviews/ignore-mutation-delegate.d.ts +0 -5
- package/dist/types-ts4.5/nodeviews/ignore-mutation-delegate.d.ts +0 -5
- package/src/nodeviews/ignore-mutation-delegate.ts +0 -28
|
@@ -30,7 +30,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
|
|
|
30
30
|
editorAnalyticsAPI = _ref.editorAnalyticsAPI,
|
|
31
31
|
getEditorContainerWidth = _ref.getEditorContainerWidth,
|
|
32
32
|
getEditorFeatureFlags = _ref.getEditorFeatureFlags,
|
|
33
|
-
isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard
|
|
33
|
+
isCellMenuOpenByKeyboard = _ref.isCellMenuOpenByKeyboard,
|
|
34
|
+
isCommentEditor = _ref.isCommentEditor;
|
|
34
35
|
// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
|
|
35
36
|
var _getPluginState = (0, _pluginFactory.getPluginState)(editorView.state),
|
|
36
37
|
targetCellPosition = _getPluginState.targetCellPosition,
|
|
@@ -80,7 +81,8 @@ var FloatingContextualMenu = function FloatingContextualMenu(_ref) {
|
|
|
80
81
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
81
82
|
getEditorContainerWidth: getEditorContainerWidth,
|
|
82
83
|
getEditorFeatureFlags: getEditorFeatureFlags,
|
|
83
|
-
isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
|
|
84
|
+
isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
|
|
85
|
+
isCommentEditor: isCommentEditor
|
|
84
86
|
})));
|
|
85
87
|
};
|
|
86
88
|
FloatingContextualMenu.displayName = 'FloatingContextualMenu';
|
|
@@ -149,6 +149,7 @@ export const changeColumnWidthByStep = ({
|
|
|
149
149
|
getEditorContainerWidth,
|
|
150
150
|
isTableScalingEnabled,
|
|
151
151
|
isTableFixedColumnWidthsOptionEnabled,
|
|
152
|
+
isCommentEditor,
|
|
152
153
|
ariaNotify,
|
|
153
154
|
getIntl
|
|
154
155
|
}) => (state, dispatch, view) => {
|
|
@@ -198,7 +199,9 @@ export const changeColumnWidthByStep = ({
|
|
|
198
199
|
if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
|
|
199
200
|
isTableScalingEnabledOnCurrentTable = originalTable.attrs.displayMode !== 'fixed';
|
|
200
201
|
}
|
|
201
|
-
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent')
|
|
202
|
+
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') ||
|
|
203
|
+
// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
204
|
+
isTableScalingEnabled && isCommentEditor;
|
|
202
205
|
const initialResizeState = getResizeState({
|
|
203
206
|
minWidth: tableCellMinWidth,
|
|
204
207
|
maxSize,
|
|
@@ -171,7 +171,7 @@ export const insertRowWithAnalytics = (editorAnalyticsAPI, isCellbackgroundDupli
|
|
|
171
171
|
eventType: EVENT_TYPE.TRACK
|
|
172
172
|
};
|
|
173
173
|
})(editorAnalyticsAPI)(insertRow(options.index, options.moveCursorToInsertedRow, isCellbackgroundDuplicated));
|
|
174
|
-
export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepSize, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, inputMethod, ariaNotify, getIntl) => withEditorAnalyticsAPI(state => {
|
|
174
|
+
export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepSize, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor, inputMethod, ariaNotify, getIntl) => withEditorAnalyticsAPI(state => {
|
|
175
175
|
const {
|
|
176
176
|
table,
|
|
177
177
|
totalRowCount,
|
|
@@ -201,6 +201,7 @@ export const changeColumnWidthByStepWithAnalytics = editorAnalyticsAPI => (stepS
|
|
|
201
201
|
getEditorContainerWidth: getEditorContainerWidth,
|
|
202
202
|
isTableScalingEnabled,
|
|
203
203
|
isTableFixedColumnWidthsOptionEnabled,
|
|
204
|
+
isCommentEditor,
|
|
204
205
|
ariaNotify: ariaNotify,
|
|
205
206
|
getIntl: getIntl
|
|
206
207
|
}));
|
|
@@ -232,7 +232,7 @@ export const handleMouseLeave = (view, event) => {
|
|
|
232
232
|
if (isTableHovered) {
|
|
233
233
|
if (isDragAndDropEnabled) {
|
|
234
234
|
const {
|
|
235
|
-
isDragMenuOpen
|
|
235
|
+
isDragMenuOpen = false
|
|
236
236
|
} = getDragDropPluginState(state);
|
|
237
237
|
!isDragMenuOpen && setTableHovered(false)(state, dispatch);
|
|
238
238
|
} else {
|
|
@@ -449,7 +449,7 @@ const trackCellLocation = (view, mouseEvent) => {
|
|
|
449
449
|
hoverCell(htmlRowIndex, colIndex)(view.state, view.dispatch);
|
|
450
450
|
};
|
|
451
451
|
export const withCellTracking = eventHandler => (view, mouseEvent) => {
|
|
452
|
-
if (getPluginState(view.state).isDragAndDropEnabled && !getDragDropPluginState(view.state).isDragging) {
|
|
452
|
+
if (getPluginState(view.state).isDragAndDropEnabled && getDragDropPluginState(view.state) && !getDragDropPluginState(view.state).isDragging) {
|
|
453
453
|
trackCellLocation(view, mouseEvent);
|
|
454
454
|
}
|
|
455
455
|
return eventHandler(view, mouseEvent);
|
|
@@ -342,6 +342,7 @@ class TableComponent extends React.Component {
|
|
|
342
342
|
}
|
|
343
343
|
}
|
|
344
344
|
componentDidMount() {
|
|
345
|
+
var _this$table2;
|
|
345
346
|
const {
|
|
346
347
|
allowColumnResizing,
|
|
347
348
|
eventDispatcher,
|
|
@@ -361,10 +362,7 @@ class TableComponent extends React.Component {
|
|
|
361
362
|
this === null || this === void 0 ? void 0 : (_this$table = this.table) === null || _this$table === void 0 ? void 0 : _this$table.addEventListener('mouseenter', this.handleMouseEnter);
|
|
362
363
|
}
|
|
363
364
|
}
|
|
364
|
-
|
|
365
|
-
var _this$table2;
|
|
366
|
-
this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseout', this.handleMouseOut);
|
|
367
|
-
}
|
|
365
|
+
this === null || this === void 0 ? void 0 : (_this$table2 = this.table) === null || _this$table2 === void 0 ? void 0 : _this$table2.addEventListener('mouseout', this.handleMouseOut);
|
|
368
366
|
if (fg('platform_editor_react_18_table_column_resize_hover')) {
|
|
369
367
|
var _this$table3;
|
|
370
368
|
this === null || this === void 0 ? void 0 : (_this$table3 = this.table) === null || _this$table3 === void 0 ? void 0 : _this$table3.addEventListener('mouseover', this.handleMouseOver);
|
|
@@ -416,7 +414,7 @@ class TableComponent extends React.Component {
|
|
|
416
414
|
}
|
|
417
415
|
}
|
|
418
416
|
componentWillUnmount() {
|
|
419
|
-
var _this$resizeObserver;
|
|
417
|
+
var _this$resizeObserver, _this$table5;
|
|
420
418
|
const {
|
|
421
419
|
allowColumnResizing,
|
|
422
420
|
eventDispatcher,
|
|
@@ -453,10 +451,7 @@ class TableComponent extends React.Component {
|
|
|
453
451
|
var _this$table4;
|
|
454
452
|
this === null || this === void 0 ? void 0 : (_this$table4 = this.table) === null || _this$table4 === void 0 ? void 0 : _this$table4.removeEventListener('mouseenter', this.handleMouseEnter);
|
|
455
453
|
}
|
|
456
|
-
|
|
457
|
-
var _this$table5;
|
|
458
|
-
this === null || this === void 0 ? void 0 : (_this$table5 = this.table) === null || _this$table5 === void 0 ? void 0 : _this$table5.removeEventListener('mouseout', this.handleMouseOut);
|
|
459
|
-
}
|
|
454
|
+
this === null || this === void 0 ? void 0 : (_this$table5 = this.table) === null || _this$table5 === void 0 ? void 0 : _this$table5.removeEventListener('mouseout', this.handleMouseOut);
|
|
460
455
|
if (fg('platform_editor_react_18_table_column_resize_hover')) {
|
|
461
456
|
var _this$table6;
|
|
462
457
|
this === null || this === void 0 ? void 0 : (_this$table6 = this.table) === null || _this$table6 === void 0 ? void 0 : _this$table6.removeEventListener('mouseover', this.handleMouseOver);
|
|
@@ -523,7 +518,7 @@ class TableComponent extends React.Component {
|
|
|
523
518
|
const isNumberOfColumnsChanged = tablesHaveDifferentNoOfColumns(tableNode, this.node);
|
|
524
519
|
const maybeScale = isTableSquashed || isTableWidthChanged || isTableResizedFullWidth || isNumberColumnChanged || isNumberOfColumnsChanged;
|
|
525
520
|
if (force || maybeScale) {
|
|
526
|
-
var _this$containerWidth, _this$props$options;
|
|
521
|
+
var _this$containerWidth, _this$props$options, _this$props$options2, _this$props$options3;
|
|
527
522
|
const {
|
|
528
523
|
width: containerWidthValue
|
|
529
524
|
} = containerWidth;
|
|
@@ -536,10 +531,12 @@ class TableComponent extends React.Component {
|
|
|
536
531
|
const {
|
|
537
532
|
tableWithFixedColumnWidthsOption = false
|
|
538
533
|
} = getEditorFeatureFlags();
|
|
539
|
-
const isTableScalingWithFixedColumnWidthsOptionEnabled = ((_this$props$options = this.props.options)
|
|
540
|
-
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') ||
|
|
534
|
+
const isTableScalingWithFixedColumnWidthsOptionEnabled = !!((_this$props$options = this.props.options) !== null && _this$props$options !== void 0 && _this$props$options.isTableScalingEnabled) && tableWithFixedColumnWidthsOption;
|
|
535
|
+
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') ||
|
|
536
|
+
// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
537
|
+
!!((_this$props$options2 = this.props.options) !== null && _this$props$options2 !== void 0 && _this$props$options2.isTableScalingEnabled) && !!((_this$props$options3 = this.props.options) !== null && _this$props$options3 !== void 0 && _this$props$options3.isCommentEditor);
|
|
541
538
|
if (force || !isResizing && shouldUpdateColgroup) {
|
|
542
|
-
var _this$props$
|
|
539
|
+
var _this$props$options4;
|
|
543
540
|
const resizeState = getResizeState({
|
|
544
541
|
minWidth: COLUMN_MIN_WIDTH,
|
|
545
542
|
maxSize: tableRenderWidth,
|
|
@@ -551,7 +548,7 @@ class TableComponent extends React.Component {
|
|
|
551
548
|
shouldUseIncreasedScalingPercent
|
|
552
549
|
});
|
|
553
550
|
let shouldScaleOnColgroupUpdate = false;
|
|
554
|
-
if ((_this$props$
|
|
551
|
+
if ((_this$props$options4 = this.props.options) !== null && _this$props$options4 !== void 0 && _this$props$options4.isTableScalingEnabled && !tableWithFixedColumnWidthsOption) {
|
|
555
552
|
shouldScaleOnColgroupUpdate = true;
|
|
556
553
|
}
|
|
557
554
|
if (isTableScalingWithFixedColumnWidthsOptionEnabled && tableNode.attrs.displayMode !== 'fixed') {
|
|
@@ -569,7 +566,7 @@ class TableComponent extends React.Component {
|
|
|
569
566
|
this.containerWidth = containerWidth;
|
|
570
567
|
}
|
|
571
568
|
componentDidUpdate(_, prevState) {
|
|
572
|
-
var _this$props$
|
|
569
|
+
var _this$props$options5, _this$props$options6, _this$wrapper;
|
|
573
570
|
const {
|
|
574
571
|
view,
|
|
575
572
|
getNode,
|
|
@@ -599,8 +596,8 @@ class TableComponent extends React.Component {
|
|
|
599
596
|
shouldScale = true;
|
|
600
597
|
shouldHandleColgroupUpdates = true;
|
|
601
598
|
}
|
|
602
|
-
const isTableScalingWithFixedColumnWidthsOptionEnabled = isTableScalingEnabled && tableWithFixedColumnWidthsOption;
|
|
603
|
-
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent');
|
|
599
|
+
const isTableScalingWithFixedColumnWidthsOptionEnabled = !!isTableScalingEnabled && tableWithFixedColumnWidthsOption;
|
|
600
|
+
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || !!isTableScalingEnabled && !!((_this$props$options5 = this.props.options) !== null && _this$props$options5 !== void 0 && _this$props$options5.isCommentEditor);
|
|
604
601
|
if (isTableScalingWithFixedColumnWidthsOptionEnabled && getNode().attrs.displayMode !== 'fixed') {
|
|
605
602
|
shouldScale = true;
|
|
606
603
|
shouldHandleColgroupUpdates = true;
|
|
@@ -611,7 +608,7 @@ class TableComponent extends React.Component {
|
|
|
611
608
|
if (isInDanger && !table) {
|
|
612
609
|
clearHoverSelection()(view.state, view.dispatch);
|
|
613
610
|
}
|
|
614
|
-
if ((_this$props$
|
|
611
|
+
if ((_this$props$options6 = this.props.options) !== null && _this$props$options6 !== void 0 && _this$props$options6.isCommentEditor && options !== null && options !== void 0 && options.isTableResizingEnabled) {
|
|
615
612
|
this.removeInlineTableWidth();
|
|
616
613
|
}
|
|
617
614
|
if ((_this$wrapper = this.wrapper) !== null && _this$wrapper !== void 0 && _this$wrapper.parentElement && this.table && !this.overflowShadowsObserver) {
|
|
@@ -698,6 +695,7 @@ class TableComponent extends React.Component {
|
|
|
698
695
|
}
|
|
699
696
|
}
|
|
700
697
|
render() {
|
|
698
|
+
var _this$props$options7;
|
|
701
699
|
const {
|
|
702
700
|
view,
|
|
703
701
|
getNode,
|
|
@@ -816,7 +814,7 @@ class TableComponent extends React.Component {
|
|
|
816
814
|
stickyScrollbar,
|
|
817
815
|
tableWithFixedColumnWidthsOption = false
|
|
818
816
|
} = getEditorFeatureFlags();
|
|
819
|
-
const shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent');
|
|
817
|
+
const shouldUseIncreasedScalingPercent = !!isTableScalingEnabled && (tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent') || !!((_this$props$options7 = this.props.options) !== null && _this$props$options7 !== void 0 && _this$props$options7.isCommentEditor));
|
|
820
818
|
return /*#__PURE__*/React.createElement(TableContainer
|
|
821
819
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
822
820
|
, {
|
|
@@ -258,7 +258,7 @@ export const TableResizer = ({
|
|
|
258
258
|
prevNode: node,
|
|
259
259
|
start: pos + 1,
|
|
260
260
|
parentWidth: newWidth
|
|
261
|
-
}, editorView.domAtPos.bind(editorView), isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled);
|
|
261
|
+
}, editorView.domAtPos.bind(editorView), isTableScalingEnabled, isTableWithFixedColumnWidthsOptionEnabled, isCommentEditor);
|
|
262
262
|
const editorContainerWidth = isFullWidthModeEnabled ? lineLength + 2 * akEditorGutterPaddingDynamic() : containerWidth;
|
|
263
263
|
const closestSnap = findClosestSnap(newWidth, isTableScalingEnabled ? defaultTablePreserveSnappingWidths(PRESERVE_TABLE_SNAPPING_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultSnappingWidths, isTableScalingEnabled ? defaultGuidelinesForPreserveTable(PRESERVE_TABLE_GUIDELINES_LENGTH_OFFSET, editorContainerWidth, excludeGuidelineConfig) : defaultGuidelines, TABLE_HIGHLIGHT_GAP, TABLE_HIGHLIGHT_TOLERANCE);
|
|
264
264
|
updateActiveGuidelines(closestSnap);
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { withLazyLoading } from '@atlaskit/editor-common/lazy-node-view';
|
|
2
2
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
|
-
import ignoreMutationDelegate from './ignore-mutation-delegate';
|
|
4
3
|
// TODO: Clean up ED-23976
|
|
5
4
|
import { createTableView } from './table';
|
|
6
5
|
import TableCell from './TableCell';
|
|
@@ -36,10 +35,7 @@ export const lazyTableView = options => {
|
|
|
36
35
|
return withLazyLoading({
|
|
37
36
|
nodeName: 'table',
|
|
38
37
|
getNodeViewOptions: () => options,
|
|
39
|
-
loader
|
|
40
|
-
lazyNodeViewOptions: {
|
|
41
|
-
ignoreMutationDelegate
|
|
42
|
-
}
|
|
38
|
+
loader
|
|
43
39
|
});
|
|
44
40
|
};
|
|
45
41
|
export const lazyTableCellView = options => {
|
|
@@ -15,7 +15,6 @@ import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizin
|
|
|
15
15
|
import { generateColgroup } from '../pm-plugins/table-resizing/utils';
|
|
16
16
|
import { pluginKey as tableWidthPluginKey } from '../pm-plugins/table-width';
|
|
17
17
|
import { isTableNested } from '../utils';
|
|
18
|
-
import ignoreMutationDelegate from './ignore-mutation-delegate';
|
|
19
18
|
import TableComponent from './TableComponent';
|
|
20
19
|
import { TableComponentWithSharedState } from './TableComponentWithSharedState';
|
|
21
20
|
const tableAttributes = node => {
|
|
@@ -228,16 +227,30 @@ export default class TableView extends ReactNodeView {
|
|
|
228
227
|
});
|
|
229
228
|
}
|
|
230
229
|
ignoreMutation(mutation) {
|
|
231
|
-
const
|
|
230
|
+
const {
|
|
231
|
+
type,
|
|
232
|
+
target: {
|
|
233
|
+
nodeName,
|
|
234
|
+
firstChild
|
|
235
|
+
}
|
|
236
|
+
} = mutation;
|
|
237
|
+
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'DIV' && (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'TABLE') {
|
|
238
|
+
return false;
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
// ED-16668
|
|
242
|
+
// Do not remove this fixes an issue with windows firefox that relates to
|
|
243
|
+
// the addition of the shadow sentinels
|
|
244
|
+
if (type === 'selection' && (nodeName === null || nodeName === void 0 ? void 0 : nodeName.toUpperCase()) === 'TABLE' && ((firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'COLGROUP' || (firstChild === null || firstChild === void 0 ? void 0 : firstChild.nodeName.toUpperCase()) === 'SPAN')) {
|
|
245
|
+
return false;
|
|
246
|
+
}
|
|
232
247
|
if (fg('platform_editor_react_18_table_insertion_cursor')) {
|
|
233
|
-
if (
|
|
234
|
-
|
|
235
|
-
return true;
|
|
236
|
-
}
|
|
237
|
-
return !this.contentDOM.contains(mutation.target) && mutation.type !== 'selection';
|
|
248
|
+
if (!this.contentDOM) {
|
|
249
|
+
return true;
|
|
238
250
|
}
|
|
251
|
+
return !this.contentDOM.contains(mutation.target) && mutation.type !== 'selection';
|
|
239
252
|
}
|
|
240
|
-
return
|
|
253
|
+
return true;
|
|
241
254
|
}
|
|
242
255
|
destroy() {
|
|
243
256
|
var _this$eventDispatcher;
|
package/dist/es2019/plugin.js
CHANGED
|
@@ -64,7 +64,8 @@ const tablesPlugin = ({
|
|
|
64
64
|
const editorAnalyticsAPI = api === null || api === void 0 ? void 0 : (_api$analytics = api.analytics) === null || _api$analytics === void 0 ? void 0 : _api$analytics.actions;
|
|
65
65
|
const ariaNotifyPlugin = api === null || api === void 0 ? void 0 : (_api$accessibilityUti = api.accessibilityUtils) === null || _api$accessibilityUti === void 0 ? void 0 : _api$accessibilityUti.actions.ariaNotify;
|
|
66
66
|
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;
|
|
67
|
-
const shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && isTableFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent')
|
|
67
|
+
const shouldUseIncreasedScalingPercent = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) && (isTableFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || ( // When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
68
|
+
options === null || options === void 0 ? void 0 : options.isCommentEditor));
|
|
68
69
|
const isCellBackgroundDuplicated = (options === null || options === void 0 ? void 0 : (_options$getEditorFea2 = options.getEditorFeatureFlags) === null || _options$getEditorFea2 === void 0 ? void 0 : _options$getEditorFea2.call(options).tableDuplicateCellColouring) || false;
|
|
69
70
|
return {
|
|
70
71
|
name: 'table',
|
|
@@ -189,7 +190,7 @@ const tablesPlugin = ({
|
|
|
189
190
|
} = pluginConfig(tableOptions);
|
|
190
191
|
return allowColumnResizing ? createFlexiResizingPlugin(dispatch, {
|
|
191
192
|
lastColumnResizable: !fullWidthEnabled
|
|
192
|
-
}, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled) : undefined;
|
|
193
|
+
}, defaultGetEditorContainerWidth, getEditorFeatureFlags || defaultGetEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled || false, isNewColumnResizingEnabled, isTableAlignmentEnabled, !!(options !== null && options !== void 0 && options.isCommentEditor)) : undefined;
|
|
193
194
|
}
|
|
194
195
|
}, {
|
|
195
196
|
name: 'tableEditing',
|
|
@@ -252,7 +253,7 @@ const tablesPlugin = ({
|
|
|
252
253
|
plugin: ({
|
|
253
254
|
dispatch
|
|
254
255
|
}) => {
|
|
255
|
-
return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) : undefined;
|
|
256
|
+
return options !== null && options !== void 0 && options.dragAndDropEnabled ? createDragAndDropPlugin(dispatch, editorAnalyticsAPI, options === null || options === void 0 ? void 0 : options.isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options.isCommentEditor) : undefined;
|
|
256
257
|
}
|
|
257
258
|
}, {
|
|
258
259
|
name: 'tableViewModeSort',
|
|
@@ -411,7 +412,8 @@ const tablesPlugin = ({
|
|
|
411
412
|
editorAnalyticsAPI: editorAnalyticsAPI,
|
|
412
413
|
getEditorContainerWidth: defaultGetEditorContainerWidth,
|
|
413
414
|
getEditorFeatureFlags: (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags,
|
|
414
|
-
isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard
|
|
415
|
+
isCellMenuOpenByKeyboard: isCellMenuOpenByKeyboard,
|
|
416
|
+
isCommentEditor: options === null || options === void 0 ? void 0 : options.isCommentEditor
|
|
415
417
|
}), isDragAndDropEnabled && /*#__PURE__*/React.createElement(FloatingDragMenu, {
|
|
416
418
|
editorView: editorView,
|
|
417
419
|
mountPoint: popupsMountPoint,
|
|
@@ -18,7 +18,7 @@ import { DropTargetType } from './consts';
|
|
|
18
18
|
import { createPluginState, getPluginState } from './plugin-factory';
|
|
19
19
|
import { pluginKey } from './plugin-key';
|
|
20
20
|
import { getDraggableDataFromEvent } from './utils/monitor';
|
|
21
|
-
const destroyFn = (editorView, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) => {
|
|
21
|
+
const destroyFn = (editorView, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor) => {
|
|
22
22
|
const editorPageScrollContainer = document.querySelector('.fabric-editor-popup-scroll-parent');
|
|
23
23
|
const rowAutoScrollers = editorPageScrollContainer ? [monitorForElements({
|
|
24
24
|
canMonitor({
|
|
@@ -173,7 +173,9 @@ const destroyFn = (editorView, editorAnalyticsAPI, isTableScalingEnabled, isTabl
|
|
|
173
173
|
if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
|
|
174
174
|
isTableScalingEnabledOnCurrentTable = tableNode.attrs.displayMode !== 'fixed';
|
|
175
175
|
}
|
|
176
|
-
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent')
|
|
176
|
+
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') ||
|
|
177
|
+
// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
178
|
+
isTableScalingEnabled && isCommentEditor;
|
|
177
179
|
insertColgroupFromNode(tableRef, tableNode, isTableScalingEnabledOnCurrentTable, undefined, shouldUseIncreasedScalingPercent);
|
|
178
180
|
}
|
|
179
181
|
}
|
|
@@ -182,7 +184,7 @@ const destroyFn = (editorView, editorAnalyticsAPI, isTableScalingEnabled, isTabl
|
|
|
182
184
|
}
|
|
183
185
|
}));
|
|
184
186
|
};
|
|
185
|
-
export const createPlugin = (dispatch, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false) => {
|
|
187
|
+
export const createPlugin = (dispatch, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false) => {
|
|
186
188
|
return new SafePlugin({
|
|
187
189
|
state: createPluginState(dispatch, state => ({
|
|
188
190
|
decorationSet: DecorationSet.empty,
|
|
@@ -202,7 +204,7 @@ export const createPlugin = (dispatch, editorAnalyticsAPI, isTableScalingEnabled
|
|
|
202
204
|
targetCellPosition: newTargetCellPosition
|
|
203
205
|
} = getTablePluginState(newState);
|
|
204
206
|
const {
|
|
205
|
-
isDragMenuOpen,
|
|
207
|
+
isDragMenuOpen = false,
|
|
206
208
|
dragMenuIndex
|
|
207
209
|
} = getPluginState(newState);
|
|
208
210
|
transactions.forEach(transaction => {
|
|
@@ -251,7 +253,7 @@ export const createPlugin = (dispatch, editorAnalyticsAPI, isTableScalingEnabled
|
|
|
251
253
|
},
|
|
252
254
|
view: editorView => {
|
|
253
255
|
return {
|
|
254
|
-
destroy: destroyFn(editorView, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled)
|
|
256
|
+
destroy: destroyFn(editorView, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor)
|
|
255
257
|
};
|
|
256
258
|
},
|
|
257
259
|
props: {
|
|
@@ -291,7 +293,7 @@ export const createPlugin = (dispatch, editorAnalyticsAPI, isTableScalingEnabled
|
|
|
291
293
|
const isDragHandleFocused = ['drag-handle-button-row', 'drag-handle-button-column'].includes((_ref = event.target || null) === null || _ref === void 0 ? void 0 : _ref.id);
|
|
292
294
|
const keysToTrap = ['Enter', ' '];
|
|
293
295
|
const {
|
|
294
|
-
isDragMenuOpen
|
|
296
|
+
isDragMenuOpen = false
|
|
295
297
|
} = getPluginState(view.state);
|
|
296
298
|
|
|
297
299
|
// drag handle is focused, and user presses any key return them back to editing
|
|
@@ -59,8 +59,8 @@ export function keymapPlugin(getEditorContainerWidth, editorAnalyticsAPI, dragAn
|
|
|
59
59
|
ariaNotify: ariaNotifyPlugin,
|
|
60
60
|
getIntl: getIntl
|
|
61
61
|
}), list);
|
|
62
|
-
bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
|
|
63
|
-
bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
|
|
62
|
+
bindKeymapWithCommand(decreaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(-10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
|
|
63
|
+
bindKeymapWithCommand(increaseMediaSize.common, changeColumnWidthByStepWithAnalytics(editorAnalyticsAPI)(10, getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, !!isCommentEditor, INPUT_METHOD.SHORTCUT, ariaNotifyPlugin, getIntl), list);
|
|
64
64
|
bindKeymapWithCommand(escape.common, stopKeyboardColumnResizing({
|
|
65
65
|
ariaNotify: ariaNotifyPlugin,
|
|
66
66
|
getIntl: getIntl
|
|
@@ -10,7 +10,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
10
10
|
import { addBoldInEmptyHeaderCells, clearHoverSelection, setTableRef } from '../commands';
|
|
11
11
|
import { stopKeyboardColumnResizing } from '../commands/column-resize';
|
|
12
12
|
import { removeResizeHandleDecorations, transformSliceRemoveCellBackgroundColor, transformSliceToAddTableHeaders, transformSliceToRemoveColumnsWidths } from '../commands/misc';
|
|
13
|
-
import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove,
|
|
13
|
+
import { handleBlur, handleClick, handleCut, handleFocus, handleMouseDown, handleMouseEnter, handleMouseLeave, handleMouseMove, handleMouseOver, handleMouseUp, handleTripleClick, whenTableInFocus, withCellTracking } from '../event-handlers';
|
|
14
14
|
import { lazyTableCellView, lazyTableHeaderView, lazyTableRowView, lazyTableView } from '../nodeviews/lazy-node-views';
|
|
15
15
|
import { pluginKey as decorationsPluginKey } from '../pm-plugins/decorations/plugin';
|
|
16
16
|
import { fixTables, replaceSelectedTable } from '../transforms';
|
|
@@ -279,7 +279,6 @@ export const createPlugin = (dispatchAnalyticsEvent, dispatch, portalProviderAPI
|
|
|
279
279
|
mousedown: withCellTracking(handleMouseDown),
|
|
280
280
|
mouseover: fg('platform_editor_react_18_table_column_resize_hover') ? undefined : withCellTracking(whenTableInFocus(handleMouseOver)),
|
|
281
281
|
mouseleave: handleMouseLeave,
|
|
282
|
-
mouseout: fg('editor_react_18_fix_table_delete_col_decorations') ? undefined : whenTableInFocus(handleMouseOut),
|
|
283
282
|
mousemove: whenTableInFocus(handleMouseMove),
|
|
284
283
|
mouseenter: handleMouseEnter,
|
|
285
284
|
mouseup: whenTableInFocus(handleMouseUp),
|
|
@@ -14,7 +14,7 @@ import { evenColumns, setDragging, stopResizing } from './commands';
|
|
|
14
14
|
import { getPluginState } from './plugin-factory';
|
|
15
15
|
import { currentColWidth, getResizeState, getTableMaxWidth, pointsAtCell, resizeColumn, resizeColumnAndTable, updateControls } from './utils';
|
|
16
16
|
import { scaleResizeState } from './utils/resize-column';
|
|
17
|
-
export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled) => {
|
|
17
|
+
export const handleMouseDown = (view, event, localResizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) => {
|
|
18
18
|
const {
|
|
19
19
|
state,
|
|
20
20
|
dispatch
|
|
@@ -71,7 +71,9 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
71
71
|
start,
|
|
72
72
|
domAtPos,
|
|
73
73
|
isTableScalingEnabled: shouldScale,
|
|
74
|
-
shouldUseIncreasedScalingPercent: isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent')
|
|
74
|
+
shouldUseIncreasedScalingPercent: isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') ||
|
|
75
|
+
// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
76
|
+
isTableScalingEnabled && !!isCommentEditor
|
|
75
77
|
});
|
|
76
78
|
if (evenColumns({
|
|
77
79
|
resizeState,
|
|
@@ -169,7 +171,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
169
171
|
shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
|
|
170
172
|
}
|
|
171
173
|
const resizedDelta = clientX - startX;
|
|
172
|
-
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent');
|
|
174
|
+
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || isTableScalingEnabled && !!isCommentEditor;
|
|
173
175
|
if (isNewColumnResizingEnabled && !isTableNested(state, tablePos)) {
|
|
174
176
|
const newResizeState = resizeColumnAndTable({
|
|
175
177
|
resizeState,
|
|
@@ -281,7 +283,7 @@ export const handleMouseDown = (view, event, localResizeHandlePos, getEditorCont
|
|
|
281
283
|
const map = TableMap.get(table);
|
|
282
284
|
const colIndex = map.colCount($cell.pos - $cell.start(-1)) + $cell.nodeAfter.attrs.colspan - 1;
|
|
283
285
|
let shouldScale = tableDepth === 0 && isTableScalingEnabled;
|
|
284
|
-
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent');
|
|
286
|
+
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || isTableScalingEnabled && isCommentEditor;
|
|
285
287
|
if (isTableScalingWithFixedColumnWidthsOptionEnabled) {
|
|
286
288
|
shouldScale = shouldScale && originalTable.attrs.displayMode !== 'fixed';
|
|
287
289
|
}
|
|
@@ -9,7 +9,7 @@ import { pluginKey } from './plugin-key';
|
|
|
9
9
|
import { getResizeCellPos } from './utils';
|
|
10
10
|
export function createPlugin(dispatch, {
|
|
11
11
|
lastColumnResizable = true
|
|
12
|
-
}, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled) {
|
|
12
|
+
}, getEditorContainerWidth, getEditorFeatureFlags, editorAnalyticsAPI, isTableScalingEnabled, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor) {
|
|
13
13
|
return new SafePlugin({
|
|
14
14
|
key: pluginKey,
|
|
15
15
|
state: createPluginState(dispatch, {
|
|
@@ -51,7 +51,7 @@ export function createPlugin(dispatch, {
|
|
|
51
51
|
isColumnKeyboardResizeStarted = isKeyboardResize;
|
|
52
52
|
}
|
|
53
53
|
if (resizeHandlePos !== null && (!dragging || isColumnKeyboardResizeStarted)) {
|
|
54
|
-
if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled)) {
|
|
54
|
+
if (handleMouseDown(view, event, resizeHandlePos, getEditorContainerWidth, getEditorFeatureFlags, isTableScalingEnabled || false, editorAnalyticsAPI, isNewColumnResizingEnabled, isTableAlignmentEnabled, isCommentEditor)) {
|
|
55
55
|
const {
|
|
56
56
|
state,
|
|
57
57
|
dispatch
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
2
2
|
import { tableCellMinWidth, tableNewColumnMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
3
|
import { calcTableColumnWidths } from '@atlaskit/editor-common/utils';
|
|
4
|
-
import {
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { getSelectedTableInfo } from '../../../utils';
|
|
6
6
|
import { getColWidthFix, hasTableBeenResized, insertColgroupFromNode } from './colgroup';
|
|
7
7
|
import { getCellsRefsInColumn, getColumnStateFromDOM } from './column-state';
|
|
@@ -273,7 +273,7 @@ export const normaliseTableLayout = input => {
|
|
|
273
273
|
return 'default';
|
|
274
274
|
}
|
|
275
275
|
};
|
|
276
|
-
export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getEditorContainerWidth, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false) => {
|
|
276
|
+
export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getEditorContainerWidth, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false) => {
|
|
277
277
|
// Fail early so that we don't do complex calculations for no reason
|
|
278
278
|
const numColumnsSelected = rect.right - rect.left;
|
|
279
279
|
if (numColumnsSelected <= 1) {
|
|
@@ -320,7 +320,7 @@ export const getNewResizeStateFromSelectedColumns = (rect, state, domAtPos, getE
|
|
|
320
320
|
start: table.start,
|
|
321
321
|
domAtPos,
|
|
322
322
|
isTableScalingEnabled: isTableScalingEnabledOnCurrentTable,
|
|
323
|
-
shouldUseIncreasedScalingPercent: isTableScalingWithFixedColumnWidthsOptionEnabled &&
|
|
323
|
+
shouldUseIncreasedScalingPercent: isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') || isTableScalingEnabled && isCommentEditor
|
|
324
324
|
});
|
|
325
325
|
const newResizeState = evenSelectedColumnsWidths(resizeState, rect);
|
|
326
326
|
const widthsBefore = resizeState.widths;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
2
2
|
import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
3
|
import { akEditorTableNumberColumnWidth } from '@atlaskit/editor-shared-styles';
|
|
4
|
-
import {
|
|
4
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
5
|
import { updateColumnWidths } from '../../../transforms';
|
|
6
6
|
import { getTableWidth } from '../../../utils';
|
|
7
7
|
import { getLayoutSize } from '../utils/misc';
|
|
@@ -98,7 +98,7 @@ export function scaleTableTo(state, maxSize) {
|
|
|
98
98
|
}
|
|
99
99
|
return adjustColumnsWidths(newState, maxSize);
|
|
100
100
|
}
|
|
101
|
-
export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEnabled = false, isTableWithFixedColumnWidthsOptionEnabled = false) => {
|
|
101
|
+
export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEnabled = false, isTableWithFixedColumnWidthsOptionEnabled = false, isCommentEditor = false) => {
|
|
102
102
|
const {
|
|
103
103
|
node,
|
|
104
104
|
start,
|
|
@@ -123,7 +123,9 @@ export const previewScaleTable = (tableRef, options, domAtPos, isTableScalingEna
|
|
|
123
123
|
syncStickyRowToTable(tableRef);
|
|
124
124
|
return;
|
|
125
125
|
}
|
|
126
|
-
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled &&
|
|
126
|
+
const shouldUseIncreasedScalingPercent = isTableScalingWithFixedColumnWidthsOptionEnabled && fg('platform.editor.table.use-increased-scaling-percent') ||
|
|
127
|
+
// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
128
|
+
isTableScalingEnabled && isCommentEditor;
|
|
127
129
|
const resizeState = parentWidth ? scaleWithParent(tableRef, parentWidth, node, start, domAtPos, false,
|
|
128
130
|
// Here isTableScalingEnabled = false
|
|
129
131
|
shouldUseIncreasedScalingPercent) : scale(tableRef, options, domAtPos, false, shouldUseIncreasedScalingPercent);
|
package/dist/es2019/toolbar.js
CHANGED
|
@@ -115,7 +115,7 @@ export const getToolbarMenuConfig = (config, state, {
|
|
|
115
115
|
// with native widgets. It's enabled via a plugin config.
|
|
116
116
|
export const getToolbarCellOptionsConfig = (editorState, editorView, initialSelectionRect, {
|
|
117
117
|
formatMessage
|
|
118
|
-
}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => {
|
|
118
|
+
}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false) => {
|
|
119
119
|
var _pluginState$pluginCo, _pluginState$pluginCo2;
|
|
120
120
|
const {
|
|
121
121
|
top,
|
|
@@ -217,7 +217,7 @@ export const getToolbarCellOptionsConfig = (editorState, editorView, initialSele
|
|
|
217
217
|
}
|
|
218
218
|
if (pluginState !== null && pluginState !== void 0 && (_pluginState$pluginCo = pluginState.pluginConfig) !== null && _pluginState$pluginCo !== void 0 && _pluginState$pluginCo.allowDistributeColumns) {
|
|
219
219
|
var _newResizeStateWithAn;
|
|
220
|
-
const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) : undefined;
|
|
220
|
+
const newResizeStateWithAnalytics = editorView ? getNewResizeStateFromSelectedColumns(initialSelectionRect, editorState, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor) : undefined;
|
|
221
221
|
const wouldChange = (_newResizeStateWithAn = newResizeStateWithAnalytics === null || newResizeStateWithAnalytics === void 0 ? void 0 : newResizeStateWithAnalytics.changed) !== null && _newResizeStateWithAn !== void 0 ? _newResizeStateWithAn : false;
|
|
222
222
|
const distributeColumnWidths = (state, dispatch) => {
|
|
223
223
|
if (newResizeStateWithAnalytics) {
|
|
@@ -359,8 +359,8 @@ export const getToolbarConfig = (getEditorContainerWidth, editorAnalyticsAPI, ge
|
|
|
359
359
|
const menu = getToolbarMenuConfig(config, pluginState, intl, editorAnalyticsAPI, isTableScalingWithFixedColumnWidthsOptionShown, areTableColumWidthsFixed);
|
|
360
360
|
const alignmentMenu = options !== null && options !== void 0 && options.isTableAlignmentEnabled && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, getDomRef, editorView, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
|
|
361
361
|
const isCellBackgroundDuplicated = getEditorFeatureFlags().tableDuplicateCellColouring || false;
|
|
362
|
-
const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
|
|
363
|
-
const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled) : [];
|
|
362
|
+
const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
|
|
363
|
+
const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
|
|
364
364
|
const colorPicker = getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView);
|
|
365
365
|
|
|
366
366
|
// Check if we need to show confirm dialog for delete button
|
|
@@ -440,22 +440,22 @@ const separator = hidden => {
|
|
|
440
440
|
};
|
|
441
441
|
const getCellItems = (state, view, {
|
|
442
442
|
formatMessage
|
|
443
|
-
}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => {
|
|
443
|
+
}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isCellBackgroundDuplicated = false, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false, isCommentEditor = false) => {
|
|
444
444
|
const initialSelectionRect = getClosestSelectionRect(state);
|
|
445
445
|
if (initialSelectionRect) {
|
|
446
446
|
const cellOptions = getToolbarCellOptionsConfig(state, view, initialSelectionRect, {
|
|
447
447
|
formatMessage
|
|
448
|
-
}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent);
|
|
448
|
+
}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isCellBackgroundDuplicated, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, isCommentEditor);
|
|
449
449
|
return [cellOptions, separator(cellOptions.hidden)];
|
|
450
450
|
}
|
|
451
451
|
return [];
|
|
452
452
|
};
|
|
453
|
-
export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false) => (state, dispatch, editorView) => {
|
|
453
|
+
export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false) => (state, dispatch, editorView) => {
|
|
454
454
|
const selectionOrTableRect = getClosestSelectionOrTableRect(state);
|
|
455
455
|
if (!editorView || !selectionOrTableRect) {
|
|
456
456
|
return false;
|
|
457
457
|
}
|
|
458
|
-
const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled);
|
|
458
|
+
const newResizeStateWithAnalytics = getNewResizeStateFromSelectedColumns(selectionOrTableRect, state, editorView.domAtPos.bind(editorView), getEditorContainerWidth, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor);
|
|
459
459
|
if (newResizeStateWithAnalytics) {
|
|
460
460
|
distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.FLOATING_TB, newResizeStateWithAnalytics)(state, dispatch);
|
|
461
461
|
return true;
|
|
@@ -467,7 +467,7 @@ export const getDistributeConfig = (getEditorContainerWidth, editorAnalyticsAPI,
|
|
|
467
467
|
// fixed column button should be in this function call in the future
|
|
468
468
|
const getColumnSettingItems = (editorState, editorView, {
|
|
469
469
|
formatMessage
|
|
470
|
-
}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false) => {
|
|
470
|
+
}, getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled = false, isTableFixedColumnWidthsOptionEnabled = false, isCommentEditor = false) => {
|
|
471
471
|
var _newResizeStateWithAn2, _pluginState$pluginCo3;
|
|
472
472
|
const pluginState = getPluginState(editorState);
|
|
473
473
|
const selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
|
|
@@ -483,7 +483,7 @@ const getColumnSettingItems = (editorState, editorView, {
|
|
|
483
483
|
type: 'button',
|
|
484
484
|
title: formatMessage(messages.distributeColumns),
|
|
485
485
|
icon: DistributeColumnIcon,
|
|
486
|
-
onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled)(state, dispatch, view),
|
|
486
|
+
onClick: (state, dispatch, view) => getDistributeConfig(getEditorContainerWidth, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, isCommentEditor)(state, dispatch, view),
|
|
487
487
|
disabled: !wouldChange
|
|
488
488
|
});
|
|
489
489
|
}
|
|
@@ -492,7 +492,8 @@ export class ContextualMenu extends Component {
|
|
|
492
492
|
editorAnalyticsAPI,
|
|
493
493
|
getEditorContainerWidth,
|
|
494
494
|
getEditorFeatureFlags,
|
|
495
|
-
isCellMenuOpenByKeyboard
|
|
495
|
+
isCellMenuOpenByKeyboard,
|
|
496
|
+
isCommentEditor
|
|
496
497
|
} = this.props;
|
|
497
498
|
// TargetCellPosition could be outdated: https://product-fabric.atlassian.net/browse/ED-8129
|
|
498
499
|
const {
|
|
@@ -522,7 +523,9 @@ export class ContextualMenu extends Component {
|
|
|
522
523
|
dispatch(tr);
|
|
523
524
|
editorView.dom.focus(); // otherwise cursor disappears from cell
|
|
524
525
|
}
|
|
525
|
-
const shouldUseIncreasedScalingPercent = isTableScalingEnabled && tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent')
|
|
526
|
+
const shouldUseIncreasedScalingPercent = isTableScalingEnabled && (tableWithFixedColumnWidthsOption && fg('platform.editor.table.use-increased-scaling-percent') ||
|
|
527
|
+
// When in comment editor, we need the scaling percent to be 40% while tableWithFixedColumnWidthsOption is not visible
|
|
528
|
+
isCommentEditor);
|
|
526
529
|
switch (item.value.name) {
|
|
527
530
|
case 'sort_column_desc':
|
|
528
531
|
sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.CONTEXT_MENU, selectionRect.left, SortOrder.DESC)(state, dispatch);
|