lk-text-select-highlight 1.0.1 → 1.0.2

package/index.js

@@ -20,6 +20,18 @@ class TextHighlighter {
 		this.highlights = [];
 	}
 
+	/**
+	 * Generate a simple UUID
+	 */
+	generateUUID() {
+		return (
+			"highlight-" +
+			Date.now() +
+			"-" +
+			Math.random().toString(36).substr(2, 9)
+		);
+	}
+
 	/**
 	 * Highlight selected text
 	 */
@@ -54,10 +66,11 @@ class TextHighlighter {
 		}
 
 		try {
-			const highlightedElement = this.wrapRange(range);
+			const uuid = this.generateUUID();
+			const highlightedElement = this.wrapRange(range, uuid);
 
 			this.highlights.push({
-				element: highlightedElement,
+				uuid: uuid,
 				text: selection.toString(),
 			});
 
@@ -114,14 +127,18 @@ class TextHighlighter {
 	/**
 	 * Wrap a range with highlight element
 	 * @param {Range} range - The range to wrap
+	 * @param {string} uuid - Unique identifier for the highlight
 	 */
-	wrapRange(range) {
+	wrapRange(range, uuid) {
 		const highlightEl = document.createElement("span");
 		highlightEl.className = this.options.className;
 		highlightEl.style.backgroundColor = this.options.color;
 		highlightEl.style.padding = "0";
 		highlightEl.style.margin = "0";
 
+		// Add UUID as data attribute
+		highlightEl.setAttribute("data-uuid", uuid);
+
 		// Clone the range and insert the highlight element
 		range.surroundContents(highlightEl);
 
@@ -133,12 +150,12 @@ class TextHighlighter {
 	 */
 	removeAllHighlights() {
 		this.highlights.forEach((highlight) => {
-			if (highlight.element.parentNode) {
+			const element = document.querySelector(
+				`[data-uuid="${highlight.uuid}"]`,
+			);
+			if (element && element.parentNode) {
 				const textNode = document.createTextNode(highlight.text);
-				highlight.element.parentNode.replaceChild(
-					textNode,
-					highlight.element,
-				);
+				element.parentNode.replaceChild(textNode, element);
 			}
 		});
 
@@ -149,23 +166,26 @@ class TextHighlighter {
 	 * Get all highlighted elements
 	 */
 	getHighlights() {
+		// Return highlights with uuid and text
 		return [...this.highlights];
 	}
 
 	/**
 	 * Remove a specific highlight
-	 * @param {Object} highlight - The highlight object to remove
+	 * @param {Object} highlight - The highlight object to remove (containing uuid)
 	 */
 	removeHighlight(highlight) {
-		const index = this.highlights.indexOf(highlight);
+		const index = this.highlights.findIndex(
+			(h) => h.uuid === highlight.uuid,
+		);
 		if (index !== -1) {
 			// Restore the original text
-			if (highlight.element.parentNode) {
+			const element = document.querySelector(
+				`[data-uuid="${highlight.uuid}"]`,
+			);
+			if (element && element.parentNode) {
 				const textNode = document.createTextNode(highlight.text);
-				highlight.element.parentNode.replaceChild(
-					textNode,
-					highlight.element,
-				);
+				element.parentNode.replaceChild(textNode, element);
 			}
 
 			// Remove from the highlights array

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lk-text-select-highlight",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "A lightweight JavaScript library for highlighting selected text on web pages",
 	"main": "dist/lk-text-select-highlight.cjs.js",
 	"module": "dist/lk-text-select-highlight.esm.js",

package/types/index.d.ts

@@ -31,8 +31,8 @@ declare interface TextHighlighterOptions {
 }
 
 declare interface HighlightObject {
-	/** 高亮的DOM元素 */
-	element: HTMLElement;
+	/** 高亮的唯一标识符 */
+	uuid: string;
 	/** 高亮的文本内容 */
 	text: string;
 }