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

see TODO in #3031

app/components/Theme.tsx

@@ -12,13 +12,25 @@ type Props = {
 
 function Theme({ children }: Props) {
   const { ui } = useStores();
-  const theme = ui.resolvedTheme === "dark" ? dark : light;
-  const mobileTheme = ui.resolvedTheme === "dark" ? darkMobile : lightMobile;
-  const isMobile = useMediaQuery(`(max-width: ${theme.breakpoints.tablet}px)`);
+  const resolvedTheme = ui.resolvedTheme === "dark" ? dark : light;
+  const resolvedMobileTheme =
+    ui.resolvedTheme === "dark" ? darkMobile : lightMobile;
+  const isMobile = useMediaQuery(
+    `(max-width: ${resolvedTheme.breakpoints.tablet}px)`
+  );
   const isPrinting = useMediaQuery("print");
+  const theme = isPrinting
+    ? light
+    : isMobile
+    ? resolvedMobileTheme
+    : resolvedTheme;
+
+  React.useEffect(() => {
+    window.dispatchEvent(new Event("theme-changed"));
+  }, [theme]);
 
   return (
-    <ThemeProvider theme={isPrinting ? light : isMobile ? mobileTheme : theme}>
+    <ThemeProvider theme={theme}>
       <>
         <GlobalStyles />
         {children}

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;
   }