fix: Theme changes do not propagate to custom editor components in realtime

see TODO in #3031

app/editor/components/ComponentView.tsx

@@ -58,9 +58,10 @@ export default class ComponentView {
     this.dom.classList.add(`component-${node.type.name}`);
 
     this.renderElement();
+    window.addEventListener("theme-changed", this.renderElement);
   }
 
-  renderElement() {
+  renderElement = () => {
     const { theme } = this.editor.props;
 
     const children = this.component({
@@ -75,7 +76,7 @@ export default class ComponentView {
       <ThemeProvider theme={theme}>{children}</ThemeProvider>,
       this.dom
     );
-  }
+  };
 
   update(node: ProsemirrorNode) {
     if (node.type !== this.node.type) {
@@ -108,6 +109,7 @@ export default class ComponentView {
   destroy() {
     if (this.dom) {
       ReactDOM.unmountComponentAtNode(this.dom);
+      window.removeEventListener("theme-changed", this.renderElement);
     }
     this.dom = null;
   }