Re-render Component on Canvas when tagName has changed

Question

I'm trying to build a basic Header component that lets you select H1 to H6 with a trait. But when an option is selected, the canvas doesn't update. The change is visible in the code view, and if I move the element in the canvas with the drag tool, the tag then changes. I have been reading the API docs as well as the source, but I can't make the component automatically re-render. I suspect that Grapes is not listening for a change of the component tag name. What is the appropriate way to force a...

artf · Accepted Answer

@z1lk I already added such a thing for the next release

z1lk · Answer

I'm not sure why el would be a string, but see the commit that closed the issue: https://github.com/artf/grapesjs/commit/e450cb98855d16ad819f1214350825a50e45e910 If you're using the latest Grapes version, the Component listens for a change of tagName and does the node replacement itself. So you should be able to remove your init and tagUpdated functions. The trait will update tagName and the Component will do the rest. Edit: Another thing I thought of is: sometimes the object passed to isCompon...

artf · Answer

Yeah this is because you can't change the tag name of an existing DOM element. Probably the solution would be, on tagName change, remove and replace the node (at the same position)

Re-render Component on Canvas when tagName has changed

Question

Answers (3)

Related Questions and Answers

[QUESTION] Change the html content of the selected component

Trait view doesn't update input element when target value changes

Can't drag component into canvas after styled element is cloned

QUESTIONS : Find element in Model

Paid Plugins That Match This Issue

Related tutorials

🚀 Introducing GrapesJS Email Blocky: The Ultimate Email Block Library for GrapesJS

Browse Plugin Categories