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

GrapesJS version

• 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

// 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

• I agree to follow this project's Code of Conduct