Skip to content

BUG: Partially stylized text within a text block can be moved independently and disappears when dragged and dropped #407

@eireson

Description

@eireson

GrapesJS version

  • I confirm to use the latest version of GrapesJS

GrapesJS MJML version

  • I confirm to use the latest version of GrapesJS MJML

What browser are you using?

Mozilla Firefox 144.0

Reproducible demo link

https://grapesjs.com/demo-mjml.html

Describe the bug

How to reproduce the bug?

  1. Create a text block
  2. Type some text in it
  3. Highlight a part of it, and set it to bold (or italic etc.)
  4. Click out of the text box to stop editing
  5. The stylized part of the typed text is now displayed with a border around it as if it is its own block.
  6. Click once on the stylized text. A blue panel comes up with copy / paste buttons and also the four-arrow "move" button. Click it to start moving the stylized text. Alternatively, simply click and drag this specific stylized text box.
  7. The editor shows, like always when moving elements, a green bar showing where this text will be moved. Drop it out of the box.
  8. The text disappears. It is still in the source code. It sits as a child of the column block but not of a text block and so cannot be rendered. You just have a random HTML tag pair floating around in the column block.

The following image shows the aforementioned result

Image

What is the expected behavior?
Users wish to highlight text they have already stylized, by clicking and dragging the text in question. They do not expect to be able to move individual sentence elements, to which a style has been added, through clicking and dragging. They do not expect to be able to click on stylized text and have it interact like a normal block.

What is the current behavior?
Movable u / i etc. tags are able to be moved into a position where they cannot be rendered properly.

If is necessary to execute some code in order to reproduce the bug, paste it here below:

// No code is necessary

Code of Conduct

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions