feat: adds highlighting for hyperlinks on mouse hover (#41)

* Adds highlighting for hyperlinks on mouse hover

This adds support for a new configuration parameter that allows users to
set the color of the highlight that occurs when the mouse hovers over a
drawing element that has a hyperlink on it.

* Fixes items from code review

* Fixes color on README example config

* fix: bump version

---------

Co-authored-by: Jan Larwig <jan@larwig.com>

Author: mbheinen

README.md

@@ -71,11 +71,12 @@ Further options are:
 ```yaml
 plugins:
   - drawio:
-      toolbar: true  # control if hovering on a diagram shows a toolbar for zooming or not (default: true)
-      tooltips: true # control if tooltips will be shown (default: true)
-      edit: true     # control if edit button will be shown in the lightbox view (default: true)
-      border: 10     # increase or decrease the border / margin around your diagrams (default: 0)
-      darkmode: true # support darkmode. allows for automatic switching between dark and lightmode based on the theme toggle. (default: false)
+      toolbar: true        # control if hovering on a diagram shows a toolbar for zooming or not (default: true)
+      tooltips: true       # control if tooltips will be shown (default: true)
+      edit: true           # control if edit button will be shown in the lightbox view (default: true)
+      border: 10           # increase or decrease the border / margin around your diagrams (default: 0)
+      darkmode: true       # support darkmode. allows for automatic switching between dark and lightmode based on the theme toggle. (default: false)
+      highlight: "#0000FF" # color hyperlinks on mouse hover over (default: no color)
 ```
 
 ## Material Integration

examples/docs/configuration.md

@@ -33,6 +33,13 @@ plugins:
       # When activated the color scheme for your diagrams is automatically toggled
       # based on the selected theme. Supports classic mkdocs and mkdocs-material.
       darkmode: true 
+  
+      # Set the color of hyperlink highlighting
+      # When a diagram element has a hyperlink on it, the element is highlighted
+      # on mouse hover over to better indicate a hylerlink is present. This
+      # parameter controls the color of the highlight boarder. If omitted, no
+      # highlighting happens.
+      highlight: "#0000FF"
 ```
 ## HTML Attributes
 For each global configuration option you can also use the attribute in the diagram itself. This will override the global configuration. Here is an example:

examples/docs/tests/hyperlinks/hyperlink.drawio

@@ -0,0 +1,15 @@
+<mxfile host="Electron" agent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) draw.io/28.2.5 Chrome/138.0.7204.251 Electron/37.6.1 Safari/537.36" version="28.2.5">
+  <diagram name="Page-1" id="oQSh-LxvRU6CrudPoFx3">
+    <mxGraphModel dx="1042" dy="626" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+      <root>
+        <mxCell id="0" />
+        <mxCell id="1" parent="0" />
+        <UserObject label="I have a link!" link="https://github.com/tuunit/mkdocs-drawio" id="MJqBkFlVLDPoP-BwWEq9-1">
+          <mxCell style="rounded=0;whiteSpace=wrap;html=1;" vertex="1" parent="1">
+            <mxGeometry x="365" y="210" width="120" height="60" as="geometry" />
+          </mxCell>
+        </UserObject>
+      </root>
+    </mxGraphModel>
+  </diagram>
+</mxfile>

examples/docs/tests/hyperlinks/index.md

@@ -0,0 +1,6 @@
+# Hyperlinks
+
+## Example
+This is an example of a drawing that has a hyperlink on one of the symbols. It should highlight on mouse hover over with the color set by the `highlight` configuration setting.
+
+![](hyperlink.drawio)

examples/mkdocs.yml

@@ -16,6 +16,7 @@ nav:
       - Pagging: "tests/pagging/index.md"
       - External URL: "tests/external-url/index.md"
       - SVG Diagram: "tests/svg/index.md"
+      - Hyperlinks: "tests/hyperlinks/index.md"
 
 theme:
   name: material
@@ -49,6 +50,7 @@ plugins:
       edit: true
       border: 20
       darkmode: true
+      highlight: "#0000FF"
   - print-site
 
 repo_url: https://github.com/tuunit/mkdocs-drawio

mkdocs_drawio/plugin.py

@@ -29,6 +29,7 @@ class DrawioConfig(base.Config):
     border = c.Type(int, default=0)
     edit = c.Type(bool, default=True)
     darkmode = c.Type(bool, default=False)
+    highlight = c.Type(str, default="")
 
 
 class DrawioPlugin(BasePlugin[DrawioConfig]):
@@ -51,6 +52,7 @@ def render_drawio_diagrams(self, output_content, page):
             "border": self.config.border + 5,
             "resize": "1",
             "edit": "_blank" if self.config.edit else None,
+            "highlight": self.config.highlight if self.config.highlight else None,
         }
 
         # search for images using drawio extension

pyproject.toml

@@ -1,6 +1,6 @@
 [tool.poetry]
 name = "mkdocs-drawio"
-version = "1.11.3"
+version = "1.12.0"
 description = "MkDocs plugin for embedding Drawio files"
 authors = [
     "Jan Larwig <jan@larwig.com>",