@atlaskit/editor-plugin-table 8.2.1 → 8.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/dist/cjs/commands/insert.js +97 -3
  3. package/dist/cjs/plugin.js +57 -38
  4. package/dist/cjs/pm-plugins/drag-and-drop/utils/autoscrollers.js +3 -3
  5. package/dist/cjs/pm-plugins/keymap.js +18 -1
  6. package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +2 -1
  7. package/dist/es2019/commands/insert.js +91 -2
  8. package/dist/es2019/plugin.js +58 -41
  9. package/dist/es2019/pm-plugins/drag-and-drop/utils/autoscrollers.js +3 -3
  10. package/dist/es2019/pm-plugins/keymap.js +20 -3
  11. package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +2 -1
  12. package/dist/esm/commands/insert.js +97 -2
  13. package/dist/esm/plugin.js +58 -39
  14. package/dist/esm/pm-plugins/drag-and-drop/utils/autoscrollers.js +3 -3
  15. package/dist/esm/pm-plugins/keymap.js +20 -3
  16. package/dist/esm/ui/FloatingDragMenu/DragMenu.js +2 -1
  17. package/dist/types/commands/insert.d.ts +41 -1
  18. package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts +1 -2
  19. package/dist/types/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +2 -4
  20. package/dist/types/ui/TableFloatingControls/index.d.ts +1 -2
  21. package/dist/types/utils/drag-menu.d.ts +3 -3
  22. package/dist/types-ts4.5/commands/insert.d.ts +41 -1
  23. package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnControls/index.d.ts +1 -2
  24. package/dist/types-ts4.5/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +2 -4
  25. package/dist/types-ts4.5/ui/TableFloatingControls/index.d.ts +1 -2
  26. package/dist/types-ts4.5/utils/drag-menu.d.ts +3 -3
  27. package/package.json +8 -5
  28. package/src/commands/insert.ts +119 -3
  29. package/src/plugin.tsx +78 -54
  30. package/src/pm-plugins/drag-and-drop/utils/autoscrollers.ts +3 -3
  31. package/src/pm-plugins/keymap.ts +40 -10
  32. package/src/ui/FloatingDragMenu/DragMenu.tsx +2 -1
  33. package/src/utils/drag-menu.ts +3 -3
