feat: apply application's theme to MarkdownEditor component

Close #10

Author: flang

pom.xml

@@ -4,7 +4,7 @@
 
     <groupId>com.flowingcode.vaadin.addons</groupId>
     <artifactId>markdown-editor-addon</artifactId>
-    <version>1.1.1-SNAPSHOT</version>
+    <version>1.2.0-SNAPSHOT</version>
     <name>Markdown Editor Add-on</name>
     <description>Markdown Editor for Vaadin Flow</description>
     <url>https://www.flowingcode.com/en/open-source/</url>

src/main/java/com/flowingcode/vaadin/addons/markdown/BaseMarkdownComponent.java

@@ -19,8 +19,12 @@
  */
 package com.flowingcode.vaadin.addons.markdown;
 
+import com.vaadin.flow.component.AttachEvent;
+import com.vaadin.flow.component.DetachEvent;
 import com.vaadin.flow.component.HasSize;
+import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.dependency.CssImport;
+import com.vaadin.flow.component.dependency.JavaScript;
 import com.vaadin.flow.component.dependency.NpmPackage;
 import com.vaadin.flow.component.react.ReactAdapterComponent;
 import com.vaadin.flow.function.SerializableConsumer;
@@ -33,6 +37,7 @@
 @NpmPackage(value = "mermaid", version = "11.2.1")
 @NpmPackage(value = "@uiw/react-md-editor", version = "4.0.4")
 @NpmPackage(value = "dompurify", version = "3.1.6")
+@JavaScript("./connector.js")
 public class BaseMarkdownComponent extends ReactAdapterComponent implements HasSize {
 
   /**
@@ -115,5 +120,28 @@ public void setDataColorMode(DataColorMode mode) {
         break;
     }
   }
-  
+
+  private void runBeforeClientResponse(SerializableConsumer<UI> command) {
+    getElement().getNode().runWhenAttached(ui -> ui
+        .beforeClientResponse(this, context -> command.accept(ui)));
+  }
+
+  @Override
+  protected void onAttach(AttachEvent attachEvent) {
+    super.onAttach(attachEvent);
+
+    runBeforeClientResponse(ui -> ui.getPage().executeJs(
+        "window.Vaadin.Flow.fcMarkdownEditorConnector.observeThemeChange($0)",
+        getElement()));
+  }
+
+  @Override
+  protected void onDetach(DetachEvent detachEvent) {
+    super.onDetach(detachEvent);
+
+    getUI().ifPresent(ui -> ui.getPage().executeJs(
+        "window.Vaadin.Flow.fcMarkdownEditorConnector.unobserveThemeChange($0)",
+        this.getElement()));
+  }
+
 }

src/main/resources/META-INF/resources/frontend/connector.js

@@ -0,0 +1,74 @@
+/*-
+ * #%L
+ * Markdown Editor Add-on
+ * %%
+ * Copyright (C) 2024 Flowing Code
+ * %%
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * 
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ * 
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * #L%
+ */
+(function() {
+
+	window.Vaadin.Flow.fcMarkdownEditorConnector = {
+		observeThemeChange: markDownEditor => {
+
+			// Check whether the connector was already initialized for markDownEditor
+			if (markDownEditor.$connector) {
+				return;
+			}
+
+			markDownEditor.$connector = {};
+
+			// Get theme from html element when using Vaadin's @Theme annotation
+			const mainTheme = document.documentElement.getAttribute('theme');
+			if (['light', 'dark'].includes(mainTheme)) {
+				markDownEditor.setAttribute('data-color-mode', mainTheme);
+			} else {
+				// Listen for theme changes in body element otherwise
+				
+				// select the node that will be observed for mutations
+				const targetNode = document.body;
+
+				// options for the observer (which mutations to observe)
+				const config = { attributes: true };
+
+				// callback function to execute when mutations are observed
+				const callback = (mutationList, observer) => {
+					for (const mutation of mutationList) {
+						if (mutation.type === 'attributes' && mutation.attributeName === 'theme') {
+							const themeName = targetNode.attributes.getNamedItem(mutation.attributeName)?.value;
+							if (['light', 'dark'].includes(themeName)) {
+								markDownEditor.setAttribute('data-color-mode', themeName);
+							} else {
+								markDownEditor.removeAttribute('data-color-mode');
+							}
+						}
+					}
+				};
+
+				// create an observer instance linked to the callback function
+				markDownEditor.$connector.themeChangeObserver = new MutationObserver(callback);
+
+				// start observing the target node for configured mutations
+				markDownEditor.$connector.themeChangeObserver.observe(targetNode, config);
+			}
+		},
+		unobserveThemeChange: markDownEditor => {
+			// stop observing the target node for configured mutations
+			if (markDownEditor.$connector.themeChangeObserver) {
+				markDownEditor.$connector.themeChangeObserver.disconnect();
+				markDownEditor.$connector.themeChangeObserver = null;
+			}
+		}
+	}
+})();

src/test/java/com/flowingcode/vaadin/addons/markdown/MarkdownEditorDemo.java

@@ -21,13 +21,15 @@
 
 import com.flowingcode.vaadin.addons.demo.DemoSource;
 import com.flowingcode.vaadin.addons.markdown.BaseMarkdownComponent.DataColorMode;
+import com.vaadin.flow.component.UI;
 import com.vaadin.flow.component.button.Button;
 import com.vaadin.flow.component.combobox.ComboBox;
 import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.router.PageTitle;
 import com.vaadin.flow.router.Route;
+import com.vaadin.flow.theme.lumo.Lumo;
 
 @DemoSource
 @PageTitle("Markdown Editor Demo")
@@ -47,15 +49,19 @@ public MarkdownEditorDemo() {
     cb.setLabel("Color mode");
     cb.setValue("Light");
     cb.addValueChangeListener(ev->{
+      var themeList = UI.getCurrent().getElement().getThemeList();
       switch(ev.getValue()) {
         case "Dark":
-          mde.setDataColorMode(DataColorMode.DARK);
+          themeList.remove(Lumo.LIGHT);
+          themeList.add(Lumo.DARK);
           break;
         case "Light":
-          mde.setDataColorMode(DataColorMode.LIGHT);
+          themeList.remove(Lumo.DARK);
+          themeList.add(Lumo.LIGHT);
           break;
         case "Automatic":
-          mde.setDataColorMode(DataColorMode.AUTO);
+          themeList.remove(Lumo.DARK);
+          themeList.remove(Lumo.LIGHT);
           break;
         default:
           break;