Upload folder using huggingface_hub

README.md

@@ -45,39 +45,8 @@ Here are some important points:
 3. Third item with `inline code`
 4. Fourth item containing [a link](https://example.com)
 
-#### Unordered Lists
-- Bullet point one
-- Bullet point two with **bold text**
-- Final bullet point
 
-### Code Block Example
-```python
-def hello_world():
-    print("Hello, World!")
-    return "success"
-```
-
-### Tables
-| Column 1 | Column 2 | Column 3 |
-|----------|----------|----------|
-| Cell 1   | Cell 2   | Cell 3   |
-| Data A   | Data B   | Data C   |
-
-### Blockquotes
-> This is a blockquote with some **important** information.
-> 
-> It can span multiple lines and contain *emphasis*.
-
-### Mixed Content
-The document contains various **formatting** options including:
-
-- *Italicized text* for emphasis
-- **Bold text** for importance  
-- `Inline code` for technical terms
-- Links like [this one](https://example.com)
-
-#### Final Section
-This concludes our comprehensive example with multiple markdown elements for testing position-based highlighting accuracy.""", 
+""", 
         "highlights": [
             {
                 "position": [56, 61],  # "quick" in "The quick brown fox", note the 2nd quick is not highlighted
@@ -99,28 +68,7 @@ This concludes our comprehensive example with multiple markdown elements for tes
                 "content": "Position-based highlight",
                 "category": "Position Demo",
                 "color": "#ffeb3b"
-            },
-            {
-                "position": [989, 999],
-                "title": "Italicized",
-                "content": "Highlighting 'Italicized'",
-                "category": "Position Demo", 
-                "color": "#ff9800"
-            },
-            {
-                "term": "formatting",
-                "title": "formatting (Term Match)",
-                "content": "Highlighted using term matching - will match anywhere this term appears.",
-                "category": "Term Demo", 
-                "color": "#d0167f91"
-            },
-            {
-                "position": [30, 37], 
-                "title": "regression test",
-                "content": "Highlight across lines should not render",
-                "category": "Position Demo",
-                "color": "#ffeb3b"
-            },
+            }
         ]
     }
     

space.py

@@ -59,40 +59,7 @@ Here are some important points:
 2. *Second item* - Another important point  
 3. Third item with `inline code`
 4. Fourth item containing [a link](https://example.com)
-
-#### Unordered Lists
-- Bullet point one
-- Bullet point two with **bold text**
-- Final bullet point
-
-### Code Block Example
-```python
-def hello_world():
-    print("Hello, World!")
-    return "success"
-```
-
-### Tables
-| Column 1 | Column 2 | Column 3 |
-|----------|----------|----------|
-| Cell 1   | Cell 2   | Cell 3   |
-| Data A   | Data B   | Data C   |
-
-### Blockquotes
-> This is a blockquote with some **important** information.
-> 
-> It can span multiple lines and contain *emphasis*.
-
-### Mixed Content
-The document contains various **formatting** options including:
-
-- *Italicized text* for emphasis
-- **Bold text** for importance  
-- `Inline code` for technical terms
-- Links like [this one](https://example.com)
-
-#### Final Section
-This concludes our comprehensive example with multiple markdown elements for testing position-based highlighting accuracy.\"\"\", 
+\"\"\", 
         "highlights": [
             {
                 "position": [56, 61],  # "quick" in "The quick brown fox", note the 2nd quick is not highlighted
@@ -114,28 +81,7 @@ This concludes our comprehensive example with multiple markdown elements for tes
                 "content": "Position-based highlight",
                 "category": "Position Demo",
                 "color": "#ffeb3b"
-            },
-            {
-                "position": [989, 999],
-                "title": "Italicized",
-                "content": "Highlighting 'Italicized'",
-                "category": "Position Demo", 
-                "color": "#ff9800"
-            },
-            {
-                "term": "formatting",
-                "title": "formatting (Term Match)",
-                "content": "Highlighted using term matching - will match anywhere this term appears.",
-                "category": "Term Demo", 
-                "color": "#d0167f91"
-            },
-            {
-                "position": [30, 37], 
-                "title": "regression test",
-                "content": "Highlight across lines should not render",
-                "category": "Position Demo",
-                "color": "#ffeb3b"
-            },
+            }
         ]
     }
     

