@atlaskit/editor-plugin-table 10.6.4 → 10.6.6

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 CHANGED
@@ -1,5 +1,24 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 10.6.6
4
+
5
+ ### Patch Changes
6
+
7
+ - [#138280](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138280)
8
+ [`f2eac0d6772c2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2eac0d6772c2) -
9
+ [ux] Adds a new temporary floating toolbar's config option to hide any toolbars when any table's
10
+ menu is opened.
11
+ - Updated dependencies
12
+
13
+ ## 10.6.5
14
+
15
+ ### Patch Changes
16
+
17
+ - [#133802](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/133802)
18
+ [`f523489c8b68a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f523489c8b68a) -
19
+ [ux] ED-27217 Clean up experiment platform_editor_element_drag_and_drop_nested
20
+ - Updated dependencies
21
+
3
22
  ## 10.6.4
4
23
 
5
24
  ### Patch Changes
@@ -610,7 +610,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
610
610
  }
611
611
  }];
612
612
  },
613
- floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, function () {
613
+ floatingToolbar: (0, _toolbar.getToolbarConfig)(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, function () {
614
614
  return editorViewRef.current;
615
615
  }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)((0, _createPluginConfig.pluginConfig)(options === null || options === void 0 ? void 0 : options.tableOptions))
616
616
  },
@@ -10,7 +10,6 @@ var _react = _interopRequireWildcard(require("react"));
10
10
  var _browser = require("@atlaskit/editor-common/browser");
11
11
  var _utils = require("@atlaskit/editor-tables/utils");
12
12
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
13
- var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
14
13
  var _commands = require("../../pm-plugins/commands");
15
14
  var _nodes = require("../../pm-plugins/utils/nodes");
16
15
  var _types = require("../../types");
@@ -90,7 +89,7 @@ var TableFloatingControls = exports.TableFloatingControls = function TableFloati
90
89
  // Ignored via go/ees005
91
90
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
92
91
  var isNested = tablePos !== undefined && (0, _nodes.isTableNested)(editorView.state, tablePos);
