Browse Source

fix(sorter): keep the placeholder attached when the editor is in a shadow root

Sorter#ensurePlaceholderElement re-appended the placeholder to
containerContext.container whenever `!el.ownerDocument.contains(el)`. `Node.contains`
walks the node tree without crossing shadow boundaries, so for an editor mounted in
a shadow root the guard always answered "not attached" — the placeholder element is
`Canvas#getPlacerEl()`, which lives in the tools layer, i.e. in the host page DOM.

Every placeholder move therefore ripped it out of the tools layer and injected it
into the container, which for the canvas sorters is the iframe body (Droppable,
SelectPosition and BlocksView all pair `getPlacerEl()` with the canvas body). The
GrapesJS stylesheet is not loaded there, so the placeholder became invisible.

Fix: test `el.isConnected`, the shadow-aware equivalent, which behaves identically
outside shadow DOM.

Introduced by the sorter refactor in #6149 (0.22.1). The previous implementation
only appended the placeholder when the `placer` option was absent, and the canvas
sorters always passed it, so the append branch was never taken.
pull/6824/head
Guillaume Fauvet 1 month ago
parent
commit
d31058b197
No known key found for this signature in database GPG Key ID: C4F3BC175FC1ED7D
  1. 2
      packages/core/src/utils/sorter/Sorter.ts

2
packages/core/src/utils/sorter/Sorter.ts

@ -173,7 +173,7 @@ export default class Sorter<T, NodeType extends SortableTreeNode<T>> {
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);
}
}

Loading…
Cancel
Save