src/README.md

@@ -45,39 +45,8 @@ Here are some important points:
 3. Third item with `inline code`
 4. Fourth item containing [a link](https://example.com)
 
-#### Unordered Lists
-- Bullet point one
-- Bullet point two with **bold text**
-- Final bullet point
 
-### Code Block Example
-```python
-def hello_world():
-    print("Hello, World!")
-    return "success"
-```
-
-### Tables
-| Column 1 | Column 2 | Column 3 |
-|----------|----------|----------|
-| Cell 1   | Cell 2   | Cell 3   |
-| Data A   | Data B   | Data C   |
-
-### Blockquotes
-> This is a blockquote with some **important** information.
-> 
-> It can span multiple lines and contain *emphasis*.
-
-### Mixed Content
-The document contains various **formatting** options including:
-
-- *Italicized text* for emphasis
-- **Bold text** for importance  
-- `Inline code` for technical terms
-- Links like [this one](https://example.com)
-
-#### Final Section
-This concludes our comprehensive example with multiple markdown elements for testing position-based highlighting accuracy.""", 
+""", 
         "highlights": [
             {
                 "position": [56, 61],  # "quick" in "The quick brown fox", note the 2nd quick is not highlighted
@@ -99,28 +68,7 @@ This concludes our comprehensive example with multiple markdown elements for tes
                 "content": "Position-based highlight",
                 "category": "Position Demo",
                 "color": "#ffeb3b"
-            },
-            {
-                "position": [989, 999],
-                "title": "Italicized",
-                "content": "Highlighting 'Italicized'",
-                "category": "Position Demo", 
-                "color": "#ff9800"
-            },
-            {
-                "term": "formatting",
-                "title": "formatting (Term Match)",
-                "content": "Highlighted using term matching - will match anywhere this term appears.",
-                "category": "Term Demo", 
-                "color": "#d0167f91"
-            },
-            {
-                "position": [30, 37], 
-                "title": "regression test",
-                "content": "Highlight across lines should not render",
-                "category": "Position Demo",
-                "color": "#ffeb3b"
-            },
+            }
         ]
     }
     

src/build.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+gradio cc build --no-generate-docs --bump-version

src/demo/space.py

@@ -59,40 +59,7 @@ Here are some important points:
 2. *Second item* - Another important point  
 3. Third item with `inline code`
 4. Fourth item containing [a link](https://example.com)
-
-#### Unordered Lists
-- Bullet point one
-- Bullet point two with **bold text**
-- Final bullet point
-
-### Code Block Example
-```python
-def hello_world():
-    print("Hello, World!")
-    return "success"
-```
-
-### Tables
-| Column 1 | Column 2 | Column 3 |
-|----------|----------|----------|
-| Cell 1   | Cell 2   | Cell 3   |
-| Data A   | Data B   | Data C   |
-
-### Blockquotes
-> This is a blockquote with some **important** information.
-> 
-> It can span multiple lines and contain *emphasis*.
-
-### Mixed Content
-The document contains various **formatting** options including:
-
-- *Italicized text* for emphasis
-- **Bold text** for importance  
-- `Inline code` for technical terms
-- Links like [this one](https://example.com)
-
-#### Final Section
-This concludes our comprehensive example with multiple markdown elements for testing position-based highlighting accuracy.\"\"\", 
+\"\"\", 
         "highlights": [
             {
                 "position": [56, 61],  # "quick" in "The quick brown fox", note the 2nd quick is not highlighted
@@ -114,28 +81,7 @@ This concludes our comprehensive example with multiple markdown elements for tes
                 "content": "Position-based highlight",
                 "category": "Position Demo",
                 "color": "#ffeb3b"
-            },
-            {
-                "position": [989, 999],
-                "title": "Italicized",
-                "content": "Highlighting 'Italicized'",
-                "category": "Position Demo", 
-                "color": "#ff9800"
-            },
-            {
-                "term": "formatting",
-                "title": "formatting (Term Match)",
-                "content": "Highlighted using term matching - will match anywhere this term appears.",
-                "category": "Term Demo", 
-                "color": "#d0167f91"
-            },
-            {
-                "position": [30, 37], 
-                "title": "regression test",
-                "content": "Highlight across lines should not render",
-                "category": "Position Demo",
-                "color": "#ffeb3b"
-            },
+            }
         ]
     }
     

