@miliastry/quasar 1.0.0

package/src/HTML/HTMLToGreenNode.ts

@@ -0,0 +1,290 @@
+import { GreenNode, greenNode, greenLeaf } from '../Syntax/GreenNode';
+import { RedNode } from '../Syntax/RedNode';
+import type { NodeKind } from '../Types/core';
+import { isBlockKind } from '../BBCode/BBCodeToGreenNode';
+
+function domToGreenTree(root: HTMLElement): GreenNode {
+  let currentOffset = 0;
+
+  function convert(node: globalThis.Node): GreenNode {
+    const start = currentOffset;
+    const children: GreenNode[] = [];
+    let kind: string = 'document';
+    let text = '';
+    
+    if (node.nodeType === 3) { // Text Node
+      text = node.nodeValue || '';
+      
+      // Convert pure whitespace text nodes into spacing/empty_line directly
+      if (text.trim() === '') {
+        const parentTag = node.parentNode ? node.parentNode.nodeName.toLowerCase() : '';
+        if (['ul', 'ol', 'table', 'tbody', 'tr'].includes(parentTag)) {
+          return [] as any; // Ignore structural whitespace
+        }
+
+        const newlines = (text.match(/\n/g) || []).length;
+        if (newlines >= 2) {
+          kind = 'empty_line';
+          text = '\n\n';
+          currentOffset += 2;
+        } else if (newlines === 1) {
+          kind = 'spacing';
+          text = '\n';
+          currentOffset += 1;
+        } else {
+          kind = 'text'; // Fallback for 0 newlines
+        }
+      } else {
+        kind = 'text';
+        currentOffset += text.length;
+      }
+    } else if (node.nodeType === 1) { // Element Node
+      const el = node as HTMLElement;
+      const tag = el.tagName.toLowerCase();
+      
+      switch (tag) {
+        case 'b':
+        case 'strong': kind = 'bold'; break;
+        case 'i':
+        case 'em': kind = 'italic'; break;
+        case 'u': kind = 'underline'; break;
+        case 's':
+        case 'strike':
+        case 'del': kind = 'strikethrough'; break;
+        case 'a': 
+          kind = 'url'; 
+          text = `=${el.getAttribute('href') || ''}`;
+          break;
+        case 'img': 
+          kind = 'image';
+          text = el.getAttribute('src') || '';
+          break;
+        case 'h1': case 'h2': case 'h3': case 'h4': case 'h5': case 'h6':
+          kind = 'heading';
+          const level = parseInt(tag.charAt(1));
+          text = `=${level}`;
+          break;
+        case 'br':
+          kind = 'spacing'; 
+          text = '\n';
+          currentOffset += 1;
+          break;
+        case 'div':
+          if (el.classList.contains('notice')) kind = 'notice';
+          else if (el.classList.contains('bbcode-sp')) kind = 'spacing';
+          else if (el.classList.contains('bbcode-para')) kind = 'empty_line';
+          else if (el.classList.contains('bbcode-imagemap') || el.classList.contains('imagemap-container')) {
+            kind = 'imagemap';
+            const img = el.querySelector('img');
+            if (img) children.push(greenLeaf('text', img.getAttribute('src') || ''));
+            children.push(greenLeaf('spacing', ''));
+            
+            const areas = el.querySelectorAll('.bbcode-imap-area, .imagemap-area');
+            areas.forEach((a, idx) => {
+               const href = a.getAttribute('href') || '';
+               const title = a.getAttribute('title') || '';
+               const style = (a as HTMLElement).style;
+               const x = parseFloat(style.left || '0');
+               const y = parseFloat(style.top || '0');
+               const w = parseFloat(style.width || '0');
+               const h = parseFloat(style.height || '0');
+               
+               const line = `${x} ${y} ${w} ${h} ${href} ${title}`.trim();
+               children.push(greenLeaf('text', line));
+               if (idx < areas.length - 1) {
+                 children.push(greenLeaf('spacing', ''));
+               }
+            });
+          }
+          else if (el.style.textAlign === 'center') kind = 'center';
+          else if (el.style.textAlign === 'right') kind = 'right';
+          else if (el.style.textAlign === 'left') kind = 'left';
+          else kind = 'group';
+          break;
+        case 'span':
+          if (el.classList.contains('spoiler')) kind = 'spoiler';
+          else if (el.classList.contains('aesthetic')) kind = 'aesthetic';
+          else if (el.style.color) { kind = 'color'; text = `=${el.style.color}`; }
+          else if (el.style.fontSize) { kind = 'font_size'; text = `=${el.style.fontSize.replace('%', '')}`; }
+          // If it's just a text wrapper generated by HTMLRenderer, we should just unwrap it
+          else if (el.classList.contains('bb-text')) {
+             // We can use a transparent group or a specialized inline node, 
+             // but flattening it is best. We can use a temporary kind that gets flattened,
+             // or just use 'group' but wait, 'group' is block-like.
+             // Actually, if we just set it to 'text_wrapper', we can filter it out, but for now 
+             // let's just make it a 'group' but ideally we shouldn't create a node at all.
+             // Wait, the simplest fix is to not create a node for bb-text and just append its children!
+             kind = 'bb_text_wrapper'; 
+          }
+          else kind = 'group';
+          break;
+        case 'iframe':
+          if (el.classList.contains('bb-youtube') || el.hasAttribute('data-youtube')) {
+            kind = 'youtube';
+            text = `=${el.getAttribute('data-youtube') || (el as HTMLIFrameElement).src.split('/embed/')[1]?.split('?')[0] || ''}`;
+          } else {
+            kind = 'group';
+          }
+          break;
+        case 'audio':
+          kind = 'audio';
+          text = `=${el.getAttribute('src') || ''}`;
+          break;
+        case 'details':
+          kind = el.classList.contains('box') ? 'box' : 'spoilerbox';
+          const summary = el.querySelector('summary');
+          if (summary) text = `=${summary.textContent || ''}`;
+          break;
+        case 'p':
+        case 'section':
+          kind = 'group';
+          break;
+        case 'ul':
+        case 'ol':
+          kind = 'list';
+          text = tag === 'ol' ? '=1' : '';
+          break;
+        case 'li':
+          kind = 'list_item';
+          break;
+        case 'blockquote':
+          kind = 'quote';
+          const firstElem = el.firstElementChild as HTMLElement;
+          if (firstElem && firstElem.tagName.toLowerCase() === 'div') {
+            const strong = firstElem.querySelector('strong');
+            if (strong && strong.textContent && strong.textContent.endsWith(' wrote:')) {
+              const author = strong.textContent.slice(0, -7);
+              text = `=${author}`;
+              (firstElem as any).__quasar_extracted = true;
+            }
+          }
+          break;
+        case 'pre':
+          kind = 'code';
+          // Extract raw text as a child text node (DocumentEngine expects code content in children)
+          const codeText = el.textContent || '';
+          children.push(greenLeaf('text', codeText));
+          currentOffset += codeText.length;
+          break;
+        case 'code':
+          kind = el.classList.contains('inline') ? 'inline_code' : 'group';
+          break;
+        default:
+          kind = 'group';
+          break;
+      }
+
+      // Convert children recursively unless it's a raw block like pre or imagemap
+      if (tag !== 'pre' && !(tag === 'div' && (el.classList.contains('bbcode-imagemap') || el.classList.contains('imagemap-container')))) {
+        for (let i = 0; i < node.childNodes.length; i++) {
+          const child = node.childNodes[i];
+          if ((child as any).__quasar_extracted) continue;
+          // Skip summary if we already extracted it for details
+          if (tag === 'details' && child.nodeName.toLowerCase() === 'summary') continue;
+          const parsedChild = convert(child);
+          if (Array.isArray(parsedChild)) {
+             children.push(...parsedChild);
+          } else {
+             children.push(parsedChild);
+          }
+        }
+      }
+    }
+
+    const end = currentOffset;
+    if (kind === 'bb_text_wrapper') {
+       // Just return the children array to be flattened by the parent
+       return children as any; 
+    }
+    return greenNode(kind as string, text, children);
+  }
+
+  const rootChildren: GreenNode[] = [];
+  for (let i = 0; i < root.childNodes.length; i++) {
+    const parsed = convert(root.childNodes[i]);
+    if (Array.isArray(parsed)) {
+      rootChildren.push(...parsed);
+    } else {
+      rootChildren.push(parsed);
+    }
+  }
+
+  // Normalize root inline nodes into paragraphs to match BBCode Parser behavior
+  const normalizedRoot: GreenNode[] = [];
+  let currentParagraph: GreenNode[] = [];
+
+  const flushParagraph = () => {
+    if (currentParagraph.length > 0) {
+      normalizedRoot.push(greenNode('paragraph', '', currentParagraph));
+      currentParagraph = [];
+    }
+  };
+
+  for (const child of rootChildren) {
+    // If it's a completely empty whitespace text node (0 newlines), ignore it
+    if (child.kind === 'text' && child.text.trim() === '') {
+      continue;
+    }
+
+    if (isBlockKind(child.kind as NodeKind) || child.kind === 'empty_line') {
+      flushParagraph();
+      normalizedRoot.push(child);
+    } else {
+      currentParagraph.push(child);
+    }
+  }
+  flushParagraph();
+
+  return greenNode('document', '', normalizedRoot);
+}
+
+export function htmlStringToGreenTree(html: string): GreenNode {
+  if (typeof DOMParser === 'undefined') {
+    // If run on server, just wrap as text (or we could use a server-side DOM lib)
+    return greenLeaf('text', html);
+  }
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, 'text/html');
+  return domToGreenTree(doc.body);
+}
+
+export function greenToRedNode(green: GreenNode, parent?: RedNode | null): RedNode {
+  // Extract metadata based on HTML tag footprints
+  let metadata: Record<string, unknown> = {};
+  if (green.kind === 'heading' && green.text.startsWith('=')) {
+    metadata = { level: parseInt(green.text.slice(1)) || 1 };
+  } else if (green.kind === 'url' && green.text.startsWith('=')) {
+    metadata = { href: green.text.slice(1) };
+  } else if (green.kind === 'color' && green.text.startsWith('=')) {
+    metadata = { color: green.text.slice(1) };
+  } else if (green.kind === 'font_size' && green.text.startsWith('=')) {
+    metadata = { size: green.text.slice(1) };
+  } else if (green.kind === 'quote' && green.text.startsWith('=')) {
+    metadata = { author: green.text.slice(1) };
+  } else if ((green.kind === 'box' || green.kind === 'spoilerbox') && green.text.startsWith('=')) {
+    metadata = { title: green.text.slice(1) };
+  } else if (green.kind === 'image') {
+    metadata = { src: green.text };
+  } else if ((green.kind === 'youtube' || green.kind === 'audio') && green.text.startsWith('=')) {
+    metadata = green.kind === 'youtube' ? { videoId: green.text.slice(1) } : { src: green.text.slice(1) };
+  } else if (green.kind === 'list') {
+    metadata = { ordered: green.text === '=1' };
+  }
+
+  const red = new RedNode(green, {
+    parent: parent ?? null,
+    kind: (green.kind as NodeKind) || 'text',
+    metadata
+  });
+
+  const greenChildren = green.children as GreenNode[];
+  if (greenChildren.length > 0) {
+    const kids: RedNode[] = new Array(greenChildren.length);
+    for (let i = 0; i < greenChildren.length; i++) {
+      kids[i] = greenToRedNode(greenChildren[i], red);
+    }
+    red.initChildren(kids);
+  }
+
+  return red;
+}

