BUG: dragMode:'absolute' behaves strange

GrapesJS version

• I confirm to use the latest version of GrapesJS

What browser are you using?

Version 1.56.20 Chromium: 115.0.5790.171 (Offizieller Build) (arm64)

Reproducible demo link

none

Describe the bug

I want the components in my editor to be moveable by dragging. After some research, I found that

let Editor = grapesjs.init({
  dragMode:'absolute',

is needed to achieve this functionality. At least, my components can now be moved...but, since the editor uses a wrapper around the actual component view, the wrapper position may be correct, but the view position is now measured relative to the wrapper, which is wrong:

<img width="284" alt="moving-component" src="https://github.com/GrapesJS/grapesjs/assets/514882/60685671-95d3-41da-9906-bf1e1e5953bc">

The technical reason for this behaviour (and why I consider this as a "bug") is that both the wrapper and its content get the same HTML id assigned to them - which is always wrong as such ids must be unique within an HTML document:

The elements in the DOM:

<img width="534" alt="DOM" src="https://github.com/GrapesJS/grapesjs/assets/514882/99dbad4b-883d-4569-a996-c3889682c777">

...and their CSS settings:

<img width="340" alt="Style" src="https://github.com/GrapesJS/grapesjs/assets/514882/31f69719-2c0e-408b-8ba4-4a0b860bef71">

As a consequence, the same styling is applied to both

Code of Conduct

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