lk-text-select-highlight 1.0.1 → 1.0.3

package/README-cn.md

@@ -61,13 +61,15 @@ document.addEventListener('mouseup', () => {
 
 移除所有现有的高亮。
 
-### highlighter.removeHighlight(highlight)
+### highlighter.getHighlights()
 
-移除指定的高亮对象。高亮对象可以从 getHighlights() 方法获取。
+返回所有当前高亮的数组。每个高亮对象包含：
+- `uuid`: 高亮元素的唯一标识符
+- `text`: 高亮的文本内容
 
-### highlighter.getHighlights()
+### highlighter.removeHighlight(highlight)
 
-返回所有当前高亮的数组。
+移除指定的高亮对象。高亮对象可以从 getHighlights() 方法获取。该方法使用UUID来定位并移除相应的高亮元素。
 
 ## 配置选项详解
 

package/README.md

@@ -63,11 +63,13 @@ Removes all existing highlights.
 
 ### highlighter.getHighlights()
 
-Returns an array of all current highlights.
+Returns an array of all current highlights. Each highlight object contains:
+- `uuid`: Unique identifier for the highlight element
+- `text`: The highlighted text content
 
 ### highlighter.removeHighlight(highlight)
 
-Removes a specific highlight object. The highlight object can be obtained from the getHighlights() method.
+Removes a specific highlight object. The highlight object can be obtained from the getHighlights() method. The method uses the UUID to locate and remove the corresponding highlight element.
 
 ### highlighter.removeAllHighlights()
 

package/index.js

@@ -20,6 +20,18 @@ class TextHighlighter {
 		this.highlights = [];
 	}
 
+	/**
+	 * Generate a simple UUID
+	 */
+	generateUUID() {
+		return (
+			"highlight-" +
+			Date.now() +
+			"-" +
+			Math.random().toString(36).substring(2, 11)
+		);
+	}
+
 	/**
 	 * 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,13 +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";
+		highlightEl.style.cursor = "pointer";
+
+		// Add UUID as data attribute
+		highlightEl.setAttribute("data-uuid", uuid);
 
 		// Clone the range and insert the highlight element
 		range.surroundContents(highlightEl);
@@ -133,12 +151,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 +167,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.3",
 	"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/test_server.cjs

@@ -0,0 +1,43 @@
+const http = require("http");
+const fs = require("fs");
+const path = require("path");
+
+const port = 8080;
+const server = http.createServer((req, res) => {
+	let filePath = "." + req.url;
+
+	if (filePath === "./") {
+		filePath = "./test_uuid_attr.html";
+	}
+
+	const extname = path.extname(filePath).toLowerCase();
+	let contentType = "text/html";
+
+	const mimeTypes = {
+		".js": "application/javascript",
+		".css": "text/css",
+		".html": "text/html",
+		".json": "application/json",
+	};
+
+	contentType = mimeTypes[extname] || "text/html";
+
+	fs.readFile(filePath, (err, content) => {
+		if (err) {
+			if (err.code === "ENOENT") {
+				res.writeHead(404);
+				res.end("404 Not Found");
+			} else {
+				res.writeHead(500);
+				res.end(`Server Error: ${err.code}`);
+			}
+		} else {
+			res.writeHead(200, { "Content-Type": contentType });
+			res.end(content, "utf-8");
+		}
+	});
+});
+
+server.listen(port, () => {
+	console.log(`Server running at http://localhost:${port}/`);
+});

package/test_uuid_attr.html

@@ -0,0 +1,138 @@
+<!doctype html>
+<html lang="zh-CN">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>UUID Attribute Test</title>
+		<style>
+			body {
+				font-family: Arial, sans-serif;
+				max-width: 800px;
+				margin: 0 auto;
+				padding: 20px;
+				line-height: 1.6;
+			}
+
+			.demo-text {
+				background-color: #f9f9f9;
+				padding: 20px;
+				border-radius: 5px;
+				margin: 20px 0;
+			}
+
+			.controls {
+				margin: 20px 0;
+			}
+
+			button {
+				background-color: #4caf50;
+				color: white;
+				padding: 10px 15px;
+				border: none;
+				border-radius: 4px;
+				cursor: pointer;
+				margin-right: 10px;
+				margin-bottom: 10px;
+			}
+
+			button:hover {
+				background-color: #45a049;
+			}
+
+			.highlighted-text {
+				background-color: #ffff00;
+				padding: 0;
+				margin: 0;
+			}
+
+			.inspect-btn {
+				background-color: #2196f3;
+			}
+
+			.inspect-btn:hover {
+				background-color: #0b7dda;
+			}
+		</style>
+	</head>
+	<body>
+		<h1>UUID Attribute Test</h1>
+
+		<div class="controls">
+			<button id="highlightBtn">高亮选中文本</button>
+			<button id="inspectBtn" class="inspect-btn">
+				检查高亮元素属性
+			</button>
+			<button id="clearBtn">清除所有高亮</button>
+		</div>
+
+		<div class="demo-text" id="demo-content">
+			<p>
+				请选择这段文字的一部分，然后点击"高亮选中文本"按钮。
+				高亮后点击"检查高亮元素属性"按钮查看data-uuid属性是否存在。
+			</p>
+			<p>
+				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
+				eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+				enim ad minim veniam, quis nostrud exercitation ullamco laboris
+				nisi ut aliquip ex ea commodo consequat.
+			</p>
+		</div>
+
+		<div id="output"></div>
+
+		<script src="./dist/lk-text-select-highlight.umd.js"></script>
+		<script>
+			// 初始化文本高亮器
+			const highlighter = new TextHighlighter({
+				className: "highlighted-text",
+				color: "#ffff00",
+			});
+
+			// 高亮按钮事件
+			document
+				.getElementById("highlightBtn")
+				.addEventListener("click", () => {
+					const success = highlighter.highlightSelection();
+					console.log("高亮操作结果:", success);
+				});
+
+			// 检查属性按钮事件
+			document
+				.getElementById("inspectBtn")
+				.addEventListener("click", () => {
+					const allHighlights =
+						document.querySelectorAll(".highlighted-text");
+					let outputHtml = "<h3>高亮元素属性检查:</h3>";
+
+					allHighlights.forEach((el, index) => {
+						const uuid = el.getAttribute("data-uuid");
+						outputHtml += `<p>元素 ${index + 1}: data-uuid = ${uuid || "NOT FOUND"}</p>`;
+
+						// 输出所有属性
+						const attrs = Array.from(el.attributes);
+						attrs.forEach((attr) => {
+							console.log(
+								`Attribute: ${attr.name} = ${attr.value}`,
+							);
+						});
+					});
+
+					if (allHighlights.length === 0) {
+						outputHtml = "<h3>没有发现高亮元素</h3>";
+					}
+
+					document.getElementById("output").innerHTML = outputHtml;
+				});
+
+			// 清除高亮按钮
+			document
+				.getElementById("clearBtn")
+				.addEventListener("click", () => {
+					highlighter.removeAllHighlights();
+					document.getElementById("output").innerHTML =
+						"<h3>已清除所有高亮</h3>";
+					console.log("已清除所有高亮");
+				});
+		</script>
+	</body>
+</html>

package/types/index.d.ts

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