@@ -1,13 +1,53 @@
1
- import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
1
+ import type { AnalyticsEventPayload, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
2
2
  import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
3
3
  import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
4
4
  import type { Transaction } from '@atlaskit/editor-prosemirror/state';
5
5
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
6
6
  import type { PluginInjectionAPI } from '../types';
7
+ type InsertTableWithNestingSupportCommand = (options: {
8
+ isTableScalingEnabled?: boolean;
9
+ isTableAlignmentEnabled?: boolean;
10
+ isFullWidthModeEnabled?: boolean;
11
+ isCommentEditor?: boolean;
12
+ isChromelessEditor?: boolean;
13
+ isTableResizingEnabled?: boolean;
14
+ createTableProps?: {
15
+ rowsCount?: number;
16
+ colsCount?: number;
17
+ };
18
+ }, api: PluginInjectionAPI | undefined | null, analyticsPayload?: AnalyticsEventPayload) => EditorCommand;
7
19
  export declare function addColumnAt(api: PluginInjectionAPI | undefined | null, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean): (column: number, allowAddColumnCustomStep: boolean | undefined, view: EditorView | undefined) => (tr: Transaction) => Transaction;
8
20
  export declare const addColumnBefore: (api: PluginInjectionAPI | undefined | null, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => Command;
9
21
  export declare const addColumnAfter: (api: PluginInjectionAPI | undefined | null, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => Command;
10
22
  export declare const insertColumn: (api: PluginInjectionAPI | undefined | null, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, isCommentEditor?: boolean) => (column: number) => Command;
11
23
  export declare const insertRow: (row: number, moveCursorToTheNewRow: boolean) => Command;
24
+ /**
25
+ * @private
26
+ * @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
27
+ * (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
28
+ */
12
29
  export declare const createTable: (isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, isFullWidthModeEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI | undefined | null, isCommentEditor?: boolean, isChromelessEditor?: boolean, isTableResizingEnabled?: boolean) => Command;
30
+ /**
31
+ * @private
32
+ * @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
33
+ * (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
34
+ */
13
35
  export declare const insertTableWithSize: (isFullWidthModeEnabled?: boolean, isTableScalingEnabled?: boolean, isTableAlignmentEnabled?: boolean, editorAnalyticsAPI?: EditorAnalyticsAPI, isCommentEditor?: boolean, isChromelessEditor?: boolean) => (rowsCount: number, colsCount: number, inputMethod?: INPUT_METHOD.PICKER) => EditorCommand;
36
+ /**
37
+ * Unified command to insert a new table into the editor.
38
+ *
39
+ * @param {Object} options - Configuration options for table insertion.
40
+ * @param {boolean} [options.isTableScalingEnabled=false] - Flag to enable table scaling.
41
+ * @param {boolean} [options.isTableAlignmentEnabled=false] - Flag to enable table alignment.
42
+ * @param {boolean} [options.isFullWidthModeEnabled=false] - Flag to enable full-width mode for the table.
43
+ * @param {boolean} [options.isCommentEditor=false] - Flag to indicate if the editor is in comment mode.
44
+ * @param {boolean} [options.isChromelessEditor=false] - Flag to indicate if the editor is chromeless.
45
+ * @param {boolean} [options.isTableResizingEnabled=false] - Flag to enable table resizing.
46
+ * @param {Object} [options.createTableProps={}] - Additional properties for table creation, including table size.
47
+ * @param {Object} api - PluginInjectinoApi object for content insertion commands.
48
+ * @param {Object} analyticsPayload - Payload for analytics tracking.
49
+ *
50
+ * @returns {Function} A function that takes a transaction and inserts a table.
51
+ */
52
+ export declare const insertTableWithNestingSupport: InsertTableWithNestingSupportCommand;
53
+ export {};
@@ -47,7 +47,6 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
47
47
  actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
48
48
  }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>,
49
49
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contentInsertion", {
50
- actions: import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI;
51
50
  dependencies: [
52
51
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
53
52
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
@@ -65,7 +64,7 @@ export declare const ColumnControls: ({ editorView, tableActive, tableRef, hover
65
64
  actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
66
65
  }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>
67
66
  ];
68
- }, undefined>,
67
+ } & import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI, undefined>,
69
68
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
70
69
  sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
71
70
  }, undefined>,
@@ -28,7 +28,6 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
28
28
  actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
29
29
  }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>,
30
30
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contentInsertion", {
31
- actions: import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI;
32
31
  dependencies: [
33
32
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
34
33
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
@@ -46,7 +45,7 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
46
45
  actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
47
46
  }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>
48
47
  ];
49
- }, undefined>,
48
+ } & import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI, undefined>,
50
49
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
51
50
  sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
52
51
  }, undefined>,
@@ -136,7 +135,6 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
136
135
  actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
137
136
  }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>,
138
137
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contentInsertion", {
139
- actions: import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI;
140
138
  dependencies: [
141
139
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
142
140
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
@@ -154,7 +152,7 @@ export declare const DragCornerControlsWithSelection: React.FC<import("react-int
154
152
  actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
155
153
  }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>
156
154
  ];
157
- }, undefined>,
155
+ } & import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI, undefined>,
158
156
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
159
157
  sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
160
158
  }, undefined>,
@@ -57,7 +57,6 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
57
57
  actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
58
58
  }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>,
