Issue #2740Opened April 27, 2020by Gangkaroo1 reactions

[BUG] Append does not work consistently

Question

Are you using the latest release (older versions are NOT supported)? Yes Are you facing the bug with your local copy of GrapesJS or with the current demo? Local and current demo

I'm using editor.getSelected().append() to add Text to the currently selected component in the editor. This seems to consistently work when looking at the HTML code in the code editor, however in the view the text does not always get appended but instead, in most of the cases, is shown as prepended. After refreshing the page, however, the text is shown as appended at the end of the component. Tested in current version of Firefox and Chrome.

This is what I entered in the dev tools and the outcome on the left. The red frame marks the two cases where the view shows the text as prepended (the error message in the console has nothing to do with this ticket, it appeared after I did the tests).

append

The same page in the code editor

html code

I'm guessing that this is not the desired behavior of append or do I have to update the view in some way after appending the text?

Thanks for your help, I appreciate your work!

Answers (1)

artfMay 20, 20201 reactions

The Text component is composed of components container and content (printed after components), so when you use append it actually appends the node but you see it above as the content is printed below. We need the components container for a lot of reasons (even if in some cases is not even used). Technically you can't drop other components inside a Text one (by using the editor) so I think the fix should be to extend append method (in Text model) and avoid appending at all as it'd be wrong by definition (or maybe checking the droppable property in the main Component model). Honestly, I don't see it as a real issue, more like a wrong usage of API on the text component, but I'd be glad to merge a PR

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.