Improve HTMLEditor sample

- Use global bg/fg colors and font
- Fix toolbar icons with explanation
- Support switching between themes

sampler/src/main/java/atlantafx/sampler/page/components/BreadcrumbsPage.java

@@ -103,10 +103,4 @@ public class BreadcrumbsPage extends AbstractPage {
         }
         return current;
     }
-
-    @Override
-    protected double computePrefHeight(double width) {
-        System.out.println("pref height" + super.computePrefHeight(width));
-        return super.computePrefHeight(width);
-    }
 }

sampler/src/main/java/atlantafx/sampler/page/components/HTMLEditorPage.java

@@ -1,9 +1,16 @@
 /* SPDX-License-Identifier: MIT */
 package atlantafx.sampler.page.components;
 
-import atlantafx.base.theme.Styles;
+import atlantafx.base.controls.ToggleSwitch;
+import atlantafx.base.theme.Theme;
+import atlantafx.sampler.event.DefaultEventBus;
+import atlantafx.sampler.event.ThemeEvent;
 import atlantafx.sampler.page.AbstractPage;
 import atlantafx.sampler.page.SampleBlock;
+import atlantafx.sampler.theme.HighlightJSTheme;
+import atlantafx.sampler.theme.ThemeManager;
+import javafx.css.PseudoClass;
+import javafx.geometry.Pos;
 import javafx.scene.layout.VBox;
 import javafx.scene.text.Text;
 import javafx.scene.text.TextFlow;
@@ -13,29 +20,79 @@ import static atlantafx.sampler.page.SampleBlock.BLOCK_VGAP;
 
 public class HTMLEditorPage extends AbstractPage {
 
+    private static final PseudoClass USE_LOCAL_URL = PseudoClass.getPseudoClass("use-local-url");
+
     public static final String NAME = "HTMLEditor";
 
     @Override
     public String getName() { return NAME; }
 
+    private HTMLEditor editor = createEditor();
+
     public HTMLEditorPage() {
         super();
-        setUserContent(new VBox(
-                editorSample()
-        ));
+
+        setUserContent(new VBox(editorSample()));
+        editor.requestFocus();
+
+        // update editor colors on app theme change
+        DefaultEventBus.getInstance().subscribe(ThemeEvent.class, e -> {
+            if (ThemeManager.getInstance().getTheme() != null) {
+                editor.setHtmlText(generateContent());
+                editor.requestFocus();
+            }
+        });
     }
 
     private SampleBlock editorSample() {
         var description = new Text(
                 "HTMLEditor toolbar buttons use images from 'com/sun/javafx/scene/control/skin/modena'. " +
-                "In opposite, since AtlantaFX themes are also distributed as single CSS files, it contains no images. " +
-                "Unfortunately reusing Modena resources isn't possible, because the package isn't opened in OpenJFX 'module-info'."
+                        "In opposite, since AtlantaFX themes are also distributed as single CSS files, it contains no images. " +
+                        "Unfortunately reusing Modena resources isn't possible, because the package isn't opened in OpenJFX 'module-info'."
         );
-        description.getStyleClass().addAll(Styles.TEXT, Styles.WARNING);
 
+        var fixToggle = new ToggleSwitch("Apply fix");
+
+        var content = new VBox(BLOCK_VGAP, editor, new TextFlow(description), fixToggle);
+        content.setAlignment(Pos.CENTER);
+
+        fixToggle.selectedProperty().addListener((obs, old, val) -> {
+            // toolbar icons can't be changed back without creating new editor instance #javafx-bug
+            try {
+                editor = createEditor();
+                editor.pseudoClassStateChanged(USE_LOCAL_URL, val);
+                content.getChildren().set(0, editor);
+                editor.requestFocus();
+            } catch (Exception ignored) {
+                // hush internal HTML editor errors, because everything
+                // we do here is ugly hacks around legacy control anyway
+            }
+        });
+
+        return new SampleBlock("Playground", content);
+    }
+
+    private HTMLEditor createEditor() {
         var editor = new HTMLEditor();
         editor.setPrefHeight(400);
-        editor.setHtmlText(String.join("<br/><br/>", FAKER.lorem().paragraphs(10)));
-        return new SampleBlock("Playground", new VBox(BLOCK_VGAP, new TextFlow(description), editor));
+        editor.setHtmlText(generateContent());
+        return editor;
+    }
+
+    private String generateContent() {
+        var tm = ThemeManager.getInstance();
+        Theme samplerTheme = tm.getTheme();
+        HighlightJSTheme hlTheme = tm.getMatchingSourceCodeHighlightTheme(samplerTheme);
+        return "<!DOCTYPE html>" +
+                "<html>" +
+                "<body style=\"" +
+                "background-color:" + hlTheme.getBackground() + ";" +
+                "color:" + hlTheme.getForeground() + ";" +
+                "font-family:" + tm.getFontFamily() + ";" +
+                "font-size:" + tm.getFontSize() + "px;" +
+                "\">" +
+                String.join("<br/><br/>", FAKER.lorem().paragraphs(10)) +
+                "</body>" +
+                "</html>";
     }
 }

