@atlaskit/editor-plugin-block-controls 3.8.7 → 3.8.9
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 +17 -0
- package/dist/cjs/editor-commands/move-node.js +10 -18
- package/dist/cjs/pm-plugins/first-node-dec-plugin.js +0 -1
- package/dist/cjs/pm-plugins/utils/validation.js +29 -19
- package/dist/cjs/ui/quick-insert-button.js +38 -25
- package/dist/es2019/editor-commands/move-node.js +10 -18
- package/dist/es2019/pm-plugins/first-node-dec-plugin.js +0 -1
- package/dist/es2019/pm-plugins/utils/validation.js +29 -21
- package/dist/es2019/ui/quick-insert-button.js +29 -15
- package/dist/esm/editor-commands/move-node.js +10 -18
- package/dist/esm/pm-plugins/first-node-dec-plugin.js +0 -1
- package/dist/esm/pm-plugins/utils/validation.js +29 -19
- package/dist/esm/ui/quick-insert-button.js +38 -25
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,22 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 3.8.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#139216](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/139216)
|
|
8
|
+
[`e8f596d2b1910`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e8f596d2b1910) -
|
|
9
|
+
[ux] Cleaned up platform_editor_controls_patch_1 FG
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 3.8.8
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#138622](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/138622)
|
|
17
|
+
[`09f425c925d38`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/09f425c925d38) -
|
|
18
|
+
Add support for quick insert in cell selection
|
|
19
|
+
|
|
3
20
|
## 3.8.7
|
|
4
21
|
|
|
5
22
|
### Patch Changes
|
|
@@ -84,17 +84,13 @@ function transformSourceSlice(nodeCopy, destType) {
|
|
|
84
84
|
}
|
|
85
85
|
return nodeCopy;
|
|
86
86
|
}
|
|
87
|
-
var
|
|
87
|
+
var nodesSupportDragLayoutColumnInto = ['tableCell', 'tableHeader', 'panel', 'expand', 'nestedExpand'];
|
|
88
|
+
var isDragLayoutColumnIntoSupportedNodes = function isDragLayoutColumnIntoSupportedNodes($from, $to) {
|
|
88
89
|
var _$from$nodeAfter;
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
var
|
|
92
|
-
|
|
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
|
-
};
|
|
95
|
-
var isDragLayoutColumnIntoPanel = function isDragLayoutColumnIntoPanel($from, $to) {
|
|
96
|
-
var _$from$nodeAfter3;
|
|
97
|
-
return ((_$from$nodeAfter3 = $from.nodeAfter) === null || _$from$nodeAfter3 === void 0 ? void 0 : _$from$nodeAfter3.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.parent.type.name === 'panel';
|
|
90
|
+
var isTopLevel = $to.depth === 0;
|
|
91
|
+
var isDragIntoNodes = nodesSupportDragLayoutColumnInto.includes($to.parent.type.name);
|
|
92
|
+
var supportedCondition = (0, _platformFeatureFlags.fg)('platform_editor_drag_layout_column_into_nodes') ? isDragIntoNodes || isTopLevel : isTopLevel;
|
|
93
|
+
return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && supportedCondition;
|
|
98
94
|
};
|
|
99
95
|
|
|
100
96
|
/**
|
|
@@ -383,19 +379,15 @@ var moveNode = exports.moveNode = function moveNode(api) {
|
|
|
383
379
|
var destType = $to.node().type;
|
|
384
380
|
var destParent = $to.node($to.depth);
|
|
385
381
|
var sourceNode = $handlePos.nodeAfter;
|
|
386
|
-
var dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
|
|
387
|
-
var dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
|
|
388
|
-
var dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
|
|
389
382
|
|
|
390
383
|
//TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
|
|
391
|
-
// Move a layout column to top level
|
|
392
|
-
|
|
393
|
-
// Move a layout column into a panel, only moves the content into the panel
|
|
394
|
-
if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable || dragLayoutColumnIntoPanel)) {
|
|
384
|
+
// Move a layout column to top level, or table cell, or panel, or expand, only moves the content into them
|
|
385
|
+
if (sourceNode && isDragLayoutColumnIntoSupportedNodes($handlePos, $to)) {
|
|
395
386
|
// need update after we support single column layout.
|
|
396
387
|
var layoutColumnContent = sourceNode.content;
|
|
397
388
|
var fragment;
|
|
398
|
-
if
|
|
389
|
+
// if drop into table, and layout column contains expand, transform it to nestedExpand
|
|
390
|
+
if (['tableCell', 'tableHeader'].includes($to.parent.type.name)) {
|
|
399
391
|
var contentContainsExpand = (0, _utils2.findChildrenByType)(sourceNode, expand).length > 0;
|
|
400
392
|
fragment = contentContainsExpand ? (0, _validation.transformFragmentExpandToNestedExpand)(_model.Fragment.from(layoutColumnContent)) : _model.Fragment.from(layoutColumnContent);
|
|
401
393
|
if (!fragment) {
|
|
@@ -10,7 +10,6 @@ var _transform = require("@atlaskit/editor-prosemirror/transform");
|
|
|
10
10
|
var _view = require("@atlaskit/editor-prosemirror/view");
|
|
11
11
|
var firstNodeDecPluginKey = exports.firstNodeDecPluginKey = new _state.PluginKey('firstNodeDec');
|
|
12
12
|
var createFirstNodeDecSet = function createFirstNodeDecSet(state) {
|
|
13
|
-
;
|
|
14
13
|
var firstNode = state.doc.firstChild;
|
|
15
14
|
if (!firstNode) {
|
|
16
15
|
return _view.DecorationSet.empty;
|
|
@@ -90,8 +90,8 @@ var memoizedTransformExpandToNestedExpand = exports.memoizedTransformExpandToNes
|
|
|
90
90
|
});
|
|
91
91
|
var canCreateNodeWithContentInsideAnotherNode = exports.canCreateNodeWithContentInsideAnotherNode = function canCreateNodeWithContentInsideAnotherNode(nodeTypesToCreate, nodeWithTargetFragment) {
|
|
92
92
|
try {
|
|
93
|
-
return !!nodeTypesToCreate.every(function (
|
|
94
|
-
return
|
|
93
|
+
return !!nodeTypesToCreate.every(function (nodeTypeToCreate) {
|
|
94
|
+
return nodeTypeToCreate.createChecked({}, nodeWithTargetFragment);
|
|
95
95
|
});
|
|
96
96
|
} catch (e) {
|
|
97
97
|
return false;
|
|
@@ -100,24 +100,29 @@ var canCreateNodeWithContentInsideAnotherNode = exports.canCreateNodeWithContent
|
|
|
100
100
|
function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos, destNode) {
|
|
101
101
|
var srcNodeType = srcNode.type;
|
|
102
102
|
var schema = srcNodeType.schema;
|
|
103
|
-
var
|
|
104
|
-
|
|
103
|
+
var _schema$nodes = schema.nodes,
|
|
104
|
+
table = _schema$nodes.table,
|
|
105
|
+
tableCell = _schema$nodes.tableCell,
|
|
106
|
+
tableHeader = _schema$nodes.tableHeader,
|
|
107
|
+
expand = _schema$nodes.expand,
|
|
108
|
+
nestedExpand = _schema$nodes.nestedExpand,
|
|
109
|
+
doc = _schema$nodes.doc,
|
|
110
|
+
panel = _schema$nodes.panel,
|
|
111
|
+
layoutColumn = _schema$nodes.layoutColumn,
|
|
112
|
+
layoutSection = _schema$nodes.layoutSection;
|
|
113
|
+
var destParentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type;
|
|
114
|
+
var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type;
|
|
105
115
|
var layoutColumnContent = srcNode.content;
|
|
106
116
|
var isNestingTablesSupported = (0, _platformFeatureFlags.fg)('platform_editor_use_nested_table_pm_nodes') && (0, _experiments.editorExperiment)('nested-tables-in-tables', true, {
|
|
107
117
|
exposure: true
|
|
108
118
|
});
|
|
109
|
-
|
|
110
|
-
if (activeNodeType === 'layoutColumn' && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
119
|
+
if (activeNodeType === layoutColumn && (0, _experiments.editorExperiment)('advanced_layouts', true)) {
|
|
111
120
|
// Allow drag layout column and drop into layout section
|
|
112
|
-
if ((destNode === null || destNode === void 0 ? void 0 : destNode.type
|
|
121
|
+
if ((destNode === null || destNode === void 0 ? void 0 : destNode.type) === layoutSection || destParentNodeType === doc) {
|
|
113
122
|
return true;
|
|
114
123
|
}
|
|
115
124
|
if ((0, _platformFeatureFlags.fg)('platform_editor_drag_layout_column_into_nodes')) {
|
|
116
|
-
if (destParentNodeType ===
|
|
117
|
-
var _schema$nodes = schema.nodes,
|
|
118
|
-
tableCell = _schema$nodes.tableCell,
|
|
119
|
-
tableHeader = _schema$nodes.tableHeader,
|
|
120
|
-
expand = _schema$nodes.expand;
|
|
125
|
+
if (destParentNodeType === tableCell || destParentNodeType === tableHeader) {
|
|
121
126
|
var contentContainsExpand = (0, _utils.findChildrenByType)(srcNode, expand).length > 0;
|
|
122
127
|
//convert expand to nestedExpand if there are expands inside the layout column
|
|
123
128
|
// otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
|
|
@@ -127,36 +132,41 @@ function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos,
|
|
|
127
132
|
}
|
|
128
133
|
return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
|
|
129
134
|
}
|
|
130
|
-
if (destParentNodeType ===
|
|
131
|
-
var panel = schema.nodes.panel;
|
|
135
|
+
if (destParentNodeType === panel) {
|
|
132
136
|
return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
|
|
133
137
|
}
|
|
138
|
+
if (destParentNodeType === expand) {
|
|
139
|
+
return canCreateNodeWithContentInsideAnotherNode([expand], layoutColumnContent);
|
|
140
|
+
}
|
|
141
|
+
if (destParentNodeType === nestedExpand) {
|
|
142
|
+
return canCreateNodeWithContentInsideAnotherNode([nestedExpand], layoutColumnContent);
|
|
143
|
+
}
|
|
134
144
|
}
|
|
135
145
|
}
|
|
136
146
|
|
|
137
147
|
// Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
|
|
138
148
|
if ((0, _experiments.editorExperiment)('nested-expand-in-expand', false)) {
|
|
139
|
-
if (destParentNodeType ===
|
|
149
|
+
if (destParentNodeType === expand && (activeNodeType === expand || activeNodeType === nestedExpand)) {
|
|
140
150
|
return false;
|
|
141
151
|
}
|
|
142
152
|
}
|
|
143
153
|
|
|
144
154
|
// NOTE: this will block drop targets from showing for dragging a table into another table
|
|
145
155
|
// unless nested tables are supported and the nesting depth does not exceed 1
|
|
146
|
-
if ((destParentNodeType ===
|
|
147
|
-
var nestingDepth = (0, _nesting.getParentOfTypeCount)(
|
|
156
|
+
if ((destParentNodeType === tableCell || destParentNodeType === tableHeader) && activeNodeType === table) {
|
|
157
|
+
var nestingDepth = (0, _nesting.getParentOfTypeCount)(table)($destNodePos);
|
|
148
158
|
if (!isNestingTablesSupported || isNestingTablesSupported && nestingDepth > 1) {
|
|
149
159
|
return false;
|
|
150
160
|
}
|
|
151
161
|
}
|
|
152
162
|
if (isInsideTable(destParent.type) && isExpand(srcNodeType)) {
|
|
153
163
|
if (memoizedTransformExpandToNestedExpand(srcNode)) {
|
|
154
|
-
srcNodeType =
|
|
164
|
+
srcNodeType = nestedExpand;
|
|
155
165
|
} else {
|
|
156
166
|
return false;
|
|
157
167
|
}
|
|
158
168
|
} else if ((isDoc(destParent.type) || isLayoutColumn(destParent.type)) && isNestedExpand(srcNodeType)) {
|
|
159
|
-
srcNodeType =
|
|
169
|
+
srcNodeType = expand;
|
|
160
170
|
}
|
|
161
171
|
return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
|
|
162
172
|
}
|
|
@@ -15,6 +15,7 @@ var _messages = require("@atlaskit/editor-common/messages");
|
|
|
15
15
|
var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
|
|
16
16
|
var _state = require("@atlaskit/editor-prosemirror/state");
|
|
17
17
|
var _utils = require("@atlaskit/editor-prosemirror/utils");
|
|
18
|
+
var _cellSelection = require("@atlaskit/editor-tables/cell-selection");
|
|
18
19
|
var _add = _interopRequireDefault(require("@atlaskit/icon/utility/add"));
|
|
19
20
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
21
|
var _primitives = require("@atlaskit/primitives");
|
|
@@ -115,7 +116,6 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
115
116
|
rootNodeType = _ref.rootNodeType,
|
|
116
117
|
anchorRectCache = _ref.anchorRectCache;
|
|
117
118
|
var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
|
|
118
|
-
// remove when platform_editor_controls_patch_1 is removed
|
|
119
119
|
var isTypeAheadOpen = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'typeAhead.isOpen');
|
|
120
120
|
var _useState = (0, _react.useState)({
|
|
121
121
|
display: 'none'
|
|
@@ -206,14 +206,15 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
206
206
|
if (start !== undefined) {
|
|
207
207
|
// if the selection is not within the node this decoration is rendered at
|
|
208
208
|
// or the node is non-editable, then insert a newline and trigger quick insert
|
|
209
|
-
|
|
209
|
+
var isSelectionInsideNode = (0, _documentChecks.isSelectionInNode)(start, view);
|
|
210
|
+
if (!isSelectionInsideNode || (0, _documentChecks.isNonEditableBlock)(start, view)) {
|
|
210
211
|
api.core.actions.execute((0, _editorCommands.createNewLine)(start));
|
|
211
212
|
}
|
|
212
|
-
if (
|
|
213
|
+
if (isSelectionInsideNode) {
|
|
213
214
|
// text or element with be deselected and the / added immediately after the paragraph
|
|
214
215
|
// unless the selection is empty
|
|
215
216
|
var currentSelection = view.state.selection;
|
|
216
|
-
if ((0, _documentChecks.isInTextSelection)(view) && currentSelection.from !== currentSelection.to
|
|
217
|
+
if ((0, _documentChecks.isInTextSelection)(view) && currentSelection.from !== currentSelection.to) {
|
|
217
218
|
var currentParagraphNode = (0, _utils.findParentNode)(function (node) {
|
|
218
219
|
return TEXT_PARENT_TYPES.includes(node.type.name);
|
|
219
220
|
})(currentSelection);
|
|
@@ -246,6 +247,24 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
246
247
|
});
|
|
247
248
|
}
|
|
248
249
|
}
|
|
250
|
+
if (currentSelection instanceof _cellSelection.CellSelection && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_4')) {
|
|
251
|
+
// find the last inline position in the selection
|
|
252
|
+
var lastInlinePosition = _state.TextSelection.near(view.state.selection.$to, -1);
|
|
253
|
+
lastInlinePosition && api.core.actions.execute(function (_ref4) {
|
|
254
|
+
var tr = _ref4.tr;
|
|
255
|
+
if (!(lastInlinePosition instanceof _state.TextSelection)) {
|
|
256
|
+
// this will create a new line after the node
|
|
257
|
+
(0, _editorCommands.createNewLine)(lastInlinePosition.from)({
|
|
258
|
+
tr: tr
|
|
259
|
+
});
|
|
260
|
+
// this will find the next valid text position after the node
|
|
261
|
+
tr.setSelection(_state.TextSelection.create(tr.doc, lastInlinePosition.to));
|
|
262
|
+
} else {
|
|
263
|
+
tr.setSelection(lastInlinePosition);
|
|
264
|
+
}
|
|
265
|
+
return tr;
|
|
266
|
+
});
|
|
267
|
+
}
|
|
249
268
|
}
|
|
250
269
|
}
|
|
251
270
|
(_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl', true);
|
|
@@ -269,40 +288,34 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
269
288
|
testId: "editor-quick-insert-button",
|
|
270
289
|
type: "button",
|
|
271
290
|
"aria-label": formatMessage(_messages.blockControlsMessages.insert),
|
|
272
|
-
xcss: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles,
|
|
273
|
-
// remove disabledStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
|
|
274
|
-
isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') ? disabledStyles : undefined],
|
|
291
|
+
xcss: [(0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
|
|
275
292
|
onClick: handleQuickInsert,
|
|
276
|
-
onMouseDown:
|
|
277
|
-
isDisabled: !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') &&
|
|
293
|
+
onMouseDown: handleMouseDown,
|
|
294
|
+
isDisabled: !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && isTypeAheadOpen
|
|
278
295
|
}, /*#__PURE__*/_react.default.createElement(_add.default, {
|
|
279
296
|
label: "add",
|
|
280
|
-
color:
|
|
281
|
-
// remove color.icon.disabled when platform_editor_controls_patch_1 is removed
|
|
282
|
-
isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
|
|
297
|
+
color: isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
|
|
283
298
|
})));
|
|
284
299
|
};
|
|
285
300
|
return /*#__PURE__*/_react.default.createElement(_primitives.Box
|
|
286
301
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
287
302
|
, {
|
|
288
303
|
style: positionStyles,
|
|
289
|
-
xcss: [containerStaticStyles,
|
|
290
|
-
// remove disabledContainerStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
|
|
291
|
-
isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_1') && disabledContainerStyles]
|
|
304
|
+
xcss: [containerStaticStyles, isTypeAheadOpen && !(0, _platformFeatureFlags.fg)('platform_editor_controls_widget_visibility') && disabledContainerStyles]
|
|
292
305
|
}, (0, _platformFeatureFlags.fg)('platform_editor_controls_sticky_controls') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, {
|
|
293
306
|
xcss: [tooltipContainerStyles]
|
|
294
307
|
}, tooltipPressable()) : tooltipPressable());
|
|
295
308
|
};
|
|
296
|
-
var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function QuickInsertWithVisibility(
|
|
297
|
-
var view =
|
|
298
|
-
api =
|
|
299
|
-
formatMessage =
|
|
300
|
-
getPos =
|
|
301
|
-
nodeType =
|
|
302
|
-
anchorName =
|
|
303
|
-
rootAnchorName =
|
|
304
|
-
rootNodeType =
|
|
305
|
-
anchorRectCache =
|
|
309
|
+
var QuickInsertWithVisibility = exports.QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5) {
|
|
310
|
+
var view = _ref5.view,
|
|
311
|
+
api = _ref5.api,
|
|
312
|
+
formatMessage = _ref5.formatMessage,
|
|
313
|
+
getPos = _ref5.getPos,
|
|
314
|
+
nodeType = _ref5.nodeType,
|
|
315
|
+
anchorName = _ref5.anchorName,
|
|
316
|
+
rootAnchorName = _ref5.rootAnchorName,
|
|
317
|
+
rootNodeType = _ref5.rootNodeType,
|
|
318
|
+
anchorRectCache = _ref5.anchorRectCache;
|
|
306
319
|
return /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
|
|
307
320
|
api: api
|
|
308
321
|
}, /*#__PURE__*/_react.default.createElement(TypeAheadControl, {
|
|
@@ -77,17 +77,13 @@ function transformSourceSlice(nodeCopy, destType) {
|
|
|
77
77
|
}
|
|
78
78
|
return nodeCopy;
|
|
79
79
|
}
|
|
80
|
-
const
|
|
80
|
+
const nodesSupportDragLayoutColumnInto = ['tableCell', 'tableHeader', 'panel', 'expand', 'nestedExpand'];
|
|
81
|
+
const isDragLayoutColumnIntoSupportedNodes = ($from, $to) => {
|
|
81
82
|
var _$from$nodeAfter;
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
const
|
|
85
|
-
|
|
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
|
-
};
|
|
88
|
-
const isDragLayoutColumnIntoPanel = ($from, $to) => {
|
|
89
|
-
var _$from$nodeAfter3;
|
|
90
|
-
return ((_$from$nodeAfter3 = $from.nodeAfter) === null || _$from$nodeAfter3 === void 0 ? void 0 : _$from$nodeAfter3.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.parent.type.name === 'panel';
|
|
83
|
+
const isTopLevel = $to.depth === 0;
|
|
84
|
+
const isDragIntoNodes = nodesSupportDragLayoutColumnInto.includes($to.parent.type.name);
|
|
85
|
+
const supportedCondition = fg('platform_editor_drag_layout_column_into_nodes') ? isDragIntoNodes || isTopLevel : isTopLevel;
|
|
86
|
+
return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && supportedCondition;
|
|
91
87
|
};
|
|
92
88
|
|
|
93
89
|
/**
|
|
@@ -386,19 +382,15 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
|
|
|
386
382
|
const destType = $to.node().type;
|
|
387
383
|
const destParent = $to.node($to.depth);
|
|
388
384
|
const sourceNode = $handlePos.nodeAfter;
|
|
389
|
-
const dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
|
|
390
|
-
const dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
|
|
391
|
-
const dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
|
|
392
385
|
|
|
393
386
|
//TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
|
|
394
|
-
// Move a layout column to top level
|
|
395
|
-
|
|
396
|
-
// Move a layout column into a panel, only moves the content into the panel
|
|
397
|
-
if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable || dragLayoutColumnIntoPanel)) {
|
|
387
|
+
// Move a layout column to top level, or table cell, or panel, or expand, only moves the content into them
|
|
388
|
+
if (sourceNode && isDragLayoutColumnIntoSupportedNodes($handlePos, $to)) {
|
|
398
389
|
// need update after we support single column layout.
|
|
399
390
|
const layoutColumnContent = sourceNode.content;
|
|
400
391
|
let fragment;
|
|
401
|
-
if
|
|
392
|
+
// if drop into table, and layout column contains expand, transform it to nestedExpand
|
|
393
|
+
if (['tableCell', 'tableHeader'].includes($to.parent.type.name)) {
|
|
402
394
|
const contentContainsExpand = findChildrenByType(sourceNode, expand).length > 0;
|
|
403
395
|
fragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(Fragment.from(layoutColumnContent)) : Fragment.from(layoutColumnContent);
|
|
404
396
|
if (!fragment) {
|
|
@@ -4,7 +4,6 @@ import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/tra
|
|
|
4
4
|
import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
5
|
export const firstNodeDecPluginKey = new PluginKey('firstNodeDec');
|
|
6
6
|
const createFirstNodeDecSet = state => {
|
|
7
|
-
;
|
|
8
7
|
const firstNode = state.doc.firstChild;
|
|
9
8
|
if (!firstNode) {
|
|
10
9
|
return DecorationSet.empty;
|
|
@@ -82,7 +82,7 @@ export const memoizedTransformExpandToNestedExpand = memoizeOne(node => {
|
|
|
82
82
|
});
|
|
83
83
|
export const canCreateNodeWithContentInsideAnotherNode = (nodeTypesToCreate, nodeWithTargetFragment) => {
|
|
84
84
|
try {
|
|
85
|
-
return !!nodeTypesToCreate.every(
|
|
85
|
+
return !!nodeTypesToCreate.every(nodeTypeToCreate => nodeTypeToCreate.createChecked({}, nodeWithTargetFragment));
|
|
86
86
|
} catch (e) {
|
|
87
87
|
return false;
|
|
88
88
|
}
|
|
@@ -90,25 +90,30 @@ export const canCreateNodeWithContentInsideAnotherNode = (nodeTypesToCreate, nod
|
|
|
90
90
|
export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos, destNode) {
|
|
91
91
|
let srcNodeType = srcNode.type;
|
|
92
92
|
const schema = srcNodeType.schema;
|
|
93
|
-
const
|
|
94
|
-
|
|
93
|
+
const {
|
|
94
|
+
table,
|
|
95
|
+
tableCell,
|
|
96
|
+
tableHeader,
|
|
97
|
+
expand,
|
|
98
|
+
nestedExpand,
|
|
99
|
+
doc,
|
|
100
|
+
panel,
|
|
101
|
+
layoutColumn,
|
|
102
|
+
layoutSection
|
|
103
|
+
} = schema.nodes;
|
|
104
|
+
const destParentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type;
|
|
105
|
+
const activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type;
|
|
95
106
|
const layoutColumnContent = srcNode.content;
|
|
96
107
|
const isNestingTablesSupported = fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
|
|
97
108
|
exposure: true
|
|
98
109
|
});
|
|
99
|
-
|
|
100
|
-
if (activeNodeType === 'layoutColumn' && editorExperiment('advanced_layouts', true)) {
|
|
110
|
+
if (activeNodeType === layoutColumn && editorExperiment('advanced_layouts', true)) {
|
|
101
111
|
// Allow drag layout column and drop into layout section
|
|
102
|
-
if ((destNode === null || destNode === void 0 ? void 0 : destNode.type
|
|
112
|
+
if ((destNode === null || destNode === void 0 ? void 0 : destNode.type) === layoutSection || destParentNodeType === doc) {
|
|
103
113
|
return true;
|
|
104
114
|
}
|
|
105
115
|
if (fg('platform_editor_drag_layout_column_into_nodes')) {
|
|
106
|
-
if (destParentNodeType ===
|
|
107
|
-
const {
|
|
108
|
-
tableCell,
|
|
109
|
-
tableHeader,
|
|
110
|
-
expand
|
|
111
|
-
} = schema.nodes;
|
|
116
|
+
if (destParentNodeType === tableCell || destParentNodeType === tableHeader) {
|
|
112
117
|
const contentContainsExpand = findChildrenByType(srcNode, expand).length > 0;
|
|
113
118
|
//convert expand to nestedExpand if there are expands inside the layout column
|
|
114
119
|
// otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
|
|
@@ -118,38 +123,41 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
|
|
|
118
123
|
}
|
|
119
124
|
return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
|
|
120
125
|
}
|
|
121
|
-
if (destParentNodeType ===
|
|
122
|
-
const {
|
|
123
|
-
panel
|
|
124
|
-
} = schema.nodes;
|
|
126
|
+
if (destParentNodeType === panel) {
|
|
125
127
|
return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
|
|
126
128
|
}
|
|
129
|
+
if (destParentNodeType === expand) {
|
|
130
|
+
return canCreateNodeWithContentInsideAnotherNode([expand], layoutColumnContent);
|
|
131
|
+
}
|
|
132
|
+
if (destParentNodeType === nestedExpand) {
|
|
133
|
+
return canCreateNodeWithContentInsideAnotherNode([nestedExpand], layoutColumnContent);
|
|
134
|
+
}
|
|
127
135
|
}
|
|
128
136
|
}
|
|
129
137
|
|
|
130
138
|
// Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
|
|
131
139
|
if (editorExperiment('nested-expand-in-expand', false)) {
|
|
132
|
-
if (destParentNodeType ===
|
|
140
|
+
if (destParentNodeType === expand && (activeNodeType === expand || activeNodeType === nestedExpand)) {
|
|
133
141
|
return false;
|
|
134
142
|
}
|
|
135
143
|
}
|
|
136
144
|
|
|
137
145
|
// NOTE: this will block drop targets from showing for dragging a table into another table
|
|
138
146
|
// unless nested tables are supported and the nesting depth does not exceed 1
|
|
139
|
-
if ((destParentNodeType ===
|
|
140
|
-
const nestingDepth = getParentOfTypeCount(
|
|
147
|
+
if ((destParentNodeType === tableCell || destParentNodeType === tableHeader) && activeNodeType === table) {
|
|
148
|
+
const nestingDepth = getParentOfTypeCount(table)($destNodePos);
|
|
141
149
|
if (!isNestingTablesSupported || isNestingTablesSupported && nestingDepth > 1) {
|
|
142
150
|
return false;
|
|
143
151
|
}
|
|
144
152
|
}
|
|
145
153
|
if (isInsideTable(destParent.type) && isExpand(srcNodeType)) {
|
|
146
154
|
if (memoizedTransformExpandToNestedExpand(srcNode)) {
|
|
147
|
-
srcNodeType =
|
|
155
|
+
srcNodeType = nestedExpand;
|
|
148
156
|
} else {
|
|
149
157
|
return false;
|
|
150
158
|
}
|
|
151
159
|
} else if ((isDoc(destParent.type) || isLayoutColumn(destParent.type)) && isNestedExpand(srcNodeType)) {
|
|
152
|
-
srcNodeType =
|
|
160
|
+
srcNodeType = expand;
|
|
153
161
|
}
|
|
154
162
|
return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
|
|
155
163
|
}
|
|
@@ -5,6 +5,7 @@ import { blockControlsMessages as messages } from '@atlaskit/editor-common/messa
|
|
|
5
5
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
6
6
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
7
7
|
import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
|
|
8
|
+
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
8
9
|
import AddIcon from '@atlaskit/icon/utility/add';
|
|
9
10
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
11
|
import { Box, Pressable, xcss } from '@atlaskit/primitives';
|
|
@@ -102,7 +103,6 @@ export const TypeAheadControl = ({
|
|
|
102
103
|
anchorRectCache
|
|
103
104
|
}) => {
|
|
104
105
|
const macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
|
|
105
|
-
// remove when platform_editor_controls_patch_1 is removed
|
|
106
106
|
const isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
|
|
107
107
|
const [positionStyles, setPositionStyles] = useState({
|
|
108
108
|
display: 'none'
|
|
@@ -192,14 +192,15 @@ export const TypeAheadControl = ({
|
|
|
192
192
|
if (start !== undefined) {
|
|
193
193
|
// if the selection is not within the node this decoration is rendered at
|
|
194
194
|
// or the node is non-editable, then insert a newline and trigger quick insert
|
|
195
|
-
|
|
195
|
+
const isSelectionInsideNode = isSelectionInNode(start, view);
|
|
196
|
+
if (!isSelectionInsideNode || isNonEditableBlock(start, view)) {
|
|
196
197
|
api.core.actions.execute(createNewLine(start));
|
|
197
198
|
}
|
|
198
|
-
if (
|
|
199
|
+
if (isSelectionInsideNode) {
|
|
199
200
|
// text or element with be deselected and the / added immediately after the paragraph
|
|
200
201
|
// unless the selection is empty
|
|
201
202
|
const currentSelection = view.state.selection;
|
|
202
|
-
if (isInTextSelection(view) && currentSelection.from !== currentSelection.to
|
|
203
|
+
if (isInTextSelection(view) && currentSelection.from !== currentSelection.to) {
|
|
203
204
|
const currentParagraphNode = findParentNode(node => TEXT_PARENT_TYPES.includes(node.type.name))(currentSelection);
|
|
204
205
|
if (currentParagraphNode) {
|
|
205
206
|
const newPos =
|
|
@@ -232,6 +233,25 @@ export const TypeAheadControl = ({
|
|
|
232
233
|
});
|
|
233
234
|
}
|
|
234
235
|
}
|
|
236
|
+
if (currentSelection instanceof CellSelection && fg('platform_editor_controls_patch_4')) {
|
|
237
|
+
// find the last inline position in the selection
|
|
238
|
+
const lastInlinePosition = TextSelection.near(view.state.selection.$to, -1);
|
|
239
|
+
lastInlinePosition && api.core.actions.execute(({
|
|
240
|
+
tr
|
|
241
|
+
}) => {
|
|
242
|
+
if (!(lastInlinePosition instanceof TextSelection)) {
|
|
243
|
+
// this will create a new line after the node
|
|
244
|
+
createNewLine(lastInlinePosition.from)({
|
|
245
|
+
tr
|
|
246
|
+
});
|
|
247
|
+
// this will find the next valid text position after the node
|
|
248
|
+
tr.setSelection(TextSelection.create(tr.doc, lastInlinePosition.to));
|
|
249
|
+
} else {
|
|
250
|
+
tr.setSelection(lastInlinePosition);
|
|
251
|
+
}
|
|
252
|
+
return tr;
|
|
253
|
+
});
|
|
254
|
+
}
|
|
235
255
|
}
|
|
236
256
|
}
|
|
237
257
|
(_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 ? void 0 : _api$quickInsert.actions.openTypeAhead('blockControl', true);
|
|
@@ -254,25 +274,19 @@ export const TypeAheadControl = ({
|
|
|
254
274
|
testId: "editor-quick-insert-button",
|
|
255
275
|
type: "button",
|
|
256
276
|
"aria-label": formatMessage(messages.insert),
|
|
257
|
-
xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles,
|
|
258
|
-
// remove disabledStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
|
|
259
|
-
isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') ? disabledStyles : undefined],
|
|
277
|
+
xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
|
|
260
278
|
onClick: handleQuickInsert,
|
|
261
|
-
onMouseDown:
|
|
262
|
-
isDisabled: !fg('platform_editor_controls_widget_visibility') &&
|
|
279
|
+
onMouseDown: handleMouseDown,
|
|
280
|
+
isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
|
|
263
281
|
}, /*#__PURE__*/React.createElement(AddIcon, {
|
|
264
282
|
label: "add",
|
|
265
|
-
color:
|
|
266
|
-
// remove color.icon.disabled when platform_editor_controls_patch_1 is removed
|
|
267
|
-
isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
|
|
283
|
+
color: isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
|
|
268
284
|
})));
|
|
269
285
|
return /*#__PURE__*/React.createElement(Box
|
|
270
286
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
271
287
|
, {
|
|
272
288
|
style: positionStyles,
|
|
273
|
-
xcss: [containerStaticStyles,
|
|
274
|
-
// remove disabledContainerStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
|
|
275
|
-
isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
|
|
289
|
+
xcss: [containerStaticStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && disabledContainerStyles]
|
|
276
290
|
}, fg('platform_editor_controls_sticky_controls') ? /*#__PURE__*/React.createElement(Box, {
|
|
277
291
|
xcss: [tooltipContainerStyles]
|
|
278
292
|
}, tooltipPressable()) : tooltipPressable());
|
|
@@ -78,17 +78,13 @@ function transformSourceSlice(nodeCopy, destType) {
|
|
|
78
78
|
}
|
|
79
79
|
return nodeCopy;
|
|
80
80
|
}
|
|
81
|
-
var
|
|
81
|
+
var nodesSupportDragLayoutColumnInto = ['tableCell', 'tableHeader', 'panel', 'expand', 'nestedExpand'];
|
|
82
|
+
var isDragLayoutColumnIntoSupportedNodes = function isDragLayoutColumnIntoSupportedNodes($from, $to) {
|
|
82
83
|
var _$from$nodeAfter;
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
var
|
|
86
|
-
|
|
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
|
-
};
|
|
89
|
-
var isDragLayoutColumnIntoPanel = function isDragLayoutColumnIntoPanel($from, $to) {
|
|
90
|
-
var _$from$nodeAfter3;
|
|
91
|
-
return ((_$from$nodeAfter3 = $from.nodeAfter) === null || _$from$nodeAfter3 === void 0 ? void 0 : _$from$nodeAfter3.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && $to.parent.type.name === 'panel';
|
|
84
|
+
var isTopLevel = $to.depth === 0;
|
|
85
|
+
var isDragIntoNodes = nodesSupportDragLayoutColumnInto.includes($to.parent.type.name);
|
|
86
|
+
var supportedCondition = fg('platform_editor_drag_layout_column_into_nodes') ? isDragIntoNodes || isTopLevel : isTopLevel;
|
|
87
|
+
return ((_$from$nodeAfter = $from.nodeAfter) === null || _$from$nodeAfter === void 0 ? void 0 : _$from$nodeAfter.type.name) === 'layoutColumn' && $from.parent.type.name === 'layoutSection' && supportedCondition;
|
|
92
88
|
};
|
|
93
89
|
|
|
94
90
|
/**
|
|
@@ -377,19 +373,15 @@ export var moveNode = function moveNode(api) {
|
|
|
377
373
|
var destType = $to.node().type;
|
|
378
374
|
var destParent = $to.node($to.depth);
|
|
379
375
|
var sourceNode = $handlePos.nodeAfter;
|
|
380
|
-
var dragLayoutColumnToTopLevel = isDragLayoutColumnToTopLevel($handlePos, $to);
|
|
381
|
-
var dragLayoutColumnIntoTable = isDragLayoutColumnIntoTable($handlePos, $to);
|
|
382
|
-
var dragLayoutColumnIntoPanel = isDragLayoutColumnIntoPanel($handlePos, $to);
|
|
383
376
|
|
|
384
377
|
//TODO: ED-26959 - Does this need to be updated with new selection logic above? ^
|
|
385
|
-
// Move a layout column to top level
|
|
386
|
-
|
|
387
|
-
// Move a layout column into a panel, only moves the content into the panel
|
|
388
|
-
if (sourceNode && (dragLayoutColumnToTopLevel || dragLayoutColumnIntoTable || dragLayoutColumnIntoPanel)) {
|
|
378
|
+
// Move a layout column to top level, or table cell, or panel, or expand, only moves the content into them
|
|
379
|
+
if (sourceNode && isDragLayoutColumnIntoSupportedNodes($handlePos, $to)) {
|
|
389
380
|
// need update after we support single column layout.
|
|
390
381
|
var layoutColumnContent = sourceNode.content;
|
|
391
382
|
var fragment;
|
|
392
|
-
if
|
|
383
|
+
// if drop into table, and layout column contains expand, transform it to nestedExpand
|
|
384
|
+
if (['tableCell', 'tableHeader'].includes($to.parent.type.name)) {
|
|
393
385
|
var contentContainsExpand = findChildrenByType(sourceNode, expand).length > 0;
|
|
394
386
|
fragment = contentContainsExpand ? transformFragmentExpandToNestedExpand(Fragment.from(layoutColumnContent)) : Fragment.from(layoutColumnContent);
|
|
395
387
|
if (!fragment) {
|
|
@@ -4,7 +4,6 @@ import { ReplaceAroundStep, ReplaceStep } from '@atlaskit/editor-prosemirror/tra
|
|
|
4
4
|
import { DecorationSet, Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
5
|
export var firstNodeDecPluginKey = new PluginKey('firstNodeDec');
|
|
6
6
|
var createFirstNodeDecSet = function createFirstNodeDecSet(state) {
|
|
7
|
-
;
|
|
8
7
|
var firstNode = state.doc.firstChild;
|
|
9
8
|
if (!firstNode) {
|
|
10
9
|
return DecorationSet.empty;
|
|
@@ -80,8 +80,8 @@ export var memoizedTransformExpandToNestedExpand = memoizeOne(function (node) {
|
|
|
80
80
|
});
|
|
81
81
|
export var canCreateNodeWithContentInsideAnotherNode = function canCreateNodeWithContentInsideAnotherNode(nodeTypesToCreate, nodeWithTargetFragment) {
|
|
82
82
|
try {
|
|
83
|
-
return !!nodeTypesToCreate.every(function (
|
|
84
|
-
return
|
|
83
|
+
return !!nodeTypesToCreate.every(function (nodeTypeToCreate) {
|
|
84
|
+
return nodeTypeToCreate.createChecked({}, nodeWithTargetFragment);
|
|
85
85
|
});
|
|
86
86
|
} catch (e) {
|
|
87
87
|
return false;
|
|
@@ -90,24 +90,29 @@ export var canCreateNodeWithContentInsideAnotherNode = function canCreateNodeWit
|
|
|
90
90
|
export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNodePos, destNode) {
|
|
91
91
|
var srcNodeType = srcNode.type;
|
|
92
92
|
var schema = srcNodeType.schema;
|
|
93
|
-
var
|
|
94
|
-
|
|
93
|
+
var _schema$nodes = schema.nodes,
|
|
94
|
+
table = _schema$nodes.table,
|
|
95
|
+
tableCell = _schema$nodes.tableCell,
|
|
96
|
+
tableHeader = _schema$nodes.tableHeader,
|
|
97
|
+
expand = _schema$nodes.expand,
|
|
98
|
+
nestedExpand = _schema$nodes.nestedExpand,
|
|
99
|
+
doc = _schema$nodes.doc,
|
|
100
|
+
panel = _schema$nodes.panel,
|
|
101
|
+
layoutColumn = _schema$nodes.layoutColumn,
|
|
102
|
+
layoutSection = _schema$nodes.layoutSection;
|
|
103
|
+
var destParentNodeType = destParent === null || destParent === void 0 ? void 0 : destParent.type;
|
|
104
|
+
var activeNodeType = srcNode === null || srcNode === void 0 ? void 0 : srcNode.type;
|
|
95
105
|
var layoutColumnContent = srcNode.content;
|
|
96
106
|
var isNestingTablesSupported = fg('platform_editor_use_nested_table_pm_nodes') && editorExperiment('nested-tables-in-tables', true, {
|
|
97
107
|
exposure: true
|
|
98
108
|
});
|
|
99
|
-
|
|
100
|
-
if (activeNodeType === 'layoutColumn' && editorExperiment('advanced_layouts', true)) {
|
|
109
|
+
if (activeNodeType === layoutColumn && editorExperiment('advanced_layouts', true)) {
|
|
101
110
|
// Allow drag layout column and drop into layout section
|
|
102
|
-
if ((destNode === null || destNode === void 0 ? void 0 : destNode.type
|
|
111
|
+
if ((destNode === null || destNode === void 0 ? void 0 : destNode.type) === layoutSection || destParentNodeType === doc) {
|
|
103
112
|
return true;
|
|
104
113
|
}
|
|
105
114
|
if (fg('platform_editor_drag_layout_column_into_nodes')) {
|
|
106
|
-
if (destParentNodeType ===
|
|
107
|
-
var _schema$nodes = schema.nodes,
|
|
108
|
-
tableCell = _schema$nodes.tableCell,
|
|
109
|
-
tableHeader = _schema$nodes.tableHeader,
|
|
110
|
-
expand = _schema$nodes.expand;
|
|
115
|
+
if (destParentNodeType === tableCell || destParentNodeType === tableHeader) {
|
|
111
116
|
var contentContainsExpand = findChildrenByType(srcNode, expand).length > 0;
|
|
112
117
|
//convert expand to nestedExpand if there are expands inside the layout column
|
|
113
118
|
// otherwise, the createChecked will fail as expand is not a valid child of tableCell/tableHeader, but nestedExpand is
|
|
@@ -117,36 +122,41 @@ export function canMoveNodeToIndex(destParent, indexIntoParent, srcNode, $destNo
|
|
|
117
122
|
}
|
|
118
123
|
return canCreateNodeWithContentInsideAnotherNode([tableCell, tableHeader], convertedFragment);
|
|
119
124
|
}
|
|
120
|
-
if (destParentNodeType ===
|
|
121
|
-
var panel = schema.nodes.panel;
|
|
125
|
+
if (destParentNodeType === panel) {
|
|
122
126
|
return canCreateNodeWithContentInsideAnotherNode([panel], layoutColumnContent);
|
|
123
127
|
}
|
|
128
|
+
if (destParentNodeType === expand) {
|
|
129
|
+
return canCreateNodeWithContentInsideAnotherNode([expand], layoutColumnContent);
|
|
130
|
+
}
|
|
131
|
+
if (destParentNodeType === nestedExpand) {
|
|
132
|
+
return canCreateNodeWithContentInsideAnotherNode([nestedExpand], layoutColumnContent);
|
|
133
|
+
}
|
|
124
134
|
}
|
|
125
135
|
}
|
|
126
136
|
|
|
127
137
|
// Place experiments here instead of just inside move-node.ts as it stops the drag marker from appearing.
|
|
128
138
|
if (editorExperiment('nested-expand-in-expand', false)) {
|
|
129
|
-
if (destParentNodeType ===
|
|
139
|
+
if (destParentNodeType === expand && (activeNodeType === expand || activeNodeType === nestedExpand)) {
|
|
130
140
|
return false;
|
|
131
141
|
}
|
|
132
142
|
}
|
|
133
143
|
|
|
134
144
|
// NOTE: this will block drop targets from showing for dragging a table into another table
|
|
135
145
|
// unless nested tables are supported and the nesting depth does not exceed 1
|
|
136
|
-
if ((destParentNodeType ===
|
|
137
|
-
var nestingDepth = getParentOfTypeCount(
|
|
146
|
+
if ((destParentNodeType === tableCell || destParentNodeType === tableHeader) && activeNodeType === table) {
|
|
147
|
+
var nestingDepth = getParentOfTypeCount(table)($destNodePos);
|
|
138
148
|
if (!isNestingTablesSupported || isNestingTablesSupported && nestingDepth > 1) {
|
|
139
149
|
return false;
|
|
140
150
|
}
|
|
141
151
|
}
|
|
142
152
|
if (isInsideTable(destParent.type) && isExpand(srcNodeType)) {
|
|
143
153
|
if (memoizedTransformExpandToNestedExpand(srcNode)) {
|
|
144
|
-
srcNodeType =
|
|
154
|
+
srcNodeType = nestedExpand;
|
|
145
155
|
} else {
|
|
146
156
|
return false;
|
|
147
157
|
}
|
|
148
158
|
} else if ((isDoc(destParent.type) || isLayoutColumn(destParent.type)) && isNestedExpand(srcNodeType)) {
|
|
149
|
-
srcNodeType =
|
|
159
|
+
srcNodeType = expand;
|
|
150
160
|
}
|
|
151
161
|
return destParent.canReplaceWith(indexIntoParent, indexIntoParent, srcNodeType);
|
|
152
162
|
}
|
|
@@ -9,6 +9,7 @@ import { blockControlsMessages as messages } from '@atlaskit/editor-common/messa
|
|
|
9
9
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
10
10
|
import { TextSelection } from '@atlaskit/editor-prosemirror/state';
|
|
11
11
|
import { findParentNode } from '@atlaskit/editor-prosemirror/utils';
|
|
12
|
+
import { CellSelection } from '@atlaskit/editor-tables/cell-selection';
|
|
12
13
|
import AddIcon from '@atlaskit/icon/utility/add';
|
|
13
14
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
14
15
|
import { Box, Pressable, xcss } from '@atlaskit/primitives';
|
|
@@ -105,7 +106,6 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
|
|
|
105
106
|
rootNodeType = _ref.rootNodeType,
|
|
106
107
|
anchorRectCache = _ref.anchorRectCache;
|
|
107
108
|
var macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
|
|
108
|
-
// remove when platform_editor_controls_patch_1 is removed
|
|
109
109
|
var isTypeAheadOpen = useSharedPluginStateSelector(api, 'typeAhead.isOpen');
|
|
110
110
|
var _useState = useState({
|
|
111
111
|
display: 'none'
|
|
@@ -196,14 +196,15 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
|
|
|
196
196
|
if (start !== undefined) {
|
|
197
197
|
// if the selection is not within the node this decoration is rendered at
|
|
198
198
|
// or the node is non-editable, then insert a newline and trigger quick insert
|
|
199
|
-
|
|
199
|
+
var isSelectionInsideNode = isSelectionInNode(start, view);
|
|
200
|
+
if (!isSelectionInsideNode || isNonEditableBlock(start, view)) {
|
|
200
201
|
api.core.actions.execute(createNewLine(start));
|
|
201
202
|
}
|
|
202
|
-
if (
|
|
203
|
+
if (isSelectionInsideNode) {
|
|
203
204
|
// text or element with be deselected and the / added immediately after the paragraph
|
|
204
205
|
// unless the selection is empty
|
|
205
206
|
var currentSelection = view.state.selection;
|
|
206
|
-
if (isInTextSelection(view) && currentSelection.from !== currentSelection.to
|
|
207
|
+
if (isInTextSelection(view) && currentSelection.from !== currentSelection.to) {
|
|
207
208
|
var currentParagraphNode = findParentNode(function (node) {
|
|
208
209
|
return TEXT_PARENT_TYPES.includes(node.type.name);
|
|
209
210
|
})(currentSelection);
|
|
@@ -236,6 +237,24 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
|
|
|
236
237
|
});
|
|
237
238
|
}
|
|
238
239
|
}
|
|
240
|
+
if (currentSelection instanceof CellSelection && fg('platform_editor_controls_patch_4')) {
|
|
241
|
+
// find the last inline position in the selection
|
|
242
|
+
var lastInlinePosition = TextSelection.near(view.state.selection.$to, -1);
|
|
243
|
+
lastInlinePosition && api.core.actions.execute(function (_ref4) {
|
|
244
|
+
var tr = _ref4.tr;
|
|
245
|
+
if (!(lastInlinePosition instanceof TextSelection)) {
|
|
246
|
+
// this will create a new line after the node
|
|
247
|
+
createNewLine(lastInlinePosition.from)({
|
|
248
|
+
tr: tr
|
|
249
|
+
});
|
|
250
|
+
// this will find the next valid text position after the node
|
|
251
|
+
tr.setSelection(TextSelection.create(tr.doc, lastInlinePosition.to));
|
|
252
|
+
} else {
|
|
253
|
+
tr.setSelection(lastInlinePosition);
|
|
254
|
+
}
|
|
255
|
+
return tr;
|
|
256
|
+
});
|
|
257
|
+
}
|
|
239
258
|
}
|
|
240
259
|
}
|
|
241
260
|
(_api$quickInsert = api.quickInsert) === null || _api$quickInsert === void 0 || _api$quickInsert.actions.openTypeAhead('blockControl', true);
|
|
@@ -259,40 +278,34 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
|
|
|
259
278
|
testId: "editor-quick-insert-button",
|
|
260
279
|
type: "button",
|
|
261
280
|
"aria-label": formatMessage(messages.insert),
|
|
262
|
-
xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles,
|
|
263
|
-
// remove disabledStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
|
|
264
|
-
isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') ? disabledStyles : undefined],
|
|
281
|
+
xcss: [fg('platform_editor_controls_sticky_controls') ? buttonStyles : stickyButtonStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? disabledStyles : undefined],
|
|
265
282
|
onClick: handleQuickInsert,
|
|
266
|
-
onMouseDown:
|
|
267
|
-
isDisabled: !fg('platform_editor_controls_widget_visibility') &&
|
|
283
|
+
onMouseDown: handleMouseDown,
|
|
284
|
+
isDisabled: !fg('platform_editor_controls_widget_visibility') && isTypeAheadOpen
|
|
268
285
|
}, /*#__PURE__*/React.createElement(AddIcon, {
|
|
269
286
|
label: "add",
|
|
270
|
-
color:
|
|
271
|
-
// remove color.icon.disabled when platform_editor_controls_patch_1 is removed
|
|
272
|
-
isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
|
|
287
|
+
color: isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') ? "var(--ds-icon-disabled, #091E424F)" : "var(--ds-icon-subtle, #626F86)"
|
|
273
288
|
})));
|
|
274
289
|
};
|
|
275
290
|
return /*#__PURE__*/React.createElement(Box
|
|
276
291
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
|
|
277
292
|
, {
|
|
278
293
|
style: positionStyles,
|
|
279
|
-
xcss: [containerStaticStyles,
|
|
280
|
-
// remove disabledContainerStyles and platform_editor_controls_widget_visibility check when platform_editor_controls_patch_1 is removed
|
|
281
|
-
isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && fg('platform_editor_controls_patch_1') && disabledContainerStyles]
|
|
294
|
+
xcss: [containerStaticStyles, isTypeAheadOpen && !fg('platform_editor_controls_widget_visibility') && disabledContainerStyles]
|
|
282
295
|
}, fg('platform_editor_controls_sticky_controls') ? /*#__PURE__*/React.createElement(Box, {
|
|
283
296
|
xcss: [tooltipContainerStyles]
|
|
284
297
|
}, tooltipPressable()) : tooltipPressable());
|
|
285
298
|
};
|
|
286
|
-
export var QuickInsertWithVisibility = function QuickInsertWithVisibility(
|
|
287
|
-
var view =
|
|
288
|
-
api =
|
|
289
|
-
formatMessage =
|
|
290
|
-
getPos =
|
|
291
|
-
nodeType =
|
|
292
|
-
anchorName =
|
|
293
|
-
rootAnchorName =
|
|
294
|
-
rootNodeType =
|
|
295
|
-
anchorRectCache =
|
|
299
|
+
export var QuickInsertWithVisibility = function QuickInsertWithVisibility(_ref5) {
|
|
300
|
+
var view = _ref5.view,
|
|
301
|
+
api = _ref5.api,
|
|
302
|
+
formatMessage = _ref5.formatMessage,
|
|
303
|
+
getPos = _ref5.getPos,
|
|
304
|
+
nodeType = _ref5.nodeType,
|
|
305
|
+
anchorName = _ref5.anchorName,
|
|
306
|
+
rootAnchorName = _ref5.rootAnchorName,
|
|
307
|
+
rootNodeType = _ref5.rootNodeType,
|
|
308
|
+
anchorRectCache = _ref5.anchorRectCache;
|
|
296
309
|
return /*#__PURE__*/React.createElement(VisibilityContainer, {
|
|
297
310
|
api: api
|
|
298
311
|
}, /*#__PURE__*/React.createElement(TypeAheadControl, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "3.8.
|
|
3
|
+
"version": "3.8.9",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,13 +33,13 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
36
|
-
"@atlaskit/editor-common": "^103.
|
|
36
|
+
"@atlaskit/editor-common": "^103.4.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",
|
|
40
|
-
"@atlaskit/editor-plugin-feature-flags": "^1.
|
|
40
|
+
"@atlaskit/editor-plugin-feature-flags": "^1.4.0",
|
|
41
41
|
"@atlaskit/editor-plugin-metrics": "^3.4.0",
|
|
42
|
-
"@atlaskit/editor-plugin-quick-insert": "^2.
|
|
42
|
+
"@atlaskit/editor-plugin-quick-insert": "^2.3.0",
|
|
43
43
|
"@atlaskit/editor-plugin-selection": "^2.1.0",
|
|
44
44
|
"@atlaskit/editor-plugin-type-ahead": "^2.3.0",
|
|
45
45
|
"@atlaskit/editor-plugin-width": "^3.0.0",
|
|
@@ -162,9 +162,6 @@
|
|
|
162
162
|
"platform_editor_multi_body_extension_extensibility": {
|
|
163
163
|
"type": "boolean"
|
|
164
164
|
},
|
|
165
|
-
"platform_editor_controls_patch_1": {
|
|
166
|
-
"type": "boolean"
|
|
167
|
-
},
|
|
168
165
|
"platform_editor_elements_dnd_multi_select_patch_3": {
|
|
169
166
|
"type": "boolean"
|
|
170
167
|
},
|
|
@@ -176,6 +173,9 @@
|
|
|
176
173
|
},
|
|
177
174
|
"platform_editor_controls_widget_visibility": {
|
|
178
175
|
"type": "boolean"
|
|
176
|
+
},
|
|
177
|
+
"platform_editor_controls_patch_4": {
|
|
178
|
+
"type": "boolean"
|
|
179
179
|
}
|
|
180
180
|
}
|
|
181
181
|
}
|