Search and style the Words in the Community Post content

highlight_words_in_community_post.php

add_action('fluent_community/portal_head', function() {
    ?>
    <style>
        .highlighted-day {
            background-color: yellow !important;
            color: blue !important;
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: bold;
        }
        
        .highlighted-night {
            background-color: #2c2c2c !important;
            color: #fff !important;
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: bold;
        }
        
        .highlighted-morning {
            background-color: #ffa500 !important;
            color: white !important;
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: bold;
        }
        
        .highlighted-everyone {
            background-color: #ff69b4 !important;
            color: white !important;
            padding: 2px 4px;
            border-radius: 3px;
            font-weight: bold;
        }
    </style>
    <?php
});

add_action('fluent_community/portal_footer', function() {
    ?>
    <script>
        function highlightWords(container = document) {
 
            // Try multiple selectors to find the right elements
            let paragraphs = container.querySelectorAll('.feed_texts.feed_md_content p');
            
            if (paragraphs.length === 0) {
                paragraphs = container.querySelectorAll('.feed_texts p');
            }
            
            if (paragraphs.length === 0) {
                paragraphs = container.querySelectorAll('.feed_md_content p');
            }
            
            paragraphs.forEach(function(p, index) {
                // Skip if already processed
                if (p.dataset.highlighted === 'true') {
                    return;
                }
                
                let html = p.innerHTML;
                let originalHtml = html;
                
                // Replace words with wrapped spans (handles punctuation)
                html = html.replace(/\b(day)\b/gi, '<span class="highlighted-day">$1</span>');
                html = html.replace(/\b(hello)\b/gi, '<span class="highlighted-night">$1</span>');
                html = html.replace(/\b(screenshot)\b/gi, '<span class="highlighted-morning">$1</span>');
                html = html.replace(/\b(everyone)\b/gi, '<span class="highlighted-everyone">$1</span>');
                
                if (html !== originalHtml) {
                    p.innerHTML = html;
                    p.dataset.highlighted = 'true'; // Mark as processed
                }
            });
        }
        
        // Run once when DOM is ready for any existing content
        document.addEventListener('DOMContentLoaded', function() {
            highlightWords();
        });
        
        // Set up MutationObserver to watch for new content
        const observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
                    mutation.addedNodes.forEach(function(node) {
                        if (node.nodeType === Node.ELEMENT_NODE) {
                            // Check if the added node contains our target elements or is one itself
                            if (node.querySelector && 
                                (node.querySelector('.feed_texts') || 
                                 node.querySelector('.feed_md_content') || 
                                 node.classList.contains('feed_texts') || 
                                 node.classList.contains('feed_md_content'))) {
                                highlightWords(node);
                            }
                        }
                    });
                }
            });
        });
        
        // Start observing the entire document for changes
        observer.observe(document.body, {
            childList: true,
            subtree: true
        }); 
    </script>
    <?php
});