@atlaskit/editor-plugin-block-controls 1.13.10 → 2.0.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 +17 -0
- package/dist/cjs/plugin.js +12 -10
- package/dist/cjs/pm-plugins/decorations.js +26 -62
- package/dist/cjs/pm-plugins/main.js +12 -34
- package/dist/cjs/ui/drag-handle.js +10 -16
- package/dist/cjs/ui/drop-target.js +5 -9
- package/dist/cjs/ui/empty-block-experiment/widget.js +1 -1
- package/dist/cjs/utils/getSelection.js +4 -3
- package/dist/es2019/plugin.js +12 -10
- package/dist/es2019/pm-plugins/decorations.js +18 -58
- package/dist/es2019/pm-plugins/main.js +10 -34
- package/dist/es2019/ui/drag-handle.js +10 -16
- package/dist/es2019/ui/drop-target.js +5 -8
- package/dist/es2019/ui/empty-block-experiment/widget.js +1 -1
- package/dist/es2019/utils/getSelection.js +4 -3
- package/dist/esm/plugin.js +12 -10
- package/dist/esm/pm-plugins/decorations.js +26 -62
- package/dist/esm/pm-plugins/main.js +12 -34
- package/dist/esm/ui/drag-handle.js +10 -16
- package/dist/esm/ui/drop-target.js +5 -9
- package/dist/esm/ui/empty-block-experiment/widget.js +1 -1
- package/dist/esm/utils/getSelection.js +4 -3
- package/dist/types/index.d.ts +1 -1
- package/dist/types/pm-plugins/decorations.d.ts +1 -7
- package/dist/types/types.d.ts +3 -9
- package/dist/types/ui/drop-target.d.ts +2 -2
- package/dist/types-ts4.5/index.d.ts +1 -1
- package/dist/types-ts4.5/pm-plugins/decorations.d.ts +1 -7
- package/dist/types-ts4.5/types.d.ts +3 -9
- package/dist/types-ts4.5/ui/drop-target.d.ts +2 -2
- package/package.json +6 -3
|
@@ -81,8 +81,7 @@ function getDocChildrenCount(newState) {
|
|
|
81
81
|
}
|
|
82
82
|
var initialState = {
|
|
83
83
|
decorations: DecorationSet.empty,
|
|
84
|
-
|
|
85
|
-
activeNode: null,
|
|
84
|
+
activeNode: undefined,
|
|
86
85
|
isDragging: false,
|
|
87
86
|
isMenuOpen: false,
|
|
88
87
|
editorHeight: 0,
|
|
@@ -105,7 +104,6 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
105
104
|
var activeNode = currentState.activeNode,
|
|
106
105
|
decorations = currentState.decorations,
|
|
107
106
|
isMenuOpen = currentState.isMenuOpen,
|
|
108
|
-
decorationState = currentState.decorationState,
|
|
109
107
|
editorHeight = currentState.editorHeight,
|
|
110
108
|
editorWidthLeft = currentState.editorWidthLeft,
|
|
111
109
|
editorWidthRight = currentState.editorWidthRight,
|
|
@@ -113,11 +111,16 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
113
111
|
isDragging = currentState.isDragging,
|
|
114
112
|
isPMDragging = currentState.isPMDragging,
|
|
115
113
|
childCount = currentState.childCount;
|
|
114
|
+
|
|
115
|
+
// Remap existing decorations when document changes
|
|
116
|
+
if (tr.docChanged) {
|
|
117
|
+
decorations = decorations.map(tr.mapping, tr.doc);
|
|
118
|
+
}
|
|
119
|
+
var meta = tr.getMeta(key);
|
|
116
120
|
var isPerformanceFix = editorExperiment('dnd-input-performance-optimisation', true, {
|
|
117
121
|
exposure: true
|
|
118
122
|
}) || editorExperiment('nested-dnd', true);
|
|
119
123
|
var activeNodeWithNewNodeType = null;
|
|
120
|
-
var meta = tr.getMeta(key);
|
|
121
124
|
var newChildCount = tr.docChanged && editorExperiment('nested-dnd', true) ? getDocChildrenCount(newState) : childCount;
|
|
122
125
|
// If tables or media are being resized, we want to hide the drag handle
|
|
123
126
|
var resizerMeta = tr.getMeta('is-resizer-resizing');
|
|
@@ -249,11 +252,6 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
249
252
|
var _decs = dragHandleDecoration(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
|
|
250
253
|
decorations = decorations.add(newState.doc, [_decs]);
|
|
251
254
|
}
|
|
252
|
-
var shouldUpdateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
|
|
253
|
-
|
|
254
|
-
// During dragging if the the document is updated by remote user, or other processes
|
|
255
|
-
// and update drop target is not required, We remap the drop target.
|
|
256
|
-
var shouldMapDropTargets = editorExperiment('nested-dnd', true) ? !shouldUpdateDropTargets && tr.docChanged && isDragging && !(meta !== null && meta !== void 0 && meta.nodeMoved) : !shouldUpdateDropTargets && tr.docChanged && isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) === false && !(meta !== null && meta !== void 0 && meta.nodeMoved);
|
|
257
255
|
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
|
|
258
256
|
if (editorExperiment('nested-dnd', true)) {
|
|
259
257
|
var remainingDecs = decorations.find(undefined, undefined, function (spec) {
|
|
@@ -275,38 +273,19 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
275
273
|
anchorName: activeNode.anchorName,
|
|
276
274
|
nodeType: activeNode.nodeType
|
|
277
275
|
} : activeNode;
|
|
276
|
+
var shouldCreateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
|
|
278
277
|
if (api) {
|
|
279
278
|
// Add drop targets when node is being dragged
|
|
280
279
|
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
281
|
-
if (
|
|
280
|
+
if (shouldCreateDropTargets || isBlocksDragTargetDebug()) {
|
|
282
281
|
var _meta$activeNode6;
|
|
283
|
-
var
|
|
284
|
-
_decs2 = _dropTargetDecoration.decs,
|
|
285
|
-
updatedDecorationState = _dropTargetDecoration.decorationState;
|
|
286
|
-
decorationState = updatedDecorationState;
|
|
282
|
+
var _decs2 = dropTargetDecorations(newState, api, formatMessage, editorExperiment('nested-dnd', true) ? (_meta$activeNode6 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode6 !== void 0 ? _meta$activeNode6 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode);
|
|
287
283
|
decorations = decorations.add(newState.doc, _decs2);
|
|
288
284
|
}
|
|
289
285
|
}
|
|
290
|
-
|
|
291
|
-
//Map drop target decoration positions when the document changes
|
|
292
|
-
if (shouldMapDropTargets) {
|
|
293
|
-
decorationState = decorationState.map(function (_ref11) {
|
|
294
|
-
var id = _ref11.id,
|
|
295
|
-
pos = _ref11.pos;
|
|
296
|
-
return {
|
|
297
|
-
id: id,
|
|
298
|
-
pos: tr.mapping.map(pos)
|
|
299
|
-
};
|
|
300
|
-
});
|
|
301
|
-
}
|
|
302
|
-
|
|
303
|
-
// Map decorations if document changes and node decorations do not need to be redrawn
|
|
304
|
-
if (shouldMapDropTargets || tr.docChanged && !redrawDecorations) {
|
|
305
|
-
decorations = decorations.map(tr.mapping, tr.doc);
|
|
306
|
-
}
|
|
307
286
|
var isEmptyDoc = editorExperiment('nested-dnd', true) ? newState.doc.childCount === 1 && newState.doc.nodeSize <= 4 && (newState.doc.firstChild === null || newState.doc.firstChild.nodeSize <= 2) : newState.doc.childCount === 1 && newState.doc.nodeSize <= 4;
|
|
308
|
-
var hasNodeDecoration = decorations.find().some(function (
|
|
309
|
-
var spec =
|
|
287
|
+
var hasNodeDecoration = decorations.find().some(function (_ref11) {
|
|
288
|
+
var spec = _ref11.spec;
|
|
310
289
|
return spec.type === 'node-decoration';
|
|
311
290
|
});
|
|
312
291
|
if (!hasNodeDecoration && isEmptyDoc) {
|
|
@@ -315,7 +294,6 @@ export var createPlugin = function createPlugin(api, getIntl) {
|
|
|
315
294
|
var newActiveNode = isEmptyDoc || isHandleMissing ? null : (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos;
|
|
316
295
|
return {
|
|
317
296
|
decorations: decorations,
|
|
318
|
-
decorationState: decorationState,
|
|
319
297
|
activeNode: newActiveNode,
|
|
320
298
|
isDragging: (_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging,
|
|
321
299
|
isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
|
|
@@ -103,14 +103,11 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
103
103
|
api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref2) {
|
|
104
104
|
var _api$analytics;
|
|
105
105
|
var tr = _ref2.tr;
|
|
106
|
-
var startPos =
|
|
106
|
+
var startPos = getPos();
|
|
107
107
|
if (startPos === undefined) {
|
|
108
108
|
return tr;
|
|
109
109
|
}
|
|
110
110
|
tr = selectNode(tr, startPos, nodeType);
|
|
111
|
-
tr.setMeta(key, {
|
|
112
|
-
pos: startPos
|
|
113
|
-
});
|
|
114
111
|
var resolvedMovingNode = tr.doc.resolve(startPos);
|
|
115
112
|
var maybeNode = resolvedMovingNode.nodeAfter;
|
|
116
113
|
tr.setMeta('scrollIntoView', false);
|
|
@@ -127,7 +124,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
127
124
|
return tr;
|
|
128
125
|
});
|
|
129
126
|
view.focus();
|
|
130
|
-
}, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos,
|
|
127
|
+
}, [dragHandleSelected, api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions, api === null || api === void 0 || (_api$analytics2 = api.analytics) === null || _api$analytics2 === void 0 ? void 0 : _api$analytics2.actions, view, getPos, nodeType]);
|
|
131
128
|
|
|
132
129
|
// TODO - This needs to be investigated further. Drag preview generation is not always working
|
|
133
130
|
// as expected with a node selection. This workaround sets the selection to the node on mouseDown,
|
|
@@ -136,7 +133,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
136
133
|
var _api$core3;
|
|
137
134
|
api === null || api === void 0 || (_api$core3 = api.core) === null || _api$core3 === void 0 || _api$core3.actions.execute(function (_ref3) {
|
|
138
135
|
var tr = _ref3.tr;
|
|
139
|
-
var startPos =
|
|
136
|
+
var startPos = getPos();
|
|
140
137
|
if (startPos === undefined) {
|
|
141
138
|
return tr;
|
|
142
139
|
}
|
|
@@ -147,19 +144,16 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
147
144
|
var $startPos = tr.doc.resolve(startPos + node.nodeSize);
|
|
148
145
|
var selection = new TextSelection($startPos);
|
|
149
146
|
tr.setSelection(selection);
|
|
150
|
-
tr.setMeta(key, {
|
|
151
|
-
pos: startPos
|
|
152
|
-
});
|
|
153
147
|
return tr;
|
|
154
148
|
});
|
|
155
|
-
}, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos
|
|
149
|
+
}, [api === null || api === void 0 || (_api$core4 = api.core) === null || _api$core4 === void 0 ? void 0 : _api$core4.actions, getPos]);
|
|
156
150
|
var handleKeyDown = useCallback(function (e) {
|
|
157
151
|
if (fg('platform_editor_element_drag_and_drop_ed_23873')) {
|
|
158
152
|
// allow user to use spacebar to select the node
|
|
159
153
|
|
|
160
154
|
if (!e.repeat && e.key === ' ') {
|
|
161
155
|
var _api$core5;
|
|
162
|
-
var startPos =
|
|
156
|
+
var startPos = getPos();
|
|
163
157
|
api === null || api === void 0 || (_api$core5 = api.core) === null || _api$core5 === void 0 || _api$core5.actions.execute(function (_ref4) {
|
|
164
158
|
var tr = _ref4.tr;
|
|
165
159
|
if (startPos === undefined) {
|
|
@@ -174,7 +168,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
174
168
|
tr.setSelection(selection);
|
|
175
169
|
tr.setMeta(key, {
|
|
176
170
|
pos: startPos
|
|
177
|
-
});
|
|
171
|
+
}); ////WHERE IS THIS USED?
|
|
178
172
|
return tr;
|
|
179
173
|
});
|
|
180
174
|
} else if (![e.altKey, e.ctrlKey, e.shiftKey].some(function (pressed) {
|
|
@@ -185,7 +179,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
185
179
|
view.focus();
|
|
186
180
|
}
|
|
187
181
|
}
|
|
188
|
-
}, [getPos,
|
|
182
|
+
}, [getPos, api === null || api === void 0 || (_api$core6 = api.core) === null || _api$core6 === void 0 ? void 0 : _api$core6.actions, view]);
|
|
189
183
|
useEffect(function () {
|
|
190
184
|
var element = buttonRef.current;
|
|
191
185
|
if (!element) {
|
|
@@ -221,7 +215,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
221
215
|
api === null || api === void 0 || (_api$core7 = api.core) === null || _api$core7 === void 0 || _api$core7.actions.execute(function (_ref7) {
|
|
222
216
|
var _api$blockControls, _api$analytics3;
|
|
223
217
|
var tr = _ref7.tr;
|
|
224
|
-
api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(
|
|
218
|
+
api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setNodeDragged(getPos, anchorName, nodeType)({
|
|
225
219
|
tr: tr
|
|
226
220
|
});
|
|
227
221
|
var resolvedMovingNode = tr.doc.resolve(start);
|
|
@@ -242,7 +236,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
242
236
|
view.focus();
|
|
243
237
|
}
|
|
244
238
|
});
|
|
245
|
-
}, [anchorName, api, nodeType,
|
|
239
|
+
}, [anchorName, api, getPos, nodeType, start, view]);
|
|
246
240
|
var macroInteractionUpdates = featureFlagsState === null || featureFlagsState === void 0 ? void 0 : featureFlagsState.macroInteractionUpdates;
|
|
247
241
|
var calculatePosition = useCallback(function () {
|
|
248
242
|
var parentNodeType;
|
|
@@ -347,7 +341,7 @@ var DragHandleInternal = function DragHandleInternal(_ref) {
|
|
|
347
341
|
,
|
|
348
342
|
style: positionStyles,
|
|
349
343
|
onClick: handleOnClick,
|
|
350
|
-
onMouseDown: handleMouseDown,
|
|
344
|
+
onMouseDown: fg('platform_editor_element_drag_and_drop_ed_24885') ? undefined : handleMouseDown,
|
|
351
345
|
onKeyDown: handleKeyDown,
|
|
352
346
|
"data-testid": "block-ctrl-drag-handle"
|
|
353
347
|
}, jsx(DragHandlerIcon, {
|
|
@@ -74,7 +74,7 @@ var getDropTargetOffsetStyle = function getDropTargetOffsetStyle(prevNode, nextN
|
|
|
74
74
|
export var DropTarget = function DropTarget(_ref3) {
|
|
75
75
|
var _dynamicStyle;
|
|
76
76
|
var api = _ref3.api,
|
|
77
|
-
|
|
77
|
+
getPos = _ref3.getPos,
|
|
78
78
|
prevNode = _ref3.prevNode,
|
|
79
79
|
nextNode = _ref3.nextNode,
|
|
80
80
|
parentNode = _ref3.parentNode,
|
|
@@ -106,15 +106,11 @@ export var DropTarget = function DropTarget(_ref3) {
|
|
|
106
106
|
onDrop: function onDrop() {
|
|
107
107
|
var _api$blockControls;
|
|
108
108
|
var _ref4 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
|
|
109
|
-
activeNode = _ref4.activeNode
|
|
110
|
-
|
|
111
|
-
if (!activeNode || !decorationState) {
|
|
109
|
+
activeNode = _ref4.activeNode;
|
|
110
|
+
if (!activeNode) {
|
|
112
111
|
return;
|
|
113
112
|
}
|
|
114
|
-
var
|
|
115
|
-
return dec.id === id;
|
|
116
|
-
}) || {},
|
|
117
|
-
pos = _ref5.pos;
|
|
113
|
+
var pos = getPos();
|
|
118
114
|
if (activeNode && pos !== undefined) {
|
|
119
115
|
var _api$core, _api$blockControls2;
|
|
120
116
|
var start = activeNode.pos;
|
|
@@ -122,7 +118,7 @@ export var DropTarget = function DropTarget(_ref3) {
|
|
|
122
118
|
}
|
|
123
119
|
}
|
|
124
120
|
});
|
|
125
|
-
}, [
|
|
121
|
+
}, [api, formatMessage, getPos]);
|
|
126
122
|
var dropTargetOffsetStyle = useMemo(function () {
|
|
127
123
|
/**
|
|
128
124
|
* First child of a nested node.
|
|
@@ -5,17 +5,18 @@ export var getSelection = function getSelection(tr, start) {
|
|
|
5
5
|
var isNodeSelection = node && NodeSelection.isSelectable(node);
|
|
6
6
|
var nodeSize = node ? node.nodeSize : 1;
|
|
7
7
|
var $startPos = tr.doc.resolve(start);
|
|
8
|
+
var nodeName = node === null || node === void 0 ? void 0 : node.type.name;
|
|
8
9
|
|
|
9
10
|
// decisionList node is not selectable, but we want to select the whole node not just text
|
|
10
|
-
if (isNodeSelection ||
|
|
11
|
+
if (isNodeSelection || nodeName === 'decisionList') {
|
|
11
12
|
return new NodeSelection($startPos);
|
|
12
|
-
} else if ((node === null || node === void 0 ? void 0 : node.
|
|
13
|
+
} else if (nodeName === 'mediaGroup' && (node === null || node === void 0 ? void 0 : node.childCount) === 1) {
|
|
13
14
|
var $mediaStartPos = tr.doc.resolve(start + 1);
|
|
14
15
|
return new NodeSelection($mediaStartPos);
|
|
15
16
|
} else if (
|
|
16
17
|
// Even though mediaGroup is not selectable,
|
|
17
18
|
// we need a quick way to make all child media nodes appear as selected without the need for a custom selection
|
|
18
|
-
|
|
19
|
+
nodeName === 'mediaGroup') {
|
|
19
20
|
return new NodeSelection($startPos);
|
|
20
21
|
} else {
|
|
21
22
|
// To trigger the annotation floating toolbar for non-selectable node, we need to select inline nodes
|
package/dist/types/index.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { blockControlsPlugin } from './plugin';
|
|
2
|
-
export type { BlockControlsPlugin,
|
|
2
|
+
export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './types';
|
|
@@ -3,13 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
|
3
3
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
5
|
import type { ActiveNode, BlockControlsPlugin, HandleOptions } from '../types';
|
|
6
|
-
export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode) =>
|
|
7
|
-
decs: Decoration[];
|
|
8
|
-
decorationState: {
|
|
9
|
-
id: number;
|
|
10
|
-
pos: number;
|
|
11
|
-
}[];
|
|
12
|
-
};
|
|
6
|
+
export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode) => Decoration[];
|
|
13
7
|
export declare const emptyParagraphNodeDecorations: () => Decoration;
|
|
14
8
|
export declare const nodeDecorations: (newState: EditorState) => Decoration[];
|
|
15
9
|
export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -16,13 +16,12 @@ export type ActiveNode = {
|
|
|
16
16
|
};
|
|
17
17
|
export interface PluginState {
|
|
18
18
|
decorations: DecorationSet;
|
|
19
|
-
decorationState: DecorationState;
|
|
20
19
|
isDragging: boolean;
|
|
21
20
|
isMenuOpen?: boolean;
|
|
22
21
|
editorHeight: number;
|
|
23
22
|
editorWidthLeft: number;
|
|
24
23
|
editorWidthRight: number;
|
|
25
|
-
activeNode
|
|
24
|
+
activeNode?: ActiveNode;
|
|
26
25
|
isResizerResizing: boolean;
|
|
27
26
|
/**
|
|
28
27
|
* @private
|
|
@@ -38,8 +37,7 @@ export interface PluginState {
|
|
|
38
37
|
export type ReleaseHiddenDecoration = () => boolean | undefined;
|
|
39
38
|
export type BlockControlsSharedState = {
|
|
40
39
|
isMenuOpen: boolean;
|
|
41
|
-
activeNode
|
|
42
|
-
decorationState: DecorationState;
|
|
40
|
+
activeNode?: ActiveNode;
|
|
43
41
|
isDragging: boolean;
|
|
44
42
|
isPMDragging: boolean;
|
|
45
43
|
} | undefined;
|
|
@@ -63,13 +61,9 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
|
|
|
63
61
|
commands: {
|
|
64
62
|
moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
|
|
65
63
|
showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
|
|
66
|
-
setNodeDragged: (
|
|
64
|
+
setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
|
|
67
65
|
};
|
|
68
66
|
}>;
|
|
69
|
-
export type DecorationState = {
|
|
70
|
-
id: number;
|
|
71
|
-
pos: number;
|
|
72
|
-
}[];
|
|
73
67
|
export type BlockControlsMeta = {
|
|
74
68
|
activeNode: ActiveNode;
|
|
75
69
|
type: string;
|
|
@@ -5,10 +5,10 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
|
5
5
|
import type { BlockControlsPlugin } from '../types';
|
|
6
6
|
export type DropTargetProps = {
|
|
7
7
|
api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
|
|
8
|
-
|
|
8
|
+
getPos: () => number | undefined;
|
|
9
9
|
prevNode?: PMNode;
|
|
10
10
|
nextNode?: PMNode;
|
|
11
11
|
parentNode?: PMNode;
|
|
12
12
|
formatMessage?: IntlShape['formatMessage'];
|
|
13
13
|
};
|
|
14
|
-
export declare const DropTarget: ({ api,
|
|
14
|
+
export declare const DropTarget: ({ api, getPos, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { blockControlsPlugin } from './plugin';
|
|
2
|
-
export type { BlockControlsPlugin,
|
|
2
|
+
export type { BlockControlsPlugin, BlockControlsSharedState, HandleOptions, MoveNodeMethod, } from './types';
|
|
@@ -3,13 +3,7 @@ import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
|
|
|
3
3
|
import type { EditorState } from '@atlaskit/editor-prosemirror/state';
|
|
4
4
|
import { Decoration } from '@atlaskit/editor-prosemirror/view';
|
|
5
5
|
import type { ActiveNode, BlockControlsPlugin, HandleOptions } from '../types';
|
|
6
|
-
export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode) =>
|
|
7
|
-
decs: Decoration[];
|
|
8
|
-
decorationState: {
|
|
9
|
-
id: number;
|
|
10
|
-
pos: number;
|
|
11
|
-
}[];
|
|
12
|
-
};
|
|
6
|
+
export declare const dropTargetDecorations: (newState: EditorState, api: ExtractInjectionAPI<BlockControlsPlugin>, formatMessage: IntlShape['formatMessage'], activeNode?: ActiveNode) => Decoration[];
|
|
13
7
|
export declare const emptyParagraphNodeDecorations: () => Decoration;
|
|
14
8
|
export declare const nodeDecorations: (newState: EditorState) => Decoration[];
|
|
15
9
|
export declare const dragHandleDecoration: (api: ExtractInjectionAPI<BlockControlsPlugin>, getIntl: () => IntlShape, pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => Decoration;
|
|
@@ -16,13 +16,12 @@ export type ActiveNode = {
|
|
|
16
16
|
};
|
|
17
17
|
export interface PluginState {
|
|
18
18
|
decorations: DecorationSet;
|
|
19
|
-
decorationState: DecorationState;
|
|
20
19
|
isDragging: boolean;
|
|
21
20
|
isMenuOpen?: boolean;
|
|
22
21
|
editorHeight: number;
|
|
23
22
|
editorWidthLeft: number;
|
|
24
23
|
editorWidthRight: number;
|
|
25
|
-
activeNode
|
|
24
|
+
activeNode?: ActiveNode;
|
|
26
25
|
isResizerResizing: boolean;
|
|
27
26
|
/**
|
|
28
27
|
* @private
|
|
@@ -38,8 +37,7 @@ export interface PluginState {
|
|
|
38
37
|
export type ReleaseHiddenDecoration = () => boolean | undefined;
|
|
39
38
|
export type BlockControlsSharedState = {
|
|
40
39
|
isMenuOpen: boolean;
|
|
41
|
-
activeNode
|
|
42
|
-
decorationState: DecorationState;
|
|
40
|
+
activeNode?: ActiveNode;
|
|
43
41
|
isDragging: boolean;
|
|
44
42
|
isPMDragging: boolean;
|
|
45
43
|
} | undefined;
|
|
@@ -63,13 +61,9 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
|
|
|
63
61
|
commands: {
|
|
64
62
|
moveNode: (start: number, to: number, inputMethod?: MoveNodeMethod, formatMessage?: IntlShape['formatMessage']) => EditorCommand;
|
|
65
63
|
showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
|
|
66
|
-
setNodeDragged: (
|
|
64
|
+
setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
|
|
67
65
|
};
|
|
68
66
|
}>;
|
|
69
|
-
export type DecorationState = {
|
|
70
|
-
id: number;
|
|
71
|
-
pos: number;
|
|
72
|
-
}[];
|
|
73
67
|
export type BlockControlsMeta = {
|
|
74
68
|
activeNode: ActiveNode;
|
|
75
69
|
type: string;
|
|
@@ -5,10 +5,10 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
|
5
5
|
import type { BlockControlsPlugin } from '../types';
|
|
6
6
|
export type DropTargetProps = {
|
|
7
7
|
api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
|
|
8
|
-
|
|
8
|
+
getPos: () => number | undefined;
|
|
9
9
|
prevNode?: PMNode;
|
|
10
10
|
nextNode?: PMNode;
|
|
11
11
|
parentNode?: PMNode;
|
|
12
12
|
formatMessage?: IntlShape['formatMessage'];
|
|
13
13
|
};
|
|
14
|
-
export declare const DropTarget: ({ api,
|
|
14
|
+
export declare const DropTarget: ({ api, getPos, prevNode, nextNode, parentNode, formatMessage, }: DropTargetProps) => jsx.JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@atlaskit/editor-prosemirror": "6.0.0",
|
|
41
41
|
"@atlaskit/editor-shared-styles": "^2.13.0",
|
|
42
42
|
"@atlaskit/editor-tables": "^2.8.0",
|
|
43
|
-
"@atlaskit/icon": "^22.
|
|
43
|
+
"@atlaskit/icon": "^22.18.0",
|
|
44
44
|
"@atlaskit/platform-feature-flags": "^0.3.0",
|
|
45
45
|
"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
|
|
46
46
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^1.4.0",
|
|
@@ -48,7 +48,7 @@
|
|
|
48
48
|
"@atlaskit/primitives": "^12.1.0",
|
|
49
49
|
"@atlaskit/theme": "^13.0.0",
|
|
50
50
|
"@atlaskit/tmp-editor-statsig": "^2.1.0",
|
|
51
|
-
"@atlaskit/tokens": "^1.
|
|
51
|
+
"@atlaskit/tokens": "^1.60.0",
|
|
52
52
|
"@atlaskit/tooltip": "^18.7.0",
|
|
53
53
|
"@babel/runtime": "^7.0.0",
|
|
54
54
|
"@emotion/react": "^11.7.1",
|
|
@@ -128,6 +128,9 @@
|
|
|
128
128
|
},
|
|
129
129
|
"platform_editor_element_drag_and_drop_debug": {
|
|
130
130
|
"type": "boolean"
|
|
131
|
+
},
|
|
132
|
+
"platform_editor_element_drag_and_drop_ed_24885": {
|
|
133
|
+
"type": "boolean"
|
|
131
134
|
}
|
|
132
135
|
}
|
|
133
136
|
}
|