How to Force Component Re-Render?
I ended up firing an event on each object removed that caused them to trigger their own updates. I did this with a config object, but here's a more specific draft of my code. These are shadow dom components so this.parent().closest('pathway') is a selector for <pathway></pathway> In general, re-rendering is not the ed...
Read full answer below ↓Question
const component = DomComponents.addType(name, {
model: {
removed() {
const pathwaysParent = this.parent().closest('interactive-pathways');
if (pathwaysParent) {
// This doesn't work. There is no such function. I got this example from: https://github.com/artf/grapesjs/issues/1227#issuecomment-399754486
pathwaysParent.render();
}
},
}
}
When I try the following in place of pathwaysParent.render(), it obviously creates an infinite loop:
const coll = pathwaysParent.collection;
const at = coll.indexOf(pathwaysParent);
coll.remove(pathwaysParent);
coll.add(pathwaysParent, { at });
I can access the el at pathwaysParent.view.el, but I'm still looking for a good way to force the DOM component to re-render in a non-hacky way.
Answers (1)
I ended up firing an event on each object removed that caused them to trigger their own updates. I did this with a config object, but here's a more specific draft of my code. These are shadow dom components so this.parent().closest('pathway') is a selector for <pathway></pathway>
// this.closest(whatever) is always 0.
const pathway = this.parent().closest('pathway');
// This is only dispatched once, because (likely) nodes are removed from parent -> down.
if (pathway) {
pathway.view.el.dispatchEvent(
new CustomEvent(`step:title-updated`, {
bubbles: true,
}),
);
}
In general, re-rendering is not the editor's job. Though I would have been content refreshing all the content, but no access to the editor object from within removed.
Related Questions and Answers
Continue research with similar issue discussions.
Issue #1341
[Question] How to work with Custom Components
Hello, I have some questions and issues about and with the grapes editorProblem 1 In a component, which class is there extended? Is it real...
Issue #792
Script property using function don't work with blocks
In Components & JS docs there's this example: This works perfectly. But I couldn't use a function instead of a string in script, as is said...
Issue #1894
[BUG] Custom Trait documentation example doesn't work
Specifically this: https://grapesjs.com/docs/modules/Traits.html#define-new-trait-type First of all, the keyUp event references onChange wh...
Issue #4735
resetId types mismatch
GrapesJS version [X] I confirm to use the latest version of GrapesJS What browser are you using? n/a Reproducible demo link n/a Describe th...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Tutorial
How to Build a Production GrapesJS Editor: The Complete Walkthrough of Brief, Preset, Plugins, and Services
A complete walkthrough of building a production GrapesJS editor: how to choose a preset, pick plugins, and scope setup services without burning a sprint.
Tutorial
Embed GrapesJS in Your SaaS: A Weekend Guide
Embed GrapesJS in your SaaS and ship a white-label page builder over a weekend. Honest tradeoffs, real code, and the plugins that close the UX gap.
Tutorial
Big Updates: TinyMCE 8 and Placeholder 2.0 for GrapesJS
In May we shipped major updates to two of our most popular GrapesJS plugins — TinyMCE Inline Text Editor and Placeholder.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.