fix(dom): Hyperlinks are overridden when rendered after Paragraph

Cargo.toml

@@ -13,20 +13,7 @@ include = ["src/**/*", "Cargo.*", "LICENSE", "README.md", "CHANGELOG.md"]
 edition = "2021"
 
 [dependencies]
-web-sys = { version = "0.3.77", features = [
-    'Document',
-    'Element',
-    'HtmlElement',
-    'Navigator',
-    'Node',
-    'Window',
-    'Screen',
-    'console',
-    'KeyboardEvent',
-    'CanvasRenderingContext2d',
-    'HtmlCanvasElement',
-    'Location',
-] }
+web-sys = { version = "0.3.77", features = ["Document", "Element", "HtmlElement", "Navigator", "Node", "Window", "Screen", "console", "KeyboardEvent", "CanvasRenderingContext2d", "HtmlCanvasElement", "Location", "HtmlCollection"] }
 compact_str = "0.9.0"
 ratatui = { version = "0.29", default-features = false, features = ["all-widgets"] }
 console_error_panic_hook = "0.1.7"

src/backend/dom.rs

@@ -196,18 +196,71 @@ impl DomBackend {
     /// Compare the current buffer to the previous buffer and updates the grid
     /// accordingly.
     fn update_grid(&mut self) -> Result<(), Error> {
-        for (y, line) in self.buffer.iter().enumerate() {
-            for (x, cell) in line.iter().enumerate() {
-                if cell.modifier.contains(HYPERLINK_MODIFIER) {
-                    continue;
+        for y in 0..self.buffer.len() {
+            // Check if line needs rebuilding (any hyperlink changes)
+            let needs_rebuild = (0..self.buffer[y].len()).any(|x| {
+                let old_cell = &self.prev_buffer[y][x];
+                let new_cell = &self.buffer[y][x];
+                new_cell != old_cell && (
+                    new_cell.modifier.contains(HYPERLINK_MODIFIER) ||
+                        old_cell.modifier.contains(HYPERLINK_MODIFIER)
+                )
+            });
+
+            self.update_line(y, needs_rebuild)?;
+        }
+
+        Ok(())
+    }
+
+    /// Updates a single line of the grid, either by completely rebuilding it
+    /// or by updating only the changed cells.
+    fn update_line(&mut self, y: usize, needs_rebuild: bool) -> Result<(), Error> {
+        let line = &self.buffer[y];
+        let pre = self.grid.children().item(y as u32).ok_or(Error::UnableToRetrieveChildElement)?;
+
+        // Rebuilding required when there is Hyperlink in the line
+        if needs_rebuild {
+            // Rebuild entire line
+            pre.set_inner_html("");
+
+            let mut x = 0;
+            while x < line.len() {
+                if line[x].modifier.contains(HYPERLINK_MODIFIER) {
+                    // Handle hyperlink group
+                    let start_x = x;
+                    while x + 1 < line.len() && line[x + 1].modifier.contains(HYPERLINK_MODIFIER) {
+                        x += 1;
+                    }
+
+                    let hyperlink_cells = &line[start_x..=x];
+                    let anchor = create_anchor(&self.document, hyperlink_cells)?;
+
+                    for i in start_x..=x {
+                        let span = create_span(&self.document, &line[i])?;
+                        self.cells[y * line.len() + i] = span.clone();
+                        anchor.append_child(&span)?;
+                    }
+                    pre.append_child(&anchor)?;
+                } else {
+                    // Handle regular cell
+                    let span = create_span(&self.document, &line[x])?;
+                    self.cells[y * line.len() + x] = span.clone();
+                    pre.append_child(&span)?;
                 }
-                if cell != &self.prev_buffer[y][x] {
-                    let elem = self.cells[y * self.buffer[0].len() + x].clone();
-                    elem.set_inner_html(cell.symbol());
-                    elem.set_attribute("style", &get_cell_style_as_css(cell))?;
+                x += 1;
+            }
+        } else {
+            // Just update changed cells directly
+            for x in 0..line.len() {
+                if self.buffer[y][x] != self.prev_buffer[y][x] {
+                    let span = &self.cells[y * line.len() + x];
+                    span.set_inner_html(self.buffer[y][x].symbol());
+                    span.set_attribute("style", &get_cell_style_as_css(&self.buffer[y][x]))?;
                 }
             }
         }
+
         Ok(())
     }
 }

src/error.rs

@@ -21,6 +21,12 @@ pub enum Error {
     #[error("Unable to retrieve body")]
     UnableToRetrieveBody,
 
+    /// Unable to retrieve child element.
+    ///
+    /// This error occurs when `Element.children().item(index)` returns `None`.
+    #[error("Unable to retrieve child element")]
+    UnableToRetrieveChildElement,
+
     /// Unable to retrieve canvas context.
     ///
     /// This error occurs when `canvas.get_context_with_context_options("2d")`