@atlaskit/editor-plugin-table 12.0.0 → 12.0.1

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.
Files changed (6) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/ui/toolbar.js +7 -5
  3. package/dist/es2019/ui/toolbar.js +7 -5
  4. package/dist/esm/ui/toolbar.js +7 -5
  5. package/package.json +3 -3
  6. package/src/ui/toolbar.tsx +8 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/editor-plugin-table
2
2
 
3
+ ## 12.0.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#188597](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188597)
8
+ [`4de5a96f3e24c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4de5a96f3e24c) -
9
+ [ED-28523] Enable new editor element toolbars UI for Jira
10
+ - Updated dependencies
11
+
3
12
  ## 12.0.0
4
13
 
5
14
  ### Major Changes
package/dist/cjs/ui/toolbar.js CHANGED
@@ -17,6 +17,7 @@ var _keymaps = require("@atlaskit/editor-common/keymaps");
17
17
  var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/messages"));
18
18
  var _nesting = require("@atlaskit/editor-common/nesting");
19
19
  var _nodeWidth = require("@atlaskit/editor-common/node-width");
20
+ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
20
21
  var _uiColor = require("@atlaskit/editor-common/ui-color");
21
22
  var _utils = require("@atlaskit/editor-common/utils");
22
23
  var _utils2 = require("@atlaskit/editor-prosemirror/utils");
@@ -373,6 +374,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
373
374
  var isTableScalingEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || false;
374
375
  var nodeType = state.schema.nodes.table;
375
376
  var toolbarTitle = 'Table floating controls';
377
+ var isNewEditorToolbarEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)();
376
378
  if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
377
379
  var _api$editorViewMode;
378
380
  var isDragHandleMenuOpened = false;
@@ -431,7 +433,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
431
433
  var alignmentMenu = config.allowTableAlignment && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
432
434
  var cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
433
435
  var columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
434
- var colorPicker = (0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
436
+ var colorPicker = !isNewEditorToolbarEnabled ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
435
437
 
436
438
  // Check if we need to show confirm dialog for delete button
437
439
  var confirmDialog;
@@ -494,7 +496,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
494
496
  onBlur: (0, _commands.clearHoverSelection)()
495
497
  };
496
498
  };
497
- var shouldGroupWithoutSeparators = (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1');
499
+
498
500
  // testId is required to show focus on trigger button on ESC key press
499
501
  // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
500
502
  var overflowDropdownTestId = 'table-overflow-dropdown-trigger';
@@ -510,12 +512,12 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(getE
510
512
  },
511
513
  zIndex: _editorSharedStyles.akEditorFloatingPanelZIndex + 1,
512
514
  // Place the context menu slightly above the others
513
- items: [menu].concat((0, _toConsumableArray2.default)(!shouldGroupWithoutSeparators ? [separator(menu.hidden)] : []), (0, _toConsumableArray2.default)(alignmentMenu), (0, _toConsumableArray2.default)(!shouldGroupWithoutSeparators ? [separator(alignmentMenu.length === 0)] : []), (0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), (0, _toConsumableArray2.default)(colorPicker), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
515
+ items: [menu].concat((0, _toConsumableArray2.default)(!isNewEditorToolbarEnabled ? [separator(menu.hidden)] : []), (0, _toConsumableArray2.default)(alignmentMenu), (0, _toConsumableArray2.default)(!isNewEditorToolbarEnabled ? [separator(alignmentMenu.length === 0)] : []), (0, _toConsumableArray2.default)(cellItems), (0, _toConsumableArray2.default)(columnSettingsItems), (0, _toConsumableArray2.default)(colorPicker), (0, _toConsumableArray2.default)(!isNewEditorToolbarEnabled ? [{
514
516
  type: 'extensions-placeholder',
515
517
  separator: 'end'
516
518
  }, copyButton, {
517
519
  type: 'separator'
518
- }, deleteButton] : [shouldGroupWithoutSeparators && {
520
+ }, deleteButton] : [isNewEditorToolbarEnabled && {
519
521
  type: 'separator',
520
522
  fullHeight: true
521
523
  }, {
@@ -648,7 +650,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
648
650
  disabled: !wouldChange
649
651
  });
650
652
  }
651
- if (items.length !== 0 && !(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
653
+ if (items.length !== 0 && !(0, _toolbarFlagCheck.areToolbarFlagsEnabled)()) {
652
654
  items.push({
653
655
  type: 'separator'
654
656
  });
package/dist/es2019/ui/toolbar.js CHANGED
@@ -12,6 +12,7 @@ import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/edito
12
12
  import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
13
13
  import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
14
14
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
15
+ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
15
16
  import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
16
17
  import { closestElement, getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
17
18
  import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -353,6 +354,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
353
354
  const isTableScalingEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || false;
354
355
  const nodeType = state.schema.nodes.table;
355
356
  const toolbarTitle = 'Table floating controls';
357
+ const isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
356
358
  if (editorExperiment('platform_editor_controls', 'variant1')) {
357
359
  var _api$editorViewMode, _api$editorViewMode$s;
358
360
  let isDragHandleMenuOpened = false;
@@ -410,7 +412,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
410
412
  const alignmentMenu = config.allowTableAlignment && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
411
413
  const cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
412
414
  const columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
413
- const colorPicker = editorExperiment('platform_editor_controls', 'control') ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
415
+ const colorPicker = !isNewEditorToolbarEnabled ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
414
416
 
415
417
  // Check if we need to show confirm dialog for delete button
416
418
  let confirmDialog;
@@ -464,7 +466,7 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
464
466
  onFocus: hoverTable(isInDanger, isSelected),
465
467
  onBlur: clearHoverSelection()
466
468
  });
467
- const shouldGroupWithoutSeparators = editorExperiment('platform_editor_controls', 'variant1');
469
+
468
470
  // testId is required to show focus on trigger button on ESC key press
469
471
  // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
470
472
  const overflowDropdownTestId = 'table-overflow-dropdown-trigger';
@@ -480,12 +482,12 @@ export const getToolbarConfig = (getEditorContainerWidth, api, editorAnalyticsAP
480
482
  },
481
483
  zIndex: akEditorFloatingPanelZIndex + 1,
482
484
  // Place the context menu slightly above the others
483
- items: [menu, ...(!shouldGroupWithoutSeparators ? [separator(menu.hidden)] : []), ...alignmentMenu, ...(!shouldGroupWithoutSeparators ? [separator(alignmentMenu.length === 0)] : []), ...cellItems, ...columnSettingsItems, ...colorPicker, ...(editorExperiment('platform_editor_controls', 'control') ? [{
485
+ items: [menu, ...(!isNewEditorToolbarEnabled ? [separator(menu.hidden)] : []), ...alignmentMenu, ...(!isNewEditorToolbarEnabled ? [separator(alignmentMenu.length === 0)] : []), ...cellItems, ...columnSettingsItems, ...colorPicker, ...(!isNewEditorToolbarEnabled ? [{
484
486
  type: 'extensions-placeholder',
485
487
  separator: 'end'
486
488
  }, copyButton, {
487
489
  type: 'separator'
488
- }, deleteButton] : [shouldGroupWithoutSeparators && {
490
+ }, deleteButton] : [isNewEditorToolbarEnabled && {
489
491
  type: 'separator',
490
492
  fullHeight: true
491
493
  }, {
@@ -604,7 +606,7 @@ const getColumnSettingItems = (editorState, editorView, {
604
606
  disabled: !wouldChange
605
607
  });
606
608
  }
607
- if (items.length !== 0 && !editorExperiment('platform_editor_controls', 'variant1')) {
609
+ if (items.length !== 0 && !areToolbarFlagsEnabled()) {
608
610
  items.push({
609
611
  type: 'separator'
610
612
  });
package/dist/esm/ui/toolbar.js CHANGED
@@ -16,6 +16,7 @@ import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/edito
16
16
  import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
17
17
  import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
18
18
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
19
+ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
19
20
  import { DEFAULT_BORDER_COLOR, cellBackgroundColorPalette } from '@atlaskit/editor-common/ui-color';
20
21
  import { closestElement, getChildrenInfo as _getChildrenInfo, getNodeName, isReferencedSource } from '@atlaskit/editor-common/utils';
21
22
  import { findParentDomRefOfType } from '@atlaskit/editor-prosemirror/utils';
@@ -366,6 +367,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
366
367
  var isTableScalingEnabled = (options === null || options === void 0 ? void 0 : options.isTableScalingEnabled) || false;
367
368
  var nodeType = state.schema.nodes.table;
368
369
  var toolbarTitle = 'Table floating controls';
370
+ var isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
369
371
  if (editorExperiment('platform_editor_controls', 'variant1')) {
370
372
  var _api$editorViewMode;
371
373
  var isDragHandleMenuOpened = false;
@@ -424,7 +426,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
424
426
  var alignmentMenu = config.allowTableAlignment && !isNested ? getAlignmentOptionsConfig(state, intl, editorAnalyticsAPI, getEditorContainerWidth, editorView, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.fullWidthEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
425
427
  var cellItems = pluginState.isDragAndDropEnabled ? [] : getCellItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, shouldUseIncreasedScalingPercent, options === null || options === void 0 ? void 0 : options.isCommentEditor);
426
428
  var columnSettingsItems = pluginState.isDragAndDropEnabled ? getColumnSettingItems(state, editorView, intl, getEditorContainerWidth, api, editorAnalyticsAPI, isTableScalingEnabled, isTableFixedColumnWidthsOptionEnabled, options === null || options === void 0 ? void 0 : options.isCommentEditor) : [];
427
- var colorPicker = editorExperiment('platform_editor_controls', 'control') ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
429
+ var colorPicker = !isNewEditorToolbarEnabled ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView) : [];
428
430
 
429
431
  // Check if we need to show confirm dialog for delete button
430
432
  var confirmDialog;
@@ -487,7 +489,7 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
487
489
  onBlur: clearHoverSelection()
488
490
  };
489
491
  };
490
- var shouldGroupWithoutSeparators = editorExperiment('platform_editor_controls', 'variant1');
492
+
491
493
  // testId is required to show focus on trigger button on ESC key press
492
494
  // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
493
495
  var overflowDropdownTestId = 'table-overflow-dropdown-trigger';
@@ -503,12 +505,12 @@ export var getToolbarConfig = function getToolbarConfig(getEditorContainerWidth,
503
505
  },
504
506
  zIndex: akEditorFloatingPanelZIndex + 1,
505
507
  // Place the context menu slightly above the others
506
- items: [menu].concat(_toConsumableArray(!shouldGroupWithoutSeparators ? [separator(menu.hidden)] : []), _toConsumableArray(alignmentMenu), _toConsumableArray(!shouldGroupWithoutSeparators ? [separator(alignmentMenu.length === 0)] : []), _toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), _toConsumableArray(colorPicker), _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
508
+ items: [menu].concat(_toConsumableArray(!isNewEditorToolbarEnabled ? [separator(menu.hidden)] : []), _toConsumableArray(alignmentMenu), _toConsumableArray(!isNewEditorToolbarEnabled ? [separator(alignmentMenu.length === 0)] : []), _toConsumableArray(cellItems), _toConsumableArray(columnSettingsItems), _toConsumableArray(colorPicker), _toConsumableArray(!isNewEditorToolbarEnabled ? [{
507
509
  type: 'extensions-placeholder',
508
510
  separator: 'end'
509
511
  }, copyButton, {
510
512
  type: 'separator'
511
- }, deleteButton] : [shouldGroupWithoutSeparators && {
513
+ }, deleteButton] : [isNewEditorToolbarEnabled && {
512
514
  type: 'separator',
513
515
  fullHeight: true
514
516
  }, {
@@ -641,7 +643,7 @@ var getColumnSettingItems = function getColumnSettingItems(editorState, editorVi
641
643
  disabled: !wouldChange
642
644
  });
643
645
  }
644
- if (items.length !== 0 && !editorExperiment('platform_editor_controls', 'variant1')) {
646
+ if (items.length !== 0 && !areToolbarFlagsEnabled()) {
645
647
  items.push({
646
648
  type: 'separator'
647
649
  });
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "12.0.0",
3
+ "version": "12.0.1",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -54,7 +54,7 @@
54
54
  "@atlaskit/primitives": "^14.10.0",
55
55
  "@atlaskit/react-ufo": "^4.0.0",
56
56
  "@atlaskit/theme": "^19.0.0",
57
- "@atlaskit/tmp-editor-statsig": "^9.8.0",
57
+ "@atlaskit/tmp-editor-statsig": "^9.9.0",
58
58
  "@atlaskit/toggle": "^15.0.0",
59
59
  "@atlaskit/tokens": "^5.6.0",
60
60
  "@atlaskit/tooltip": "^20.3.0",
@@ -67,7 +67,7 @@
67
67
  "uuid": "^3.1.0"
68
68
  },
69
69
  "peerDependencies": {
70
- "@atlaskit/editor-common": "^107.8.0",
70
+ "@atlaskit/editor-common": "^107.9.0",
71
71
  "react": "^18.2.0",
72
72
  "react-dom": "^18.2.0",
73
73
  "react-intl-next": "npm:react-intl@^5.18.1"
package/src/ui/toolbar.tsx CHANGED
@@ -13,6 +13,7 @@ import { addColumnAfter, addRowAfter, backspace, tooltip } from '@atlaskit/edito
13
13
  import commonMessages, { tableMessages as messages } from '@atlaskit/editor-common/messages';
14
14
  import { isSelectionTableNestedInTable } from '@atlaskit/editor-common/nesting';
15
15
  import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
16
+ import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
16
17
  import type {
17
18
  Command,
18
19
  CommandDispatch,
@@ -493,6 +494,7 @@ export const getToolbarConfig =
493
494
  const isTableScalingEnabled = options?.isTableScalingEnabled || false;
494
495
  const nodeType = state.schema.nodes.table;
495
496
  const toolbarTitle = 'Table floating controls';
497
+ const isNewEditorToolbarEnabled = areToolbarFlagsEnabled();
496
498
 
497
499
  if (editorExperiment('platform_editor_controls', 'variant1')) {
498
500
  let isDragHandleMenuOpened = false;
@@ -602,7 +604,7 @@ export const getToolbarConfig =
602
604
  )
603
605
  : [];
604
606
 
605
- const colorPicker = editorExperiment('platform_editor_controls', 'control')
607
+ const colorPicker = !isNewEditorToolbarEnabled
606
608
  ? getColorPicker(state, menu, intl, editorAnalyticsAPI, getEditorView)
607
609
  : [];
608
610
 
@@ -668,7 +670,6 @@ export const getToolbarConfig =
668
670
  onBlur: clearHoverSelection(),
669
671
  });
670
672
 
671
- const shouldGroupWithoutSeparators = editorExperiment('platform_editor_controls', 'variant1');
672
673
  // testId is required to show focus on trigger button on ESC key press
673
674
  // see hideOnEsc in platform/packages/editor/editor-plugin-floating-toolbar/src/ui/Dropdown.tsx
674
675
  const overflowDropdownTestId = 'table-overflow-dropdown-trigger';
@@ -685,13 +686,13 @@ export const getToolbarConfig =
685
686
  zIndex: akEditorFloatingPanelZIndex + 1, // Place the context menu slightly above the others
686
687
  items: [
687
688
  menu,
688
- ...(!shouldGroupWithoutSeparators ? [separator(menu.hidden)] : []),
689
+ ...(!isNewEditorToolbarEnabled ? [separator(menu.hidden)] : []),
689
690
  ...alignmentMenu,
690
- ...(!shouldGroupWithoutSeparators ? [separator(alignmentMenu.length === 0)] : []),
691
+ ...(!isNewEditorToolbarEnabled ? [separator(alignmentMenu.length === 0)] : []),
691
692
  ...cellItems,
692
693
  ...columnSettingsItems,
693
694
  ...colorPicker,
694
- ...((editorExperiment('platform_editor_controls', 'control')
695
+ ...((!isNewEditorToolbarEnabled
695
696
  ? ([
696
697
  {
697
698
  type: 'extensions-placeholder',
@@ -702,7 +703,7 @@ export const getToolbarConfig =
702
703
  deleteButton,
703
704
  ] as Array<FloatingToolbarItem<Command>>)
704
705
  : [
705
- shouldGroupWithoutSeparators && { type: 'separator', fullHeight: true },
706
+ isNewEditorToolbarEnabled && { type: 'separator', fullHeight: true },
706
707
  {
707
708
  type: 'overflow-dropdown',
708
709
  testId: overflowDropdownTestId,
@@ -909,7 +910,7 @@ const getColumnSettingItems = (
909
910
  });
910
911
  }
911
912
 
912
- if (items.length !== 0 && !editorExperiment('platform_editor_controls', 'variant1')) {
913
+ if (items.length !== 0 && !areToolbarFlagsEnabled()) {
913
914
  items.push({
914
915
  type: 'separator',
915
916
  });