@atlaskit/editor-plugin-block-controls 3.3.13 → 3.3.14
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 +6 -0
- package/dist/cjs/editor-commands/move-node.js +19 -2
- package/dist/cjs/pm-plugins/utils/validation.js +43 -11
- package/dist/es2019/editor-commands/move-node.js +21 -4
- package/dist/es2019/pm-plugins/utils/validation.js +39 -9
- package/dist/esm/editor-commands/move-node.js +21 -4
- package/dist/esm/pm-plugins/utils/validation.js +42 -10
- package/dist/types/pm-plugins/utils/validation.d.ts +2 -1
- package/dist/types-ts4.5/pm-plugins/utils/validation.d.ts +2 -1
- package/package.json +6 -3
package/CHANGELOG.md
CHANGED
|
@@ -88,6 +88,10 @@ var isDragLayoutColumnToTopLevel = function isDragLayoutColumnToTopLevel($from,
|
|
|
88
88
|
var _$from$nodeAfter;
|
|
89
89
|
return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.depth === 0;
|
|
90
90
|
};
|
|
91
|
+
var isDragLayoutColumnIntoTable = function isDragLayoutColumnIntoTable($from, $to) {
|
|
92
|
+
var _$from$nodeAfter2;
|
|
93
|
+
return ((_$from$nodeAfter2 = $from.nodeAfter) === null || _$from$nodeAfter2 === void 0 ? void 0 : _$from$nodeAfter2.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && ($to.parent.type.name === 'tableCell' || $to.parent.type.name === 'tableHeader');
|
|
94
|
+
};
|
|
91
95
|
|
|
92
96
|
/**
|
|
93
97
|
*
|
|
@@ -376,12 +380,25 @@ var moveNode = exports.moveNode = function moveNode(api) {
|
|
|
376
380
|
var destType = $to.node().type;
|
|
377
381
|
var destParent = $to.node($to.depth);
|
|
378
382
|
var sourceNode = $handlePos.nodeAfter;
|
|
383
|
+
var dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
|
|
384
|
+
var dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
|
|
379
385
|
|
|
380
386
|
//TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
|
|
381
387
|
// Move a layout column to top level
|
|
382
|
-
|
|
388
|
+
// Move a layout column into a table cell, only moves the content into the cell
|
|
389
|
+
if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable)) {
|
|
383
390
|
// need update after we support single column layout.
|
|
384
|
-
var
|
|
391
|
+
var layoutColumnContent = sourceNode.content;
|
|
392
|
+
var fragment;
|
|
393
|
+
if (dragLayoutColumnIntoTable) {
|
|
394
|
+
var contentContainsExpand = (0, _utils2.findChildrenByType)(sourceNode, expand).length > 0;
|
|
395
|
+
fragment = contentContainsExpand ? (0, _validation.transformFragmentExpandToNestedExpand)(_model.Fragment.from(layoutColumnContent)) : _model.Fragment.from(layoutColumnContent);
|
|
396
|
+
if (!fragment) {
|
|
397
|
+
return tr;
|
|
398
|
+
}
|
|
399
|
+
} else {
|
|
400
|
+
fragment = _model.Fragment.from(layoutColumnContent);
|
|
401
|
+
}
|
|
385
402
|
(0, _removeFromSource.removeFromSource)(tr, $handlePos, $handlePos.pos + sourceNode.nodeSize);
|
|
386
403
|
var _mappedTo = tr.mapping.map(to);
|
|
387
404
|
tr.insert(_mappedTo, fragment).setSelection(_state.Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();
|
|
@@ -6,10 +6,11 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
});
|
|
7
7
|
exports.canMoveNodeToIndex = canMoveNodeToIndex;
|
|
8
8
|
exports.canMoveSliceToIndex = canMoveSliceToIndex;
|
|
9
|
-
exports.transformSliceExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isInSameLayout = exports.isExpand = exports.isDoc = void 0;
|
|
9
|
+
exports.transformSliceExpandToNestedExpand = exports.transformFragmentExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isInSameLayout = exports.isExpand = exports.isDoc = void 0;
|
|
10
10
|
var _memoizeOne = _interopRequireDefault(require("memoize-one"));
|
|
11
11
|
var _nesting = require("@atlaskit/editor-common/nesting");
|
|
12
12
|
var _model = require("@atlaskit/editor-prosemirror/model");
|
|
13
|
+
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
13
14
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
14
15
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
15
16
|
var isInsideTable = exports.isInsideTable = function isInsideTable(nodeType) {
|
|
@@ -54,10 +55,10 @@ var transformExpandToNestedExpand = exports.transformExpandToNestedExpand = func
|
|
|
54
55
|
}
|
|
55
56
|
return null;
|
|
56
57
|
};
|
|
57
|
-
var
|
|
58
|
+
var transformFragmentExpandToNestedExpand = exports.transformFragmentExpandToNestedExpand = function transformFragmentExpandToNestedExpand(fragment) {
|
|
58
59
|
var children = [];
|
|
59
60
|
try {
|
|
60
|
-
|
|
61
|
+
fragment.forEach(function (node) {
|
|
61
62
|
if (isExpand(node.type)) {
|
|
62
63
|
var nestedExpandNode = transformExpandToNestedExpand(node);
|
|
63
64
|
if (nestedExpandNode) {
|
|
@@ -70,7 +71,14 @@ var transformSliceExpandToNestedExpand = exports.transformSliceExpandToNestedExp
|
|
|
70
71
|
} catch (e) {
|
|
71
72
|
return null;
|
|
72
73
|
}
|
|
73
|
-
return
|
|
74
|
+
return _model.Fragment.fromArray(children);
|
|
75
|
+
};
|
|
76
|
+
var transformSliceExpandToNestedExpand = exports.transformSliceExpandToNestedExpand = function transformSliceExpandToNestedExpand(slice) {
|
|
77
|
+
var fragment = transformFragmentExpandToNestedExpand(slice.content);
|
|
78
|
+
if (!fragment) {
|
|
79
|
+
return null;
|
|
80
|
+
}
|
|
81
|
+
return new _model.Slice(fragment, slice.openStart, slice.openEnd);
|
|
74
82
|
};
|
|
75
83
|
var memoizedTransformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = (0, _memoizeOne.default)(function (node) {
|
|
76
84
|
try {
|
|
@@ -83,11 +91,40 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
|
|
|
83
91
|
var srcNodeType = srcNode.type;
|
|
84
92
|
var parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
|
|
85
93
|
var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
|
|
94
|
+
var isNestingTablesSupported = (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes') && (0, _experiments.editorExperiment)('nested-tables-in-tables', true, {
|
|
95
|
+
exposure: true
|
|
96
|
+
});
|
|
97
|
+
var tableNodeType = srcNode.type.schema.nodes.table;
|
|
98
|
+
var expandNodeType = srcNode.type.schema.nodes.expand;
|
|
86
99
|
if (activeNodeType === 'layoutColumn' && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
87
100
|
// Allow drag layout column and drop into layout section
|
|
88
101
|
if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || parentNodeType === 'doc') {
|
|
89
102
|
return true;
|
|
90
103
|
}
|
|
104
|
+
if ((parentNodeType === 'tableCell' || parentNodeType === 'tableHeader') && (0, _platformFeatureFlags.fg)('platform_editor_drag_layout_column_into_nodes')) {
|
|
105
|
+
var maybeExpandNodesArray = (0, _utils.findChildrenByType)(srcNode, expandNodeType);
|
|
106
|
+
var layoutColumnContainExpand = maybeExpandNodesArray.length > 0;
|
|
107
|
+
var layoutColumnContainTable = (0, _utils.findChildrenByType)(srcNode, tableNodeType).length > 0;
|
|
108
|
+
|
|
109
|
+
// when layout column content does not contain table, allow to drop into table cell
|
|
110
|
+
if (!layoutColumnContainTable) {
|
|
111
|
+
return true;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// when layout column content contains table, but does not contain expand, allow drop into table cell if nesting tables is supported, and the nesting depth does not exceed 1
|
|
115
|
+
if (layoutColumnContainTable && !layoutColumnContainExpand) {
|
|
116
|
+
var nestingDepth = (0, _nesting.getParentOfTypeCount)(tableNodeType)($destNodePos);
|
|
117
|
+
return isNestingTablesSupported && nestingDepth <= 1;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// when layout column content contains an expand, and there is a table inside the expand, should not allow to drop into table cell
|
|
121
|
+
if (layoutColumnContainTable && layoutColumnContainExpand) {
|
|
122
|
+
var isAnyTableNestedInExpand = maybeExpandNodesArray.some(function (result) {
|
|
123
|
+
return (0, _utils.findChildrenByType)(result.node, tableNodeType).length > 0;
|
|
124
|
+
});
|
|
125
|
+
return !isAnyTableNestedInExpand;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
91
128
|
}
|
|
92
129
|
|
|
93
130
|
// Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
|
|
@@ -97,16 +134,11 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
|
|
|
97
134
|
}
|
|
98
135
|
}
|
|
99
136
|
|
|
100
|
-
// Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
|
|
101
|
-
var isNestingTablesSupported = (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes') && (0, _experiments.editorExperiment)('nested-tables-in-tables', true, {
|
|
102
|
-
exposure: true
|
|
103
|
-
});
|
|
104
|
-
|
|
105
137
|
// NOTE: this will block drop targets from showing for dragging a table into another table
|
|
106
138
|
// unless nested tables are supported and the nesting depth does not exceed 1
|
|
107
139
|
if ((parentNodeType === 'tableCell' || parentNodeType === 'tableHeader') && activeNodeType === 'table') {
|
|
108
|
-
var
|
|
109
|
-
if (!isNestingTablesSupported || isNestingTablesSupported &&
|
|
140
|
+
var _nestingDepth = (0, _nesting.getParentOfTypeCount)(tableNodeType)($destNodePos);
|
|
141
|
+
if (!isNestingTablesSupported || isNestingTablesSupported && _nestingDepth > 1) {
|
|
110
142
|
return false;
|
|
111
143
|
}
|
|
112
144
|
}
|
|
@@ -6,7 +6,7 @@ import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/tran
|
|
|
6
6
|
import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
7
7
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
8
8
|
import { Selection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
9
|
-
import { findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
|
|
9
|
+
import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
|
|
10
10
|
import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
11
11
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
12
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
@@ -18,7 +18,7 @@ import { selectNode, setCursorPositionAtMovedNode } from '../pm-plugins/utils/ge
|
|
|
18
18
|
import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
|
|
19
19
|
import { getSelectedSlicePosition } from '../pm-plugins/utils/selection';
|
|
20
20
|
import { getInsertLayoutStep, updateSelection } from '../pm-plugins/utils/update-selection';
|
|
21
|
-
import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../pm-plugins/utils/validation';
|
|
21
|
+
import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand, transformFragmentExpandToNestedExpand } from '../pm-plugins/utils/validation';
|
|
22
22
|
|
|
23
23
|
/**
|
|
24
24
|
* This function transforms the slice to move
|
|
@@ -81,6 +81,10 @@ const isDragLayoutColumnToTopLevel = ($from, $to) => {
|
|
|
81
81
|
var _$from$nodeAfter;
|
|
82
82
|
return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.depth === 0;
|
|
83
83
|
};
|
|
84
|
+
const isDragLayoutColumnIntoTable = ($from, $to) => {
|
|
85
|
+
var _$from$nodeAfter2;
|
|
86
|
+
return ((_$from$nodeAfter2 = $from.nodeAfter) === null || _$from$nodeAfter2 === void 0 ? void 0 : _$from$nodeAfter2.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && ($to.parent.type.name === 'tableCell' || $to.parent.type.name === 'tableHeader');
|
|
87
|
+
};
|
|
84
88
|
|
|
85
89
|
/**
|
|
86
90
|
*
|
|
@@ -378,12 +382,25 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
|
|
|
378
382
|
const destType = $to.node().type;
|
|
379
383
|
const destParent = $to.node($to.depth);
|
|
380
384
|
const sourceNode = $handlePos.nodeAfter;
|
|
385
|
+
const dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
|
|
386
|
+
const dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
|
|
381
387
|
|
|
382
388
|
//TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
|
|
383
389
|
// Move a layout column to top level
|
|
384
|
-
|
|
390
|
+
// Move a layout column into a table cell, only moves the content into the cell
|
|
391
|
+
if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable)) {
|
|
385
392
|
// need update after we support single column layout.
|
|
386
|
-
const
|
|
393
|
+
const layoutColumnContent = sourceNode.content;
|
|
394
|
+
let fragment;
|
|
395
|
+
if (dragLayoutColumnIntoTable) {
|
|
396
|
+
const contentContainsExpand = findChildrenByType(sourceNode, expand).length > 0;
|
|
397
|
+
fragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(Fragment.from(layoutColumnContent)) : Fragment.from(layoutColumnContent);
|
|
398
|
+
if (!fragment) {
|
|
399
|
+
return tr;
|
|
400
|
+
}
|
|
401
|
+
} else {
|
|
402
|
+
fragment = Fragment.from(layoutColumnContent);
|
|
403
|
+
}
|
|
387
404
|
removeFromSource(tr, $handlePos, $handlePos.pos + sourceNode.nodeSize);
|
|
388
405
|
const mappedTo = tr.mapping.map(to);
|
|
389
406
|
tr.insert(mappedTo, fragment).setSelection(Selection.near(tr.doc.resolve(mappedTo))).scrollIntoView();
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import memoizeOne from 'memoize-one';
|
|
2
2
|
import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
|
|
3
3
|
import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
|
|
4
|
+
import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
|
|
4
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
6
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
7
|
export const isInsideTable = nodeType => {
|
|
@@ -47,10 +48,10 @@ export const transformExpandToNestedExpand = expandNode => {
|
|
|
47
48
|
}
|
|
48
49
|
return null;
|
|
49
50
|
};
|
|
50
|
-
export const
|
|
51
|
+
export const transformFragmentExpandToNestedExpand = fragment => {
|
|
51
52
|
const children = [];
|
|
52
53
|
try {
|
|
53
|
-
|
|
54
|
+
fragment.forEach(node => {
|
|
54
55
|
if (isExpand(node.type)) {
|
|
55
56
|
const nestedExpandNode = transformExpandToNestedExpand(node);
|
|
56
57
|
if (nestedExpandNode) {
|
|
@@ -63,7 +64,14 @@ export const transformSliceExpandToNestedExpand = slice => {
|
|
|
63
64
|
} catch (e) {
|
|
64
65
|
return null;
|
|
65
66
|
}
|
|
66
|
-
return
|
|
67
|
+
return Fragment.fromArray(children);
|
|
68
|
+
};
|
|
69
|
+
export const transformSliceExpandToNestedExpand = slice => {
|
|
70
|
+
const fragment = transformFragmentExpandToNestedExpand(slice.content);
|
|
71
|
+
if (!fragment) {
|
|
72
|
+
return null;
|
|
73
|
+
}
|
|
74
|
+
return new Slice(fragment, slice.openStart, slice.openEnd);
|
|
67
75
|
};
|
|
68
76
|
export const memoizedTransformExpandToNestedExpand = memoizeOne(node => {
|
|
69
77
|
try {
|
|
@@ -76,11 +84,38 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
|
|
|
76
84
|
let srcNodeType = srcNode.type;
|
|
77
85
|
const parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
|
|
78
86
|
const activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
|
|
87
|
+
const isNestingTablesSupported = fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
|
|
88
|
+
exposure: true
|
|
89
|
+
});
|
|
90
|
+
const tableNodeType = srcNode.type.schema.nodes.table;
|
|
91
|
+
const expandNodeType = srcNode.type.schema.nodes.expand;
|
|
79
92
|
if (activeNodeType === 'layoutColumn' && editorExperiment('advanced_layouts', true)) {
|
|
80
93
|
// Allow drag layout column and drop into layout section
|
|
81
94
|
if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || parentNodeType === 'doc') {
|
|
82
95
|
return true;
|
|
83
96
|
}
|
|
97
|
+
if ((parentNodeType === 'tableCell' || parentNodeType === 'tableHeader') && fg('platform_editor_drag_layout_column_into_nodes')) {
|
|
98
|
+
const maybeExpandNodesArray = findChildrenByType(srcNode, expandNodeType);
|
|
99
|
+
const layoutColumnContainExpand = maybeExpandNodesArray.length > 0;
|
|
100
|
+
const layoutColumnContainTable = findChildrenByType(srcNode, tableNodeType).length > 0;
|
|
101
|
+
|
|
102
|
+
// when layout column content does not contain table, allow to drop into table cell
|
|
103
|
+
if (!layoutColumnContainTable) {
|
|
104
|
+
return true;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
// when layout column content contains table, but does not contain expand, allow drop into table cell if nesting tables is supported, and the nesting depth does not exceed 1
|
|
108
|
+
if (layoutColumnContainTable && !layoutColumnContainExpand) {
|
|
109
|
+
const nestingDepth = getParentOfTypeCount(tableNodeType)($destNodePos);
|
|
110
|
+
return isNestingTablesSupported && nestingDepth <= 1;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
// when layout column content contains an expand, and there is a table inside the expand, should not allow to drop into table cell
|
|
114
|
+
if (layoutColumnContainTable && layoutColumnContainExpand) {
|
|
115
|
+
const isAnyTableNestedInExpand = maybeExpandNodesArray.some(result => findChildrenByType(result.node, tableNodeType).length > 0);
|
|
116
|
+
return !isAnyTableNestedInExpand;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
84
119
|
}
|
|
85
120
|
|
|
86
121
|
// Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
|
|
@@ -90,15 +125,10 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
|
|
|
90
125
|
}
|
|
91
126
|
}
|
|
92
127
|
|
|
93
|
-
// Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
|
|
94
|
-
const isNestingTablesSupported = fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
|
|
95
|
-
exposure: true
|
|
96
|
-
});
|
|
97
|
-
|
|
98
128
|
// NOTE: this will block drop targets from showing for dragging a table into another table
|
|
99
129
|
// unless nested tables are supported and the nesting depth does not exceed 1
|
|
100
130
|
if ((parentNodeType === 'tableCell' || parentNodeType === 'tableHeader') && activeNodeType === 'table') {
|
|
101
|
-
const nestingDepth = getParentOfTypeCount(
|
|
131
|
+
const nestingDepth = getParentOfTypeCount(tableNodeType)($destNodePos);
|
|
102
132
|
if (!isNestingTablesSupported || isNestingTablesSupported && nestingDepth > 1) {
|
|
103
133
|
return false;
|
|
104
134
|
}
|
|
@@ -9,7 +9,7 @@ import { transformSliceNestedExpandToExpand } from '@atlaskit/editor-common/tran
|
|
|
9
9
|
import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
|
|
10
10
|
import { Fragment } from '@atlaskit/editor-prosemirror/model';
|
|
11
11
|
import { Selection, NodeSelection } from '@atlaskit/editor-prosemirror/state';
|
|
12
|
-
import { findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
|
|
12
|
+
import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
|
|
13
13
|
import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
|
|
14
14
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
15
15
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
@@ -21,7 +21,7 @@ import { selectNode, setCursorPositionAtMovedNode } from '../pm-plugins/utils/ge
|
|
|
21
21
|
import { removeFromSource } from '../pm-plugins/utils/remove-from-source';
|
|
22
22
|
import { getSelectedSlicePosition } from '../pm-plugins/utils/selection';
|
|
23
23
|
import { getInsertLayoutStep, updateSelection } from '../pm-plugins/utils/update-selection';
|
|
24
|
-
import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand } from '../pm-plugins/utils/validation';
|
|
24
|
+
import { canMoveNodeToIndex, isInsideTable, transformSliceExpandToNestedExpand, transformFragmentExpandToNestedExpand } from '../pm-plugins/utils/validation';
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
27
|
* This function transforms the slice to move
|
|
@@ -82,6 +82,10 @@ var isDragLayoutColumnToTopLevel = function isDragLayoutColumnToTopLevel($from,
|
|
|
82
82
|
var _$from$nodeAfter;
|
|
83
83
|
return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.depth === 0;
|
|
84
84
|
};
|
|
85
|
+
var isDragLayoutColumnIntoTable = function isDragLayoutColumnIntoTable($from, $to) {
|
|
86
|
+
var _$from$nodeAfter2;
|
|
87
|
+
return ((_$from$nodeAfter2 = $from.nodeAfter) === null || _$from$nodeAfter2 === void 0 ? void 0 : _$from$nodeAfter2.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && ($to.parent.type.name === 'tableCell' || $to.parent.type.name === 'tableHeader');
|
|
88
|
+
};
|
|
85
89
|
|
|
86
90
|
/**
|
|
87
91
|
*
|
|
@@ -370,12 +374,25 @@ export var moveNode = function moveNode(api) {
|
|
|
370
374
|
var destType = $to.node().type;
|
|
371
375
|
var destParent = $to.node($to.depth);
|
|
372
376
|
var sourceNode = $handlePos.nodeAfter;
|
|
377
|
+
var dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
|
|
378
|
+
var dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
|
|
373
379
|
|
|
374
380
|
//TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
|
|
375
381
|
// Move a layout column to top level
|
|
376
|
-
|
|
382
|
+
// Move a layout column into a table cell, only moves the content into the cell
|
|
383
|
+
if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable)) {
|
|
377
384
|
// need update after we support single column layout.
|
|
378
|
-
var
|
|
385
|
+
var layoutColumnContent = sourceNode.content;
|
|
386
|
+
var fragment;
|
|
387
|
+
if (dragLayoutColumnIntoTable) {
|
|
388
|
+
var contentContainsExpand = findChildrenByType(sourceNode, expand).length > 0;
|
|
389
|
+
fragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(Fragment.from(layoutColumnContent)) : Fragment.from(layoutColumnContent);
|
|
390
|
+
if (!fragment) {
|
|
391
|
+
return tr;
|
|
392
|
+
}
|
|
393
|
+
} else {
|
|
394
|
+
fragment = Fragment.from(layoutColumnContent);
|
|
395
|
+
}
|
|
379
396
|
removeFromSource(tr, $handlePos, $handlePos.pos + sourceNode.nodeSize);
|
|
380
397
|
var _mappedTo = tr.mapping.map(to);
|
|
381
398
|
tr.insert(_mappedTo, fragment).setSelection(Selection.near(tr.doc.resolve(_mappedTo))).scrollIntoView();
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import memoizeOne from 'memoize-one';
|
|
2
2
|
import { getParentOfTypeCount } from '@atlaskit/editor-common/nesting';
|
|
3
3
|
import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
|
|
4
|
+
import { findChildrenByType } from '@atlaskit/editor-prosemirror/utils';
|
|
4
5
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
6
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
7
|
export var isInsideTable = function isInsideTable(nodeType) {
|
|
@@ -45,10 +46,10 @@ export var transformExpandToNestedExpand = function transformExpandToNestedExpan
|
|
|
45
46
|
}
|
|
46
47
|
return null;
|
|
47
48
|
};
|
|
48
|
-
export var
|
|
49
|
+
export var transformFragmentExpandToNestedExpand = function transformFragmentExpandToNestedExpand(fragment) {
|
|
49
50
|
var children = [];
|
|
50
51
|
try {
|
|
51
|
-
|
|
52
|
+
fragment.forEach(function (node) {
|
|
52
53
|
if (isExpand(node.type)) {
|
|
53
54
|
var nestedExpandNode = transformExpandToNestedExpand(node);
|
|
54
55
|
if (nestedExpandNode) {
|
|
@@ -61,7 +62,14 @@ export var transformSliceExpandToNestedExpand = function transformSliceExpandToN
|
|
|
61
62
|
} catch (e) {
|
|
62
63
|
return null;
|
|
63
64
|
}
|
|
64
|
-
return
|
|
65
|
+
return Fragment.fromArray(children);
|
|
66
|
+
};
|
|
67
|
+
export var transformSliceExpandToNestedExpand = function transformSliceExpandToNestedExpand(slice) {
|
|
68
|
+
var fragment = transformFragmentExpandToNestedExpand(slice.content);
|
|
69
|
+
if (!fragment) {
|
|
70
|
+
return null;
|
|
71
|
+
}
|
|
72
|
+
return new Slice(fragment, slice.openStart, slice.openEnd);
|
|
65
73
|
};
|
|
66
74
|
export var memoizedTransformExpandToNestedExpand = memoizeOne(function (node) {
|
|
67
75
|
try {
|
|
@@ -74,11 +82,40 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
|
|
|
74
82
|
var srcNodeType = srcNode.type;
|
|
75
83
|
var parentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type.name;
|
|
76
84
|
var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type.name;
|
|
85
|
+
var isNestingTablesSupported = fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
|
|
86
|
+
exposure: true
|
|
87
|
+
});
|
|
88
|
+
var tableNodeType = srcNode.type.schema.nodes.table;
|
|
89
|
+
var expandNodeType = srcNode.type.schema.nodes.expand;
|
|
77
90
|
if (activeNodeType === 'layoutColumn' && editorExperiment('advanced_layouts', true)) {
|
|
78
91
|
// Allow drag layout column and drop into layout section
|
|
79
92
|
if ((destNode === null || destNode === void 0 ? void 0 : destNode.type.name) === 'layoutSection' || parentNodeType === 'doc') {
|
|
80
93
|
return true;
|
|
81
94
|
}
|
|
95
|
+
if ((parentNodeType === 'tableCell' || parentNodeType === 'tableHeader') && fg('platform_editor_drag_layout_column_into_nodes')) {
|
|
96
|
+
var maybeExpandNodesArray = findChildrenByType(srcNode, expandNodeType);
|
|
97
|
+
var layoutColumnContainExpand = maybeExpandNodesArray.length > 0;
|
|
98
|
+
var layoutColumnContainTable = findChildrenByType(srcNode, tableNodeType).length > 0;
|
|
99
|
+
|
|
100
|
+
// when layout column content does not contain table, allow to drop into table cell
|
|
101
|
+
if (!layoutColumnContainTable) {
|
|
102
|
+
return true;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
// when layout column content contains table, but does not contain expand, allow drop into table cell if nesting tables is supported, and the nesting depth does not exceed 1
|
|
106
|
+
if (layoutColumnContainTable && !layoutColumnContainExpand) {
|
|
107
|
+
var nestingDepth = getParentOfTypeCount(tableNodeType)($destNodePos);
|
|
108
|
+
return isNestingTablesSupported && nestingDepth <= 1;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
// when layout column content contains an expand, and there is a table inside the expand, should not allow to drop into table cell
|
|
112
|
+
if (layoutColumnContainTable && layoutColumnContainExpand) {
|
|
113
|
+
var isAnyTableNestedInExpand = maybeExpandNodesArray.some(function (result) {
|
|
114
|
+
return findChildrenByType(result.node, tableNodeType).length > 0;
|
|
115
|
+
});
|
|
116
|
+
return !isAnyTableNestedInExpand;
|
|
117
|
+
}
|
|
118
|
+
}
|
|
82
119
|
}
|
|
83
120
|
|
|
84
121
|
// Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
|
|
@@ -88,16 +125,11 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
|
|
|
88
125
|
}
|
|
89
126
|
}
|
|
90
127
|
|
|
91
|
-
// Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
|
|
92
|
-
var isNestingTablesSupported = fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
|
|
93
|
-
exposure: true
|
|
94
|
-
});
|
|
95
|
-
|
|
96
128
|
// NOTE: this will block drop targets from showing for dragging a table into another table
|
|
97
129
|
// unless nested tables are supported and the nesting depth does not exceed 1
|
|
98
130
|
if ((parentNodeType === 'tableCell' || parentNodeType === 'tableHeader') && activeNodeType === 'table') {
|
|
99
|
-
var
|
|
100
|
-
if (!isNestingTablesSupported || isNestingTablesSupported &&
|
|
131
|
+
var _nestingDepth = getParentOfTypeCount(tableNodeType)($destNodePos);
|
|
132
|
+
if (!isNestingTablesSupported || isNestingTablesSupported && _nestingDepth > 1) {
|
|
101
133
|
return false;
|
|
102
134
|
}
|
|
103
135
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Slice } from '@atlaskit/editor-prosemirror/model';
|
|
1
|
+
import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { NodeType, Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
|
|
3
3
|
export declare const isInsideTable: (nodeType: NodeType) => Boolean;
|
|
4
4
|
export declare const isLayoutColumn: (nodeType: NodeType) => Boolean;
|
|
@@ -14,6 +14,7 @@ export declare const isInSameLayout: ($from: ResolvedPos, $to: ResolvedPos) => b
|
|
|
14
14
|
* @throws RangeError: Invalid content for node nestedExpand
|
|
15
15
|
*/
|
|
16
16
|
export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNode | null;
|
|
17
|
+
export declare const transformFragmentExpandToNestedExpand: (fragment: Fragment) => Fragment | null;
|
|
17
18
|
export declare const transformSliceExpandToNestedExpand: (slice: Slice) => Slice | null;
|
|
18
19
|
export declare const memoizedTransformExpandToNestedExpand: import("memoize-one").MemoizedFn<(node: PMNode) => PMNode | null>;
|
|
19
20
|
export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Slice } from '@atlaskit/editor-prosemirror/model';
|
|
1
|
+
import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
|
|
2
2
|
import type { NodeType, Node as PMNode, ResolvedPos } from '@atlaskit/editor-prosemirror/model';
|
|
3
3
|
export declare const isInsideTable: (nodeType: NodeType) => Boolean;
|
|
4
4
|
export declare const isLayoutColumn: (nodeType: NodeType) => Boolean;
|
|
@@ -14,6 +14,7 @@ export declare const isInSameLayout: ($from: ResolvedPos, $to: ResolvedPos) => b
|
|
|
14
14
|
* @throws RangeError: Invalid content for node nestedExpand
|
|
15
15
|
*/
|
|
16
16
|
export declare const transformExpandToNestedExpand: (expandNode: PMNode) => PMNode | null;
|
|
17
|
+
export declare const transformFragmentExpandToNestedExpand: (fragment: Fragment) => Fragment | null;
|
|
17
18
|
export declare const transformSliceExpandToNestedExpand: (slice: Slice) => Slice | null;
|
|
18
19
|
export declare const memoizedTransformExpandToNestedExpand: import("memoize-one").MemoizedFn<(node: PMNode) => PMNode | null>;
|
|
19
20
|
export declare function canMoveNodeToIndex(destParent: PMNode, indexIntoParent: number, srcNode: PMNode, $destNodePos: ResolvedPos, destNode?: PMNode): boolean;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.14",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
36
|
-
"@atlaskit/editor-common": "^102.
|
|
36
|
+
"@atlaskit/editor-common": "^102.8.0",
|
|
37
37
|
"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.0.0",
|
|
53
53
|
"@atlaskit/primitives": "^14.1.0",
|
|
54
54
|
"@atlaskit/theme": "^18.0.0",
|
|
55
|
-
"@atlaskit/tmp-editor-statsig": "^
|
|
55
|
+
"@atlaskit/tmp-editor-statsig": "^4.0.0",
|
|
56
56
|
"@atlaskit/tokens": "^4.5.0",
|
|
57
57
|
"@atlaskit/tooltip": "^20.0.0",
|
|
58
58
|
"@babel/runtime": "^7.0.0",
|
|
@@ -166,6 +166,9 @@
|
|
|
166
166
|
},
|
|
167
167
|
"platform_editor_remove_drag_handle_fix": {
|
|
168
168
|
"type": "boolean"
|
|
169
|
+
},
|
|
170
|
+
"platform_editor_drag_layout_column_into_nodes": {
|
|
171
|
+
"type": "boolean"
|
|
169
172
|
}
|
|
170
173
|
}
|
|
171
174
|
}
|