react-highlight-me 1.2.1 → 2.0.1

package/dist/cjs/index.d.ts

@@ -4,8 +4,8 @@ type Props = {
     words?: string[] | string | RegExp | RegExp[];
     highlightStyle?: React.CSSProperties;
     caseSensitive?: boolean;
-    isEscapePattern?: boolean;
     isWordBoundary?: boolean;
+    isDebug?: boolean;
 };
-declare const TextHighlighter: ({ children, words, highlightStyle, caseSensitive, isEscapePattern, isWordBoundary, }: Props) => React.ReactNode;
+declare const TextHighlighter: ({ children, words, highlightStyle, caseSensitive, isWordBoundary, isDebug, }: Props) => React.JSX.Element;
 export default TextHighlighter;

package/dist/cjs/index.js

@@ -1,77 +1,173 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var TextHighlighter = function (_a) {
-    var _b = _a.children, children = _b === void 0 ? '' : _b, _c = _a.words, words = _c === void 0 ? [] : _c, _d = _a.highlightStyle, highlightStyle = _d === void 0 ? { backgroundColor: 'yellow', fontWeight: 'bold' } : _d, _e = _a.caseSensitive, caseSensitive = _e === void 0 ? false : _e, _f = _a.isEscapePattern, isEscapePattern = _f === void 0 ? true : _f, _g = _a.isWordBoundary, isWordBoundary = _g === void 0 ? true : _g;
-    // Convert words to array if it's a string
-    var wordsArray = Array.isArray(words) ? words : [words];
-    // If no words to highlight, return original content
-    if (!wordsArray.length || wordsArray.every(function (word) { return !word; })) {
-        return children;
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
     }
-    // Function to escape regex special characters
-    var escapeRegex = function (term) {
-        if (term instanceof RegExp) {
-            return term.source;
-        }
-        if (isEscapePattern) {
-            term = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+// Alternative approach: Use a single observer that never disconnects
+const TextHighlighter = ({ children, words = [], highlightStyle = { backgroundColor: 'yellow', fontWeight: 'bold' }, caseSensitive = false, isWordBoundary = true, isDebug = false, }) => {
+    const containerRef = (0, react_1.useRef)(null);
+    const observerRef = (0, react_1.useRef)(null);
+    const lastHighlightSignature = (0, react_1.useRef)('');
+    const [isInitiallyReady, setIsInitiallyReady] = (0, react_1.useState)(false);
+    const propsRef = (0, react_1.useRef)({ words, highlightStyle, caseSensitive, isWordBoundary });
+    propsRef.current = { words, highlightStyle, caseSensitive, isWordBoundary };
+    const getTextSignature = (0, react_1.useCallback)((element) => {
+        var _a;
+        // Create a signature of all text content to detect real changes
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
+        const textParts = [];
+        let node;
+        while ((node = walker.nextNode())) {
+            if (!((_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-highlighter'))) {
+                textParts.push(node.textContent || '');
+            }
         }
-        if (isWordBoundary) {
-            term = "\\b".concat(term, "\\b");
+        return textParts.join('|');
+    }, []);
+    const highlightTextInElement = (0, react_1.useCallback)((element) => {
+        const { words, highlightStyle, caseSensitive, isWordBoundary } = propsRef.current;
+        const wordsArray = Array.isArray(words) ? words : [words];
+        isDebug && console.log('Highlighting with words:', wordsArray);
+        // Remove existing highlights
+        const existingMarks = element.querySelectorAll('mark[data-highlighter="true"]');
+        existingMarks.forEach(mark => {
+            var _a;
+            const textContent = mark.textContent || '';
+            const textNode = document.createTextNode(textContent);
+            (_a = mark.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(textNode, mark);
+        });
+        element.normalize(); // Ensure text nodes are merged
+        if (!wordsArray.length || wordsArray.every(word => !word)) {
+            lastHighlightSignature.current = getTextSignature(element);
+            return;
         }
-        return term;
-    };
-    // Create a regex pattern for all words
-    var pattern = wordsArray
-        .filter(function (word) { return word; })
-        .map(function (word) { return escapeRegex(word); })
-        .join('|');
-    if (!pattern) {
-        return children;
-    }
-    var regex = new RegExp("(".concat(pattern, ")"), caseSensitive ? 'g' : 'gi');
-    // Function to highlight text content
-    var highlightText = function (textContent) {
-        if (!textContent || typeof textContent !== 'string') {
-            return textContent;
+        // Apply highlighting (same logic as before)
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
+        const textNodes = [];
+        let node;
+        while ((node = walker.nextNode())) {
+            textNodes.push(node);
         }
-        var parts = textContent.split(regex);
-        return parts.map(function (part, index) {
-            var shouldHighlight = wordsArray.some(function (word) {
+        textNodes.forEach(textNode => {
+            var _a;
+            const text = textNode.textContent || '';
+            if (!text.trim())
+                return;
+            const pattern = wordsArray
+                .filter(word => word)
+                .map(word => {
                 if (word instanceof RegExp) {
-                    return word.test(part);
+                    return word.source;
                 }
-                return caseSensitive
-                    ? part === word.trim()
-                    : part.toLowerCase() === word.trim().toLowerCase();
-            });
-            return shouldHighlight ? (react_1.default.createElement("mark", { key: index, style: highlightStyle }, part)) : (part);
+                let term = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                if (isWordBoundary) {
+                    term = `\\b${term}\\b`;
+                }
+                return term;
+            })
+                .join('|');
+            if (!pattern)
+                return;
+            const regex = new RegExp(`(${pattern})`, caseSensitive ? 'g' : 'gi');
+            const parts = text.split(regex);
+            if (parts.length > 1) {
+                const fragment = document.createDocumentFragment();
+                parts.forEach(part => {
+                    if (!part)
+                        return;
+                    const shouldHighlight = wordsArray.some(word => {
+                        if (word instanceof RegExp) {
+                            const testRegex = new RegExp(word.source, caseSensitive ? word.flags : word.flags + 'i');
+                            return testRegex.test(part);
+                        }
+                        return caseSensitive
+                            ? part === word.trim()
+                            : part.toLowerCase() === word.trim().toLowerCase();
+                    });
+                    if (shouldHighlight) {
+                        const mark = document.createElement('mark');
+                        mark.setAttribute('data-highlighter', 'true');
+                        Object.assign(mark.style, highlightStyle);
+                        mark.textContent = part;
+                        fragment.appendChild(mark);
+                    }
+                    else {
+                        fragment.appendChild(document.createTextNode(part));
+                    }
+                });
+                (_a = textNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(fragment, textNode);
+            }
         });
-    };
-    // Function to recursively process React elements
-    var processElement = function (element) {
-        if (typeof element === 'string') {
-            return highlightText(element);
-        }
-        if (typeof element === 'number') {
-            return element;
-        }
-        if (!react_1.default.isValidElement(element)) {
-            return element;
-        }
-        // Clone element and process its children
-        var processedChildren = react_1.default.Children.map(element.props.children, function (child) {
-            if (typeof child === 'string') {
-                return highlightText(child);
+        // Update signature after highlighting
+        lastHighlightSignature.current = getTextSignature(element);
+    }, [getTextSignature]);
+    (0, react_1.useLayoutEffect)(() => {
+        if (!containerRef.current)
+            return;
+        isDebug && console.log('Setting up persistent MutationObserver');
+        highlightTextInElement(containerRef.current);
+        setIsInitiallyReady(true);
+        observerRef.current = new MutationObserver((mutations) => {
+            if (!containerRef.current)
+                return;
+            // Check if the text signature has actually changed
+            const currentSignature = getTextSignature(containerRef.current);
+            if (currentSignature !== lastHighlightSignature.current) {
+                isDebug && console.log('Text signature changed, re-highlighting');
+                isDebug && console.log('Old:', lastHighlightSignature.current);
+                isDebug && console.log('New:', currentSignature);
+                highlightTextInElement(containerRef.current);
+            }
+            else {
+                isDebug && console.log('Text signature unchanged, ignoring mutation');
             }
-            return processElement(child);
         });
-        return react_1.default.cloneElement(element, {}, processedChildren);
-    };
-    return processElement(children);
+        observerRef.current.observe(containerRef.current, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, [words, highlightStyle, caseSensitive, isWordBoundary, highlightTextInElement, getTextSignature]);
+    return (react_1.default.createElement("div", { ref: containerRef, style: {
+            visibility: isInitiallyReady ? 'visible' : 'hidden',
+            minHeight: isInitiallyReady ? 'auto' : '1em'
+        } }, children));
 };
 exports.default = TextHighlighter;
+//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+CAA8E;AAU9E,qEAAqE;AACrE,MAAM,eAAe,GAAG,CAAC,EACvB,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,cAAc,GAAG,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,EAAE,EAClE,aAAa,GAAG,KAAK,EACrB,cAAc,GAAG,IAAI,EACrB,OAAO,GAAG,KAAK,GACT,EAAE,EAAE;IACV,MAAM,YAAY,GAAG,IAAA,cAAM,EAAiB,IAAI,CAAC,CAAC;IAClD,MAAM,WAAW,GAAG,IAAA,cAAM,EAA0B,IAAI,CAAC,CAAC;IAC1D,MAAM,sBAAsB,GAAG,IAAA,cAAM,EAAS,EAAE,CAAC,CAAC;IAClD,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAC;IAEhE,MAAM,QAAQ,GAAG,IAAA,cAAM,EAAC,EAAE,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC,CAAC;IAClF,QAAQ,CAAC,OAAO,GAAG,EAAE,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,CAAC;IAE5E,MAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC,CAAC,OAAoB,EAAU,EAAE;;QACpE,gEAAgE;QAChE,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CACtC,OAAO,EACP,UAAU,CAAC,SAAS,EACpB,IAAI,CACL,CAAC;QAEF,MAAM,SAAS,GAAa,EAAE,CAAC;QAC/B,IAAI,IAAI,CAAC;QACT,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC;YAClC,IAAI,CAAC,CAAA,MAAC,IAAa,CAAC,aAAa,0CAAE,YAAY,CAAC,kBAAkB,CAAC,CAAA,EAAE,CAAC;gBACpE,SAAS,CAAC,IAAI,CAAE,IAAa,CAAC,WAAW,IAAI,EAAE,CAAC,CAAC;YACnD,CAAC;QACH,CAAC;QAED,OAAO,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;IAC7B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,sBAAsB,GAAG,IAAA,mBAAW,EAAC,CAAC,OAAoB,EAAE,EAAE;QAClE,MAAM,EAAE,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC;QAClF,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;QAE1D,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,0BAA0B,EAAE,UAAU,CAAC,CAAC;QAE/D,6BAA6B;QAC7B,MAAM,aAAa,GAAG,OAAO,CAAC,gBAAgB,CAAC,+BAA+B,CAAC,CAAC;QAChF,aAAa,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;;YAC3B,MAAM,WAAW,GAAG,IAAI,CAAC,WAAW,IAAI,EAAE,CAAC;YAC3C,MAAM,QAAQ,GAAG,QAAQ,CAAC,cAAc,CAAC,WAAW,CAAC,CAAC;YACtD,MAAA,IAAI,CAAC,UAAU,0CAAE,YAAY,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;QAChD,CAAC,CAAC,CAAC;QAEH,OAAO,CAAC,SAAS,EAAE,CAAC,CAAC,+BAA+B;QAEpD,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,UAAU,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC;YAC1D,sBAAsB,CAAC,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;YAC3D,OAAO;QACT,CAAC;QAED,4CAA4C;QAC5C,MAAM,MAAM,GAAG,QAAQ,CAAC,gBAAgB,CACtC,OAAO,EACP,UAAU,CAAC,SAAS,EACpB,IAAI,CACL,CAAC;QAEF,MAAM,SAAS,GAAW,EAAE,CAAC;QAC7B,IAAI,IAAI,CAAC;QACT,OAAO,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,CAAC;YAClC,SAAS,CAAC,IAAI,CAAC,IAAY,CAAC,CAAC;QAC/B,CAAC;QAED,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;;YAC3B,MAAM,IAAI,GAAG,QAAQ,CAAC,WAAW,IAAI,EAAE,CAAC;YACxC,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;gBAAE,OAAO;YAEzB,MAAM,OAAO,GAAG,UAAU;iBACvB,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC;iBACpB,GAAG,CAAC,IAAI,CAAC,EAAE;gBACV,IAAI,IAAI,YAAY,MAAM,EAAE,CAAC;oBAC3B,OAAO,IAAI,CAAC,MAAM,CAAC;gBACrB,CAAC;gBACD,IAAI,IAAI,GAAG,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE,MAAM,CAAC,CAAC;gBACvD,IAAI,cAAc,EAAE,CAAC;oBACnB,IAAI,GAAG,MAAM,IAAI,KAAK,CAAC;gBACzB,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC,CAAC;iBACD,IAAI,CAAC,GAAG,CAAC,CAAC;YAEb,IAAI,CAAC,OAAO;gBAAE,OAAO;YAErB,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,IAAI,OAAO,GAAG,EAAE,aAAa,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC;YACrE,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;YAEhC,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;gBACrB,MAAM,QAAQ,GAAG,QAAQ,CAAC,sBAAsB,EAAE,CAAC;gBAEnD,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE;oBACnB,IAAI,CAAC,IAAI;wBAAE,OAAO;oBAElB,MAAM,eAAe,GAAG,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE;wBAC7C,IAAI,IAAI,YAAY,MAAM,EAAE,CAAC;4BAC3B,MAAM,SAAS,GAAG,IAAI,MAAM,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC;4BACzF,OAAO,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;wBAC9B,CAAC;wBACD,OAAO,aAAa;4BAClB,CAAC,CAAC,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE;4BACtB,CAAC,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC,WAAW,EAAE,CAAC;oBACvD,CAAC,CAAC,CAAC;oBAEH,IAAI,eAAe,EAAE,CAAC;wBACpB,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;wBAC5C,IAAI,CAAC,YAAY,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC;wBAC9C,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,EAAE,cAAc,CAAC,CAAC;wBAC1C,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;wBACxB,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;oBAC7B,CAAC;yBAAM,CAAC;wBACN,QAAQ,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,CAAC;oBACtD,CAAC;gBACH,CAAC,CAAC,CAAC;gBAEH,MAAA,QAAQ,CAAC,UAAU,0CAAE,YAAY,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC;YACxD,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,sCAAsC;QACtC,sBAAsB,CAAC,OAAO,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAC7D,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,IAAA,uBAAe,EAAC,GAAG,EAAE;QACnB,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE,OAAO;QAElC,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,wCAAwC,CAAC,CAAC;QAEjE,sBAAsB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC7C,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAE1B,WAAW,CAAC,OAAO,GAAG,IAAI,gBAAgB,CAAC,CAAC,SAAS,EAAE,EAAE;YACvD,IAAI,CAAC,YAAY,CAAC,OAAO;gBAAE,OAAO;YAElC,mDAAmD;YACnD,MAAM,gBAAgB,GAAG,gBAAgB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAEhE,IAAI,gBAAgB,KAAK,sBAAsB,CAAC,OAAO,EAAE,CAAC;gBACxD,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,yCAAyC,CAAC,CAAC;gBAClE,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;gBAC/D,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;gBAEjD,sBAAsB,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;YAC/C,CAAC;iBAAM,CAAC;gBACN,OAAO,IAAI,OAAO,CAAC,GAAG,CAAC,6CAA6C,CAAC,CAAC;YACxE,CAAC;QACH,CAAC,CAAC,CAAC;QAEH,WAAW,CAAC,OAAO,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,EAAE;YAChD,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;YACb,aAAa,EAAE,IAAI;SACpB,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE;YACV,IAAI,WAAW,CAAC,OAAO,EAAE,CAAC;gBACxB,WAAW,CAAC,OAAO,CAAC,UAAU,EAAE,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,cAAc,EAAE,sBAAsB,EAAE,gBAAgB,CAAC,CAAC,CAAC;IAErG,OAAO,CACL,uCACE,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;YACL,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;YACnD,SAAS,EAAE,gBAAgB,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK;SAC7C,IAEA,QAAQ,CACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,eAAe,CAAC"}

package/dist/esm/index.d.ts

@@ -4,8 +4,8 @@ type Props = {
     words?: string[] | string | RegExp | RegExp[];
     highlightStyle?: React.CSSProperties;
     caseSensitive?: boolean;
-    isEscapePattern?: boolean;
     isWordBoundary?: boolean;
+    isDebug?: boolean;
 };
-declare const TextHighlighter: ({ children, words, highlightStyle, caseSensitive, isEscapePattern, isWordBoundary, }: Props) => React.ReactNode;
+declare const TextHighlighter: ({ children, words, highlightStyle, caseSensitive, isWordBoundary, isDebug, }: Props) => React.JSX.Element;
 export default TextHighlighter;

package/dist/esm/index.js

@@ -1,72 +1,138 @@
-import React from 'react';
-var TextHighlighter = function (_a) {
-    var _b = _a.children, children = _b === void 0 ? '' : _b, _c = _a.words, words = _c === void 0 ? [] : _c, _d = _a.highlightStyle, highlightStyle = _d === void 0 ? { backgroundColor: 'yellow', fontWeight: 'bold' } : _d, _e = _a.caseSensitive, caseSensitive = _e === void 0 ? false : _e, _f = _a.isEscapePattern, isEscapePattern = _f === void 0 ? true : _f, _g = _a.isWordBoundary, isWordBoundary = _g === void 0 ? true : _g;
-    // Convert words to array if it's a string
-    var wordsArray = Array.isArray(words) ? words : [words];
-    // If no words to highlight, return original content
-    if (!wordsArray.length || wordsArray.every(function (word) { return !word; })) {
-        return children;
-    }
-    // Function to escape regex special characters
-    var escapeRegex = function (term) {
-        if (term instanceof RegExp) {
-            return term.source;
-        }
-        if (isEscapePattern) {
-            term = term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+import React, { useLayoutEffect, useRef, useCallback, useState } from 'react';
+// Alternative approach: Use a single observer that never disconnects
+const TextHighlighter = ({ children, words = [], highlightStyle = { backgroundColor: 'yellow', fontWeight: 'bold' }, caseSensitive = false, isWordBoundary = true, isDebug = false, }) => {
+    const containerRef = useRef(null);
+    const observerRef = useRef(null);
+    const lastHighlightSignature = useRef('');
+    const [isInitiallyReady, setIsInitiallyReady] = useState(false);
+    const propsRef = useRef({ words, highlightStyle, caseSensitive, isWordBoundary });
+    propsRef.current = { words, highlightStyle, caseSensitive, isWordBoundary };
+    const getTextSignature = useCallback((element) => {
+        var _a;
+        // Create a signature of all text content to detect real changes
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
+        const textParts = [];
+        let node;
+        while ((node = walker.nextNode())) {
+            if (!((_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.hasAttribute('data-highlighter'))) {
+                textParts.push(node.textContent || '');
+            }
         }
-        if (isWordBoundary) {
-            term = "\\b".concat(term, "\\b");
+        return textParts.join('|');
+    }, []);
+    const highlightTextInElement = useCallback((element) => {
+        const { words, highlightStyle, caseSensitive, isWordBoundary } = propsRef.current;
+        const wordsArray = Array.isArray(words) ? words : [words];
+        isDebug && console.log('Highlighting with words:', wordsArray);
+        // Remove existing highlights
+        const existingMarks = element.querySelectorAll('mark[data-highlighter="true"]');
+        existingMarks.forEach(mark => {
+            var _a;
+            const textContent = mark.textContent || '';
+            const textNode = document.createTextNode(textContent);
+            (_a = mark.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(textNode, mark);
+        });
+        element.normalize(); // Ensure text nodes are merged
+        if (!wordsArray.length || wordsArray.every(word => !word)) {
+            lastHighlightSignature.current = getTextSignature(element);
+            return;
         }
-        return term;
-    };
-    // Create a regex pattern for all words
-    var pattern = wordsArray
-        .filter(function (word) { return word; })
-        .map(function (word) { return escapeRegex(word); })
-        .join('|');
-    if (!pattern) {
-        return children;
-    }
-    var regex = new RegExp("(".concat(pattern, ")"), caseSensitive ? 'g' : 'gi');
-    // Function to highlight text content
-    var highlightText = function (textContent) {
-        if (!textContent || typeof textContent !== 'string') {
-            return textContent;
+        // Apply highlighting (same logic as before)
+        const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
+        const textNodes = [];
+        let node;
+        while ((node = walker.nextNode())) {
+            textNodes.push(node);
         }
-        var parts = textContent.split(regex);
-        return parts.map(function (part, index) {
-            var shouldHighlight = wordsArray.some(function (word) {
+        textNodes.forEach(textNode => {
+            var _a;
+            const text = textNode.textContent || '';
+            if (!text.trim())
+                return;
+            const pattern = wordsArray
+                .filter(word => word)
+                .map(word => {
                 if (word instanceof RegExp) {
-                    return word.test(part);
+                    return word.source;
                 }
-                return caseSensitive
-                    ? part === word.trim()
-                    : part.toLowerCase() === word.trim().toLowerCase();
-            });
-            return shouldHighlight ? (React.createElement("mark", { key: index, style: highlightStyle }, part)) : (part);
+                let term = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+                if (isWordBoundary) {
+                    term = `\\b${term}\\b`;
+                }
+                return term;
+            })
+                .join('|');
+            if (!pattern)
+                return;
+            const regex = new RegExp(`(${pattern})`, caseSensitive ? 'g' : 'gi');
+            const parts = text.split(regex);
+            if (parts.length > 1) {
+                const fragment = document.createDocumentFragment();
+                parts.forEach(part => {
+                    if (!part)
+                        return;
+                    const shouldHighlight = wordsArray.some(word => {
+                        if (word instanceof RegExp) {
+                            const testRegex = new RegExp(word.source, caseSensitive ? word.flags : word.flags + 'i');
+                            return testRegex.test(part);
+                        }
+                        return caseSensitive
+                            ? part === word.trim()
+                            : part.toLowerCase() === word.trim().toLowerCase();
+                    });
+                    if (shouldHighlight) {
+                        const mark = document.createElement('mark');
+                        mark.setAttribute('data-highlighter', 'true');
+                        Object.assign(mark.style, highlightStyle);
+                        mark.textContent = part;
+                        fragment.appendChild(mark);
+                    }
+                    else {
+                        fragment.appendChild(document.createTextNode(part));
+                    }
+                });
+                (_a = textNode.parentNode) === null || _a === void 0 ? void 0 : _a.replaceChild(fragment, textNode);
+            }
         });
-    };
-    // Function to recursively process React elements
-    var processElement = function (element) {
-        if (typeof element === 'string') {
-            return highlightText(element);
-        }
-        if (typeof element === 'number') {
-            return element;
-        }
-        if (!React.isValidElement(element)) {
-            return element;
-        }
-        // Clone element and process its children
-        var processedChildren = React.Children.map(element.props.children, function (child) {
-            if (typeof child === 'string') {
-                return highlightText(child);
+        // Update signature after highlighting
+        lastHighlightSignature.current = getTextSignature(element);
+    }, [getTextSignature]);
+    useLayoutEffect(() => {
+        if (!containerRef.current)
+            return;
+        isDebug && console.log('Setting up persistent MutationObserver');
+        highlightTextInElement(containerRef.current);
+        setIsInitiallyReady(true);
+        observerRef.current = new MutationObserver((mutations) => {
+            if (!containerRef.current)
+                return;
+            // Check if the text signature has actually changed
+            const currentSignature = getTextSignature(containerRef.current);
+            if (currentSignature !== lastHighlightSignature.current) {
+                isDebug && console.log('Text signature changed, re-highlighting');
+                isDebug && console.log('Old:', lastHighlightSignature.current);
+                isDebug && console.log('New:', currentSignature);
+                highlightTextInElement(containerRef.current);
+            }
+            else {
+                isDebug && console.log('Text signature unchanged, ignoring mutation');
             }
-            return processElement(child);
         });
-        return React.cloneElement(element, {}, processedChildren);
-    };
-    return processElement(children);
+        observerRef.current.observe(containerRef.current, {
+            childList: true,
+            subtree: true,
+            characterData: true
+        });
+        return () => {
+            if (observerRef.current) {
+                observerRef.current.disconnect();
+            }
+        };
+    }, [words, highlightStyle, caseSensitive, isWordBoundary, highlightTextInElement, getTextSignature]);
+    return (React.createElement("div", { ref: containerRef, style: {
+            visibility: isInitiallyReady ? 'visible' : 'hidden',
+            minHeight: isInitiallyReady ? 'auto' : '1em'
+        } }, children));
 };
 export default TextHighlighter;
+//# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,32 +1,44 @@
 {
   "name": "react-highlight-me",
-  "version": "1.2.1",
+  "version": "2.0.1",
   "description": "Highlight words in React components or text",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "exports": {
     ".": {
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js"
-    }
+      "import": {
+        "development": "./src/index.tsx",
+        "types": "./dist/esm/index.d.ts",
+        "default": "./dist/esm/index.js"
+      },
+      "require": {
+        "development": "./src/index.tsx",
+        "types": "./dist/cjs/index.d.ts",
+        "default": "./dist/cjs/index.js"
+      }
+    },
+    "./src/*": "./src/*"
   },
   "files": [
-    "dist"
+    "dist",
+    "src"
   ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npm run build:cjs && npm run build:esm",
-    "build:cjs": "tsc -p tsconfig.cjs.json",
-    "build:esm": "tsc -p tsconfig.esm.json",
-    "clean": "rm -rf dist",
-    "prepublishOnly": "npm run build"
-  },
   "keywords": [],
   "author": "Andrey Hohutkin <Andrey.Hohutkin@gmail.com",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AHgPuK/react-highlight-me"
+  },
   "license": "ISC",
-  "packageManager": "pnpm@10.9.0",
   "devDependencies": {
     "@types/react": "^19.1.8",
     "typescript": "^5.3.3"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npm run build:cjs && npm run build:esm",
+    "build:cjs": "tsc -p tsconfig.cjs.json",
+    "build:esm": "tsc -p tsconfig.esm.json",
+    "clean": "rm -rf dist"
   }
-}
+}

package/src/index.tsx

@@ -0,0 +1,190 @@
+import React, { useLayoutEffect, useRef, useCallback, useState } from 'react';
+
+type Props = {
+  children?: React.ReactNode;
+  words?: string[] | string | RegExp | RegExp[];
+  highlightStyle?: React.CSSProperties;
+  caseSensitive?: boolean;
+  isWordBoundary?: boolean;
+  isDebug?: boolean;
+}
+// Alternative approach: Use a single observer that never disconnects
+const TextHighlighter = ({
+  children,
+  words = [],
+  highlightStyle = { backgroundColor: 'yellow', fontWeight: 'bold' },
+  caseSensitive = false,
+  isWordBoundary = true,
+  isDebug = false,
+}: Props) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const observerRef = useRef<MutationObserver | null>(null);
+  const lastHighlightSignature = useRef<string>('');
+  const [isInitiallyReady, setIsInitiallyReady] = useState(false);
+
+  const propsRef = useRef({ words, highlightStyle, caseSensitive, isWordBoundary });
+  propsRef.current = { words, highlightStyle, caseSensitive, isWordBoundary };
+
+  const getTextSignature = useCallback((element: HTMLElement): string => {
+    // Create a signature of all text content to detect real changes
+    const walker = document.createTreeWalker(
+      element,
+      NodeFilter.SHOW_TEXT,
+      null
+    );
+
+    const textParts: string[] = [];
+    let node;
+    while ((node = walker.nextNode())) {
+      if (!(node as Text).parentElement?.hasAttribute('data-highlighter')) {
+        textParts.push((node as Text).textContent || '');
+      }
+    }
+
+    return textParts.join('|');
+  }, []);
+
+  const highlightTextInElement = useCallback((element: HTMLElement) => {
+    const { words, highlightStyle, caseSensitive, isWordBoundary } = propsRef.current;
+    const wordsArray = Array.isArray(words) ? words : [words];
+
+    isDebug && console.log('Highlighting with words:', wordsArray);
+
+    // Remove existing highlights
+    const existingMarks = element.querySelectorAll('mark[data-highlighter="true"]');
+    existingMarks.forEach(mark => {
+      const textContent = mark.textContent || '';
+      const textNode = document.createTextNode(textContent);
+      mark.parentNode?.replaceChild(textNode, mark);
+    });
+
+    element.normalize(); // Ensure text nodes are merged
+
+    if (!wordsArray.length || wordsArray.every(word => !word)) {
+      lastHighlightSignature.current = getTextSignature(element);
+      return;
+    }
+
+    // Apply highlighting (same logic as before)
+    const walker = document.createTreeWalker(
+      element,
+      NodeFilter.SHOW_TEXT,
+      null
+    );
+
+    const textNodes: Text[] = [];
+    let node;
+    while ((node = walker.nextNode())) {
+      textNodes.push(node as Text);
+    }
+
+    textNodes.forEach(textNode => {
+      const text = textNode.textContent || '';
+      if (!text.trim()) return;
+
+      const pattern = wordsArray
+        .filter(word => word)
+        .map(word => {
+          if (word instanceof RegExp) {
+            return word.source;
+          }
+          let term = word.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+          if (isWordBoundary) {
+            term = `\\b${term}\\b`;
+          }
+          return term;
+        })
+        .join('|');
+
+      if (!pattern) return;
+
+      const regex = new RegExp(`(${pattern})`, caseSensitive ? 'g' : 'gi');
+      const parts = text.split(regex);
+
+      if (parts.length > 1) {
+        const fragment = document.createDocumentFragment();
+
+        parts.forEach(part => {
+          if (!part) return;
+
+          const shouldHighlight = wordsArray.some(word => {
+            if (word instanceof RegExp) {
+              const testRegex = new RegExp(word.source, caseSensitive ? word.flags : word.flags + 'i');
+              return testRegex.test(part);
+            }
+            return caseSensitive
+              ? part === word.trim()
+              : part.toLowerCase() === word.trim().toLowerCase();
+          });
+
+          if (shouldHighlight) {
+            const mark = document.createElement('mark');
+            mark.setAttribute('data-highlighter', 'true');
+            Object.assign(mark.style, highlightStyle);
+            mark.textContent = part;
+            fragment.appendChild(mark);
+          } else {
+            fragment.appendChild(document.createTextNode(part));
+          }
+        });
+
+        textNode.parentNode?.replaceChild(fragment, textNode);
+      }
+    });
+
+    // Update signature after highlighting
+    lastHighlightSignature.current = getTextSignature(element);
+  }, [getTextSignature]);
+
+  useLayoutEffect(() => {
+    if (!containerRef.current) return;
+
+    isDebug && console.log('Setting up persistent MutationObserver');
+
+    highlightTextInElement(containerRef.current);
+    setIsInitiallyReady(true);
+
+    observerRef.current = new MutationObserver((mutations) => {
+      if (!containerRef.current) return;
+
+      // Check if the text signature has actually changed
+      const currentSignature = getTextSignature(containerRef.current);
+
+      if (currentSignature !== lastHighlightSignature.current) {
+        isDebug && console.log('Text signature changed, re-highlighting');
+        isDebug && console.log('Old:', lastHighlightSignature.current);
+        isDebug && console.log('New:', currentSignature);
+
+        highlightTextInElement(containerRef.current);
+      } else {
+        isDebug && console.log('Text signature unchanged, ignoring mutation');
+      }
+    });
+
+    observerRef.current.observe(containerRef.current, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+
+    return () => {
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+      }
+    };
+  }, [words, highlightStyle, caseSensitive, isWordBoundary, highlightTextInElement, getTextSignature]);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        visibility: isInitiallyReady ? 'visible' : 'hidden',
+        minHeight: isInitiallyReady ? 'auto' : '1em'
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default TextHighlighter;