From c640998276cfa10b64398e4415701a3fdcbc260d Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Wed, 10 Apr 2024 00:51:51 -0700
Subject: [PATCH 1/3] More rich Html message support: color, themeing for
 blocks, etc.

Fixed underline/strikethrough and quote block / code block formatting.

Support parsing of `data-mx-*` attributes (for `<font>`/`<span>` tags),
but they're not fully displayed correctly just yet.
---
 Cargo.lock                      |  60 +++++++++---------
 src/home/room_screen.rs         |   3 +-
 src/shared/html_or_plaintext.rs | 108 +++++++++++++++++++++++++++++++-
 src/shared/styles.rs            |   1 -
 4 files changed, 137 insertions(+), 35 deletions(-)

diff --git a/Cargo.lock b/Cargo.lock
index efc72441..b0c44b07 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -1651,7 +1651,7 @@ checksum = "af150ab688ff2122fcef229be89cb50dd66af9e01a4ff320cc137eecc9bacc38"
 [[package]]
 name = "jni-sys"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 
 [[package]]
 name = "js-sys"
@@ -1833,7 +1833,7 @@ dependencies = [
 [[package]]
 name = "makepad-derive-live"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-proc-macro",
@@ -1842,7 +1842,7 @@ dependencies = [
 [[package]]
 name = "makepad-derive-wasm-bridge"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -1850,7 +1850,7 @@ dependencies = [
 [[package]]
 name = "makepad-derive-widget"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-live-id",
  "makepad-micro-proc-macro",
@@ -1859,7 +1859,7 @@ dependencies = [
 [[package]]
 name = "makepad-draw"
 version = "0.6.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "ab_glyph_rasterizer",
  "makepad-html",
@@ -1873,17 +1873,17 @@ dependencies = [
 [[package]]
 name = "makepad-futures"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 
 [[package]]
 name = "makepad-futures-legacy"
 version = "0.7.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 
 [[package]]
 name = "makepad-html"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-live-id",
 ]
@@ -1891,12 +1891,12 @@ dependencies = [
 [[package]]
 name = "makepad-http"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 
 [[package]]
 name = "makepad-live-compiler"
 version = "0.5.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-derive-live",
  "makepad-live-tokenizer",
@@ -1906,7 +1906,7 @@ dependencies = [
 [[package]]
 name = "makepad-live-id"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-live-id-macros",
 ]
@@ -1914,7 +1914,7 @@ dependencies = [
 [[package]]
 name = "makepad-live-id-macros"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -1922,7 +1922,7 @@ dependencies = [
 [[package]]
 name = "makepad-live-tokenizer"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-live-id",
  "makepad-math",
@@ -1932,7 +1932,7 @@ dependencies = [
 [[package]]
 name = "makepad-markdown"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-live-id",
 ]
@@ -1940,17 +1940,17 @@ dependencies = [
 [[package]]
 name = "makepad-math"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 
 [[package]]
 name = "makepad-micro-proc-macro"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 
 [[package]]
 name = "makepad-micro-serde"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-micro-serde-derive",
 ]
@@ -1958,7 +1958,7 @@ dependencies = [
 [[package]]
 name = "makepad-micro-serde-derive"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-micro-proc-macro",
 ]
@@ -1966,12 +1966,12 @@ dependencies = [
 [[package]]
 name = "makepad-objc-sys"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 
 [[package]]
 name = "makepad-platform"
 version = "0.6.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "jni-sys",
  "makepad-futures",
@@ -1987,7 +1987,7 @@ dependencies = [
 [[package]]
 name = "makepad-shader-compiler"
 version = "0.5.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-live-compiler",
 ]
@@ -1995,7 +1995,7 @@ dependencies = [
 [[package]]
 name = "makepad-vector"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "ttf-parser",
 ]
@@ -2003,7 +2003,7 @@ dependencies = [
 [[package]]
 name = "makepad-wasm-bridge"
 version = "0.4.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-derive-wasm-bridge",
  "makepad-live-id",
@@ -2012,7 +2012,7 @@ dependencies = [
 [[package]]
 name = "makepad-widgets"
 version = "0.6.0"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-derive-widget",
  "makepad-draw",
@@ -2025,7 +2025,7 @@ dependencies = [
 [[package]]
 name = "makepad-windows"
 version = "0.51.1"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "windows-core 0.51.1 (git+https://github.com/makepad/makepad?branch=rik)",
  "windows-targets",
@@ -2034,7 +2034,7 @@ dependencies = [
 [[package]]
 name = "makepad-zune-core"
 version = "0.2.14"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "bitflags 2.4.1",
 ]
@@ -2042,7 +2042,7 @@ dependencies = [
 [[package]]
 name = "makepad-zune-inflate"
 version = "0.2.54"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "simd-adler32",
 ]
@@ -2050,7 +2050,7 @@ dependencies = [
 [[package]]
 name = "makepad-zune-jpeg"
 version = "0.3.17"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-zune-core",
 ]
@@ -2058,7 +2058,7 @@ dependencies = [
 [[package]]
 name = "makepad-zune-png"
 version = "0.2.1"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "makepad-zune-core",
  "makepad-zune-inflate",
@@ -4756,7 +4756,7 @@ dependencies = [
 [[package]]
 name = "windows-core"
 version = "0.51.1"
-source = "git+https://github.com/makepad/makepad?branch=rik#9dc3f2dbd0d2b97df08eea07e270a3a055c63fe8"
+source = "git+https://github.com/makepad/makepad?branch=rik#4fcffef1ebef737baee7dee885e8f349dde34669"
 dependencies = [
  "windows-targets",
 ]
diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 06172e3a..6612040d 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1080,7 +1080,8 @@ fn populate_message_view(
                 } else {
                     item.html_or_plaintext(id!(message)).show_plaintext(&text.body);
                 }
-                new_drawn_status.content_drawn = true;
+                // new_drawn_status.content_drawn = true;
+                new_drawn_status.content_drawn = false;
                 (item, false)
             }
         }
diff --git a/src/shared/html_or_plaintext.rs b/src/shared/html_or_plaintext.rs
index 9dab4327..b2495f53 100644
--- a/src/shared/html_or_plaintext.rs
+++ b/src/shared/html_or_plaintext.rs
@@ -1,6 +1,6 @@
 //! A `HtmlOrPlaintext` view can display either plaintext or rich HTML content.
 
-use makepad_widgets::*;
+use makepad_widgets::{makepad_html::HtmlDoc, *};
 
 live_design! {
     import makepad_draw::shader::std::*;
@@ -9,8 +9,27 @@ live_design! {
     import makepad_widgets::theme_desktop_dark::*;
     import crate::shared::styles::*;
 
+    // These match the `MESSAGE_*` styles defined in `styles.rs`.
+    // For some reason, they're not the same. That's TBD.
     HTML_LINE_SPACING = 8.0
     HTML_TEXT_HEIGHT_FACTOR = 1.3
+
+
+    // This is an HTML subwidget used to handle `<font>` and `<span>` tags,
+    // specifically: foreground text color, background color, and spoilers.
+    MatrixHtmlSpan = {{MatrixHtmlSpan}}<Label> {
+        width: Fit,
+        height: Fit,
+
+        draw_text: {
+            wrap: Word,
+            color: (MESSAGE_TEXT_COLOR),
+            text_style: <MESSAGE_TEXT_STYLE> { height_factor: (HTML_TEXT_HEIGHT_FACTOR), line_spacing: (HTML_LINE_SPACING) },
+        }
+        text: "MatrixHtmlSpan placeholder",
+
+    }
+
     // A centralized widget where we define styles and custom elements for HTML
     // message content. This is a wrapper around Makepad's built-in `Html` widget.
     RobrixHtml = <Html> {
@@ -22,9 +41,20 @@ live_design! {
         draw_italic:      { color: (MESSAGE_TEXT_COLOR), text_style: { height_factor: (HTML_TEXT_HEIGHT_FACTOR), line_spacing: (HTML_LINE_SPACING) } }
         draw_bold:        { color: (MESSAGE_TEXT_COLOR), text_style: { height_factor: (HTML_TEXT_HEIGHT_FACTOR), line_spacing: (HTML_LINE_SPACING) } }
         draw_bold_italic: { color: (MESSAGE_TEXT_COLOR), text_style: { height_factor: (HTML_TEXT_HEIGHT_FACTOR), line_spacing: (HTML_LINE_SPACING) } }
-        draw_fixed:       {                              text_style: { height_factor: (HTML_TEXT_HEIGHT_FACTOR), line_spacing: (HTML_LINE_SPACING) } }
-
+        draw_fixed:       { color: (MESSAGE_TEXT_COLOR), text_style: { height_factor: (HTML_TEXT_HEIGHT_FACTOR), line_spacing: (HTML_LINE_SPACING) } }
+        draw_block:{ 
+            line_color: (MESSAGE_TEXT_COLOR)
+            sep_color: (MESSAGE_TEXT_COLOR)
+            quote_bg_color: (#EDEDED)
+            quote_fg_color: (MESSAGE_TEXT_COLOR)
+            block_color: (#EDEDED)
+            code_color: (#EDEDED)
+        }
         list_item_layout: { line_spacing: 5.0, padding: {top: 1.0, bottom: 1.0}, }
+
+        font = <MatrixHtmlSpan> { }
+        span = <MatrixHtmlSpan> { }
+
         body: "[<i> HTML message placeholder</i>]",
     }
 
@@ -65,6 +95,78 @@ live_design! {
 }
 
 
+/// A custom HTML subwidget used to handle `<font>` and `<span>` tags,
+/// specifically: foreground text color, background text color, and spoilers.
+#[derive(Live, Widget)]
+pub struct MatrixHtmlSpan {
+    /// The URL of the image to display.
+    #[deref] ll: Label,
+    /// Background color: the `data-mx-bg-color` attribute.
+    #[rust] bg_color: Option<Vec4>,
+    /// Foreground (text) color: the `data-mx-color` or `color` attributes.
+    #[rust] fg_color: Option<Vec4>,
+    /// There are three possible spoiler variants:
+    /// 1. `None`: no spoiler attribute was present at all.
+    /// 2. `Some(empty)`: there was a spoiler but no reason was given.
+    /// 3. `Some(reason)`: there was a spoiler with a reason given for it being hidden.
+    #[rust] spoiler: Option<String>,
+}
+
+impl Widget for MatrixHtmlSpan {
+    fn handle_event(&mut self, cx: &mut Cx, event: &Event, scope: &mut Scope) {
+        self.ll.handle_event(cx, event, scope);
+    }
+    
+    fn draw_walk(&mut self, cx: &mut Cx2d, scope: &mut Scope, walk: Walk) -> DrawStep {
+        self.ll.draw_walk(cx, scope, walk)
+    }
+
+    fn set_text(&mut self, v: &str) {
+        self.ll.set_text(v);
+    }
+}
+
+impl LiveHook for MatrixHtmlSpan {
+    // After an MatrixHtmlSpan instance has been instantiated ("applied"),
+    // populate its struct fields from the `<span>` tag's attributes.
+    fn after_apply(&mut self, cx: &mut Cx, apply: &mut Apply, _index: usize, _nodes: &[LiveNode]) {
+        // The attributes we care about in `<font>` and `<span>` tags are:
+        // * data-mx-bg-color, data-mx-color, data-mx-spoiler, color.
+
+        if let ApplyFrom::NewFromDoc {..} = apply.from {
+            if let Some(scope) = apply.scope.as_ref() {
+                if let Some(doc) = scope.props.get::<HtmlDoc>() {
+                    let mut walker = doc.new_walker_with_index(scope.index + 1);
+                    while let Some((lc, attr)) = walker.while_attr_lc(){
+                        let attr = attr.trim_matches(&['"', '\'']);
+                        match lc {
+                            live_id!(color)
+                            | live_id!(data-mx-color) => self.fg_color = Vec4::from_hex_str(attr).ok(),
+                            live_id!(data-mx-bg-color) => self.bg_color = Vec4::from_hex_str(attr).ok(),
+                            live_id!(data-mx-spoiler) => self.spoiler = Some(attr.into()),
+                            _ => ()
+                        }
+                    }
+
+                    // Set the Label's foreground text color and background color
+                    if let Some(fg_color) = self.fg_color {
+                        self.ll.apply_over(cx, live!{ draw_text: { color: (fg_color) } });
+                    };
+                    if let Some(bg_color) = self.bg_color {
+                        self.ll.apply_over(cx, live!{ draw_bg: { color: (bg_color) } });
+                    };
+
+                    // TODO: need to handle label events to handle the spoiler, so we can toggle it upon click.
+                }
+            } else {
+                warning!("MatrixHtmlSpan::after_apply(): scope not found, cannot set attributes.");
+            }
+        }
+    }
+}
+
+
+
 #[derive(LiveHook, Live, Widget)]
 pub struct HtmlOrPlaintext {
     #[deref] view: View,
diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index 4a45d7e7..1576cbed 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -25,7 +25,6 @@ live_design! {
         // height_factor: 1.5,
     }
 
-
     MESSAGE_FONT_SIZE = 12.0
     MESSAGE_TEXT_COLOR = #x777
     MESSAGE_TEXT_LINE_SPACING = 1.35

From 48d2711463ceabc28ab0f6b83458cb83b9dd2c3a Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Wed, 10 Apr 2024 00:57:35 -0700
Subject: [PATCH 2/3] undo errant change

---
 src/home/room_screen.rs | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/home/room_screen.rs b/src/home/room_screen.rs
index 6612040d..06172e3a 100644
--- a/src/home/room_screen.rs
+++ b/src/home/room_screen.rs
@@ -1080,8 +1080,7 @@ fn populate_message_view(
                 } else {
                     item.html_or_plaintext(id!(message)).show_plaintext(&text.body);
                 }
-                // new_drawn_status.content_drawn = true;
-                new_drawn_status.content_drawn = false;
+                new_drawn_status.content_drawn = true;
                 (item, false)
             }
         }

From 59665e78a677ac91a9b4b19996ac2294a09e737c Mon Sep 17 00:00:00 2001
From: Kevin Boos <kevinaboos@gmail.com>
Date: Wed, 10 Apr 2024 00:58:10 -0700
Subject: [PATCH 3/3] undo

---
 src/shared/styles.rs | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/shared/styles.rs b/src/shared/styles.rs
index 1576cbed..4a45d7e7 100644
--- a/src/shared/styles.rs
+++ b/src/shared/styles.rs
@@ -25,6 +25,7 @@ live_design! {
         // height_factor: 1.5,
     }
 
+
     MESSAGE_FONT_SIZE = 12.0
     MESSAGE_TEXT_COLOR = #x777
     MESSAGE_TEXT_LINE_SPACING = 1.35