diff --git a/packages/core/src/utils/sorter/DropLocationDeterminer.ts b/packages/core/src/utils/sorter/DropLocationDeterminer.ts index d65e41fa3..893fa5f5a 100644 --- a/packages/core/src/utils/sorter/DropLocationDeterminer.ts +++ b/packages/core/src/utils/sorter/DropLocationDeterminer.ts @@ -4,7 +4,7 @@ import EditorModel from '../../editor/model/Editor'; import { isTextNode, off, on } from '../dom'; import { SortableTreeNode } from './SortableTreeNode'; import { Placement, PositionOptions, DragDirection, SorterEventHandlers, CustomTarget, DragSource } from './types'; -import { bindAll, each } from 'underscore'; +import { bindAll, each, isFunction } from 'underscore'; import { matches, findPosition, offset, isStyleInFlow } from './SorterUtils'; import { RateLimiter } from './RateLimiter'; import Dimension from './Dimension'; @@ -287,9 +287,24 @@ export class DropLocationDeterminer> ext return newHoveredNode; } + /** + * Resolves the root to run the hit-test against. + * + * `Document.elementFromPoint` doesn't pierce shadow boundaries, so when the container lives + * inside a shadow root it would always return the host element instead of the hovered item. + * `ShadowRoot` implements the same `DocumentOrShadowRoot` mixin and resolves within its own tree. + */ + private getContainerContextRoot(): DocumentOrShadowRoot { + const root = this.containerContext.container?.getRootNode() as Partial | undefined; + if (isFunction(root?.elementFromPoint)) { + return root as DocumentOrShadowRoot; + } + return this.containerContext.document; + } + private getMouseTargetElement(mouseEvent: MouseEvent) { const customTarget = this.containerContext.customTarget; - let mouseTarget = this.containerContext.document.elementFromPoint( + let mouseTarget = this.getContainerContextRoot().elementFromPoint( mouseEvent.clientX, mouseEvent.clientY, ) as HTMLElement; diff --git a/packages/core/src/utils/sorter/Sorter.ts b/packages/core/src/utils/sorter/Sorter.ts index 78897968f..a366860bf 100644 --- a/packages/core/src/utils/sorter/Sorter.ts +++ b/packages/core/src/utils/sorter/Sorter.ts @@ -173,7 +173,7 @@ export default class Sorter> { private ensurePlaceholderElement() { const el = this.placeholder.el; const container = this.containerContext.container; - if (!el.ownerDocument.contains(el)) { + if (!el.isConnected) { container.append(this.placeholder.el); } }