59
59
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"contentInsertion", {
60
- actions: import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI;
61
60
  dependencies: [
62
61
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"analytics", {
63
62
  pluginConfiguration: import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions;
@@ -75,7 +74,7 @@ export declare const TableFloatingControls: ({ editorView, tableRef, tableNode,
75
74
  actions: import("@atlaskit/editor-common/analytics").EditorAnalyticsAPI;
76
75
  }, import("@atlaskit/editor-plugin-analytics").AnalyticsPluginOptions>
77
76
  ];
78
- }, undefined>,
77
+ } & import("@atlaskit/editor-plugin-content-insertion").InsertNodeAPI, undefined>,
79
78
  import("@atlaskit/editor-common/types").NextEditorPluginFunctionOptionalConfigDefinition<"width", {
80
79
  sharedState: import("@atlaskit/editor-common/types").EditorContainerWidth | undefined;
81
80
  }, undefined>,
@@ -5,15 +5,15 @@ import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessib
5
5
  import type { Selection } from '@atlaskit/editor-prosemirror/state';
6
6
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
7
7
  import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
8
- import type { UNSAFE_NewIconProps } from '@atlaskit/icon/types';
8
+ import type { NewIconProps } from '@atlaskit/icon/types';
9
9
  import type { DraggableData, DraggableType, PluginInjectionAPI, TableDirection } from '../types';
10
10
  export declare const getTargetIndex: (selectedIndexes: number[], direction: DraggableData['direction']) => number;
11
11
  export declare const canMove: (sourceType: DraggableType, direction: DraggableData['direction'], totalItemsOfSourceTypeCount: number, selection: Selection, selectionRect?: Rect) => boolean;
12
12
  export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
13
13
  export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
14
14
  id: DragMenuOptionIdType;
15
- icon?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
16
- iconFallback?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
15
+ icon?: React.ComponentType<React.PropsWithChildren<NewIconProps>>;
16
+ iconFallback?: React.ComponentType<React.PropsWithChildren<NewIconProps>>;
17
17
  keymap?: string;
18
18
  }
19
19
  export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, api: PluginInjectionAPI | undefined | null, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, ariaNotifyPlugin?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined, isCommentEditor?: boolean) => DragMenuConfig[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-table",
3
- "version": "8.2.1",
3
+ "version": "8.3.0",
4
4
  "description": "Table plugin for the @atlaskit/editor",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -35,7 +35,7 @@
35
35
  "@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
36
36
  "@atlaskit/editor-plugin-analytics": "^1.10.0",
37
37
  "@atlaskit/editor-plugin-batch-attribute-updates": "1.1.6",
38
- "@atlaskit/editor-plugin-content-insertion": "^1.10.0",
38
+ "@atlaskit/editor-plugin-content-insertion": "^1.11.0",
39
39
  "@atlaskit/editor-plugin-editor-viewmode": "^2.1.0",
40
40
  "@atlaskit/editor-plugin-guideline": "^1.2.0",
41
41
  "@atlaskit/editor-plugin-selection": "^1.5.0",
@@ -43,15 +43,15 @@
43
43
  "@atlaskit/editor-prosemirror": "6.2.1",
44
44
  "@atlaskit/editor-shared-styles": "^3.2.0",
45
45
  "@atlaskit/editor-tables": "^2.8.0",
46
- "@atlaskit/icon": "^22.28.0",
46
+ "@atlaskit/icon": "^23.0.0",
47
47
  "@atlaskit/menu": "^2.13.0",
48
48
  "@atlaskit/platform-feature-flags": "^0.3.0",
49
49
  "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
50
- "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
50
+ "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.0.0",
51
51
  "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.0",
52
52
  "@atlaskit/primitives": "^13.3.0",
53
53
  "@atlaskit/theme": "^14.0.0",
54
- "@atlaskit/tmp-editor-statsig": "^2.21.0",
54
+ "@atlaskit/tmp-editor-statsig": "^2.22.0",
55
55
  "@atlaskit/toggle": "^13.4.0",
56
56
  "@atlaskit/tokens": "^2.4.0",
57
57
  "@atlaskit/tooltip": "^18.9.0",
@@ -127,6 +127,9 @@
127
127
  },
128
128
  "platform_editor_set_alignment_when_resized": {
129
129
  "type": "boolean"
130
+ },
131
+ "platform_editor_table_drag_menu_mount_point_fix": {
132
+ "type": "boolean"
130
133
  }
131
134
  }
132
135
  }
@@ -1,6 +1,6 @@
1
1
  // #region Imports
2
2
  import { AddColumnStep } from '@atlaskit/custom-steps';
