Issue with Dynamic Component Placeholders Being Converted to HTML When Moving Blocks in GrapesJS Editor

[Sanjay-tops]

We are using the GrapesJS editor to allow users to build pages using custom components such as carousels, quick search links, testimonials, single property blocks, and static information blocks. Any changes made within the editor are automatically saved to the database.

Our implementation uses a dynamic placeholder approach. Instead of storing the full component HTML in the page content, we store placeholders in the following format:

{{ component-id }}

During rendering (both in the editor and the frontend view), these placeholders are dynamically replaced with the corresponding component HTML.

This approach works correctly when initially adding components. However, we are encountering the following issues when reordering or moving these dynamic components within the editor canvas:

HTML is stored instead of the placeholder
When a dynamic component block is moved from one position to another, GrapesJS copies the rendered HTML of the component and inserts it into the page instead of moving the original placeholder format ({{ component-id }}). As a result, the database ends up storing the full HTML rather than the placeholder.

Component duplication instead of movement
When attempting to move a component to a new position in the canvas, the original component remains in its previous position and a duplicated version appears in the new position. Essentially, the component is copied rather than moved.

When a dynamic component is moved within the canvas, only the placeholder ({{ component-id }}) should move to the new location.

The original placeholder should be removed from the previous position rather than duplicated.

The database should continue storing the placeholder format instead of the rendered HTML.

Question:

Could you please advise the correct approach or configuration in GrapesJS to ensure that:

Dynamic placeholders are preserved during drag-and-drop operations.

Components are moved rather than duplicated.

The editor continues storing placeholders ({{ component-id }}) instead of the rendered HTML.

Any guidance or recommended implementation pattern for handling dynamic components with placeholders in GrapesJS would be greatly appreciated.

Here is my code file, which I have used:
pages.js
website-editor.js
carousels.js