#116 - Share Highlighted Text Links v0.1

<!-- 💙 MEMBERSCRIPT #116 v0.1 💙 - SHARE HIGHLIGHTED TEXT LINKS -->
<script>
  // Function to encode text and position for URL
  function encodeSelection(text, nodeIndex, textOffset) {
    return btoa(encodeURIComponent(JSON.stringify({ text, nodeIndex, textOffset })));
  }

  // Function to decode selection from URL
  function decodeSelection(encoded) {
    try {
      return JSON.parse(decodeURIComponent(atob(encoded)));
    } catch (e) {
      // If parsing fails, assume it's just the text in the old format
      return { text: decodeURIComponent(atob(encoded)) };
    }
  }

  // Function to remove existing highlight
  function removeExistingHighlight() {
    const existingHighlight = document.querySelector('.ms-highlight');
    if (existingHighlight) {
      const parent = existingHighlight.parentNode;
      parent.replaceChild(document.createTextNode(existingHighlight.textContent), existingHighlight);
      parent.normalize(); // Merge adjacent text nodes
    }
  }

  // Function to handle text selection
  function handleSelection() {
    const selection = window.getSelection();
    if (selection.toString().length > 0) {
      removeExistingHighlight();

      const range = selection.getRangeAt(0);
      const selectedText = selection.toString();
      const textNodes = getAllTextNodes(document.body);
      const nodeIndex = textNodes.indexOf(range.startContainer);
      const textOffset = range.startOffset;

      // Create a unique identifier for the selection
      const selectionId = encodeSelection(selectedText, nodeIndex, textOffset);

      // Update URL with the selection parameter
      const url = new URL(window.location);
      url.searchParams.set('highlight', selectionId);
      window.history.pushState({}, '', url);

      // Highlight the selected text
      highlightText(selectionId, range);
    }
  }

  // Function to highlight text
  function highlightText(selectionId, range) {
    const span = document.createElement('span');
    span.className = 'ms-highlight';
    span.id = selectionId;
    range.surroundContents(span);
  }

  // Function to highlight and scroll to text based on URL parameter
  function highlightFromURL() {
    removeExistingHighlight();

    const url = new URL(window.location);
    const highlightId = url.searchParams.get('highlight');

    if (highlightId) {
      const { text, nodeIndex, textOffset } = decodeSelection(highlightId);
      const textNodes = getAllTextNodes(document.body);

      if (nodeIndex !== undefined && textOffset !== undefined) {
        // Use precise location if available
        if (nodeIndex < textNodes.length) {
          const node = textNodes[nodeIndex];
          if (node.textContent.substr(textOffset, text.length) === text) {
            const range = document.createRange();
            range.setStart(node, textOffset);
            range.setEnd(node, textOffset + text.length);
            highlightText(highlightId, range);
          }
        }
      } else {
        // Fall back to searching for the first occurrence of the text
        for (let node of textNodes) {
          const index = node.textContent.indexOf(text);
          if (index !== -1) {
            const range = document.createRange();
            range.setStart(node, index);
            range.setEnd(node, index + text.length);
            highlightText(highlightId, range);
            break;
          }
        }
      }

      const highlightedSpan = document.getElementById(highlightId);
      if (highlightedSpan) {
        highlightedSpan.scrollIntoView({ behavior: 'smooth', block: 'center' });
      }
    }
  }

  // Helper function to get all text nodes
  function getAllTextNodes(element) {
    const textNodes = [];
    const walk = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null, false);
    let node;
    while (node = walk.nextNode()) {
      textNodes.push(node);
    }
    return textNodes;
  }

  // Add event listener for text selection
  document.addEventListener('mouseup', handleSelection);

  // Call highlightFromURL when the page loads
  window.addEventListener('load', highlightFromURL);
</script>