3
- import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
3
+ import type { AnalyticsEventPayload, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
4
4
  import {
5
5
  ACTION,
6
6
  ACTION_SUBJECT,
@@ -9,10 +9,14 @@ import {
9
9
  INPUT_METHOD,
10
10
  TABLE_OVERFLOW_CHANGE_TRIGGER,
11
11
  } from '@atlaskit/editor-common/analytics';
12
+ import {
13
+ getParentOfTypeCount,
14
+ getPositionAfterTopParentNodeOfType,
15
+ } from '@atlaskit/editor-common/nesting';
12
16
  import type { Command, EditorCommand } from '@atlaskit/editor-common/types';
13
17
  import type { Transaction } from '@atlaskit/editor-prosemirror/state';
14
- import { Selection } from '@atlaskit/editor-prosemirror/state';
15
- import { safeInsert } from '@atlaskit/editor-prosemirror/utils';
18
+ import { Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
19
+ import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
16
20
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
17
21
  import { TableMap } from '@atlaskit/editor-tables/table-map';
18
22
  import {
@@ -21,6 +25,8 @@ import {
21
25
  findTable,
22
26
  selectedRect,
23
27
  } from '@atlaskit/editor-tables/utils';
28
+ import { fg } from '@atlaskit/platform-feature-flags';
29
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
24
30
 
25
31
  import { updateRowOrColumnMovedTransform } from '../pm-plugins/analytics/commands';
26
32
  import { META_KEYS } from '../pm-plugins/table-analytics';
@@ -29,6 +35,23 @@ import type { PluginInjectionAPI } from '../types';
29
35
  import { checkIfHeaderRowEnabled, copyPreviousRow, createTableWithWidth } from '../utils';
30
36
  import { getAllowAddColumnCustomStep } from '../utils/get-allow-add-column-custom-step';
31
37
 
38
+ type InsertTableWithNestingSupportCommand = (
39
+ options: {
40
+ isTableScalingEnabled?: boolean;
41
+ isTableAlignmentEnabled?: boolean;
42
+ isFullWidthModeEnabled?: boolean;
43
+ isCommentEditor?: boolean;
44
+ isChromelessEditor?: boolean;
45
+ isTableResizingEnabled?: boolean;
46
+ createTableProps?: {
47
+ rowsCount?: number;
48
+ colsCount?: number;
49
+ };
50
+ },
51
+ api: PluginInjectionAPI | undefined | null,
52
+ analyticsPayload?: AnalyticsEventPayload,
53
+ ) => EditorCommand;
54
+
32
55
  function addColumnAtCustomStep(column: number) {
33
56
  return (tr: Transaction) => {
34
57
  const table = findTable(tr.selection);
@@ -235,6 +258,11 @@ export const insertRow =
235
258
  return true;
236
259
  };
237
260
 
261
+ /**
262
+ * @private
263
+ * @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
264
+ * (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
265
+ */
238
266
  export const createTable =
239
267
  (
240
268
  isTableScalingEnabled?: boolean,
@@ -272,6 +300,11 @@ export const createTable =
272
300
  return true;
273
301
  };
274
302
 
303
+ /**
304
+ * @private
305
+ * @deprecated This function is deprecated - please use insertTableWithNestingSupport instead.
306
+ * (To be removed with feature gate: `platform_editor_use_nested_table_pm_nodes`)
307
+ */
275
308
  export const insertTableWithSize =
276
309
  (
277
310
  isFullWidthModeEnabled?: boolean,
@@ -312,3 +345,86 @@ export const insertTableWithSize =
312
345
  return newTr;
313
346
  };
314
347
  };
348
+
349
+ /**
350
+ * Unified command to insert a new table into the editor.
351
+ *
352
+ * @param {Object} options - Configuration options for table insertion.
353
+ * @param {boolean} [options.isTableScalingEnabled=false] - Flag to enable table scaling.
354
+ * @param {boolean} [options.isTableAlignmentEnabled=false] - Flag to enable table alignment.
355
+ * @param {boolean} [options.isFullWidthModeEnabled=false] - Flag to enable full-width mode for the table.
356
+ * @param {boolean} [options.isCommentEditor=false] - Flag to indicate if the editor is in comment mode.
357
+ * @param {boolean} [options.isChromelessEditor=false] - Flag to indicate if the editor is chromeless.
358
+ * @param {boolean} [options.isTableResizingEnabled=false] - Flag to enable table resizing.
359
+ * @param {Object} [options.createTableProps={}] - Additional properties for table creation, including table size.
360
+ * @param {Object} api - PluginInjectinoApi object for content insertion commands.
361
+ * @param {Object} analyticsPayload - Payload for analytics tracking.
362
+ *
363
+ * @returns {Function} A function that takes a transaction and inserts a table.
364
+ */
365
+ export const insertTableWithNestingSupport: InsertTableWithNestingSupportCommand =
366
+ (
367
+ {
368
+ isTableScalingEnabled = false,
369
+ isTableAlignmentEnabled = false,
370
+ isFullWidthModeEnabled = false,
371
+ isCommentEditor = false,
372
+ isChromelessEditor = false,
373
+ isTableResizingEnabled = false,
374
+ createTableProps = {},
375
+ },
376
+ api,
377
+ analyticsPayload,
378
+ ) =>
379
+ ({ tr }) => {
380
+ const { schema } = tr.doc.type;
381
+ const node = createTableWithWidth({
382
+ isTableScalingEnabled,
383
+ isTableAlignmentEnabled,
384
+ isFullWidthModeEnabled,
385
+ isCommentEditor,
386
+ isChromelessEditor,
387
+ isTableResizingEnabled,
388
+ createTableProps,
389
+ })(schema);
390
+
391
+ // If the cursor is inside a table
392
+ let insertAt: Selection | undefined;
393
+ if (
394
+ hasParentNodeOfType(schema.nodes.table)(tr.selection) &&
395
+ fg('platform_editor_use_nested_table_pm_nodes')
396
+ ) {
397
+ // If the experiment is disabled, or we're trying to nest deeper than one level, we insert the table after the top table
398
+ if (
399
+ editorExperiment('nested-tables-in-tables', false, { exposure: true }) ||
400
+ getParentOfTypeCount(schema.nodes.table)(tr.selection) > 1
401
+ ) {
402
+ const positionAfterTopTable = getPositionAfterTopParentNodeOfType(schema.nodes.table)(
403
+ tr.selection,
404
+ );
405
+ if (!positionAfterTopTable) {
406
+ return tr;
407
+ }
408
+ insertAt = TextSelection.create(tr.doc, positionAfterTopTable);
409
+ }
410
+ }
411
+
412
+ api?.contentInsertion?.commands?.insert({
413
+ node,
414
+ options: {
415
+ selectNodeInserted: false,
416
+ analyticsPayload: analyticsPayload
417
+ ? {
418
+ ...analyticsPayload,
419
+ attributes: {
420
+ ...analyticsPayload.attributes,
421
+ localId: node.attrs.localId,
422
+ },
423
+ }
424
+ : undefined,
425
+ insertAt,
426
+ },
427
+ })({ tr });
428
+
429
+ return tr;
430
+ };
package/src/plugin.tsx CHANGED
@@ -26,6 +26,7 @@ import {
26
26
  getParentOfTypeCount,
27
27
  getPositionAfterTopParentNodeOfType,
28
28
  } from '@atlaskit/editor-common/nesting';
29
+ import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
29
30
  import { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
30
31
  import type {
31
32
  Command,
@@ -46,7 +47,6 @@ import type { FeatureFlagsPlugin } from '@atlaskit/editor-plugin-feature-flags';
46
47
  import type { GuidelinePlugin } from '@atlaskit/editor-plugin-guideline';
47
48
  import type { SelectionPlugin } from '@atlaskit/editor-plugin-selection';
48
49
  import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
49
- import { type Selection, TextSelection } from '@atlaskit/editor-prosemirror/state';
50
50
  import type { Transaction } from '@atlaskit/editor-prosemirror/state';
51
51
  import { hasParentNodeOfType, safeInsert } from '@atlaskit/editor-prosemirror/utils';
52
52
  import type { EditorView } from '@atlaskit/editor-prosemirror/view';
@@ -55,7 +55,7 @@ import { tableEditing } from '@atlaskit/editor-tables/pm-plugins';
55
55
  import { fg } from '@atlaskit/platform-feature-flags';
56
56
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
57
57
 
58
- import { insertTableWithSize } from './commands/insert';
58
+ import { insertTableWithNestingSupport, insertTableWithSize } from './commands/insert';
59
59
  import { pluginConfig } from './create-plugin-config';
60
60
  import { createPlugin as createTableAnalyticsPlugin } from './pm-plugins/analytics/plugin';
61
61
  import { pluginKey as tableAnalyticsPluginKey } from './pm-plugins/analytics/plugin-key';
@@ -228,69 +228,93 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
228
228
  insertTable:
229
229
  (analyticsPayload): Command =>
230
230
  (state, dispatch) => {
231
- const node = createTableWithWidth({
232
- isTableScalingEnabled: options?.isTableScalingEnabled,
233
- isTableAlignmentEnabled: options?.tableOptions.allowTableAlignment,
234
- isFullWidthModeEnabled: options?.fullWidthEnabled,
235
- isCommentEditor: options?.isCommentEditor,
236
- isChromelessEditor: options?.isChromelessEditor,
237
- isTableResizingEnabled: options?.tableOptions.allowTableResizing,
238
- })(state.schema);
239
-
240
- // If the cursor is inside a table
241
- let insertAt: Selection | undefined;
242
- if (
243
- hasParentNodeOfType(state.schema.nodes.table)(state.selection) &&
244
- fg('platform_editor_use_nested_table_pm_nodes')
245
- ) {
246
- // If the experiment is disabled, or we're trying to nest deeper than one level, we insert the table after the top table
247
- if (
248
- editorExperiment('nested-tables-in-tables', false, { exposure: true }) ||
249
- getParentOfTypeCount(state.schema.nodes.table)(state.selection) > 1
250
- ) {
251
- const positionAfterTopTable = getPositionAfterTopParentNodeOfType(
252
- state.schema.nodes.table,
253
- )(state.selection);
254
- if (!positionAfterTopTable) {
255
- return false;
256
- }
257
- insertAt = TextSelection.create(state.doc, positionAfterTopTable);
258
- }
259
- }
231
+ if (fg('platform_editor_use_nested_table_pm_nodes')) {
232
+ return editorCommandToPMCommand(
233
+ insertTableWithNestingSupport(
234
+ {
235
+ isTableScalingEnabled: options?.isTableScalingEnabled,
236
+ isTableAlignmentEnabled: options?.tableOptions.allowTableAlignment,
237
+ isFullWidthModeEnabled: options?.fullWidthEnabled,
238
+ isCommentEditor: options?.isCommentEditor,
239
+ isChromelessEditor: options?.isChromelessEditor,
240
+ isTableResizingEnabled: options?.tableOptions.allowTableResizing,
241
+ },
242
+ api,
243
+ analyticsPayload,
244
+ ),
245
+ )(state, dispatch);
246
+ } else {
247
+ const node = createTableWithWidth({
248
+ isTableScalingEnabled: options?.isTableScalingEnabled,
249
+ isTableAlignmentEnabled: options?.tableOptions.allowTableAlignment,
250
+ isFullWidthModeEnabled: options?.fullWidthEnabled,
251
+ isCommentEditor: options?.isCommentEditor,
252
+ isChromelessEditor: options?.isChromelessEditor,
253
+ isTableResizingEnabled: options?.tableOptions.allowTableResizing,
254
+ })(state.schema);
260
255
 
261
- return (
262
- api?.contentInsertion?.actions?.insert({
263
- state,
264
- dispatch,
265
- node,
266
- options: {
267
- selectNodeInserted: false,
268
- analyticsPayload: {
269
- ...analyticsPayload,
270
- attributes: {
271
- ...analyticsPayload.attributes,
272
- localId: node.attrs.localId,
256
+ return (
257
+ api?.contentInsertion?.actions?.insert({
258
+ state,
259
+ dispatch,
260
+ node,
261
+ options: {
262
+ selectNodeInserted: false,
263
+ analyticsPayload: {
264
+ ...analyticsPayload,
265
+ attributes: {
266
+ ...analyticsPayload.attributes,
267
+ localId: node.attrs.localId,
268
+ },
273
269
  },
274
270
  },
275
- insertAt,
276
- },
277
- }) ?? false
278
- );
271
+ }) ?? false
272
+ );
273
+ }
279
274
  },
280
275
  },
281
276
 
282
277
  commands: {
283
- insertTableWithSize: insertTableWithSize(
284
- options?.fullWidthEnabled,
285
- options?.isTableScalingEnabled,
286
- options?.tableOptions.allowTableAlignment,
287
- api?.analytics?.actions,
288
- options?.isCommentEditor,
289
- ),
278
+ insertTableWithSize: fg('platform_editor_use_nested_table_pm_nodes')
279
+ ? (rowsCount, colsCount, inputMethod) =>
280
+ insertTableWithNestingSupport(
281
+ {
282
+ isTableScalingEnabled: options?.isTableScalingEnabled,
283
+ isTableAlignmentEnabled: options?.tableOptions.allowTableAlignment,
284
+ isFullWidthModeEnabled: options?.fullWidthEnabled,
285
+ isCommentEditor: options?.isCommentEditor,
286
+ isChromelessEditor: options?.isChromelessEditor,
287
+ isTableResizingEnabled: options?.tableOptions.allowTableResizing,
288
+ createTableProps: {
289
+ rowsCount,
290
+ colsCount,
291
+ },
292
+ },
293
+ api,
294
+ {
295
+ action: ACTION.INSERTED,
296
+ actionSubject: ACTION_SUBJECT.DOCUMENT,
297
+ actionSubjectId: ACTION_SUBJECT_ID.TABLE,
298
+ attributes: {
299
+ inputMethod: inputMethod ?? INPUT_METHOD.PICKER,
300
+ totalRowCount: rowsCount,
301
+ totalColumnCount: colsCount,
302
+ },
303
+ eventType: EVENT_TYPE.TRACK,
304
+ },
305
+ )
306
+ : insertTableWithSize(
307
+ options?.fullWidthEnabled,
308
+ options?.isTableScalingEnabled,
309
+ options?.tableOptions.allowTableAlignment,
310
+ api?.analytics?.actions,
311
+ options?.isCommentEditor,
312
+ ),
290
313
  },
291
314
 
292
315
  nodes() {
293
316
  const { allowColumnResizing } = pluginConfig(options?.tableOptions);
317
+ // TODO: ED-25901 - We need to move this into a plugin config option so we don't accidentally enable nested nodes in Jira
294
318
  const isNestingSupported = fg('platform_editor_use_nested_table_pm_nodes');
295
319
 
296
320
  return isNestingSupported
@@ -28,17 +28,17 @@ export const autoScrollerFactory = ({ tableWrapper, getNode }: AutoScrollerFacto
28
28
  return localId === node?.attrs.localId && type === 'table-column';
29
29
  },
30
30
  getOverflow: () => ({
31
- fromTopEdge: {
31
+ forTopEdge: {
32
32
  top: dropTargetExtendedWidth,
33
33
  right: dropTargetExtendedWidth,
34
34
  left: dropTargetExtendedWidth,
35
35
  },
36
- fromRightEdge: {
36
+ forRightEdge: {
37
37
  right: dropTargetExtendedWidth,
38
38
  top: dropTargetExtendedWidth,
39
39
  bottom: dropTargetExtendedWidth,
40
40
  },
41
- fromLeftEdge: {
41
+ forLeftEdge: {
42
42
  top: dropTargetExtendedWidth,
43
43
  left: dropTargetExtendedWidth,
44
44
  bottom: dropTargetExtendedWidth,
@@ -1,7 +1,13 @@
1
1
  import type { IntlShape } from 'react-intl-next/src/types';
2
2
 
3
3
  import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
4
- import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
4
+ import {
5
+ ACTION,
6
+ ACTION_SUBJECT,
7
+ ACTION_SUBJECT_ID,
8
+ EVENT_TYPE,
9
+ INPUT_METHOD,
10
+ } from '@atlaskit/editor-common/analytics';
5
11
  import {
6
12
  addColumnAfter,
7
13
  addColumnAfterVO,
@@ -31,10 +37,12 @@ import {
31
37
  toggleTable,
32
38
  } from '@atlaskit/editor-common/keymaps';
33
39
  import { type PortalProviderAPI } from '@atlaskit/editor-common/portal';
40
+ import { editorCommandToPMCommand } from '@atlaskit/editor-common/preset';
34
41
  import type { SafePlugin } from '@atlaskit/editor-common/safe-plugin';
35
42
  import type { GetEditorContainerWidth } from '@atlaskit/editor-common/types';
36
43
  import { chainCommands } from '@atlaskit/editor-prosemirror/commands';
37
44
  import { keymap } from '@atlaskit/editor-prosemirror/keymap';
45
+ import { fg } from '@atlaskit/platform-feature-flags';
38
46
 
39
47
  import { goToNextCell, moveCursorBackward, setFocusToCellMenu } from '../commands';
40
48
  import {
@@ -53,6 +61,7 @@ import {
53
61
  addColumnAfter as addColumnAfterCommand,
54
62
  addColumnBefore as addColumnBeforeCommand,
55
63
  createTable,
64
+ insertTableWithNestingSupport,
56
65
  } from '../commands/insert';
57
66
  import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
58
67
  import type { PluginInjectionAPI, PluginInjectionAPIWithA11y } from '../types';
@@ -90,15 +99,36 @@ export function keymapPlugin(
90
99
  );
91
100
  bindKeymapWithCommand(
92
101
  toggleTable.common!,
93
- createTable(
94
- isTableScalingEnabled,
95
- isTableAlignmentEnabled,
96
- !!isFullWidthEnabled,
97
- editorAnalyticsAPI,
98
- isCommentEditor,
99
- isChromelessEditor,
100
- isTableResizingEnabled,
101
- ),
102
+ fg('platform_editor_use_nested_table_pm_nodes')
103
+ ? editorCommandToPMCommand(
104
+ insertTableWithNestingSupport(
105
+ {
106
+ isTableScalingEnabled,
107
+ isTableAlignmentEnabled,
108
+ isFullWidthModeEnabled: !!isFullWidthEnabled,
109
+ isCommentEditor: isCommentEditor,
110
+ isChromelessEditor: isChromelessEditor,
111
+ isTableResizingEnabled,
112
+ },
113
+ api,
114
+ {
115
+ action: ACTION.INSERTED,
116
+ actionSubject: ACTION_SUBJECT.DOCUMENT,
117
+ actionSubjectId: ACTION_SUBJECT_ID.TABLE,
118
+ attributes: { inputMethod: INPUT_METHOD.SHORTCUT },
119
+ eventType: EVENT_TYPE.TRACK,
120
+ },
121
+ ),
122
+ )
123
+ : createTable(
124
+ isTableScalingEnabled,
125
+ isTableAlignmentEnabled,
126
+ !!isFullWidthEnabled,
127
+ editorAnalyticsAPI,
128
+ isCommentEditor,
129
+ isChromelessEditor,
130
+ isTableResizingEnabled,
131
+ ),
102
132
  list,
103
133
  );
104
134
  bindKeymapWithCommand(
@@ -43,6 +43,7 @@ import {
43
43
  } from '@atlaskit/editor-tables/utils';
44
44
  import EditorBackgroundColorIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
45
45
  import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
46
+ import { fg } from '@atlaskit/platform-feature-flags';
46
47
  import { Box, xcss } from '@atlaskit/primitives';
47
48
  import Toggle from '@atlaskit/toggle';
48
49
 
@@ -628,7 +629,7 @@ const DragMenu = React.memo(
628
629
  fitHeight={fitHeight}
629
630
  fitWidth={fitWidth}
630
631
  direction={direction}
631
- mountPoint={mountPoint}
632
+ mountPoint={fg('platform_editor_table_drag_menu_mount_point_fix') ? undefined : mountPoint}
632
633
  boundariesElement={boundariesElement}
633
634
  scrollableElement={scrollableElement}
634
635
  />