fix: Isolated drag/drop per editor instance (TypeCellOS#174)

* Made dragging & dropping confined to the editor instance * Reverted drop cursor fix * Minor change * Fixed build error

Author: matthewlipski

packages/core/src/extensions/DraggableBlocks/DraggableBlocksPlugin.ts

@@ -244,6 +244,8 @@ export class BlockMenuView {
 
  hoveredBlock: HTMLElement | undefined;
 
+ // Used to check if currently dragged content comes from this editor instance.
+ isDragging = false;
  menuOpen = false;
  menuFrozen = false;
 
@@ -264,6 +266,7 @@ export class BlockMenuView {
 
  document.body.addEventListener("drop", this.onDrop, true);
  document.body.addEventListener("dragover", this.onDragOver);
+ this.ttEditor.view.dom.addEventListener("dragstart", this.onDragStart);
 
  // Shows or updates menu position whenever the cursor moves, if the menu isn't frozen.
  document.body.addEventListener("mousemove", this.onMouseMove, true);
@@ -277,20 +280,29 @@ export class BlockMenuView {
  document.body.addEventListener("keydown", this.onKeyDown, true);
  }
 
+ /**
+ * Sets isDragging when dragging text.
+ */
+ onDragStart = () => {
+ this.isDragging = true;
+ };
+
  /**
  * If the event is outside the editor contents,
  * we dispatch a fake event, so that we can still drop the content
  * when dragging / dropping to the side of the editor
  */
  onDrop = (event: DragEvent) => {
- if ((event as any).synthetic) {
+ if ((event as any).synthetic || !this.isDragging) {
  return;
  }
  let pos = this.ttEditor.view.posAtCoords({
  left: event.clientX,
  top: event.clientY,
  });
 
+ this.isDragging = false;
+
  if (!pos || pos.inside === -1) {
  const evt = new Event("drop", event) as any;
  const editorBoundingBox = (
@@ -312,7 +324,7 @@ export class BlockMenuView {
  * when dragging / dropping to the side of the editor
  */
  onDragOver = (event: DragEvent) => {
- if ((event as any).synthetic) {
+ if ((event as any).synthetic || !this.isDragging) {
  return;
  }
  let pos = this.ttEditor.view.posAtCoords({
@@ -429,6 +441,7 @@ export class BlockMenuView {
  }
  document.body.removeEventListener("mousemove", this.onMouseMove);
  document.body.removeEventListener("dragover", this.onDragOver);
+ this.ttEditor.view.dom.removeEventListener("dragstart", this.onDragStart);
  document.body.removeEventListener("drop", this.onDrop);
  document.body.removeEventListener("mousedown", this.onMouseDown);
  document.removeEventListener("scroll", this.onScroll);
@@ -488,8 +501,11 @@ export class BlockMenuView {
  return {
  editor: this.editor,
  addBlock: () => this.addBlock(),
- blockDragStart: (event: DragEvent) =>
- dragStart(event, this.ttEditor.view),
+ blockDragStart: (event: DragEvent) => {
+ // Sets isDragging when dragging blocks.
+ this.isDragging = true;
+ dragStart(event, this.ttEditor.view);
+ },
  blockDragEnd: () => unsetDragImage(),
  freezeMenu: () => {
  this.menuFrozen = true;