GrapesJS / GrapesJS/grapesjs

BUG: Drag&drop issues when the editor is in a shadowRoot

Open
#6,823 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.