package/src/Incremental/ChangeTracker.ts

@@ -0,0 +1,105 @@
+/**
+ * DocumentEngine — ChangeTracker
+ *
+ * Tracks text changes made to the document source.
+ * Used by IncrementalParser to determine what needs to be re-parsed.
+ */
+
+export interface TextChange {
+  start: number
+  end: number
+  text: string
+}
+
+/**
+ * Source range of a text edit, in BOTH coordinate systems.
+ *
+ * An edit sits between two documents: `start`/`end` describe the changed
+ * region in NEW-source coordinates (the current document), while `endOld` is
+ * the end of the replaced region in OLD-source coordinates. The incremental
+ * preview (`BlockPatcher`) uses `start`/`endOld` to locate the affected blocks
+ * in the PREVIOUS tree (whose offsets are pre-edit) and `start`/`end` in the
+ * new one — insertions or deletions between the two make the naive single-`end`
+ * wrong, which is exactly why both ends are kept.
+ */
+export interface TextChangeRange {
+  /** Start of the edited region (identical in both coordinate systems). */
+  start: number
+  /** End of the edited region, in new-source coordinates. */
+  end: number
+  /** End of the replaced region, in old-source coordinates. */
+  endOld: number
+}
+
+export interface TextChangeStats {
+  totalChanges: number
+  totalInserted: number
+  totalDeleted: number
+  lastChange: TextChange | null
+}
+
+export class ChangeTracker {
+  private changes: TextChange[] = []
+  private maxHistory: number = 100
+
+  constructor(maxHistory?: number) {
+    if (maxHistory) this.maxHistory = maxHistory
+  }
+
+  /**
+   * Track a text change.
+   */
+  track(change: TextChange): void {
+    this.changes.push(change)
+    if (this.changes.length > this.maxHistory) {
+      this.changes.shift()
+    }
+  }
+
+  /**
+   * Get all tracked changes.
+   */
+  getAll(): TextChange[] {
+    return [...this.changes]
+  }
+
+  /**
+   * Get the most recent change.
+   */
+  getLast(): TextChange | null {
+    return this.changes.length > 0 ? this.changes[this.changes.length - 1] : null
+  }
+
+  /**
+   * Get the affected range for the last N changes.
+   * Returns null if no changes have been tracked.
+   */
+  getAffectedRange(count: number = 1): { start: number; end: number } | null {
+    if (this.changes.length === 0) return null
+
+    const relevant = this.changes.slice(-count)
+    return {
+      start: Math.min(...relevant.map(c => c.start)),
+      end: Math.max(...relevant.map(c => c.end)),
+    }
+  }
+
+  /**
+   * Clear change history.
+   */
+  clear(): void {
+    this.changes = []
+  }
+
+  /**
+   * Get statistics about tracked changes.
+   */
+  getStats(): TextChangeStats {
+    return {
+      totalChanges: this.changes.length,
+      totalInserted: this.changes.reduce((sum, c) => sum + c.text.length, 0),
+      totalDeleted: this.changes.reduce((sum, c) => sum + (c.end - c.start), 0),
+      lastChange: this.getLast(),
+    }
+  }
+}