Advanced Topics

// Optimizing for large documents (10k+ words)

// 1. Virtual scrolling for very long documents
class VirtualDocumentEditor {
  constructor(container, content) {
    this.container = container;
    this.chunks = this.splitIntoChunks(content);
    this.visibleRange = { start: 0, end: 10 };
    this.editors = new Map();
    
    this.setupIntersectionObserver();
  }
  
  splitIntoChunks(html) {
    // Split by paragraphs, keeping 50-100 paragraphs per chunk
    const doc = new DOMParser().parseFromString(html, 'text/html');
    const paragraphs = Array.from(doc.body.children);
    const chunks = [];
    
    for (let i = 0; i < paragraphs.length; i += 50) {
      chunks.push(paragraphs.slice(i, i + 50).map(p => p.outerHTML).join(''));
    }
    
    return chunks;
  }
  
  setupIntersectionObserver() {
    this.observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        const chunkIndex = parseInt(entry.target.dataset.chunk);
        
        if (entry.isIntersecting) {
          this.activateChunk(chunkIndex);
        } else {
          this.deactivateChunk(chunkIndex);
        }
      });
    }, { rootMargin: '200px' });
  }
  
  activateChunk(index) {
    if (this.editors.has(index)) return;
    
    const chunkEl = this.container.querySelector(`[data-chunk="${index}"]`);
    const editor = Scribe.init(chunkEl, {
      // Minimal features for inactive chunks
      onChange: (html) => {
        this.chunks[index] = html;
      }
    });
    
    this.editors.set(index, editor);
  }
  
  deactivateChunk(index) {
    const editor = this.editors.get(index);
    if (editor) {
      // Save content before destroying
      this.chunks[index] = editor.getHTML();
      editor.destroy();
      this.editors.delete(index);
    }
  }
}

// 2. Debounced change handlers
const editor = Scribe.init('#editor', {
  // Don't use onChange for expensive operations
});

// Debounce expensive operations
let saveTimer;
editor.on('change', (html) => {
  clearTimeout(saveTimer);
  saveTimer = setTimeout(() => {
    saveToServer(html);
    updateWordCount(html);
  }, 500);
});

// 3. Use requestAnimationFrame for DOM measurements
editor.on('selectionChange', (selection) => {
  requestAnimationFrame(() => {
    positionToolbar(selection?.rect);
  });
});

// XSS Prevention in Rich Text Editors
//
// The #1 security concern: user-generated HTML can contain malicious scripts

// Scribe's built-in sanitizer
const editor = Scribe.init('#editor', {
  sanitize: {
    // Whitelist approach - only allow specific tags
    allowedTags: [
      'p', 'br', 'span', 'div',
      'strong', 'b', 'em', 'i', 'u', 's', 'del', 'ins',
      'a', 'img',
      'ul', 'ol', 'li',
      'blockquote', 'pre', 'code',
      'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
      'table', 'tr', 'td', 'th', 'thead', 'tbody',
      'hr'
    ],
    
    // Whitelist attributes per tag
    allowedAttributes: {
      'a': ['href', 'target', 'rel'],
      'img': ['src', 'alt', 'width', 'height'],
      'td': ['colspan', 'rowspan'],
      '*': ['class', 'id'] // All tags can have class/id
    },
    
    // URL schemes - blocks javascript:, data:, etc.
    allowedSchemes: ['http', 'https', 'mailto', 'tel'],
    
    // Remove empty elements
    stripEmpty: true
  }
});

// What the sanitizer removes:
// - <script> tags
// - <iframe> tags
// - onclick, onerror, etc. event handlers
// - javascript: URLs
// - data: URLs (except for allowed images)
// - <style> tags and style attributes (optional)
// - Unknown tags