fix(core): scope the table drag image to the view that owns it

Addresses review on #2920 (r-4981596549).

`dragImageElement` was module state, so the `destroy()` cleanup added in the
previous commit removed the drag image for *any* editor rather than the one
being destroyed. With more than one editor on a page - or a nested editor
inside a custom block - unmounting one would have cleared a preview that
another editor was still dragging. The cleanup introduced that; the module
scope predates it.

The element is now a private field on `TableHandlesView`, with `setDragImage`
and `unsetDragImage` methods owning its lifecycle, and `buildTableDragImage`
left as a pure builder.

Also replaces the deprecated `word-break: break-word` on the table rule. The
earlier suggestion of `overflow-wrap: break-word` was declined because it
changes the min-content contribution that table column sizing depends on;
`word-break: normal` + `overflow-wrap: anywhere` is what the deprecated value
is defined to mean, so it carries that effect and is an exact swap. The
drag-image width test covers the column sizing either way.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: mustafa-yilmaz

packages/core/src/editor/editor.css

@@ -181,7 +181,10 @@
  exactly as specific as `.bn-editor ...` was on its own. */
 :is(.bn-editor, .bn-table-drag-preview) [data-content-type="table"] table {
   width: auto !important;
-  word-break: break-word;
+  /* `word-break: break-word` is deprecated; it is defined as exactly this pair,
+   including the effect on min-content size that the table layout depends on. */
+  word-break: normal;
+  overflow-wrap: anywhere;
 }
 :is(.bn-editor, .bn-table-drag-preview) [data-content-type="table"] th,
 :is(.bn-editor, .bn-table-drag-preview) [data-content-type="table"] td {

packages/core/src/extensions/TableHandles/TableHandles.ts

@@ -44,8 +44,6 @@ import {
 } from "../../schema/index.js";
 import { getDraggableBlockFromElement } from "../getDraggableBlockFromElement.js";
 
-let dragImageElement: HTMLElement | undefined;
-
 // TODO consider switching this to jotai, it is a bit messy and noisy
 export type TableHandlesState = {
   show: boolean;
@@ -80,14 +78,12 @@ export type TableHandlesState = {
  * whichever theme/colour scheme the editor is nested in - applies to the drag
  * image exactly as it does to the real table.
  */
-function setTableDragImage(
+function buildTableDragImage(
   editorElement: HTMLElement,
   tableElement: HTMLTableElement,
   cells: RelativeCellIndices[],
   orientation: "row" | "col",
 ) {
-  unsetTableDragImage();
-
   const tableCopy = tableElement.cloneNode(false) as HTMLTableElement;
   // The clone inherits the width and minimum width the real table is given
   // inline, both of which cover all of its columns - a minimum width of
@@ -166,7 +162,7 @@ function setTableDragImage(
     )
     .join(" ");
 
-  dragImageElement = document.createElement("div");
+  const dragImageElement = document.createElement("div");
   dragImageElement.className = `${inheritedClasses} bn-table-drag-preview`;
 
   if (tbody.childElementCount > 0) {
@@ -190,11 +186,6 @@ function setTableDragImage(
   return dragImageElement;
 }
 
-function unsetTableDragImage() {
-  dragImageElement?.remove();
-  dragImageElement = undefined;
-}
-
 function getChildIndex(node: Element) {
   return Array.prototype.indexOf.call(node.parentElement!.childNodes, node);
 }
@@ -250,6 +241,10 @@ export class TableHandlesView implements PluginView {
   public tablePos: number | undefined;
   public tableElement: HTMLElement | undefined;
 
+  // Owned per view rather than per module: a page can hold several editors, so
+  // tearing one down must not remove a drag image belonging to another.
+  private dragImageElement: HTMLElement | undefined;
+
   public menuFrozen = false;
 
   public mouseState: "up" | "down" | "selecting" = "up";
@@ -719,10 +714,33 @@ export class TableHandlesView implements PluginView {
     this.emitUpdate();
   }
 
+  // Replaces the browser's default drag image (which would be the drag handle
+  // itself) with a copy of the row/column being dragged.
+  setDragImage(
+    tableElement: HTMLTableElement,
+    cells: RelativeCellIndices[],
+    orientation: "row" | "col",
+  ) {
+    this.unsetDragImage();
+    this.dragImageElement = buildTableDragImage(
+      this.pmView.dom as HTMLElement,
+      tableElement,
+      cells,
+      orientation,
+    );
+
+    return this.dragImageElement;
+  }
+
+  unsetDragImage() {
+    this.dragImageElement?.remove();
+    this.dragImageElement = undefined;
+  }
+
   destroy() {
     // The drag image is normally cleaned up on `dragEnd`, which never arrives
     // if the editor is torn down mid-drag.
-    unsetTableDragImage();
+    this.unsetDragImage();
 
     this.pmView.dom.removeEventListener("mousemove", this.mouseMoveHandler);
     window.removeEventListener("mouseup", this.mouseUpHandler);
@@ -757,8 +775,7 @@ export const TableHandlesExtension = createExtension(({ editor }) => {
       return;
     }
 
-    const dragImage = setTableDragImage(
-      editor.prosemirrorView.dom as HTMLElement,
+    const dragImage = view.setDragImage(
       tableElement,
       orientation === "row"
         ? getCellsAtRowHandle(view.state.block, index)
@@ -1080,7 +1097,7 @@ export const TableHandlesExtension = createExtension(({ editor }) => {
         return;
       }
 
-      unsetTableDragImage();
+      view!.unsetDragImage();
     },
 
     /**