@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.
- package/CHANGELOG.md +29 -0
- package/dist/cjs/commands/insert.js +97 -3
- package/dist/cjs/plugin.js +57 -38
- package/dist/cjs/pm-plugins/drag-and-drop/utils/autoscrollers.js +3 -3
- package/dist/cjs/pm-plugins/keymap.js +18 -1
- package/dist/cjs/ui/FloatingDragMenu/DragMenu.js +2 -1
- package/dist/es2019/commands/insert.js +91 -2
- package/dist/es2019/plugin.js +58 -41
- package/dist/es2019/pm-plugins/drag-and-drop/utils/autoscrollers.js +3 -3
- package/dist/es2019/pm-plugins/keymap.js +20 -3
- package/dist/es2019/ui/FloatingDragMenu/DragMenu.js +2 -1
- package/dist/esm/commands/insert.js +97 -2
- package/dist/esm/plugin.js +58 -39
- package/dist/esm/pm-plugins/drag-and-drop/utils/autoscrollers.js +3 -3
- package/dist/esm/pm-plugins/keymap.js +20 -3
- package/dist/esm/ui/FloatingDragMenu/DragMenu.js +2 -1
- package/dist/types/commands/insert.d.ts +41 -1
- package/dist/types/ui/TableFloatingColumnControls/ColumnControls/index.d.ts +1 -2
- package/dist/types/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +2 -4
- package/dist/types/ui/TableFloatingControls/index.d.ts +1 -2
- package/dist/types/utils/drag-menu.d.ts +3 -3
- package/dist/types-ts4.5/commands/insert.d.ts +41 -1
- package/dist/types-ts4.5/ui/TableFloatingColumnControls/ColumnControls/index.d.ts +1 -2
- package/dist/types-ts4.5/ui/TableFloatingControls/CornerControls/DragCornerControls.d.ts +2 -4
- package/dist/types-ts4.5/ui/TableFloatingControls/index.d.ts +1 -2
- package/dist/types-ts4.5/utils/drag-menu.d.ts +3 -3
- package/package.json +8 -5
- package/src/commands/insert.ts +119 -3
- package/src/plugin.tsx +78 -54
- package/src/pm-plugins/drag-and-drop/utils/autoscrollers.ts +3 -3
- package/src/pm-plugins/keymap.ts +40 -10
- package/src/ui/FloatingDragMenu/DragMenu.tsx +2 -1
- 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 {
|
|
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<
|
|
16
|
-
iconFallback?: React.ComponentType<React.PropsWithChildren<
|
|
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.
|
|
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.
|
|
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": "^
|
|
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": "^
|
|
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.
|
|
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
|
}
|
package/src/commands/insert.ts
CHANGED
|
@@ -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
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
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
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
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
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
);
|
|
271
|
+
}) ?? false
|
|
272
|
+
);
|
|
273
|
+
}
|
|
279
274
|
},
|
|
280
275
|
},
|
|
281
276
|
|
|
282
277
|
commands: {
|
|
283
|
-
insertTableWithSize:
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
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
|
-
|
|
31
|
+
forTopEdge: {
|
|
32
32
|
top: dropTargetExtendedWidth,
|
|
33
33
|
right: dropTargetExtendedWidth,
|
|
34
34
|
left: dropTargetExtendedWidth,
|
|
35
35
|
},
|
|
36
|
-
|
|
36
|
+
forRightEdge: {
|
|
37
37
|
right: dropTargetExtendedWidth,
|
|
38
38
|
top: dropTargetExtendedWidth,
|
|
39
39
|
bottom: dropTargetExtendedWidth,
|
|
40
40
|
},
|
|
41
|
-
|
|
41
|
+
forLeftEdge: {
|
|
42
42
|
top: dropTargetExtendedWidth,
|
|
43
43
|
left: dropTargetExtendedWidth,
|
|
44
44
|
bottom: dropTargetExtendedWidth,
|
package/src/pm-plugins/keymap.ts
CHANGED
|
@@ -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 {
|
|
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
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
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
|
/>
|