@atlaskit/editor-plugin-block-controls 2.4.1 → 2.6.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 +33 -0
- package/dist/cjs/commands/move-node.js +7 -6
- package/dist/cjs/commands/show-drag-handle.js +2 -1
- package/dist/cjs/pm-plugins/decorations.js +93 -32
- package/dist/cjs/pm-plugins/keymap.js +5 -2
- package/dist/cjs/pm-plugins/main.js +349 -203
- package/dist/cjs/ui/drag-handle.js +4 -6
- package/dist/cjs/ui/drop-target-v2.js +32 -6
- package/dist/cjs/ui/drop-target.js +2 -0
- package/dist/cjs/ui/global-styles.js +1 -7
- package/dist/cjs/utils/transactions.js +63 -0
- package/dist/cjs/utils/validation.js +17 -0
- package/dist/es2019/commands/move-node.js +7 -6
- package/dist/es2019/commands/show-drag-handle.js +2 -1
- package/dist/es2019/pm-plugins/decorations.js +86 -31
- package/dist/es2019/pm-plugins/keymap.js +5 -2
- package/dist/es2019/pm-plugins/main.js +332 -179
- package/dist/es2019/ui/drag-handle.js +4 -8
- package/dist/es2019/ui/drop-target-v2.js +32 -6
- package/dist/es2019/ui/drop-target.js +2 -0
- package/dist/es2019/ui/global-styles.js +1 -7
- package/dist/es2019/utils/transactions.js +57 -0
- package/dist/es2019/utils/validation.js +17 -0
- package/dist/esm/commands/move-node.js +7 -6
- package/dist/esm/commands/show-drag-handle.js +2 -1
- package/dist/esm/pm-plugins/decorations.js +92 -31
- package/dist/esm/pm-plugins/keymap.js +5 -2
- package/dist/esm/pm-plugins/main.js +350 -204
- package/dist/esm/ui/drag-handle.js +4 -6
- package/dist/esm/ui/drop-target-v2.js +32 -6
- package/dist/esm/ui/drop-target.js +2 -0
- package/dist/esm/ui/global-styles.js +1 -7
- package/dist/esm/utils/transactions.js +57 -0
- package/dist/esm/utils/validation.js +17 -0
- package/dist/types/pm-plugins/decorations.d.ts +24 -4
- package/dist/types/pm-plugins/main.d.ts +32 -0
- package/dist/types/ui/drag-handle.d.ts +5 -14
- package/dist/types/ui/drop-target-v2.d.ts +1 -1
- package/dist/types/ui/drop-target.d.ts +2 -0
- package/dist/types/utils/transactions.d.ts +29 -0
- package/dist/types-ts4.5/pm-plugins/decorations.d.ts +24 -4
- package/dist/types-ts4.5/pm-plugins/main.d.ts +32 -0
- package/dist/types-ts4.5/ui/drag-handle.d.ts +5 -14
- package/dist/types-ts4.5/ui/drop-target-v2.d.ts +1 -1
- package/dist/types-ts4.5/ui/drop-target.d.ts +2 -0
- package/dist/types-ts4.5/utils/transactions.d.ts +29 -0
- package/package.json +5 -8
|
@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.key = exports.createPlugin = void 0;
|
|
7
|
+
exports.oldApply = exports.newApply = exports.key = exports.createPlugin = void 0;
|
|
8
8
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
|
9
9
|
var _rafSchd = _interopRequireDefault(require("raf-schd"));
|
|
10
10
|
var _steps = require("@atlaskit/adf-schema/steps");
|
|
@@ -21,6 +21,7 @@ var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
|
|
|
21
21
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
22
22
|
var _anchorUtils = require("../utils/anchor-utils");
|
|
23
23
|
var _dragTargetDebug = require("../utils/drag-target-debug");
|
|
24
|
+
var _transactions = require("../utils/transactions");
|
|
24
25
|
var _decorations = require("./decorations");
|
|
25
26
|
var _handleMouseOver = require("./handle-mouse-over");
|
|
26
27
|
var _keymap = require("./keymap");
|
|
@@ -94,12 +95,346 @@ var initialState = {
|
|
|
94
95
|
isDocSizeLimitEnabled: null,
|
|
95
96
|
isPMDragging: false
|
|
96
97
|
};
|
|
98
|
+
var newApply = exports.newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, anchorHeightsCache) {
|
|
99
|
+
var _meta$activeNode, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _meta$isDragging2, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging;
|
|
100
|
+
var isTitleEnterImprovementEnabled = flags.isTitleEnterImprovementEnabled;
|
|
101
|
+
var activeNode = currentState.activeNode,
|
|
102
|
+
decorations = currentState.decorations,
|
|
103
|
+
editorHeight = currentState.editorHeight,
|
|
104
|
+
editorWidthLeft = currentState.editorWidthLeft,
|
|
105
|
+
editorWidthRight = currentState.editorWidthRight,
|
|
106
|
+
isDragging = currentState.isDragging,
|
|
107
|
+
isMenuOpen = currentState.isMenuOpen,
|
|
108
|
+
isPMDragging = currentState.isPMDragging,
|
|
109
|
+
isResizerResizing = currentState.isResizerResizing;
|
|
110
|
+
var isActiveNodeDeleted = false;
|
|
111
|
+
|
|
112
|
+
// Remap existing decorations and activeNode when steps exist
|
|
113
|
+
if (tr.docChanged) {
|
|
114
|
+
decorations = decorations.map(tr.mapping, tr.doc);
|
|
115
|
+
if (activeNode) {
|
|
116
|
+
var mappedPos = tr.mapping.mapResult(activeNode.pos);
|
|
117
|
+
isActiveNodeDeleted = mappedPos.deleted;
|
|
118
|
+
activeNode = {
|
|
119
|
+
pos: mappedPos.pos,
|
|
120
|
+
anchorName: activeNode.anchorName,
|
|
121
|
+
nodeType: activeNode.nodeType
|
|
122
|
+
};
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
var meta = tr.getMeta(key);
|
|
126
|
+
var resizerMeta = tr.getMeta('is-resizer-resizing');
|
|
127
|
+
isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
|
|
128
|
+
var _getTrMetadata = (0, _transactions.getTrMetadata)(tr),
|
|
129
|
+
from = _getTrMetadata.from,
|
|
130
|
+
to = _getTrMetadata.to,
|
|
131
|
+
numReplaceSteps = _getTrMetadata.numReplaceSteps,
|
|
132
|
+
isAllText = _getTrMetadata.isAllText;
|
|
133
|
+
var maybeNodeCountChanged = !isAllText && numReplaceSteps > 0;
|
|
134
|
+
var latestActiveNode = (_meta$activeNode = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode !== void 0 ? _meta$activeNode : activeNode;
|
|
135
|
+
|
|
136
|
+
// Re-create node decorations
|
|
137
|
+
var isDecSetEmpty = decorations === _view.DecorationSet.empty;
|
|
138
|
+
var isNodeDecsMissing = isDecSetEmpty || maybeNodeCountChanged;
|
|
139
|
+
var shouldRedrawNodeDecs = !isResizerResizing && isNodeDecsMissing;
|
|
140
|
+
var isActiveNodeModified = false;
|
|
141
|
+
if (api && shouldRedrawNodeDecs) {
|
|
142
|
+
var oldNodeDecs = (0, _decorations.findNodeDecs)(decorations, from, to);
|
|
143
|
+
decorations = decorations.remove(oldNodeDecs);
|
|
144
|
+
var newNodeDecs = (0, _decorations.nodeDecorations)(newState, isDecSetEmpty ? undefined : from, isDecSetEmpty ? undefined : to);
|
|
145
|
+
decorations = decorations.add(newState.doc, newNodeDecs);
|
|
146
|
+
if (latestActiveNode && !isActiveNodeDeleted) {
|
|
147
|
+
// Find the newly minted node decs that touch the active node
|
|
148
|
+
var findNewNodeDecs = (0, _decorations.findNodeDecs)(decorations, latestActiveNode.pos - 1, to);
|
|
149
|
+
|
|
150
|
+
// Find the specific dec that the active node corresponds to
|
|
151
|
+
var nodeDecsAtActivePos = findNewNodeDecs.filter(function (dec) {
|
|
152
|
+
return (dec === null || dec === void 0 ? void 0 : dec.from) === latestActiveNode.pos;
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
// If multiple decorations at the active node pos, we want the last one
|
|
156
|
+
var nodeDecAtActivePos = nodeDecsAtActivePos.pop();
|
|
157
|
+
|
|
158
|
+
// Update the active node anchor-name and type for accurate positioning
|
|
159
|
+
if (nodeDecAtActivePos) {
|
|
160
|
+
isActiveNodeModified = true;
|
|
161
|
+
latestActiveNode.anchorName = nodeDecAtActivePos.spec.anchorName;
|
|
162
|
+
latestActiveNode.nodeType = nodeDecAtActivePos.spec.nodeType;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
// Check if editor dimensions have changed
|
|
168
|
+
var editorSizeChanged = (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight;
|
|
169
|
+
|
|
170
|
+
// Check if there's a new active node, and it differs from the last
|
|
171
|
+
var activeNodeChanged = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== ((_activeNode = activeNode) === null || _activeNode === void 0 ? void 0 : _activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== ((_activeNode2 = activeNode) === null || _activeNode2 === void 0 ? void 0 : _activeNode2.anchorName) || (meta === null || meta === void 0 || (_meta$activeNode$hand = meta.activeNode.handleOptions) === null || _meta$activeNode$hand === void 0 ? void 0 : _meta$activeNode$hand.isFocused));
|
|
172
|
+
|
|
173
|
+
// Some browsers don't support anchor positioning, meaning we need to replace the handle when nodes change
|
|
174
|
+
var handleNeedsRedraw = shouldRedrawNodeDecs && !(0, _anchorUtils.isAnchorSupported)();
|
|
175
|
+
|
|
176
|
+
// Create/recreate handle dec when the active node is missing/changes, or the editor viewport has changed (non-anchor pos workaround)
|
|
177
|
+
var shouldRecreateHandle = latestActiveNode && (activeNodeChanged || isActiveNodeModified || editorSizeChanged || handleNeedsRedraw);
|
|
178
|
+
|
|
179
|
+
// Remove handle dec when explicitly hidden, a node is resizing, activeNode pos was deleted, or DnD moved a node
|
|
180
|
+
var shouldRemoveHandle = latestActiveNode && ((meta === null || meta === void 0 ? void 0 : meta.hideDragHandle) && isTitleEnterImprovementEnabled || isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
|
|
181
|
+
if (shouldRemoveHandle) {
|
|
182
|
+
var _activeNode3, _activeNode4;
|
|
183
|
+
var oldHandle = (0, _decorations.findHandleDec)(decorations, (_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.pos, (_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.pos);
|
|
184
|
+
decorations = decorations.remove(oldHandle);
|
|
185
|
+
} else if (api && shouldRecreateHandle) {
|
|
186
|
+
var _activeNode5, _activeNode6;
|
|
187
|
+
var _oldHandle = (0, _decorations.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
|
|
188
|
+
decorations = decorations.remove(_oldHandle);
|
|
189
|
+
var handleDec = (0, _decorations.dragHandleDecoration)(api, formatMessage, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.anchorName, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.nodeType, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.handleOptions);
|
|
190
|
+
decorations = decorations.add(newState.doc, [handleDec]);
|
|
191
|
+
}
|
|
192
|
+
|
|
193
|
+
// Drop targets may be missing when the node count is being changed during a drag
|
|
194
|
+
var isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && maybeNodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
|
|
195
|
+
|
|
196
|
+
// Remove drop target decorations when dragging stops or they need to be redrawn
|
|
197
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
|
|
198
|
+
var dropTargetDecs = (0, _decorations.findDropTargetDecs)(decorations);
|
|
199
|
+
decorations = decorations.remove(dropTargetDecs);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
// Add drop targets when dragging starts or some are missing
|
|
203
|
+
if (api) {
|
|
204
|
+
if (meta !== null && meta !== void 0 && meta.isDragging || isDropTargetsMissing || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
|
|
205
|
+
var decs = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, latestActiveNode, anchorHeightsCache);
|
|
206
|
+
decorations = decorations.add(newState.doc, decs);
|
|
207
|
+
}
|
|
208
|
+
}
|
|
209
|
+
var isEmptyDoc = (0, _utils.isEmptyDocument)(newState.doc);
|
|
210
|
+
if (isEmptyDoc) {
|
|
211
|
+
var hasNodeDecoration = !!(0, _decorations.findNodeDecs)(decorations).length;
|
|
212
|
+
if (!hasNodeDecoration) {
|
|
213
|
+
decorations = decorations.add(newState.doc, [(0, _decorations.emptyParagraphNodeDecorations)()]);
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && (0, _decorations.findHandleDec)(decorations, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos, latestActiveNode === null || latestActiveNode === void 0 ? void 0 : latestActiveNode.pos).length === 0 ? null : latestActiveNode;
|
|
217
|
+
return {
|
|
218
|
+
decorations: decorations,
|
|
219
|
+
activeNode: newActiveNode,
|
|
220
|
+
isDragging: (_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging,
|
|
221
|
+
isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
|
|
222
|
+
editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : editorHeight,
|
|
223
|
+
editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : editorWidthLeft,
|
|
224
|
+
editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : editorWidthRight,
|
|
225
|
+
isResizerResizing: isResizerResizing,
|
|
226
|
+
isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
|
|
227
|
+
isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
|
|
228
|
+
};
|
|
229
|
+
};
|
|
230
|
+
var oldApply = exports.oldApply = function oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorHeightsCache) {
|
|
231
|
+
var _meta$activeNode2, _meta$activeNode$hand2, _activeNodeWithNewNod, _meta$activeNode8, _meta$isDragging4, _meta$editorHeight2, _meta$editorWidthLeft2, _meta$editorWidthRigh2, _meta$isPMDragging2;
|
|
232
|
+
var isNestedEnabled = flags.isNestedEnabled,
|
|
233
|
+
isTitleEnterImprovementEnabled = flags.isTitleEnterImprovementEnabled;
|
|
234
|
+
var activeNode = currentState.activeNode,
|
|
235
|
+
decorations = currentState.decorations,
|
|
236
|
+
isMenuOpen = currentState.isMenuOpen,
|
|
237
|
+
editorHeight = currentState.editorHeight,
|
|
238
|
+
editorWidthLeft = currentState.editorWidthLeft,
|
|
239
|
+
editorWidthRight = currentState.editorWidthRight,
|
|
240
|
+
isResizerResizing = currentState.isResizerResizing,
|
|
241
|
+
isDragging = currentState.isDragging,
|
|
242
|
+
isPMDragging = currentState.isPMDragging;
|
|
243
|
+
|
|
244
|
+
// Remap existing decorations when steps exist
|
|
245
|
+
if (tr.docChanged) {
|
|
246
|
+
decorations = decorations.map(tr.mapping, tr.doc);
|
|
247
|
+
}
|
|
248
|
+
var meta = tr.getMeta(key);
|
|
249
|
+
var isPerformanceFix = isNestedEnabled || (0, _experiments.editorExperiment)('dnd-input-performance-optimisation', true, {
|
|
250
|
+
exposure: true
|
|
251
|
+
});
|
|
252
|
+
var activeNodeWithNewNodeType = null;
|
|
253
|
+
|
|
254
|
+
// If tables or media are being resized, we want to hide the drag handle
|
|
255
|
+
var resizerMeta = tr.getMeta('is-resizer-resizing');
|
|
256
|
+
isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
|
|
257
|
+
var canIgnoreTr = function canIgnoreTr() {
|
|
258
|
+
return !tr.steps.every(function (e) {
|
|
259
|
+
return e instanceof _steps.AnalyticsStep;
|
|
260
|
+
});
|
|
261
|
+
};
|
|
262
|
+
var maybeNodeCountChanged = isNestedEnabled ? !(0, _utils.isTextInput)(tr) && tr.docChanged && canIgnoreTr() : oldState.doc.childCount !== newState.doc.childCount;
|
|
263
|
+
var shouldRemoveHandle = !tr.getMeta('isRemote');
|
|
264
|
+
|
|
265
|
+
// During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
|
|
266
|
+
// Also remove the handle when the node is moved or the node count changes. This helps prevent incorrect positioning
|
|
267
|
+
// Don't remove the handle if remote changes are changing the node count, its prosemirror position can be mapped instead
|
|
268
|
+
if (meta !== null && meta !== void 0 && meta.hideDragHandle && isTitleEnterImprovementEnabled || isResizerResizing || maybeNodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
|
|
269
|
+
var oldHandle = decorations.find(undefined, undefined, function (spec) {
|
|
270
|
+
return spec.type === 'drag-handle';
|
|
271
|
+
});
|
|
272
|
+
decorations = decorations.remove(oldHandle);
|
|
273
|
+
}
|
|
274
|
+
var decsLength = isNestedEnabled ? decorations.find(undefined, undefined, function (spec) {
|
|
275
|
+
return spec.type === 'node-decoration';
|
|
276
|
+
}).length : decorations.find().filter(function (_ref5) {
|
|
277
|
+
var spec = _ref5.spec;
|
|
278
|
+
return spec.type !== 'drag-handle';
|
|
279
|
+
}).length;
|
|
280
|
+
var isDecsMissing = false;
|
|
281
|
+
var isDropTargetsMissing = false;
|
|
282
|
+
if (isNestedEnabled) {
|
|
283
|
+
var _meta$isDragging3;
|
|
284
|
+
isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && maybeNodeCountChanged;
|
|
285
|
+
isDropTargetsMissing = ((_meta$isDragging3 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging3 !== void 0 ? _meta$isDragging3 : isDragging) && maybeNodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
|
|
286
|
+
} else {
|
|
287
|
+
isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
|
|
288
|
+
var dropTargetLen = decorations.find(undefined, undefined, function (spec) {
|
|
289
|
+
return spec.type === 'drop-target-decoration';
|
|
290
|
+
}).length;
|
|
291
|
+
isDropTargetsMissing = isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && dropTargetLen !== newState.doc.childCount + 1;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
// This is not targeted enough - it's trying to catch events like expand being set to breakout
|
|
295
|
+
var maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && !maybeNodeCountChanged;
|
|
296
|
+
|
|
297
|
+
// This addresses scenarios such as undoing table resizing,
|
|
298
|
+
// where a keyboard shortcut triggers a width change, and
|
|
299
|
+
// the node's actual width is then updated in a separate renderering cycle.
|
|
300
|
+
// The tr.meta.activeNode is triggered by the showDragHandleAt function during the mouse entry event
|
|
301
|
+
// (when the table node rerenders)
|
|
302
|
+
// The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
|
|
303
|
+
var maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
|
|
304
|
+
var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || maybeNodeCountChanged || maybeTableWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
|
|
305
|
+
|
|
306
|
+
// Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
|
|
307
|
+
if (redrawDecorations && !isResizerResizing && api) {
|
|
308
|
+
var oldNodeDecs = decorations.find(undefined, undefined, function (spec) {
|
|
309
|
+
return spec.type !== 'drop-target-decoration';
|
|
310
|
+
});
|
|
311
|
+
decorations = decorations.remove(oldNodeDecs);
|
|
312
|
+
var newNodeDecs = (0, _decorations.nodeDecorations)(newState);
|
|
313
|
+
decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(newNodeDecs));
|
|
314
|
+
if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
|
|
315
|
+
var mappedPosisiton = tr.mapping.map(activeNode.pos);
|
|
316
|
+
var prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
|
|
317
|
+
|
|
318
|
+
// When a node type changed to be nested inside another node, the position of the active node is off by 1
|
|
319
|
+
// This is a workaround to fix the position of the active node when it is nested
|
|
320
|
+
if (tr.docChanged && !maybeNodeCountChanged && mappedPosisiton === prevMappedPos + 1) {
|
|
321
|
+
mappedPosisiton = prevMappedPos;
|
|
322
|
+
}
|
|
323
|
+
var _newActiveNode = tr.doc.nodeAt(mappedPosisiton);
|
|
324
|
+
var draghandleDec;
|
|
325
|
+
if (isPerformanceFix) {
|
|
326
|
+
var _meta$activeNode$pos, _meta$activeNode3, _ref6, _meta$activeNode$anch, _meta$activeNode4, _decAtPos$spec, _ref7, _meta$activeNode$node, _meta$activeNode5, _decAtPos$spec2, _meta$activeNode6;
|
|
327
|
+
if (_newActiveNode && (_newActiveNode === null || _newActiveNode === void 0 ? void 0 : _newActiveNode.type.name) !== activeNode.nodeType) {
|
|
328
|
+
var _oldHandle2 = decorations.find(undefined, undefined, function (spec) {
|
|
329
|
+
return spec.type === 'drag-handle';
|
|
330
|
+
});
|
|
331
|
+
decorations = decorations.remove(_oldHandle2);
|
|
332
|
+
}
|
|
333
|
+
var decAtPos = newNodeDecs.find(function (dec) {
|
|
334
|
+
return dec.from === mappedPosisiton;
|
|
335
|
+
});
|
|
336
|
+
draghandleDec = (0, _decorations.dragHandleDecoration)(api, formatMessage, (_meta$activeNode$pos = meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref6 = (_meta$activeNode$anch = meta === null || meta === void 0 || (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref6 !== void 0 ? _ref6 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref7 = (_meta$activeNode$node = meta === null || meta === void 0 || (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 || (_meta$activeNode6 = meta.activeNode) === null || _meta$activeNode6 === void 0 ? void 0 : _meta$activeNode6.handleOptions);
|
|
337
|
+
} else {
|
|
338
|
+
var nodeType = activeNode.nodeType;
|
|
339
|
+
var anchorName = activeNode.anchorName;
|
|
340
|
+
if (_newActiveNode && (_newActiveNode === null || _newActiveNode === void 0 ? void 0 : _newActiveNode.type.name) !== activeNode.nodeType) {
|
|
341
|
+
nodeType = _newActiveNode.type.name;
|
|
342
|
+
anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
|
|
343
|
+
activeNodeWithNewNodeType = {
|
|
344
|
+
pos: prevMappedPos,
|
|
345
|
+
nodeType: nodeType,
|
|
346
|
+
anchorName: anchorName
|
|
347
|
+
};
|
|
348
|
+
}
|
|
349
|
+
draghandleDec = (0, _decorations.dragHandleDecoration)(api, formatMessage, activeNode.pos, anchorName, nodeType);
|
|
350
|
+
}
|
|
351
|
+
decorations = decorations.add(newState.doc, [draghandleDec]);
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
// Remove previous drag handle widget and draw new drag handle widget when activeNode changes
|
|
356
|
+
if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand2 = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand2 !== void 0 && _meta$activeNode$hand2.isFocused)) {
|
|
357
|
+
var _oldHandle3 = decorations.find(undefined, undefined, function (spec) {
|
|
358
|
+
return spec.type === 'drag-handle';
|
|
359
|
+
});
|
|
360
|
+
decorations = decorations.remove(_oldHandle3);
|
|
361
|
+
var decs = (0, _decorations.dragHandleDecoration)(api, formatMessage, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
|
|
362
|
+
decorations = decorations.add(newState.doc, [decs]);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
// Remove previous drag handle widget and draw new drag handle widget when node type changes
|
|
366
|
+
if (!isPerformanceFix && activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
|
|
367
|
+
var _oldHandle4 = decorations.find(undefined, undefined, function (spec) {
|
|
368
|
+
return spec.type === 'drag-handle';
|
|
369
|
+
});
|
|
370
|
+
decorations = decorations.remove(_oldHandle4);
|
|
371
|
+
var _decs = (0, _decorations.dragHandleDecoration)(api, formatMessage, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
|
|
372
|
+
decorations = decorations.add(newState.doc, [_decs]);
|
|
373
|
+
}
|
|
374
|
+
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
|
|
375
|
+
// Remove drop target decoration when dragging stops
|
|
376
|
+
var dropTargetDecs = decorations.find(undefined, undefined, function (spec) {
|
|
377
|
+
return spec.type === 'drop-target-decoration';
|
|
378
|
+
});
|
|
379
|
+
decorations = decorations.remove(dropTargetDecs);
|
|
380
|
+
}
|
|
381
|
+
|
|
382
|
+
// Map active node position when the document changes
|
|
383
|
+
var mappedActiveNodePos = tr.docChanged && activeNode ? !isPerformanceFix && activeNodeWithNewNodeType || {
|
|
384
|
+
pos: tr.mapping.map(activeNode.pos),
|
|
385
|
+
anchorName: activeNode.anchorName,
|
|
386
|
+
nodeType: activeNode.nodeType
|
|
387
|
+
} : activeNode;
|
|
388
|
+
var shouldCreateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
|
|
389
|
+
if (api) {
|
|
390
|
+
// Add drop targets when node is being dragged
|
|
391
|
+
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
392
|
+
if (shouldCreateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
|
|
393
|
+
var _meta$activeNode7;
|
|
394
|
+
var _decs2 = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, isNestedEnabled ? (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos : meta === null || meta === void 0 ? void 0 : meta.activeNode, anchorHeightsCache);
|
|
395
|
+
decorations = decorations.add(newState.doc, _decs2);
|
|
396
|
+
}
|
|
397
|
+
}
|
|
398
|
+
var isEmptyDoc = isNestedEnabled ? 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;
|
|
399
|
+
if (isEmptyDoc) {
|
|
400
|
+
var hasNodeDecoration = !!decorations.find(undefined, undefined, function (spec) {
|
|
401
|
+
return spec.type === 'node-decoration';
|
|
402
|
+
}).length;
|
|
403
|
+
if (!hasNodeDecoration) {
|
|
404
|
+
decorations = decorations.add(newState.doc, [(0, _decorations.emptyParagraphNodeDecorations)()]);
|
|
405
|
+
}
|
|
406
|
+
}
|
|
407
|
+
var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && decorations.find(undefined, undefined, function (spec) {
|
|
408
|
+
return spec.type === 'drag-handle';
|
|
409
|
+
}).length === 0 ? null : (_meta$activeNode8 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode8 !== void 0 ? _meta$activeNode8 : mappedActiveNodePos;
|
|
410
|
+
return {
|
|
411
|
+
decorations: decorations,
|
|
412
|
+
activeNode: newActiveNode,
|
|
413
|
+
isDragging: (_meta$isDragging4 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging4 !== void 0 ? _meta$isDragging4 : isDragging,
|
|
414
|
+
isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
|
|
415
|
+
editorHeight: (_meta$editorHeight2 = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight2 !== void 0 ? _meta$editorHeight2 : currentState.editorHeight,
|
|
416
|
+
editorWidthLeft: (_meta$editorWidthLeft2 = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft2 !== void 0 ? _meta$editorWidthLeft2 : currentState.editorWidthLeft,
|
|
417
|
+
editorWidthRight: (_meta$editorWidthRigh2 = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh2 !== void 0 ? _meta$editorWidthRigh2 : currentState.editorWidthRight,
|
|
418
|
+
isResizerResizing: isResizerResizing,
|
|
419
|
+
isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
|
|
420
|
+
isPMDragging: (_meta$isPMDragging2 = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging2 !== void 0 ? _meta$isPMDragging2 : isPMDragging
|
|
421
|
+
};
|
|
422
|
+
};
|
|
97
423
|
var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
98
424
|
var _getIntl = getIntl(),
|
|
99
425
|
formatMessage = _getIntl.formatMessage;
|
|
100
426
|
var isNestedEnabled = (0, _experiments.editorExperiment)('nested-dnd', true, {
|
|
101
427
|
exposure: true
|
|
102
428
|
});
|
|
429
|
+
var isOptimisedApply = isNestedEnabled && (0, _experiments.editorExperiment)('optimised-apply-dnd', true, {
|
|
430
|
+
exposure: true
|
|
431
|
+
});
|
|
432
|
+
var isTitleEnterImprovementEnabled = (0, _platformFeatureFlags.fg)('confluence_frontend_page_title_enter_improvements');
|
|
433
|
+
var flags = {
|
|
434
|
+
isNestedEnabled: isNestedEnabled,
|
|
435
|
+
isOptimisedApply: isOptimisedApply,
|
|
436
|
+
isTitleEnterImprovementEnabled: isTitleEnterImprovementEnabled
|
|
437
|
+
};
|
|
103
438
|
if ((0, _platformFeatureFlags.fg)('platform_editor_element_dnd_nested_fix_patch_2')) {
|
|
104
439
|
// TODO: Remove this once FG is used in code
|
|
105
440
|
}
|
|
@@ -114,195 +449,10 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
114
449
|
return initialState;
|
|
115
450
|
},
|
|
116
451
|
apply: function apply(tr, currentState, oldState, newState) {
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
decorations = currentState.decorations,
|
|
120
|
-
isMenuOpen = currentState.isMenuOpen,
|
|
121
|
-
editorHeight = currentState.editorHeight,
|
|
122
|
-
editorWidthLeft = currentState.editorWidthLeft,
|
|
123
|
-
editorWidthRight = currentState.editorWidthRight,
|
|
124
|
-
isResizerResizing = currentState.isResizerResizing,
|
|
125
|
-
isDragging = currentState.isDragging,
|
|
126
|
-
isPMDragging = currentState.isPMDragging;
|
|
127
|
-
|
|
128
|
-
// Remap existing decorations when steps exist
|
|
129
|
-
if (tr.docChanged) {
|
|
130
|
-
decorations = decorations.map(tr.mapping, tr.doc);
|
|
131
|
-
}
|
|
132
|
-
var meta = tr.getMeta(key);
|
|
133
|
-
var isPerformanceFix = isNestedEnabled || (0, _experiments.editorExperiment)('dnd-input-performance-optimisation', true, {
|
|
134
|
-
exposure: true
|
|
135
|
-
});
|
|
136
|
-
var activeNodeWithNewNodeType = null;
|
|
137
|
-
|
|
138
|
-
// If tables or media are being resized, we want to hide the drag handle
|
|
139
|
-
var resizerMeta = tr.getMeta('is-resizer-resizing');
|
|
140
|
-
isResizerResizing = resizerMeta !== null && resizerMeta !== void 0 ? resizerMeta : isResizerResizing;
|
|
141
|
-
var canIgnoreTr = function canIgnoreTr() {
|
|
142
|
-
return !tr.steps.every(function (e) {
|
|
143
|
-
return e instanceof _steps.AnalyticsStep;
|
|
144
|
-
});
|
|
145
|
-
};
|
|
146
|
-
var maybeNodeCountChanged = isNestedEnabled ? !(0, _utils.isTextInput)(tr) && tr.docChanged && canIgnoreTr() : oldState.doc.childCount !== newState.doc.childCount;
|
|
147
|
-
var shouldRemoveHandle = !tr.getMeta('isRemote');
|
|
148
|
-
|
|
149
|
-
// During resize, remove the drag handle widget so its dom positioning doesn't need to be maintained
|
|
150
|
-
// Also remove the handle when the node is moved or the node count changes. This helps prevent incorrect positioning
|
|
151
|
-
// Don't remove the handle if remote changes are changing the node count, its prosemirror position can be mapped instead
|
|
152
|
-
if (meta !== null && meta !== void 0 && meta.hideDragHandle && (0, _platformFeatureFlags.fg)('confluence_frontend_page_title_enter_improvements') || isResizerResizing || maybeNodeCountChanged && shouldRemoveHandle || meta !== null && meta !== void 0 && meta.nodeMoved) {
|
|
153
|
-
var oldHandle = decorations.find(undefined, undefined, function (spec) {
|
|
154
|
-
return spec.id === 'drag-handle';
|
|
155
|
-
});
|
|
156
|
-
decorations = decorations.remove(oldHandle);
|
|
157
|
-
}
|
|
158
|
-
var decsLength = isNestedEnabled ? decorations.find(undefined, undefined, function (spec) {
|
|
159
|
-
return spec.type === 'node-decoration';
|
|
160
|
-
}).length : decorations.find().filter(function (_ref5) {
|
|
161
|
-
var spec = _ref5.spec;
|
|
162
|
-
return spec.id !== 'drag-handle';
|
|
163
|
-
}).length;
|
|
164
|
-
var isDecsMissing = false;
|
|
165
|
-
var isDropTargetsMissing = false;
|
|
166
|
-
if (isNestedEnabled) {
|
|
167
|
-
var _meta$isDragging;
|
|
168
|
-
isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && maybeNodeCountChanged;
|
|
169
|
-
isDropTargetsMissing = ((_meta$isDragging = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging !== void 0 ? _meta$isDragging : isDragging) && maybeNodeCountChanged && !(meta !== null && meta !== void 0 && meta.nodeMoved);
|
|
170
|
-
} else {
|
|
171
|
-
isDecsMissing = !(isDragging || meta !== null && meta !== void 0 && meta.isDragging) && decsLength !== newState.doc.childCount;
|
|
172
|
-
var dropTargetLen = decorations.find(undefined, undefined, function (spec) {
|
|
173
|
-
return spec.type === 'drop-target-decoration';
|
|
174
|
-
}).length;
|
|
175
|
-
isDropTargetsMissing = isDragging && (meta === null || meta === void 0 ? void 0 : meta.isDragging) !== false && dropTargetLen !== newState.doc.childCount + 1;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
// This is not targeted enough - it's trying to catch events like expand being set to breakout
|
|
179
|
-
var maybeWidthUpdated = tr.docChanged && oldState.doc.nodeSize === newState.doc.nodeSize && !maybeNodeCountChanged;
|
|
180
|
-
|
|
181
|
-
// This addresses scenarios such as undoing table resizing,
|
|
182
|
-
// where a keyboard shortcut triggers a width change, and
|
|
183
|
-
// the node's actual width is then updated in a separate renderering cycle.
|
|
184
|
-
// The tr.meta.activeNode is triggered by the showDragHandleAt function during the mouse entry event
|
|
185
|
-
// (when the table node rerenders)
|
|
186
|
-
// The activeNode is from the previous rendering cycle, and verify if they share the same anchor.
|
|
187
|
-
var maybeTableWidthUpdated = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 || (_meta$activeNode = meta.activeNode) === null || _meta$activeNode === void 0 ? void 0 : _meta$activeNode.nodeType) === 'table' && meta.activeNode.anchorName === (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName);
|
|
188
|
-
var redrawDecorations = decorations === _view.DecorationSet.empty || (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== editorHeight || (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== editorWidthLeft || (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== undefined && (meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== editorWidthRight || maybeWidthUpdated || maybeNodeCountChanged || maybeTableWidthUpdated || resizerMeta === false || isDecsMissing || !!(meta !== null && meta !== void 0 && meta.nodeMoved) && tr.docChanged;
|
|
189
|
-
|
|
190
|
-
// Draw node and mouseWrapper decorations at top level node if decorations is empty, editor height changes or node is moved
|
|
191
|
-
if (redrawDecorations && !isResizerResizing && api) {
|
|
192
|
-
var oldNodeDecs = decorations.find(undefined, undefined, function (spec) {
|
|
193
|
-
return spec.type !== 'drop-target-decoration';
|
|
194
|
-
});
|
|
195
|
-
decorations = decorations.remove(oldNodeDecs);
|
|
196
|
-
var newNodeDecs = (0, _decorations.nodeDecorations)(newState);
|
|
197
|
-
decorations = decorations.add(newState.doc, (0, _toConsumableArray2.default)(newNodeDecs));
|
|
198
|
-
if (activeNode && !(meta !== null && meta !== void 0 && meta.nodeMoved) && !isDecsMissing) {
|
|
199
|
-
var mappedPosisiton = tr.mapping.map(activeNode.pos);
|
|
200
|
-
var prevMappedPos = oldState.tr.mapping.map(activeNode.pos);
|
|
201
|
-
|
|
202
|
-
// When a node type changed to be nested inside another node, the position of the active node is off by 1
|
|
203
|
-
// This is a workaround to fix the position of the active node when it is nested
|
|
204
|
-
if (tr.docChanged && !maybeNodeCountChanged && mappedPosisiton === prevMappedPos + 1) {
|
|
205
|
-
mappedPosisiton = prevMappedPos;
|
|
206
|
-
}
|
|
207
|
-
var _newActiveNode = tr.doc.nodeAt(mappedPosisiton);
|
|
208
|
-
var draghandleDec;
|
|
209
|
-
if (isPerformanceFix) {
|
|
210
|
-
var _meta$activeNode$pos, _meta$activeNode2, _ref6, _meta$activeNode$anch, _meta$activeNode3, _decAtPos$spec, _ref7, _meta$activeNode$node, _meta$activeNode4, _decAtPos$spec2, _meta$activeNode5;
|
|
211
|
-
if (_newActiveNode && (_newActiveNode === null || _newActiveNode === void 0 ? void 0 : _newActiveNode.type.name) !== activeNode.nodeType) {
|
|
212
|
-
var _oldHandle = decorations.find(undefined, undefined, function (spec) {
|
|
213
|
-
return spec.id === 'drag-handle';
|
|
214
|
-
});
|
|
215
|
-
decorations = decorations.remove(_oldHandle);
|
|
216
|
-
}
|
|
217
|
-
var decAtPos = newNodeDecs.find(function (dec) {
|
|
218
|
-
return dec.from === mappedPosisiton;
|
|
219
|
-
});
|
|
220
|
-
draghandleDec = (0, _decorations.dragHandleDecoration)(api, getIntl, (_meta$activeNode$pos = meta === null || meta === void 0 || (_meta$activeNode2 = meta.activeNode) === null || _meta$activeNode2 === void 0 ? void 0 : _meta$activeNode2.pos) !== null && _meta$activeNode$pos !== void 0 ? _meta$activeNode$pos : mappedPosisiton, (_ref6 = (_meta$activeNode$anch = meta === null || meta === void 0 || (_meta$activeNode3 = meta.activeNode) === null || _meta$activeNode3 === void 0 ? void 0 : _meta$activeNode3.anchorName) !== null && _meta$activeNode$anch !== void 0 ? _meta$activeNode$anch : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec = decAtPos.spec) === null || _decAtPos$spec === void 0 ? void 0 : _decAtPos$spec.anchorName) !== null && _ref6 !== void 0 ? _ref6 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName, (_ref7 = (_meta$activeNode$node = meta === null || meta === void 0 || (_meta$activeNode4 = meta.activeNode) === null || _meta$activeNode4 === void 0 ? void 0 : _meta$activeNode4.nodeType) !== null && _meta$activeNode$node !== void 0 ? _meta$activeNode$node : decAtPos === null || decAtPos === void 0 || (_decAtPos$spec2 = decAtPos.spec) === null || _decAtPos$spec2 === void 0 ? void 0 : _decAtPos$spec2.nodeType) !== null && _ref7 !== void 0 ? _ref7 : activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType, meta === null || meta === void 0 || (_meta$activeNode5 = meta.activeNode) === null || _meta$activeNode5 === void 0 ? void 0 : _meta$activeNode5.handleOptions);
|
|
221
|
-
} else {
|
|
222
|
-
var nodeType = activeNode.nodeType;
|
|
223
|
-
var anchorName = activeNode.anchorName;
|
|
224
|
-
if (_newActiveNode && (_newActiveNode === null || _newActiveNode === void 0 ? void 0 : _newActiveNode.type.name) !== activeNode.nodeType) {
|
|
225
|
-
nodeType = _newActiveNode.type.name;
|
|
226
|
-
anchorName = activeNode.anchorName.replace(activeNode.nodeType, nodeType);
|
|
227
|
-
activeNodeWithNewNodeType = {
|
|
228
|
-
pos: prevMappedPos,
|
|
229
|
-
nodeType: nodeType,
|
|
230
|
-
anchorName: anchorName
|
|
231
|
-
};
|
|
232
|
-
}
|
|
233
|
-
draghandleDec = (0, _decorations.dragHandleDecoration)(api, getIntl, activeNode.pos, anchorName, nodeType);
|
|
234
|
-
}
|
|
235
|
-
decorations = decorations.add(newState.doc, [draghandleDec]);
|
|
236
|
-
}
|
|
237
|
-
}
|
|
238
|
-
|
|
239
|
-
// Remove previous drag handle widget and draw new drag handle widget when activeNode changes
|
|
240
|
-
if (api && meta !== null && meta !== void 0 && meta.activeNode && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.anchorName) || meta !== null && meta !== void 0 && (_meta$activeNode$hand = meta.activeNode.handleOptions) !== null && _meta$activeNode$hand !== void 0 && _meta$activeNode$hand.isFocused)) {
|
|
241
|
-
var _oldHandle2 = decorations.find(undefined, undefined, function (spec) {
|
|
242
|
-
return spec.id === 'drag-handle';
|
|
243
|
-
});
|
|
244
|
-
decorations = decorations.remove(_oldHandle2);
|
|
245
|
-
var decs = (0, _decorations.dragHandleDecoration)(api, getIntl, meta.activeNode.pos, meta.activeNode.anchorName, meta.activeNode.nodeType, meta.activeNode.handleOptions);
|
|
246
|
-
decorations = decorations.add(newState.doc, [decs]);
|
|
452
|
+
if (isOptimisedApply) {
|
|
453
|
+
return newApply(api, formatMessage, tr, currentState, newState, flags, anchorHeightsCache);
|
|
247
454
|
}
|
|
248
|
-
|
|
249
|
-
// Remove previous drag handle widget and draw new drag handle widget when node type changes
|
|
250
|
-
if (!isPerformanceFix && activeNodeWithNewNodeType && ((_activeNodeWithNewNod = activeNodeWithNewNodeType) === null || _activeNodeWithNewNod === void 0 ? void 0 : _activeNodeWithNewNod.nodeType) !== (activeNode === null || activeNode === void 0 ? void 0 : activeNode.nodeType) && api) {
|
|
251
|
-
var _oldHandle3 = decorations.find(undefined, undefined, function (spec) {
|
|
252
|
-
return spec.id === 'drag-handle';
|
|
253
|
-
});
|
|
254
|
-
decorations = decorations.remove(_oldHandle3);
|
|
255
|
-
var _decs = (0, _decorations.dragHandleDecoration)(api, getIntl, activeNodeWithNewNodeType.pos, activeNodeWithNewNodeType.anchorName, activeNodeWithNewNodeType.nodeType);
|
|
256
|
-
decorations = decorations.add(newState.doc, [_decs]);
|
|
257
|
-
}
|
|
258
|
-
if ((meta === null || meta === void 0 ? void 0 : meta.isDragging) === false || isDropTargetsMissing) {
|
|
259
|
-
// Remove drop target decoration when dragging stops
|
|
260
|
-
var dropTargetDecs = decorations.find(undefined, undefined, function (spec) {
|
|
261
|
-
return spec.type === 'drop-target-decoration';
|
|
262
|
-
});
|
|
263
|
-
decorations = decorations.remove(dropTargetDecs);
|
|
264
|
-
}
|
|
265
|
-
|
|
266
|
-
// Map active node position when the document changes
|
|
267
|
-
var mappedActiveNodePos = tr.docChanged && activeNode ? !isPerformanceFix && activeNodeWithNewNodeType || {
|
|
268
|
-
pos: tr.mapping.map(activeNode.pos),
|
|
269
|
-
anchorName: activeNode.anchorName,
|
|
270
|
-
nodeType: activeNode.nodeType
|
|
271
|
-
} : activeNode;
|
|
272
|
-
var shouldCreateDropTargets = (meta === null || meta === void 0 ? void 0 : meta.isDragging) || isDropTargetsMissing;
|
|
273
|
-
if (api) {
|
|
274
|
-
// Add drop targets when node is being dragged
|
|
275
|
-
// if the transaction is only for analytics and user is dragging, continue to draw drop targets
|
|
276
|
-
if (shouldCreateDropTargets || (0, _dragTargetDebug.isBlocksDragTargetDebug)()) {
|
|
277
|
-
var _meta$activeNode6;
|
|
278
|
-
var _decs2 = (0, _decorations.dropTargetDecorations)(newState, api, formatMessage, isNestedEnabled ? (_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, anchorHeightsCache);
|
|
279
|
-
decorations = decorations.add(newState.doc, _decs2);
|
|
280
|
-
}
|
|
281
|
-
}
|
|
282
|
-
var isEmptyDoc = isNestedEnabled ? 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;
|
|
283
|
-
if (isEmptyDoc) {
|
|
284
|
-
var hasNodeDecoration = !!decorations.find(undefined, undefined, function (spec) {
|
|
285
|
-
return spec.type === 'node-decoration';
|
|
286
|
-
}).length;
|
|
287
|
-
if (!hasNodeDecoration) {
|
|
288
|
-
decorations = decorations.add(newState.doc, [(0, _decorations.emptyParagraphNodeDecorations)()]);
|
|
289
|
-
}
|
|
290
|
-
}
|
|
291
|
-
var newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && decorations.find(undefined, undefined, function (spec) {
|
|
292
|
-
return spec.id === 'drag-handle';
|
|
293
|
-
}).length === 0 ? null : (_meta$activeNode7 = meta === null || meta === void 0 ? void 0 : meta.activeNode) !== null && _meta$activeNode7 !== void 0 ? _meta$activeNode7 : mappedActiveNodePos;
|
|
294
|
-
return {
|
|
295
|
-
decorations: decorations,
|
|
296
|
-
activeNode: newActiveNode,
|
|
297
|
-
isDragging: (_meta$isDragging2 = meta === null || meta === void 0 ? void 0 : meta.isDragging) !== null && _meta$isDragging2 !== void 0 ? _meta$isDragging2 : isDragging,
|
|
298
|
-
isMenuOpen: meta !== null && meta !== void 0 && meta.toggleMenu ? !isMenuOpen : isMenuOpen,
|
|
299
|
-
editorHeight: (_meta$editorHeight = meta === null || meta === void 0 ? void 0 : meta.editorHeight) !== null && _meta$editorHeight !== void 0 ? _meta$editorHeight : currentState.editorHeight,
|
|
300
|
-
editorWidthLeft: (_meta$editorWidthLeft = meta === null || meta === void 0 ? void 0 : meta.editorWidthLeft) !== null && _meta$editorWidthLeft !== void 0 ? _meta$editorWidthLeft : currentState.editorWidthLeft,
|
|
301
|
-
editorWidthRight: (_meta$editorWidthRigh = meta === null || meta === void 0 ? void 0 : meta.editorWidthRight) !== null && _meta$editorWidthRigh !== void 0 ? _meta$editorWidthRigh : currentState.editorWidthRight,
|
|
302
|
-
isResizerResizing: isResizerResizing,
|
|
303
|
-
isDocSizeLimitEnabled: initialState.isDocSizeLimitEnabled,
|
|
304
|
-
isPMDragging: (_meta$isPMDragging = meta === null || meta === void 0 ? void 0 : meta.isPMDragging) !== null && _meta$isPMDragging !== void 0 ? _meta$isPMDragging : isPMDragging
|
|
305
|
-
};
|
|
455
|
+
return oldApply(api, formatMessage, tr, currentState, oldState, newState, flags, anchorHeightsCache);
|
|
306
456
|
}
|
|
307
457
|
},
|
|
308
458
|
props: {
|
|
@@ -401,13 +551,8 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
401
551
|
var dom = editorView.dom;
|
|
402
552
|
var editorContentArea = editorView.dom.closest('.fabric-editor-popup-scroll-parent');
|
|
403
553
|
|
|
404
|
-
// Use ResizeObserver to observe width changes
|
|
554
|
+
// Use ResizeObserver to observe resizer (scroll-parent typically grows when resizing) and editor width changes
|
|
405
555
|
var resizeObserverWidth = new ResizeObserver((0, _rafSchd.default)(function (entries) {
|
|
406
|
-
var editorContentArea = entries[0].target;
|
|
407
|
-
var editorWidthRight = editorContentArea.getBoundingClientRect().right;
|
|
408
|
-
var editorWidthLeft = editorContentArea.getBoundingClientRect().left;
|
|
409
|
-
|
|
410
|
-
// Update the plugin state when the height changes
|
|
411
556
|
var pluginState = key.getState(editorView.state);
|
|
412
557
|
if (!(pluginState !== null && pluginState !== void 0 && pluginState.isDragging)) {
|
|
413
558
|
var isResizerResizing = !!dom.querySelector('.is-resizing');
|
|
@@ -416,17 +561,18 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
416
561
|
transaction.setMeta('is-resizer-resizing', isResizerResizing);
|
|
417
562
|
}
|
|
418
563
|
if (!isResizerResizing) {
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
564
|
+
var _editorContentArea = entries[0].target;
|
|
565
|
+
var editorWidthRight = _editorContentArea.getBoundingClientRect().right;
|
|
566
|
+
var editorWidthLeft = _editorContentArea.getBoundingClientRect().left;
|
|
567
|
+
transaction.setMeta(key, {
|
|
568
|
+
editorWidthLeft: editorWidthLeft,
|
|
569
|
+
editorWidthRight: editorWidthRight
|
|
570
|
+
});
|
|
425
571
|
}
|
|
426
572
|
editorView.dispatch(transaction);
|
|
427
573
|
}
|
|
428
574
|
}));
|
|
429
|
-
if (editorContentArea
|
|
575
|
+
if (editorContentArea) {
|
|
430
576
|
resizeObserverWidth.observe(editorContentArea);
|
|
431
577
|
}
|
|
432
578
|
|
|
@@ -434,7 +580,7 @@ var createPlugin = exports.createPlugin = function createPlugin(api, getIntl) {
|
|
|
434
580
|
var pragmaticCleanup = destroyFn(api);
|
|
435
581
|
return {
|
|
436
582
|
destroy: function destroy() {
|
|
437
|
-
if (editorContentArea
|
|
583
|
+
if (editorContentArea) {
|
|
438
584
|
resizeObserverWidth.unobserve(editorContentArea);
|
|
439
585
|
}
|
|
440
586
|
pragmaticCleanup();
|