@peaske7/readit 0.1.8 → 0.2.0

package/src/lib/highlight/script-builder.ts

@@ -1,485 +0,0 @@
-/**
- * Builds the JavaScript script to be injected into the iframe.
- *
- * This script contains the core highlighting functions that run inside
- * the sandboxed iframe, communicating with the parent via postMessage.
- *
- * IMPORTANT: DUPLICATED FUNCTIONS
- * ================================
- * The following functions are duplicated from TypeScript sources.
- * They must be kept in sync manually. When modifying any of these
- * functions, update BOTH locations.
- *
- * Duplicated from core.ts:
- *   - findTextPosition()
- *
- * Duplicated from dom.ts:
- *   - getTextOffset()
- *   - getDOMTextContent()
- *   - collectTextNodes()
- *   - applyHighlightToRange()
- *   - clearHighlights()
- *   - collectHighlightPositions() (viewport variant)
- *
- * Why duplication exists:
- *   The iframe runs in a sandboxed environment and receives content
- *   via srcdoc. It cannot import TypeScript modules. The functions
- *   must be embedded as plain JavaScript strings.
- *
- * Keeping them in sync:
- *   The TypeScript sources (core.ts, dom.ts) are the source of truth.
- *   Tests in core.test.ts verify the behavior. If you change the
- *   TypeScript implementation, manually update the corresponding
- *   function here to match.
- */
-
-/**
- * Build the complete iframe script with parent origin for secure postMessage.
- */
-export function buildIframeScript(parentOrigin: string): string {
-  return `
-<script>
-(function() {
-  const parentOrigin = ${JSON.stringify(parentOrigin)};
-  const root = document.body;
-
-  // --- Core Functions (from core.ts) ---
-
-  function findTextPosition(textContent, selectedText, hintOffset) {
-    if (!selectedText || !textContent) {
-      return null;
-    }
-
-    const occurrences = [];
-    let idx = 0;
-
-    for (;;) {
-      idx = textContent.indexOf(selectedText, idx);
-      if (idx === -1) break;
-      occurrences.push(idx);
-      idx += 1;
-    }
-
-    if (occurrences.length === 0) {
-      return null;
-    }
-
-    if (occurrences.length === 1) {
-      return {
-        start: occurrences[0],
-        end: occurrences[0] + selectedText.length,
-      };
-    }
-
-    // Multiple occurrences: find closest to hint offset
-    const target = hintOffset ?? 0;
-    let closest = occurrences[0];
-    let minDist = Math.abs(closest - target);
-
-    for (const occ of occurrences) {
-      const dist = Math.abs(occ - target);
-      if (dist < minDist) {
-        minDist = dist;
-        closest = occ;
-      }
-    }
-
-    return {
-      start: closest,
-      end: closest + selectedText.length,
-    };
-  }
-
-  // --- DOM Functions (from dom.ts) ---
-
-  const BLOCK_ELEMENTS = new Set([
-    'P', 'DIV', 'H1', 'H2', 'H3', 'H4', 'H5', 'H6',
-    'PRE', 'BLOCKQUOTE', 'LI', 'TR', 'BR'
-  ]);
-
-  function findBlockParent(node) {
-    let parent = node.parentElement;
-    while (parent && !BLOCK_ELEMENTS.has(parent.tagName)) {
-      parent = parent.parentElement;
-    }
-    return parent;
-  }
-
-  function getTextOffset(root, targetNode, targetOffset) {
-    let offset = 0;
-    let lastBlockParent = null;
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-
-    let node = walker.nextNode();
-    while (node) {
-      const blockParent = findBlockParent(node);
-
-      // Add newline when transitioning between different block parents
-      if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
-        if (!lastBlockParent.contains(blockParent) && !blockParent.contains(lastBlockParent)) {
-          offset += 1; // Account for the newline
-        }
-      }
-
-      if (node === targetNode) {
-        return offset + targetOffset;
-      }
-      offset += (node.textContent?.length ?? 0);
-      lastBlockParent = blockParent;
-      node = walker.nextNode();
-    }
-
-    return offset;
-  }
-
-  function getDOMTextContent(root) {
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-    let text = '';
-    let lastBlockParent = null;
-    let node = walker.nextNode();
-
-    while (node) {
-      const blockParent = findBlockParent(node);
-
-      // Insert newline when transitioning between different block parents
-      if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
-        if (!lastBlockParent.contains(blockParent) && !blockParent.contains(lastBlockParent)) {
-          text += '\\n';
-        }
-      }
-
-      text += node.textContent ?? '';
-      lastBlockParent = blockParent;
-      node = walker.nextNode();
-    }
-
-    return text;
-  }
-
-  function collectTextNodes(root) {
-    const textNodes = [];
-    let currentOffset = 0;
-    let lastBlockParent = null;
-
-    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
-    let node = walker.nextNode();
-
-    while (node) {
-      const blockParent = findBlockParent(node);
-
-      // Account for newline when transitioning between different block parents
-      // (same logic as getDOMTextContent)
-      if (lastBlockParent && blockParent && lastBlockParent !== blockParent) {
-        if (!lastBlockParent.contains(blockParent) && !blockParent.contains(lastBlockParent)) {
-          currentOffset += 1; // Account for the newline
-        }
-      }
-
-      const length = node.textContent?.length ?? 0;
-      textNodes.push({
-        node: node,
-        start: currentOffset,
-        end: currentOffset + length,
-      });
-      currentOffset += length;
-      lastBlockParent = blockParent;
-      node = walker.nextNode();
-    }
-
-    return textNodes;
-  }
-
-  function applyHighlightToRange(root, startOffset, endOffset, style) {
-    const textNodes = collectTextNodes(root);
-
-    const overlappingNodes = textNodes.filter(
-      n => n.end > startOffset && n.start < endOffset
-    );
-
-    if (overlappingNodes.length === 0) {
-      return;
-    }
-
-    for (const { node: textNode, start } of overlappingNodes) {
-      const nodeStart = Math.max(0, startOffset - start);
-      const nodeEnd = Math.min(textNode.length, endOffset - start);
-
-      if (nodeStart >= nodeEnd) {
-        continue;
-      }
-
-      const range = document.createRange();
-      range.setStart(textNode, nodeStart);
-      range.setEnd(textNode, nodeEnd);
-
-      const mark = document.createElement('mark');
-      mark.setAttribute(style.attribute, style.attributeValue);
-
-      try {
-        range.surroundContents(mark);
-      } catch (e) {
-        // Range crosses element boundaries (e.g., syntax-highlighted code blocks)
-        // Use extractContents + insertNode as fallback
-        try {
-          const fragment = range.extractContents();
-          mark.appendChild(fragment);
-          range.insertNode(mark);
-        } catch (e2) {
-          // If even extractContents fails, skip this node
-        }
-      }
-    }
-  }
-
-  function clearHighlights(root) {
-    const marks = root.querySelectorAll('mark[data-comment-id], mark[data-pending]');
-
-    for (const mark of marks) {
-      const parent = mark.parentNode;
-      if (parent) {
-        while (mark.firstChild) {
-          parent.insertBefore(mark.firstChild, mark);
-        }
-        parent.removeChild(mark);
-      }
-    }
-  }
-
-  function collectHighlightPositions(root) {
-    const positions = {};
-    const documentPositions = {};
-    const scrollY = window.scrollY || 0;
-
-    const marks = root.querySelectorAll('mark[data-comment-id]');
-    for (const mark of marks) {
-      const commentId = mark.getAttribute('data-comment-id');
-      if (!commentId || positions[commentId] !== undefined) continue;
-
-      const rect = mark.getBoundingClientRect();
-      positions[commentId] = rect.top;
-      documentPositions[commentId] = rect.top + scrollY;
-    }
-
-    let pendingTop = null;
-    const pendingMark = root.querySelector('mark[data-pending]');
-    if (pendingMark) {
-      const pendingRect = pendingMark.getBoundingClientRect();
-      pendingTop = pendingRect.top;
-    }
-
-    return { positions, documentPositions, pendingTop };
-  }
-
-  // --- Selection Handler ---
-
-  document.addEventListener('mouseup', function() {
-    const selection = window.getSelection();
-    if (!selection || selection.isCollapsed) return;
-
-    // Normalize whitespace: collapse any sequence of whitespace containing newlines
-    // Browser's selection.toString() includes CSS margins as extra newlines/spaces
-    const text = selection.toString().trim().replace(/\\r?\\n\\s*/g, '\\n');
-    if (text.length === 0) return;
-
-    const range = selection.getRangeAt(0);
-    const startOffset = getTextOffset(root, range.startContainer, range.startOffset);
-    const endOffset = getTextOffset(root, range.endContainer, range.endOffset);
-
-    const rangeRect = range.getBoundingClientRect();
-    const selectionTop = rangeRect.top + document.documentElement.scrollTop;
-
-    parent.postMessage({
-      type: 'textSelection',
-      text: text,
-      startOffset: startOffset,
-      endOffset: endOffset,
-      selectionTop: selectionTop
-    }, parentOrigin);
-  });
-
-  // --- Message Handler ---
-
-  window.addEventListener('message', function(event) {
-    // Handle scroll to heading request from parent
-    if (event.data.type === 'scrollToHeading') {
-      const id = event.data.id;
-      const element = document.getElementById(id);
-      if (element) {
-        element.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      }
-      return;
-    }
-
-    // Handle scroll to highlight request from parent
-    if (event.data.type === 'scrollToHighlight') {
-      const mark = document.querySelector('mark[data-comment-id="' + event.data.commentId + '"]');
-      if (mark) {
-        mark.scrollIntoView({ behavior: 'smooth', block: 'center' });
-      }
-      return;
-    }
-
-    if (event.data.type === 'applyHighlights') {
-      clearHighlights(root);
-
-      const comments = event.data.comments || [];
-      const pending = event.data.pendingSelection;
-
-      const textContent = getDOMTextContent(root);
-
-      // Resolve anchors and apply highlights
-      const resolved = comments
-        .map(function(c) {
-          const anchor = findTextPosition(textContent, c.selectedText, c.startOffset);
-          if (anchor) {
-            return { id: c.id, startOffset: anchor.start, endOffset: anchor.end };
-          }
-          return { id: c.id, startOffset: c.startOffset, endOffset: c.endOffset };
-        })
-        .sort(function(a, b) { return a.startOffset - b.startOffset; });
-
-      for (const comment of resolved) {
-        applyHighlightToRange(root, comment.startOffset, comment.endOffset, {
-          attribute: 'data-comment-id',
-          attributeValue: comment.id
-        });
-      }
-
-      if (pending) {
-        applyHighlightToRange(root, pending.startOffset, pending.endOffset, {
-          attribute: 'data-pending',
-          attributeValue: 'true'
-        });
-      }
-
-      setTimeout(function() {
-        reportPositions();
-        reportContentHeight();
-      }, 50);
-    }
-  });
-
-  // --- Position Reporting ---
-
-  function reportPositions() {
-    const result = collectHighlightPositions(root);
-    parent.postMessage({
-      type: 'highlightPositions',
-      positions: result.positions,
-      documentPositions: result.documentPositions,
-      pendingTop: result.pendingTop
-    }, parentOrigin);
-  }
-
-  // --- Content Height Reporting ---
-
-  function reportContentHeight() {
-    parent.postMessage({
-      type: 'contentHeight',
-      height: document.body.scrollHeight
-    }, parentOrigin);
-  }
-
-  window.addEventListener('scroll', reportPositions, { passive: true });
-  document.addEventListener('scroll', reportPositions, { passive: true });
-  window.addEventListener('resize', function() {
-    reportPositions();
-    reportContentHeight();
-  });
-  window.addEventListener('load', reportContentHeight);
-
-  // --- Hover Handlers ---
-
-  document.addEventListener('mouseover', function(e) {
-    const mark = e.target.closest('mark[data-comment-id]');
-    if (mark) {
-      parent.postMessage({
-        type: 'highlightHover',
-        commentId: mark.getAttribute('data-comment-id')
-      }, parentOrigin);
-    }
-  });
-
-  document.addEventListener('mouseout', function(e) {
-    const mark = e.target.closest('mark[data-comment-id]');
-    if (mark) {
-      const related = e.relatedTarget?.closest?.('mark[data-comment-id]');
-      if (!related || related.getAttribute('data-comment-id') !== mark.getAttribute('data-comment-id')) {
-        parent.postMessage({ type: 'highlightHover', commentId: null }, parentOrigin);
-      }
-    }
-  });
-
-  document.addEventListener('click', function(e) {
-    const mark = e.target.closest('mark[data-comment-id]');
-    if (mark) {
-      parent.postMessage({
-        type: 'highlightClick',
-        commentId: mark.getAttribute('data-comment-id')
-      }, parentOrigin);
-    }
-  });
-
-  // --- Ready Signal ---
-
-  parent.postMessage({ type: 'iframeReady' }, parentOrigin);
-
-  // --- Ensure Heading IDs for TOC navigation ---
-
-  function ensureHeadingIds() {
-    const headings = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
-    const seenIds = {};
-
-    for (const heading of headings) {
-      if (!heading.id) {
-        let id = (heading.textContent || '')
-          .toLowerCase()
-          .trim()
-          .replace(/[^a-z0-9 -]/g, '')
-          .replace(/ +/g, '-')
-          .replace(/-+/g, '-');
-
-        // Handle duplicates
-        const baseId = id;
-        const count = seenIds[baseId] || 0;
-        if (count > 0) {
-          id = baseId + '-' + count;
-        }
-        seenIds[baseId] = count + 1;
-
-        heading.id = id;
-      }
-    }
-  }
-  ensureHeadingIds();
-
-  // Height reporting delays to catch layout shifts
-  const HEIGHT_REPORT_DELAY_SHORT = 100;
-  const HEIGHT_REPORT_DELAY_LONG = 500;
-
-  // Report initial height reliably - use multiple strategies
-  function scheduleHeightReport() {
-    // Immediate report
-    reportContentHeight();
-    // Delayed report to catch layout shifts
-    setTimeout(reportContentHeight, HEIGHT_REPORT_DELAY_SHORT);
-    setTimeout(reportContentHeight, HEIGHT_REPORT_DELAY_LONG);
-  }
-
-  if (document.readyState === 'complete') {
-    scheduleHeightReport();
-  } else {
-    window.addEventListener('load', scheduleHeightReport);
-  }
-
-  // Watch for content size changes with ResizeObserver
-  if (typeof ResizeObserver !== 'undefined') {
-    const resizeObserver = new ResizeObserver(function() {
-      reportContentHeight();
-    });
-    resizeObserver.observe(document.body);
-  }
-})();
-</script>
-`;
-}

