BUG: Drag&drop issues when the editor is in a shadowRoot
- Dominant language
- TypeScript
- Stars
- 26.2k
- Forks
- 4.6k
- Avg merge
- 2d 21h
- Merged PRs (30d)
- 6
Description
### GrapesJS version
- [x] I confirm to use the latest version of GrapesJS
### What browser are you using?
Firefox 154 and Chrome 151
### Reproducible demo link
https://jsfiddle.net/dgLc7qz4/
### Describe the bug
**How to reproduce the bug?**
We are wrapping the editor in a custom webcomponent with a shadow root. See the reproducer
1. Drop some elements in the DOM
2. Try to re-order them in the layer manager
**What is the expected behavior?**
- A green placeholder appears when dragging an element in the editor
- Elements placed in the editor are sortable in the layer manager.
**What is the current behavior?**
- The green "placeholder" doesn't appear - no visual indicator seems to appear at all
- The elements cannot be sorted in the layer manager
**Additional notes**
We had no issue in version 0.21.13, and it appear in version **0.22.1**. Our main suspect is this code block
```typescript
// src/utils/sorter/Sorter.ts (0.23.6, line 173)
private ensurePlaceholderElement() {
const el = this.placeholder.el;
const container = this.containerContext.container;
if (!el.ownerDocument.contains(el)) { // always false inside a shadow root
container.append(this.placeholder.el);
}
}
```
### Code of Conduct
- [x] I agree to follow this project's Code of Conduct
Contributor guide
Research direction
Start with src/utils/sorter/Sorter.ts, especially ensurePlaceholderElement and its ownerDocument.contains check, then reproduce the issue using the linked JSFiddle in a shadow root on the affected versions. Compare behavior with 0.21.13 and verify that the placeholder appears and elements can be reordered in the layer manager.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Clearly specified
- Newbie friendliness
- 74/100