src/frontend/shared/EditableMarkdownRenderer.svelte

@@ -88,7 +88,7 @@
 					return `<span class="highlight-term" 
 								data-index="${index}" 
 								data-term="${highlight.term}"
-								style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
+								style="${getHighlightStyle(color)}"
 								role="button" 
 								tabindex="0" 
 								aria-label="Highlighted term: ${highlight.term}">
@@ -165,7 +165,7 @@
 					return `<span class="highlight-position" 
 						data-index="${index}" 
 						data-text="${encodeURIComponent(targetText)}"
-						style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
+						style="${getHighlightStyle(color)}"
 						role="button" 
 						tabindex="0" 
 						aria-label="Highlighted text: ${targetText.replace(/"/g, '&quot;')}">
@@ -188,6 +188,10 @@
 		return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 	}
 
+	function getHighlightStyle(color: string): string {
+		return `background-color: ${color}; cursor: pointer; padding: 2px 2px; border-radius: 3px; transition: all 0.2s; padding-left: 4px;`;
+	}
+
 	function handleTermClick(event: Event) {
 		const target = event.target as HTMLElement;
 		if (target.classList.contains('highlight-term') || target.classList.contains('highlight-position')) {

src/frontend/shared/MarkdownRenderer.svelte

@@ -61,7 +61,7 @@
 					return `<span class="highlight-term" 
 								data-index="${index}" 
 								data-term="${highlight.term}"
-								style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
+								style="${getHighlightStyle(color)}"
 								role="button" 
 								tabindex="0" 
 								aria-label="Highlighted term: ${highlight.term}">
@@ -138,7 +138,7 @@
 					return `<span class="highlight-position" 
 						data-index="${index}" 
 						data-text="${encodeURIComponent(targetText)}"
-						style="background-color: ${color}; cursor: pointer; padding: 2px 4px; border-radius: 3px; transition: all 0.2s;"
+						style="${getHighlightStyle(color)}"
 						role="button" 
 						tabindex="0" 
 						aria-label="Highlighted text: ${targetText.replace(/"/g, '&quot;')}">
@@ -161,6 +161,12 @@
 		return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 	}
 
+	// Browser implementation CSS char spacing is broken, need to adjust to excess right pad. 
+	// https://github.com/w3c/csswg-drafts/issues/1518
+	function getHighlightStyle(color: string): string {
+		return `background-color: ${color}; cursor: pointer; padding: 2px 2px; border-radius: 3px; transition: all 0.2s; padding-left: 4px;`;
+	}
+
 	function handleTermClick(event: Event) {
 		const target = event.target as HTMLElement;
 		if (target.classList.contains('highlight-term') || target.classList.contains('highlight-position')) {

src/pyproject.toml

@@ -8,7 +8,7 @@ build-backend = "hatchling.build"
 
 [project]
 name = "gradio_markdownlabel"
-version = "0.0.4"
+version = "0.0.5"
 description = "Python library for easily interacting with trained machine learning models"
 readme = "README.md"
 license = "Apache-2.0"