package/src/lib/html-processor.test.tsx

@@ -1,170 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { processHtml } from "./html-processor";
-
-describe("processHtml", () => {
-  describe("basic HTML rendering", () => {
-    it("renders simple HTML elements", () => {
-      const result = processHtml("<p>Hello, world!</p>");
-      render(result);
-      expect(screen.getByText("Hello, world!")).toBeInTheDocument();
-    });
-
-    it("renders headings", () => {
-      const result = processHtml("<h1>Title</h1><h2>Subtitle</h2>");
-      render(result);
-      expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent(
-        "Title",
-      );
-      expect(screen.getByRole("heading", { level: 2 })).toHaveTextContent(
-        "Subtitle",
-      );
-    });
-
-    it("renders links", () => {
-      const result = processHtml('<a href="https://example.com">Link</a>');
-      render(result);
-      const link = screen.getByRole("link", { name: "Link" });
-      expect(link).toHaveAttribute("href", "https://example.com");
-    });
-
-    it("renders lists", () => {
-      const result = processHtml("<ul><li>Item 1</li><li>Item 2</li></ul>");
-      render(result);
-      expect(screen.getByText("Item 1")).toBeInTheDocument();
-      expect(screen.getByText("Item 2")).toBeInTheDocument();
-    });
-  });
-
-  describe("dangerous element stripping", () => {
-    it("strips script tags and shows placeholder", () => {
-      const result = processHtml('<script>alert("xss")</script>');
-      render(result);
-      expect(screen.getByText("<script> removed")).toBeInTheDocument();
-      expect(screen.queryByText('alert("xss")')).not.toBeInTheDocument();
-    });
-
-    it("strips iframe tags and shows placeholder", () => {
-      const result = processHtml('<iframe src="https://evil.com"></iframe>');
-      render(result);
-      expect(screen.getByText("<iframe> removed")).toBeInTheDocument();
-    });
-
-    it("strips object tags and shows placeholder", () => {
-      const result = processHtml('<object data="malware.swf"></object>');
-      render(result);
-      expect(screen.getByText("<object> removed")).toBeInTheDocument();
-    });
-
-    it("strips embed tags and shows placeholder", () => {
-      const result = processHtml('<embed src="malware.swf">');
-      render(result);
-      expect(screen.getByText("<embed> removed")).toBeInTheDocument();
-    });
-  });
-
-  describe("dangerous attribute stripping", () => {
-    it("strips onclick handlers", () => {
-      const result = processHtml('<button onclick="alert(1)">Click</button>');
-      render(result);
-      const button = screen.getByRole("button", { name: "Click" });
-      expect(button).not.toHaveAttribute("onclick");
-    });
-
-    it("strips onerror handlers", () => {
-      const result = processHtml('<img src="x" onerror="alert(1)" alt="test">');
-      render(result);
-      const img = screen.getByRole("img", { name: "test" });
-      expect(img).not.toHaveAttribute("onerror");
-    });
-
-    it("strips onload handlers", () => {
-      const result = processHtml('<div onload="alert(1)">Content</div>');
-      render(result);
-      const div = screen.getByText("Content");
-      expect(div).not.toHaveAttribute("onload");
-    });
-
-    it("strips onmouseover handlers", () => {
-      const result = processHtml('<div onmouseover="alert(1)">Hover</div>');
-      render(result);
-      const div = screen.getByText("Hover");
-      expect(div).not.toHaveAttribute("onmouseover");
-    });
-  });
-
-  describe("dangerous URL neutralization", () => {
-    it("neutralizes javascript: URLs in href", () => {
-      const result = processHtml('<a href="javascript:alert(1)">Click</a>');
-      render(result);
-      const link = screen.getByRole("link", { name: "Click" });
-      expect(link).toHaveAttribute("href", "#");
-    });
-
-    it("neutralizes javascript: URLs in src", () => {
-      const result = processHtml(
-        '<img src="javascript:alert(1)" alt="bad img">',
-      );
-      render(result);
-      const img = screen.getByRole("img", { name: "bad img" });
-      expect(img).toHaveAttribute("src", "#");
-    });
-
-    it("neutralizes data: URLs", () => {
-      const result = processHtml(
-        '<a href="data:text/html,<script>alert(1)</script>">Click</a>',
-      );
-      render(result);
-      const link = screen.getByRole("link", { name: "Click" });
-      expect(link).toHaveAttribute("href", "#");
-    });
-
-    it("neutralizes vbscript: URLs", () => {
-      const result = processHtml('<a href="vbscript:msgbox(1)">Click</a>');
-      render(result);
-      const link = screen.getByRole("link", { name: "Click" });
-      expect(link).toHaveAttribute("href", "#");
-    });
-
-    it("preserves safe URLs", () => {
-      const result = processHtml('<a href="https://example.com">Safe</a>');
-      render(result);
-      const link = screen.getByRole("link", { name: "Safe" });
-      expect(link).toHaveAttribute("href", "https://example.com");
-    });
-  });
-
-  describe("mixed content", () => {
-    it("handles complex HTML with multiple dangerous elements", () => {
-      const html = `
-        <div>
-          <h1>Title</h1>
-          <script>alert("xss")</script>
-          <p onclick="steal()">Paragraph with handler</p>
-          <a href="javascript:void(0)">Bad link</a>
-          <a href="https://safe.com">Safe link</a>
-          <iframe src="evil.com"></iframe>
-        </div>
-      `;
-      render(processHtml(html));
-
-      // Script tag replaced with placeholder
-      expect(screen.getByText("<script> removed")).toBeInTheDocument();
-
-      // Event handler stripped
-      const paragraph = screen.getByText("Paragraph with handler");
-      expect(paragraph).not.toHaveAttribute("onclick");
-
-      // Dangerous URL neutralized
-      const badLink = screen.getByRole("link", { name: "Bad link" });
-      expect(badLink).toHaveAttribute("href", "#");
-
-      // Safe URL preserved
-      const safeLink = screen.getByRole("link", { name: "Safe link" });
-      expect(safeLink).toHaveAttribute("href", "https://safe.com");
-
-      // Iframe tag replaced with placeholder
-      expect(screen.getByText("<iframe> removed")).toBeInTheDocument();
-    });
-  });
-});