From 1bb57bf15ada7e2b54480b907a27de5453417da1 Mon Sep 17 00:00:00 2001
From: Tom Moor <tom.moor@gmail.com>
Date: Sat, 5 Feb 2022 15:48:17 -0800
Subject: [PATCH] fix: Theme changes do not propagate to custom editor
 components in realtime

see TODO in #3031
---
 app/components/Theme.tsx                | 20 ++++++++++++++++----
 app/editor/components/ComponentView.tsx |  6 ++++--
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/components/Theme.tsx b/app/components/Theme.tsx
index 424d099a7..eb85af31b 100644
--- a/app/components/Theme.tsx
+++ b/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}
diff --git a/app/editor/components/ComponentView.tsx b/app/editor/components/ComponentView.tsx
index 09bc212d1..7e21f7f62 100644
--- a/app/editor/components/ComponentView.tsx
+++ b/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;
   }