93
- var shouldShowCornerControls = isNested && !(0, _experiments.editorExperiment)('nested-dnd', true);
92
+ var shouldShowCornerControls = isNested && !(0, _platformFeatureFlags.fg)('platform_editor_nested_dnd_styles_changes');
94
93
  return (
95
94
  /*#__PURE__*/
96
95
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -37,7 +37,8 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
37
37
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
38
38
  var _commands = require("../pm-plugins/commands");
39
39
  var _commandsWithAnalytics = require("../pm-plugins/commands/commands-with-analytics");
40
- var _pluginFactory = require("../pm-plugins/plugin-factory");
40
+ var _pluginFactory = require("../pm-plugins/drag-and-drop/plugin-factory");
41
+ var _pluginFactory2 = require("../pm-plugins/plugin-factory");
41
42
  var _pluginKey = require("../pm-plugins/table-resizing/plugin-key");
42
43
  var _misc = require("../pm-plugins/table-resizing/utils/misc");
43
44
  var _resizeState = require("../pm-plugins/table-resizing/utils/resize-state");
@@ -155,7 +156,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
155
156
  left = initialSelectionRect.left;
156
157
  var numberOfColumns = right - left;
157
158
  var numberOfRows = bottom - top;
158
- var pluginState = (0, _pluginFactory.getPluginState)(editorState);
159
+ var pluginState = (0, _pluginFactory2.getPluginState)(editorState);
159
160
  var options = [{
160
161
  id: 'editor.table.insertColumn',
161
162
  title: formatMessage(_messages.tableMessages.insertColumn),
@@ -318,7 +319,7 @@ var getToolbarCellOptionsConfig = exports.getToolbarCellOptionsConfig = function
318
319
  0: Math.max(numberOfColumns, numberOfRows)
319
320
  }),
320
321
  onClick: function onClick(state, dispatch) {
321
- var _getPluginState = (0, _pluginFactory.getPluginState)(state),
322
+ var _getPluginState = (0, _pluginFactory2.getPluginState)(state),
322
323
  targetCellPosition = _getPluginState.targetCellPosition;
323
324
  (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.FLOATING_TB, targetCellPosition)(state, dispatch);
324
325
  return true;
@@ -361,21 +362,46 @@ var getClosestSelectionOrTableRect = function getClosestSelectionOrTableRect(sta
361
362
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
362
363
  return (0, _utils3.isSelectionType)(selection, 'cell') ? (0, _utils3.getSelectionRect)(selection) : tableRect;
363
364
  };
364
- var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, api, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) {
365
- var isTableFixedColumnWidthsOptionEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
366
- var shouldUseIncreasedScalingPercent = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
365
+ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, api, editorAnalyticsAPI, getEditorView, options) {
366
+ var isTableFixedColumnWidthsOptionEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
367
+ var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
367
368
  return function (config) {
368
369
  return function (state, intl) {
369
370
  var tableObject = (0, _utils3.findTable)(state.selection);
370
- var pluginState = (0, _pluginFactory.getPluginState)(state);
371
+ var pluginState = (0, _pluginFactory2.getPluginState)(state);
371
372
  var resizeState = _pluginKey.pluginKey.getState(state);
372
373
  var tableWidthState = _tableWidth.pluginKey.getState(state);
373
374
  var isTableScalingEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || false;
375
+ var nodeType = state.schema.nodes.table;
376
+ var toolbarTitle = 'Table floating controls';
377
+ if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_3')) {
378
+ var isDragHandleMenuOpened = false;
379
+ var isTableRowOrColumnDragged = false;
380
+ if (options !== null && options !== void 0 && options.dragAndDropEnabled) {
381
+ var _getDragDropPluginSta = (0, _pluginFactory.getPluginState)(state),
382
+ _getDragDropPluginSta2 = _getDragDropPluginSta.isDragMenuOpen,
383
+ isDragMenuOpen = _getDragDropPluginSta2 === void 0 ? false : _getDragDropPluginSta2,
384
+ _getDragDropPluginSta3 = _getDragDropPluginSta.isDragging,
385
+ isDragging = _getDragDropPluginSta3 === void 0 ? false : _getDragDropPluginSta3;
386
+ isDragHandleMenuOpened = isDragMenuOpen;
387
+ isTableRowOrColumnDragged = isDragging;
388
+ }
389
+ var isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
390
+ var isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
391
+ var shouldSuppressAllToolbars = !pluginState.editorHasFocus || isTableMenuOpened || isTableOrColumnResizing || isTableRowOrColumnDragged;
392
+ if (shouldSuppressAllToolbars) {
393
+ return {
394
+ title: toolbarTitle,
395
+ items: [],
396
+ nodeType: nodeType,
397
+ __suppressAllToolbars: true
398
+ };
399
+ }
400
+ }
374
401
 
375
402
  // We don't want to show floating toolbar while resizing the table
376
403
  var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
377
404
  if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
378
- var nodeType = state.schema.nodes.table;
379
405
  var isNested = pluginState.tablePos && (0, _nodes.isTableNested)(state, pluginState.tablePos);
380
406
  var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
381
407
  var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
@@ -463,7 +489,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
463
489
  } : undefined;
464
490
  };
465
491
  return {
466
- title: 'Table floating controls',
492
+ title: toolbarTitle,
467
493
  getDomRef: getDomRef,
468
494
  nodeType: nodeType,
469
495
  offset: [0, 18],
@@ -581,7 +607,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
581
607
  var isTableScalingEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
582
608
  var isTableFixedColumnWidthsOptionEnabled = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
583
609
  var isCommentEditor = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : false;
584
- var pluginState = (0, _pluginFactory.getPluginState)(editorState);
610
+ var pluginState = (0, _pluginFactory2.getPluginState)(editorState);
585
611
  var selectionOrTableRect = getClosestSelectionOrTableRect(editorState);
586
612
  if (!selectionOrTableRect || !editorView) {
587
613
  return [];
@@ -617,7 +643,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
617
643
  var getColorPicker = function getColorPicker(state, menu, _ref5, editorAnalyticsAPI, getEditorView) {
618
644
  var _node$attrs;
619
645
  var formatMessage = _ref5.formatMessage;
620
- var _getPluginState2 = (0, _pluginFactory.getPluginState)(state),
646
+ var _getPluginState2 = (0, _pluginFactory2.getPluginState)(state),
621
647
  targetCellPosition = _getPluginState2.targetCellPosition,
622
648
  pluginConfig = _getPluginState2.pluginConfig;
623
649
  if (!pluginConfig.allowBackgroundColor) {
@@ -605,7 +605,7 @@ const tablesPlugin = ({
605
605
  return tr;
606
606
  }
607
607
  }],
608
- floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, () => editorViewRef.current, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
608
+ floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, () => editorViewRef.current, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
609
609
  },
610
610
  usePluginHook({
611
611
  editorView
@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
2
2
  import { browser } from '@atlaskit/editor-common/browser';
3
3
  import { findTable } from '@atlaskit/editor-tables/utils';
4
4
  import { fg } from '@atlaskit/platform-feature-flags';
5
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
5
  import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
7
6
  import { isTableNested } from '../../pm-plugins/utils/nodes';
8
7
  import { TableCssClassName as ClassName } from '../../types';
@@ -89,7 +88,7 @@ export const TableFloatingControls = ({
89
88
  // Ignored via go/ees005
90
89
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
91
90
  const isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos);
92
- const shouldShowCornerControls = isNested && !editorExperiment('nested-dnd', true);
91
+ const shouldShowCornerControls = isNested && !fg('platform_editor_nested_dnd_styles_changes');
93
92
  return (
94
93
  /*#__PURE__*/
95
94
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -32,6 +32,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
32
32
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
33
33
  import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from '../pm-plugins/commands';
34
34
  import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, setTableAlignmentWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleFixedColumnWidthsOptionAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
35
+ import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
35
36
  import { getPluginState } from '../pm-plugins/plugin-factory';
36
37
  import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing/plugin-key';
37
38
  import { getStaticTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
@@ -344,17 +345,41 @@ const getClosestSelectionOrTableRect = state => {
344
345
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
345
346
  return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
346
347
  };
347
- export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
348
+ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAPI, getEditorView, options, isTableFixedColumnWidthsOptionEnabled = false, shouldUseIncreasedScalingPercent = false) => config => (state, intl) => {
348
349
  const tableObject = findTable(state.selection);
349
350
  const pluginState = getPluginState(state);
350
351
  const resizeState = tableResizingPluginKey.getState(state);
351
352
  const tableWidthState = tableWidthPluginKey.getState(state);
352
353
  const isTableScalingEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || false;
354
+ const nodeType = state.schema.nodes.table;
355
+ const toolbarTitle = 'Table floating controls';
356
+ if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_3')) {
357
+ let isDragHandleMenuOpened = false;
358
+ let isTableRowOrColumnDragged = false;
359
+ if (options !== null && options !== void 0 && options.dragAndDropEnabled) {
360
+ const {
361
+ isDragMenuOpen = false,
362
+ isDragging = false
363
+ } = getDragDropPluginState(state);
364
+ isDragHandleMenuOpened = isDragMenuOpen;
365
+ isTableRowOrColumnDragged = isDragging;
366
+ }
367
+ const isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
368
+ const isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
369
+ const shouldSuppressAllToolbars = !pluginState.editorHasFocus || isTableMenuOpened || isTableOrColumnResizing || isTableRowOrColumnDragged;
370
+ if (shouldSuppressAllToolbars) {
371
+ return {
372
+ title: toolbarTitle,
373
+ items: [],
374
+ nodeType,
375
+ __suppressAllToolbars: true
376
+ };
377
+ }
378
+ }
353
379
 
354
380
  // We don't want to show floating toolbar while resizing the table
355
381
  const isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
356
382
  if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
357
- const nodeType = state.schema.nodes.table;
358
383
  const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
359
384
  const isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
360
385
  const areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
@@ -433,7 +458,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
433
458
  onBlur: clearHoverSelection()
434
459
  } : undefined;
435
460
  return {
436
- title: 'Table floating controls',
461
+ title: toolbarTitle,
437
462
  getDomRef,
438
463
  nodeType,
439
464
  offset: [0, 18],
@@ -601,7 +601,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
601
601
  }
602
602
  }];
603
603
  },
604
- floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, (options === null || options === void 0 ? void 0 : options.getEditorFeatureFlags) || defaultGetEditorFeatureFlags, function () {
604
+ floatingToolbar: getToolbarConfig(defaultGetEditorContainerWidth, api, editorAnalyticsAPI, function () {
605
605
  return editorViewRef.current;
606
606
  }, options, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent)(pluginConfig(options === null || options === void 0 ? void 0 : options.tableOptions))
607
607
  },
@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
2
2
  import { browser } from '@atlaskit/editor-common/browser';
3
3
  import { findTable } from '@atlaskit/editor-tables/utils';
4
4
  import { fg } from '@atlaskit/platform-feature-flags';
5
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
6
5
  import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
7
6
  import { isTableNested } from '../../pm-plugins/utils/nodes';
8
7
  import { TableCssClassName as ClassName } from '../../types';
@@ -80,7 +79,7 @@ export var TableFloatingControls = function TableFloatingControls(_ref) {
80
79
  // Ignored via go/ees005
81
80
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
82
81
  var isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos);
83
- var shouldShowCornerControls = isNested && !editorExperiment('nested-dnd', true);
82
+ var shouldShowCornerControls = isNested && !fg('platform_editor_nested_dnd_styles_changes');
84
83
  return (
85
84
  /*#__PURE__*/
86
85
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -36,6 +36,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
36
36
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
37
37
  import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, hoverTable, removeDescendantNodes } from '../pm-plugins/commands';
38
38
  import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, deleteTableWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, setTableAlignmentWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics, toggleFixedColumnWidthsOptionAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics, wrapTableInExpandWithAnalytics } from '../pm-plugins/commands/commands-with-analytics';
39
+ import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
39
40
  import { getPluginState } from '../pm-plugins/plugin-factory';
40
41
  import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing/plugin-key';
41
42
  import { getStaticTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
@@ -353,9 +354,9 @@ var getClosestSelectionOrTableRect = function getClosestSelectionOrTableRect(sta
353
354
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
354
355
  return isSelectionType(selection, 'cell') ? getSelectionRect(selection) : tableRect;
355
356
  };
356
- export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, api, editorAnalyticsAPI, getEditorFeatureFlags, getEditorView, options) {
357
- var isTableFixedColumnWidthsOptionEnabled = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
358
- var shouldUseIncreasedScalingPercent = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : false;
357
+ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth, api, editorAnalyticsAPI, getEditorView, options) {
358
+ var isTableFixedColumnWidthsOptionEnabled = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
359
+ var shouldUseIncreasedScalingPercent = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : false;
359
360
  return function (config) {
360
361
  return function (state, intl) {
361
362
  var tableObject = findTable(state.selection);
@@ -363,11 +364,36 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
363
364
  var resizeState = tableResizingPluginKey.getState(state);
364
365
  var tableWidthState = tableWidthPluginKey.getState(state);
365
366
  var isTableScalingEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || false;
367
+ var nodeType = state.schema.nodes.table;
368
+ var toolbarTitle = 'Table floating controls';
369
+ if (editorExperiment('platform_editor_controls', 'variant1') && fg('platform_editor_controls_patch_3')) {
370
+ var isDragHandleMenuOpened = false;
371
+ var isTableRowOrColumnDragged = false;
372
+ if (options !== null && options !== void 0 && options.dragAndDropEnabled) {
373
+ var _getDragDropPluginSta = getDragDropPluginState(state),
374
+ _getDragDropPluginSta2 = _getDragDropPluginSta.isDragMenuOpen,
375
+ isDragMenuOpen = _getDragDropPluginSta2 === void 0 ? false : _getDragDropPluginSta2,
376
+ _getDragDropPluginSta3 = _getDragDropPluginSta.isDragging,
377
+ isDragging = _getDragDropPluginSta3 === void 0 ? false : _getDragDropPluginSta3;
378
+ isDragHandleMenuOpened = isDragMenuOpen;
379
+ isTableRowOrColumnDragged = isDragging;
380
+ }
381
+ var isTableOrColumnResizing = !!(resizeState !== null && resizeState !== void 0 && resizeState.dragging || tableWidthState !== null && tableWidthState !== void 0 && tableWidthState.resizing);
382
+ var isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
383
+ var shouldSuppressAllToolbars = !pluginState.editorHasFocus || isTableMenuOpened || isTableOrColumnResizing || isTableRowOrColumnDragged;
384
+ if (shouldSuppressAllToolbars) {
385
+ return {
386
+ title: toolbarTitle,
387
+ items: [],
388
+ nodeType: nodeType,
389
+ __suppressAllToolbars: true
390
+ };
391
+ }
392
+ }
366
393
 
367
394
  // We don't want to show floating toolbar while resizing the table
368
395
  var isWidthResizing = tableWidthState === null || tableWidthState === void 0 ? void 0 : tableWidthState.resizing;
369
396
  if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
370
- var nodeType = state.schema.nodes.table;
371
397
  var isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
372
398
  var isTableScalingWithFixedColumnWidthsOptionShown = isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
373
399
  var areTableColumWidthsFixed = tableObject.node.attrs.displayMode === 'fixed';
@@ -455,7 +481,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
455
481
  } : undefined;
456
482
  };
457
483
  return {
458
- title: 'Table floating controls',
484
+ title: toolbarTitle,
459
485
  getDomRef: getDomRef,
460
486
  nodeType: nodeType,
461
487
  offset: [0, 18],
@@ -1,5 +1,5 @@
1
1
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
2
- import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
2
+ import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
3
3
  import type { EditorState } from '@atlaskit/editor-prosemirror/state';
4
4
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
5
  import { Rect } from '@atlaskit/editor-tables/table-map';
@@ -8,4 +8,4 @@ import type { PluginConfig, PluginInjectionAPI, ToolbarMenuConfig, ToolbarMenuCo
8
8
  export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingWithFixedColumnWidthsOptionShown?: boolean, areTableColumnWidthsFixed?: boolean) => FloatingToolbarItem<Command>;
9
9
  export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => FloatingToolbarDropdown<Command>;
10
10
  export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
11
- export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => (config: PluginConfig) => FloatingToolbarHandler;
11
+ export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorView: () => EditorView | null, options?: TablePluginOptions, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => (config: PluginConfig) => FloatingToolbarHandler;
@@ -1,5 +1,5 @@
1
1
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
2
- import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth, GetEditorFeatureFlags } from '@atlaskit/editor-common/types';
2
+ import type { Command, FloatingToolbarDropdown, FloatingToolbarHandler, FloatingToolbarItem, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
3
3
  import type { EditorState } from '@atlaskit/editor-prosemirror/state';
4
4
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
5
5
  import { Rect } from '@atlaskit/editor-tables/table-map';
@@ -8,4 +8,4 @@ import type { PluginConfig, PluginInjectionAPI, ToolbarMenuConfig, ToolbarMenuCo
8
8
  export declare const getToolbarMenuConfig: (config: ToolbarMenuConfig, state: ToolbarMenuState, { formatMessage }: ToolbarMenuContext, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingWithFixedColumnWidthsOptionShown?: boolean, areTableColumnWidthsFixed?: boolean) => FloatingToolbarItem<Command>;
9
9
  export declare const getToolbarCellOptionsConfig: (editorState: EditorState, editorView: EditorView | undefined | null, initialSelectionRect: Rect, { formatMessage }: ToolbarMenuContext, getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => FloatingToolbarDropdown<Command>;
10
10
  export declare const getClosestSelectionRect: (state: EditorState) => Rect | undefined;
11
- export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorFeatureFlags: GetEditorFeatureFlags, getEditorView: () => EditorView | null, options?: TablePluginOptions, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => (config: PluginConfig) => FloatingToolbarHandler;
11
+ export declare const getToolbarConfig: (getEditorContainerWidth: GetEditorContainerWidth, api: PluginInjectionAPI | undefined | null, editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null, getEditorView: () => EditorView | null, options?: TablePluginOptions, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean) => (config: PluginConfig) => FloatingToolbarHandler;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "10.6.4",
3
+ "version": "10.6.6",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,7 +32,7 @@
32
32
  "@atlaskit/adf-schema": "^47.6.0",
33
33
  "@atlaskit/button": "^23.0.0",
34
34
  "@atlaskit/custom-steps": "^0.11.0",
35
- "@atlaskit/editor-common": "^103.0.0",
35
+ "@atlaskit/editor-common": "^103.1.0",
36
36
  "@atlaskit/editor-palette": "^2.1.0",
37
37
  "@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
38
38
  "@atlaskit/editor-plugin-analytics": "^2.2.0",
@@ -183,6 +183,9 @@
183
183
  "platform_editor_paste_full_table_inside_empty_cell": {
184
184
  "type": "boolean"
185
185
  },
186
+ "platform_editor_nested_dnd_styles_changes": {
187
+ "type": "boolean"
188
+ },
186
189
  "platform_editor_numbered_column_misalignment": {
187
190
  "type": "boolean"
188
191
  },
@@ -197,6 +200,9 @@
197
200
  },
198
201
  "platform_editor_controls_patch_2": {
199
202
  "type": "boolean"
203
+ },
204
+ "platform_editor_controls_patch_3": {
205
+ "type": "boolean"
200
206
  }
201
207
  }
202
208
  }
@@ -768,7 +768,6 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
768
768
  defaultGetEditorContainerWidth,
769
769
  api,
770
770
  editorAnalyticsAPI,
771
- options?.getEditorFeatureFlags || defaultGetEditorFeatureFlags,
772
771
  () => editorViewRef.current,
773
772
  options,
774
773
  isTableFixedColumnWidthsOptionEnabled,
@@ -8,7 +8,6 @@ import type { Selection } from '@atlaskit/editor-prosemirror/state';
8
8
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
9
9
  import { findTable } from '@atlaskit/editor-tables/utils';
10
10
  import { fg } from '@atlaskit/platform-feature-flags';
11
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
12
11
 
13
12
  import { hoverCell, hoverRows, selectRow, selectRows } from '../../pm-plugins/commands';
14
13
  import type { RowStickyState } from '../../pm-plugins/sticky-headers/types';
@@ -139,7 +138,7 @@ export const TableFloatingControls = ({
139
138
  // Ignored via go/ees005
140
139
  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
141
140
  const isNested = tablePos !== undefined && isTableNested(editorView.state, tablePos!);
142
- const shouldShowCornerControls = isNested && !editorExperiment('nested-dnd', true);
141
+ const shouldShowCornerControls = isNested && !fg('platform_editor_nested_dnd_styles_changes');
143
142
 
144
143
  return (
145
144
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -23,7 +23,6 @@ import type {
23
23
  FloatingToolbarHandler,
24
24
  FloatingToolbarItem,
25
25
  GetEditorContainerWidth,
26
- GetEditorFeatureFlags,
27
26
  Icon,
28
27
  typeOption,
29
28
  } from '@atlaskit/editor-common/types';
@@ -87,6 +86,7 @@ import {
87
86
  toggleNumberColumnWithAnalytics,
88
87
  wrapTableInExpandWithAnalytics,
89
88
  } from '../pm-plugins/commands/commands-with-analytics';
89
+ import { getPluginState as getDragDropPluginState } from '../pm-plugins/drag-and-drop/plugin-factory';
90
90
  import { getPluginState } from '../pm-plugins/plugin-factory';
91
91
  import { pluginKey as tableResizingPluginKey } from '../pm-plugins/table-resizing/plugin-key';
92
92
  import { getStaticTableScalingPercent } from '../pm-plugins/table-resizing/utils/misc';
@@ -479,7 +479,6 @@ export const getToolbarConfig =
479
479
  getEditorContainerWidth: GetEditorContainerWidth,
480
480
  api: PluginInjectionAPI | undefined | null,
481
481
  editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
482
- getEditorFeatureFlags: GetEditorFeatureFlags,
483
482
  getEditorView: () => EditorView | null,
484
483
  options?: TablePluginOptions,
485
484
  isTableFixedColumnWidthsOptionEnabled = false,
@@ -492,12 +491,42 @@ export const getToolbarConfig =
492
491
  const resizeState = tableResizingPluginKey.getState(state);
493
492
  const tableWidthState = tableWidthPluginKey.getState(state);
494
493
  const isTableScalingEnabled = options?.isTableScalingEnabled || false;
494
+ const nodeType = state.schema.nodes.table;
495
+ const toolbarTitle = 'Table floating controls';
496
+
497
+ if (
498
+ editorExperiment('platform_editor_controls', 'variant1') &&
499
+ fg('platform_editor_controls_patch_3')
500
+ ) {
501
+ let isDragHandleMenuOpened = false;
502
+ let isTableRowOrColumnDragged = false;
503
+ if (options?.dragAndDropEnabled) {
504
+ const { isDragMenuOpen = false, isDragging = false } = getDragDropPluginState(state);
505
+ isDragHandleMenuOpened = isDragMenuOpen;
506
+ isTableRowOrColumnDragged = isDragging;
507
+ }
508
+
509
+ const isTableOrColumnResizing = !!(resizeState?.dragging || tableWidthState?.resizing);
510
+ const isTableMenuOpened = pluginState.isContextualMenuOpen || isDragHandleMenuOpened;
511
+ const shouldSuppressAllToolbars =
512
+ !pluginState.editorHasFocus ||
513
+ isTableMenuOpened ||
514
+ isTableOrColumnResizing ||
515
+ isTableRowOrColumnDragged;
516
+ if (shouldSuppressAllToolbars) {
517
+ return {
518
+ title: toolbarTitle,
519
+ items: [],
520
+ nodeType,
521
+ __suppressAllToolbars: true,
522
+ };
523
+ }
524
+ }
495
525
 
496
526
  // We don't want to show floating toolbar while resizing the table
497
527
  const isWidthResizing = tableWidthState?.resizing;
498
528
 
499
529
  if (tableObject && pluginState.editorHasFocus && !isWidthResizing) {
500
- const nodeType = state.schema.nodes.table;
501
530
  const isNested = pluginState.tablePos && isTableNested(state, pluginState.tablePos);
502
531
  const isTableScalingWithFixedColumnWidthsOptionShown =
503
532
  isTableScalingEnabled && isTableFixedColumnWidthsOptionEnabled && !isNested;
@@ -645,7 +674,7 @@ export const getToolbarConfig =
645
674
  : undefined;
646
675
 
647
676
  return {
648
- title: 'Table floating controls',
677
+ title: toolbarTitle,
649
678
  getDomRef,
650
679
  nodeType,
651
680
  offset: [0, 18],