sampler/src/main/java/atlantafx/sampler/theme/HighlightJSTheme.java

@@ -5,10 +5,12 @@ public class HighlightJSTheme {
 
     private final String css;
     private final String background;
+    private final String foreground;
 
-    public HighlightJSTheme(String css, String background) {
+    public HighlightJSTheme(String css, String background, String foreground) {
         this.css = css;
         this.background = background;
+        this.foreground = foreground;
     }
 
     public String getCss() {
@@ -19,29 +21,37 @@ public class HighlightJSTheme {
         return background;
     }
 
+    public String getForeground() {
+        return foreground;
+    }
+
     public static HighlightJSTheme githubLight() {
         var css = ".hljs{color:#24292e;background:#fff}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#d73a49}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#6f42c1}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#005cc5}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#032f62}.hljs-built_in,.hljs-symbol{color:#e36209}.hljs-code,.hljs-comment,.hljs-formula{color:#6a737d}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#22863a}.hljs-subst{color:#24292e}.hljs-section{color:#005cc5;font-weight:700}.hljs-bullet{color:#735c0f}.hljs-emphasis{color:#24292e;font-style:italic}.hljs-strong{color:#24292e;font-weight:700}.hljs-addition{color:#22863a;background-color:#f0fff4}.hljs-deletion{color:#b31d28;background-color:#ffeef0}";
         var bg = "#fff";
-        return new HighlightJSTheme(css, bg);
+        var fg = "#24292f";
+        return new HighlightJSTheme(css, bg, fg);
     }
 
     public static HighlightJSTheme githubDark() {
         var css = ".hljs{color:#c9d1d9;background:#0d1117}.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-template-tag,.hljs-template-variable,.hljs-type,.hljs-variable.language_{color:#ff7b72}.hljs-title,.hljs-title.class_,.hljs-title.class_.inherited__,.hljs-title.function_{color:#d2a8ff}.hljs-attr,.hljs-attribute,.hljs-literal,.hljs-meta,.hljs-number,.hljs-operator,.hljs-selector-attr,.hljs-selector-class,.hljs-selector-id,.hljs-variable{color:#79c0ff}.hljs-meta .hljs-string,.hljs-regexp,.hljs-string{color:#a5d6ff}.hljs-built_in,.hljs-symbol{color:#ffa657}.hljs-code,.hljs-comment,.hljs-formula{color:#8b949e}.hljs-name,.hljs-quote,.hljs-selector-pseudo,.hljs-selector-tag{color:#7ee787}.hljs-subst{color:#c9d1d9}.hljs-section{color:#1f6feb;font-weight:700}.hljs-bullet{color:#f2cc60}.hljs-emphasis{color:#c9d1d9;font-style:italic}.hljs-strong{color:#c9d1d9;font-weight:700}.hljs-addition{color:#aff5b4;background-color:#033a16}.hljs-deletion{color:#ffdcd7;background-color:#67060c}";
         var bg = "#0d1117";
-        return new HighlightJSTheme(css, bg);
+        var fg = "#f0f6fc";
+        return new HighlightJSTheme(css, bg, fg);
     }
 
     public static HighlightJSTheme nordLight() {
         // there's no Nord light theme,
         // below is "stackoverflow-light" theme with changed background
         var css = "*/.hljs{color:#2f3337;background:#f4f5f8}.hljs-subst{color:#2f3337}.hljs-comment{color:#656e77}.hljs-attr,.hljs-doctag,.hljs-keyword,.hljs-meta .hljs-keyword,.hljs-section,.hljs-selector-tag{color:#015692}.hljs-attribute{color:#803378}.hljs-name,.hljs-number,.hljs-quote,.hljs-selector-id,.hljs-template-tag,.hljs-type{color:#b75501}.hljs-selector-class{color:#015692}.hljs-link,.hljs-regexp,.hljs-selector-attr,.hljs-string,.hljs-symbol,.hljs-template-variable,.hljs-variable{color:#54790d}.hljs-meta,.hljs-selector-pseudo{color:#015692}.hljs-built_in,.hljs-literal,.hljs-title{color:#b75501}.hljs-bullet,.hljs-code{color:#535a60}.hljs-meta .hljs-string{color:#54790d}.hljs-deletion{color:#c02d2e}.hljs-addition{color:#2f6f44}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}";
-        var bg = "#f4f5f8";
-        return new HighlightJSTheme(css, bg);
+        var bg = "#fafafc";
+        var fg = "#2E3440";
+        return new HighlightJSTheme(css, bg, fg);
     }
 
     public static HighlightJSTheme nordDark() {
         var css = "pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{background:#2e3440}.hljs,.hljs-subst{color:#d8dee9}.hljs-selector-tag{color:#81a1c1}.hljs-selector-id{color:#8fbcbb;font-weight:700}.hljs-selector-attr,.hljs-selector-class{color:#8fbcbb}.hljs-property,.hljs-selector-pseudo{color:#88c0d0}.hljs-addition{background-color:rgba(163,190,140,.5)}.hljs-deletion{background-color:rgba(191,97,106,.5)}.hljs-built_in,.hljs-class,.hljs-type{color:#8fbcbb}.hljs-function,.hljs-function>.hljs-title,.hljs-title.hljs-function{color:#88c0d0}.hljs-keyword,.hljs-literal,.hljs-symbol{color:#81a1c1}.hljs-number{color:#b48ead}.hljs-regexp{color:#ebcb8b}.hljs-string{color:#a3be8c}.hljs-title{color:#8fbcbb}.hljs-params{color:#d8dee9}.hljs-bullet{color:#81a1c1}.hljs-code{color:#8fbcbb}.hljs-emphasis{font-style:italic}.hljs-formula{color:#8fbcbb}.hljs-strong{font-weight:700}.hljs-link:hover{text-decoration:underline}.hljs-comment,.hljs-quote{color:#4c566a}.hljs-doctag{color:#8fbcbb}.hljs-meta,.hljs-meta .hljs-keyword{color:#5e81ac}.hljs-meta .hljs-string{color:#a3be8c}.hljs-attr{color:#8fbcbb}.hljs-attribute{color:#d8dee9}.hljs-name{color:#81a1c1}.hljs-section{color:#88c0d0}.hljs-tag{color:#81a1c1}.hljs-template-variable,.hljs-variable{color:#d8dee9}.hljs-template-tag{color:#5e81ac}.language-abnf .hljs-attribute{color:#88c0d0}.language-abnf .hljs-symbol{color:#ebcb8b}.language-apache .hljs-attribute{color:#88c0d0}.language-apache .hljs-section{color:#81a1c1}.language-arduino .hljs-built_in{color:#88c0d0}.language-aspectj .hljs-meta{color:#d08770}.language-aspectj>.hljs-title{color:#88c0d0}.language-bnf .hljs-attribute{color:#8fbcbb}.language-clojure .hljs-name{color:#88c0d0}.language-clojure .hljs-symbol{color:#ebcb8b}.language-coq .hljs-built_in{color:#88c0d0}.language-cpp .hljs-meta .hljs-string{color:#8fbcbb}.language-css .hljs-built_in{color:#88c0d0}.language-css .hljs-keyword{color:#d08770}.language-diff .hljs-meta,.language-ebnf .hljs-attribute{color:#8fbcbb}.language-glsl .hljs-built_in{color:#88c0d0}.language-groovy .hljs-meta:not(:first-child),.language-haxe .hljs-meta,.language-java .hljs-meta{color:#d08770}.language-ldif .hljs-attribute{color:#8fbcbb}.language-lisp .hljs-name,.language-lua .hljs-built_in,.language-moonscript .hljs-built_in,.language-nginx .hljs-attribute{color:#88c0d0}.language-nginx .hljs-section{color:#5e81ac}.language-pf .hljs-built_in,.language-processing .hljs-built_in{color:#88c0d0}.language-scss .hljs-keyword,.language-stylus .hljs-keyword{color:#81a1c1}.language-swift .hljs-meta{color:#d08770}.language-vim .hljs-built_in{color:#88c0d0;font-style:italic}.language-yaml .hljs-meta{color:#d08770}";
         var bg = "#2E3440";
-        return new HighlightJSTheme(css, bg);
+        var fg = "#ECEFF4";
+        return new HighlightJSTheme(css, bg, fg);
     }
 }

sampler/src/main/java/module-info.java

@@ -36,4 +36,5 @@ module atlantafx.sampler {
     opens atlantafx.sampler.assets;
     opens atlantafx.sampler.assets.highlightjs;
     opens atlantafx.sampler.assets.styles;
+    opens atlantafx.sampler.images.modena;
 }

sampler/src/main/resources/assets/styles/scss/components/_html-editor-fix.scss

@@ -0,0 +1,183 @@
+// SPDX-License-Identifier: MIT
+
+.html-editor:use-local-url {
+  .color-picker.html-editor-foreground {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Text-Color.png");
+  }
+
+  .color-picker.html-editor-background {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Background-Color.png");
+  }
+
+  .html-editor-cut {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Cut.png");
+  }
+
+  .html-editor-copy {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Copy.png");
+  }
+
+  .html-editor-paste {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Paste.png");
+  }
+
+  .html-editor-align-left {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Left.png");
+  }
+
+  .html-editor-align-center {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Center.png");
+  }
+
+  .html-editor-align-right {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Right.png");
+  }
+
+  .html-editor-align-justify {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Justify.png");
+  }
+
+  .html-editor-outdent {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Outdent.png");
+  }
+
+  .html-editor-outdent:dir(rtl) {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Outdent-rtl.png");
+  }
+
+  .html-editor-indent {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Indent.png");
+  }
+
+  .html-editor-indent:dir(rtl) {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Indent-rtl.png");
+  }
+
+  .html-editor-bullets {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Bullets.png");
+  }
+
+  .html-editor-bullets:dir(rtl) {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Bullets-rtl.png");
+  }
+
+  .html-editor-numbers {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Numbered.png");
+  }
+
+  .html-editor-numbers:dir(rtl) {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Numbered-rtl.png");
+  }
+
+  .html-editor-bold {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Bold.png");
+  }
+
+  .html-editor-italic {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Italic.png");
+  }
+
+  .html-editor-underline {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Underline.png");
+  }
+
+  .html-editor-strike {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Strikethrough.png");
+  }
+
+  .html-editor-hr {
+    -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Break.png");
+  }
+}
+
+.root:dark {
+  .html-editor:use-local-url {
+    .color-picker.html-editor-foreground {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Text-Color-White.png");
+    }
+
+    .color-picker.html-editor-background {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Background-Color-White.png");
+    }
+
+    .html-editor-cut {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Cut-White.png");
+    }
+
+    .html-editor-copy {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Copy-White.png");
+    }
+
+    .html-editor-paste {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Paste-White.png");
+    }
+
+    .html-editor-align-left {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Left-White.png");
+    }
+
+    .html-editor-align-center {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Center-White.png");
+    }
+
+    .html-editor-align-right {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Right-White.png");
+    }
+
+    .html-editor-align-justify {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Justify-White.png");
+    }
+
+    .html-editor-outdent {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Outdent-White.png");
+    }
+
+    .html-editor-outdent:dir(rtl) {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Outdent-White-rtl.png");
+    }
+
+    .html-editor-indent {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Indent-White-White.png");
+    }
+
+    .html-editor-indent:dir(rtl) {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Indent-White-rtl.png");
+    }
+
+    .html-editor-bullets {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Bullets-White.png");
+    }
+
+    .html-editor-bullets:dir(rtl) {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Bullets-White-rtl.png");
+    }
+
+    .html-editor-numbers {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Numbered-White.png");
+    }
+
+    .html-editor-numbers:dir(rtl) {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Numbered-White-rtl.png");
+    }
+
+    .html-editor-bold {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Bold-White.png");
+    }
+
+    .html-editor-italic {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Italic-White.png");
+    }
+
+    .html-editor-underline {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Underline-White.png");
+    }
+
+    .html-editor-strike {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Strikethrough-White.png");
+    }
+
+    .html-editor-hr {
+      -fx-graphic: url("/atlantafx/sampler/images/modena/HTMLEditor-Break-White.png");
+    }
+  }
+}

sampler/src/main/resources/assets/styles/scss/components/_index.scss

@@ -0,0 +1,3 @@
+// SPDX-License-Identifier: MIT
+
+@use "html-editor-fix"

sampler/src/main/resources/assets/styles/scss/index.scss

@@ -3,3 +3,4 @@
 @use "general";
 @use "layout";
 @use "widgets";
+@use "components"