diff --git a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts index e166f58926..e984307436 100644 --- a/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts +++ b/packages/core/src/extensions/SideMenu/SideMenuPlugin.ts @@ -178,6 +178,11 @@ export class SideMenuView< this.onDrop as EventListener, true ); + this.pmView.root.addEventListener( + "dragend", + this.onDragEnd as EventListener, + true + ); initializeESMDependencies(); // Shows or updates menu position whenever the cursor moves, if the menu isn't frozen. @@ -300,8 +305,8 @@ export class SideMenuView< // a block from a different editor is being dropped, this causes some // issues that the code below fixes: if (!this.isDragOrigin && this.pmView.dom === parentEditorElement) { - // 1. Because the editor selection is unrelated to the dragged content, - // we don't want PM to delete its content. Therefore, we collapse the + // Because the editor selection is unrelated to the dragged content, we + // don't want PM to delete its content. Therefore, we collapse the // selection. this.pmView.dispatch( this.pmView.state.tr.setSelection( @@ -312,8 +317,8 @@ export class SideMenuView< ) ); } else if (this.isDragOrigin && this.pmView.dom !== parentEditorElement) { - // 2. Because the editor from which the block originates doesn't get a - // drop event on it, PM doesn't delete its selected content. Therefore, we + // Because the editor from which the block originates doesn't get a drop + // event on it, PM doesn't delete its selected content. Therefore, we // need to do so manually. // // Note: Deleting the selected content from the editor from which the @@ -328,11 +333,6 @@ export class SideMenuView< 0 ); } - // 3. PM only clears `view.dragging` on the editor that the block was - // dropped, so we manually have to clear it on all the others. However, - // PM also needs to read `view.dragging` while handling the event, so we - // use a `setTimeout` to ensure it's only cleared after that. - setTimeout(() => (this.pmView.dragging = null), 0); } if ( @@ -360,6 +360,14 @@ export class SideMenuView< } }; + onDragEnd = () => { + // When the user starts dragging a block, `view.dragging` is set on all + // BlockNote editors. However, when the drag ends, only the editor that the + // drag originated in automatically clears `view.dragging`. Therefore, we + // have to manually clear it on all editors. + this.pmView.dragging = null; + }; + /** * If a block is being dragged, ProseMirror usually gets the context of what's * being dragged from `view.dragging`, which is automatically set when a @@ -580,6 +588,11 @@ export class SideMenuView< this.onDrop as EventListener, true ); + this.pmView.root.removeEventListener( + "dragend", + this.onDragEnd as EventListener, + true + ); this.pmView.root.removeEventListener( "keydown", this.onKeyDown as EventListener, diff --git a/packages/core/src/extensions/UniqueID/UniqueID.ts b/packages/core/src/extensions/UniqueID/UniqueID.ts index c2077f094f..6b9fa0e5ba 100644 --- a/packages/core/src/extensions/UniqueID/UniqueID.ts +++ b/packages/core/src/extensions/UniqueID/UniqueID.ts @@ -252,8 +252,9 @@ const UniqueID = Extension.create({ }; }, props: { - // `handleDOMEvents` is called before `transformPasted` - // so we can do some checks before + // `handleDOMEvents` is called before `transformPasted` so we can do + // some checks before. However, `transformPasted` only runs when + // editor content is pasted - not external content. handleDOMEvents: { // only create new ids for dropped content while holding `alt` // or content is dragged from another editor @@ -265,9 +266,13 @@ const UniqueID = Extension.create({ ? void 0 : _a.effectAllowed) === "copy" ) { - dragSourceElement = null; transformPasted = true; + } else { + transformPasted = false; } + + dragSourceElement = null; + return false; }, // always create new ids on pasted content diff --git a/packages/xl-multi-column/src/extensions/DropCursor/MultiColumnDropCursorPlugin.ts b/packages/xl-multi-column/src/extensions/DropCursor/MultiColumnDropCursorPlugin.ts index 4bfc5ae870..0b226dbd90 100644 --- a/packages/xl-multi-column/src/extensions/DropCursor/MultiColumnDropCursorPlugin.ts +++ b/packages/xl-multi-column/src/extensions/DropCursor/MultiColumnDropCursorPlugin.ts @@ -163,6 +163,12 @@ export function multiColumnDropCursor( editor.schema.styleSchema ); + // The user is dropping next to the original block being dragged - do + // nothing. + if (block.id === draggedBlock.id) { + return; + } + const blocks = position === "left" ? [draggedBlock, block] : [block, draggedBlock]; editor.removeBlocks([draggedBlock]);