Remove highlight upon entering span

.gitignore

@@ -0,0 +1,9 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+node_modules

src/frontend/HighlightedTextbox.svelte

@@ -10,7 +10,7 @@
 	import { fade } from "svelte/transition";
 	import type { SelectData } from "@gradio/utils";
 	import { get_next_color } from "@gradio/utils";
-	import { correct_color_map } from "./utils";
+	import { correct_color_map, getParentCursorPosition, getNodeAndOffset } from "./utils";
 
 	const browser = typeof document !== "undefined";
 	export let value: [string, string | null][] = [];
@@ -146,6 +146,33 @@
 			copied = false;
 		}, 1000);
 	}
+
+	// Method to remove highlight if cursor is inside
+	function checkAndRemoveHighlight() {
+		const selection = window.getSelection();
+		const cursorPosition = selection.anchorOffset;
+		if (selection.rangeCount > 0) {
+			var currParent = selection.getRangeAt(0).commonAncestorContainer.parentElement;
+			if (currParent && currParent.tagName.toLowerCase() === 'mark') {
+				const text = currParent.textContent;
+				// replace the mark tag with its text content
+				var textContainer = currParent.parentElement;
+				var newTextNode = document.createTextNode(text);
+				textContainer.replaceChild(newTextNode, currParent);
+				marked_el_text = textContainer.innerHTML;
+				// set the cursor position to the same position as before
+				var range = document.createRange()
+				var newSelection = window.getSelection()
+				const newCursorPosition = cursorPosition + getParentCursorPosition(textContainer)
+				var nodeAndOffset = getNodeAndOffset(textContainer, newCursorPosition);
+				range.setStart(nodeAndOffset.node, nodeAndOffset.offset);
+				range.setEnd(nodeAndOffset.node, nodeAndOffset.offset);
+				newSelection.removeAllRanges();
+				newSelection.addRange(range);
+				handle_blur();
+			}
+		}
+	}
 </script>
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -208,6 +235,10 @@
             on:input
             on:focus
             on:change
+			on:mousedown={checkAndRemoveHighlight}
+			on:keydown={checkAndRemoveHighlight}
+			on:mouseup={checkAndRemoveHighlight}
+			on:keyup={checkAndRemoveHighlight}
         />
     {/if}
 </label>
@@ -280,7 +311,7 @@
 		font-size: var(--input-text-size);
 		width: 100%;
 		line-height: var(--line-sm);
-		word-break: break-all;
+		word-break: break-word;
 		border: var(--input-border-width) solid var(--input-border-color);
 		cursor: text;
 	}

src/frontend/utils.ts

@@ -71,4 +71,40 @@ export function merge_elements(
 	}
 
 	return result;
+}
+
+
+export function getParentCursorPosition(textbox) {
+	const selection = window.getSelection()!;
+	if (selection.rangeCount > 0) {
+		const range = document.createRange();
+		range.setStart(textbox, 0);
+		if (selection.anchorNode !== null) {
+			range.setEnd(selection.anchorNode, selection.anchorOffset);
+		}
+		const cursorPosition = range.toString().length;
+		return cursorPosition;
+	}
+	return -1;
+}
+
+export function getNodeAndOffset(root, index) {
+	var walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+	var node = walker.nextNode();
+	if (!node || !node.textContent) {
+		// empty root node
+		return null;
+	}
+	var runningTotal = node.textContent.length;
+	while (runningTotal < index) {
+		node = walker.nextNode();
+		if (node && node.textContent) {
+			runningTotal += node.textContent.length;
+		} else {
+			// index is out of range
+			return null;
+		}
+	}
+	var offset = node.textContent.length - (runningTotal - index);
+	return { node: node, offset: offset };
 }

src/pyproject.toml

@@ -36,7 +36,7 @@ classifiers = [
 dev = ["build", "twine"]
 
 [tool.hatch.build]
-artifacts = ["/backend/gradio_highlightedtextbox/templates", "*.pyi", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates"]
+artifacts = ["/backend/gradio_highlightedtextbox/templates", "*.pyi", "backend/gradio_highlightedtextbox/templates", "backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates", "Users/gsarti/Documents/projects/highlightedtextbox/backend/gradio_highlightedtextbox/templates"]
 
 [tool.hatch.build.targets.wheel]
 packages = ["/backend/gradio_highlightedtextbox"]