Scribe Editor

<!-- ScribeEditor.svelte -->
<script lang="ts">
  import { onMount, onDestroy, createEventDispatcher } from 'svelte';
  import { Scribe, type EditorInstance, type FormatState } from '@/lib/scribe';
  
  export let value = '';
  export let placeholder = 'Start writing...';
  export let readonly = false;
  
  let editorEl: HTMLElement;
  let editor: EditorInstance | null = null;
  
  const dispatch = createEventDispatcher<{
    change: string;
    selectionChange: FormatState | null;
  }>();
  
  onMount(() => {
    editorEl.innerHTML = value;
    
    editor = Scribe.init(editorEl, {
      placeholder,
      readOnly: readonly,
      onChange: (html) => {
        value = html;
        dispatch('change', html);
      },
      onFormatChange: (event) => {
        dispatch('selectionChange', event.current);
      }
    });
  });
  
  onDestroy(() => {
    editor?.destroy();
  });
  
  // Exported methods
  export function bold() { editor?.bold(); }
  export function italic() { editor?.italic(); }
  export function heading(level: 1 | 2 | 3 | 4 | 5 | 6) { editor?.heading(level); }
  export function getHTML() { return editor?.getHTML() || ''; }
</script>

<div 
  bind:this={editorEl}
  class="scribe-content prose"
/>

<!-- Usage -->
<!--
<script>
  import ScribeEditor from './ScribeEditor.svelte';
  
  let editorRef;
  let formats;
</script>

<button on:click={() => editorRef.bold()}>Bold</button>

<ScribeEditor 
  bind:this={editorRef}
  on:selectionChange={(e) => formats = e.detail}
/>
-->

// scribe-editor.js - Custom Element
class ScribeEditor extends HTMLElement {
  static get observedAttributes() {
    return ['placeholder', 'readonly'];
  }
  
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    this.editor = null;
  }
  
  connectedCallback() {
    // Create shadow DOM structure
    this.shadowRoot.innerHTML = `
      <style>
        :host {
          display: block;
        }
        .content {
          min-height: 200px;
          padding: 1rem;
          outline: none;
        }
        .content:empty::before {
          content: attr(data-placeholder);
          color: #999;
        }
      </style>
      <div class="content" data-placeholder="${this.placeholder}"></div>
    `;
    
    const content = this.shadowRoot.querySelector('.content');
    
    // Initialize Scribe
    import('./scribe.js').then(({ Scribe }) => {
      this.editor = Scribe.init(content, {
        placeholder: this.placeholder,
        readOnly: this.readonly,
        onChange: (html) => {
          this.dispatchEvent(new CustomEvent('change', { 
            detail: { html },
            bubbles: true 
          }));
        }
      });
    });
  }
  
  disconnectedCallback() {
    this.editor?.destroy();
  }
  
  attributeChangedCallback(name, oldVal, newVal) {
    if (name === 'readonly') {
      this.editor?.setReadOnly(newVal !== null);
    }
  }
  
  get placeholder() {
    return this.getAttribute('placeholder') || 'Start writing...';
  }
  
  get readonly() {
    return this.hasAttribute('readonly');
  }
  
  // Public API
  bold() { this.editor?.bold(); }
  italic() { this.editor?.italic(); }
  getHTML() { return this.editor?.getHTML() || ''; }
  setHTML(html) { this.editor?.setHTML(html); }
}

customElements.define('scribe-editor', ScribeEditor);

// Usage:
// <scribe-editor placeholder="Write here..."></scribe-editor>
// 
// const editor = document.querySelector('scribe-editor');
// editor.bold();
// editor.addEventListener('change', (e) => console.log(e.detail.html));

// Link handling
const editor = Scribe.init('#editor');

// Add link to selected text
editor.link('https://example.com');

// Remove link from selection
editor.unlink();

// Check if selection is a link
editor.on('selectionChange', (selection) => {
  if (selection?.formats.link) {
    console.log('Current link:', selection.formats.link);
  }
});

// Image insertion
const editor = Scribe.init('#editor');

// Insert image HTML
editor.insertHTML('<img src="image.jpg" alt="Description" />');

// With full attributes
editor.insertHTML(`
  <figure>
    <img src="photo.jpg" alt="A beautiful sunset" width="800" height="600" />
    <figcaption>Photo by John Doe</figcaption>
  </figure>
`);

// Handle image upload
async function handleImageUpload(file: File) {
  const formData = new FormData();
  formData.append('image', file);
  
  const response = await fetch('/api/upload', {
    method: 'POST',
    body: formData
  });
  
  const { url } = await response.json();
  editor.insertHTML(`<img src="${url}" alt="" />`);
}

// Drag and drop
const content = editor.getContentElement();
content.addEventListener('drop', async (e) => {
  e.preventDefault();
  const files = Array.from(e.dataTransfer?.files || []);
  
  for (const file of files) {
    if (file.type.startsWith('image/')) {
      await handleImageUpload(file);
    }
  }
});

// Variable/Token insertion (mail merge, templates)
const editor = Scribe.init('#editor');

// Insert a non-editable variable token
function insertVariable(name: string, value: string) {
  const token = `<span 
    class="variable-token" 
    contenteditable="false" 
    data-variable="${name}"
  >${value}</span>`;
  
  editor.insertHTML(token);
  editor.focus();
}

// Usage
insertVariable('first_name', '{{first_name}}');
insertVariable('company', '{{company}}');

// Style in CSS
// .variable-token {
//   background: #e3f2fd;
//   border-radius: 3px;
//   padding: 0 4px;
//   color: #1565c0;
//   cursor: default;
// }

// Extract variables from content
function extractVariables(html: string): string[] {
  const matches = html.match(/data-variable="([^"]+)"/g) || [];
  return matches.map(m => m.replace(/data-variable="|"/g, ''));
}

// Inline widgets (mentions, hashtags, custom blocks)
class InlineWidget {
  constructor(private editor: EditorInstance) {}
  
  insert(type: string, data: Record<string, unknown>) {
    const widget = document.createElement('span');
    widget.className = `widget widget-${type}`;
    widget.contentEditable = 'false';
    widget.dataset.type = type;
    widget.dataset.payload = JSON.stringify(data);
    
    // Render based on type
    switch (type) {
      case 'mention':
        widget.innerHTML = `<span class="mention">@${data.name}</span>`;
        break;
      case 'hashtag':
        widget.innerHTML = `<span class="hashtag">#${data.tag}</span>`;
        break;
      case 'emoji':
        widget.innerHTML = data.emoji as string;
        break;
    }
    
    this.editor.insertHTML(widget.outerHTML);
  }
  
  // Parse widgets from HTML
  static parse(html: string): Array<{ type: string; data: unknown }> {
    const doc = new DOMParser().parseFromString(html, 'text/html');
    const widgets = doc.querySelectorAll('.widget');
    
    return Array.from(widgets).map(w => ({
      type: w.dataset.type!,
      data: JSON.parse(w.dataset.payload || '{}')
    }));
  }
}

// Usage
const widgets = new InlineWidget(editor);
widgets.insert('mention', { id: '123', name: 'John' });
widgets.insert('hashtag', { tag: 'important' });

// Toolbar positioning logic
function positionFloatingToolbar(
  toolbar: HTMLElement,
  selectionRect: DOMRect
) {
  const toolbarHeight = toolbar.offsetHeight;
  const toolbarWidth = toolbar.offsetWidth;
  const padding = 8;
  
  // Calculate position above selection
  let x = selectionRect.left + selectionRect.width / 2;
  let y = selectionRect.top - toolbarHeight - padding;
  
  // Flip below if too close to top
  if (y < padding) {
    y = selectionRect.bottom + padding;
  }
  
  // Keep within viewport horizontally
  const maxX = window.innerWidth - toolbarWidth / 2 - padding;
  const minX = toolbarWidth / 2 + padding;
  x = Math.max(minX, Math.min(maxX, x));
  
  // Apply position
  toolbar.style.left = `${x}px`;
  toolbar.style.top = `${y}px`;
  toolbar.style.transform = 'translateX(-50%)';
}

// Usage with selection events
editor.on('selectionChange', (selection) => {
  if (selection && !selection.collapsed && selection.rect) {
    positionFloatingToolbar(toolbar, selection.rect);
    toolbar.classList.add('visible');
  } else {
    toolbar.classList.remove('visible');
  }
});

// Mobile support considerations
const editor = Scribe.init('#editor', {
  // Consider touch events
});

// 1. Touch-friendly toolbar sizing
// CSS:
// .toolbar button { min-width: 44px; min-height: 44px; }

// 2. Virtual keyboard handling
const content = editor.getContentElement();

// Scroll selection into view when keyboard appears
content.addEventListener('focus', () => {
  setTimeout(() => {
    const selection = editor.getSelection();
    if (selection?.rect) {
      // Scroll into viewport center
      window.scrollTo({
        top: selection.rect.top - window.innerHeight / 3,
        behavior: 'smooth'
      });
    }
  }, 300); // Wait for keyboard
});

// 3. Handle iOS quirks
// iOS doesn't fire selectionchange reliably
let lastTouch: Touch | null = null;

content.addEventListener('touchend', (e) => {
  lastTouch = e.changedTouches[0];
  
  // Delayed selection check
  setTimeout(() => {
    const selection = editor.getSelection();
    if (selection && !selection.collapsed) {
      showToolbar(selection);
    }
  }, 10);
});

// 4. Responsive toolbar
function getToolbarMode(): 'full' | 'compact' {
  return window.innerWidth < 768 ? 'compact' : 'full';
}

// Compact mode shows fewer buttons with overflow menu

// Paste sanitization
const editor = Scribe.init('#editor', {
  sanitize: {
    allowedTags: ['p', 'strong', 'em', 'a', 'ul', 'ol', 'li'],
    allowedSchemes: ['https']
  }
});

// Scribe automatically sanitizes pasted content
// Additional custom handling:

const content = editor.getContentElement();

content.addEventListener('paste', (e) => {
  // Access raw clipboard data
  const html = e.clipboardData?.getData('text/html');
  const text = e.clipboardData?.getData('text/plain');
  
  // Log what was pasted (for debugging)
  console.log('Pasted HTML:', html);
  console.log('Pasted text:', text);
  
  // Note: Scribe handles sanitization automatically
  // This event fires BEFORE Scribe processes the paste
});

// Word/Google Docs cleanup is automatic:
// - Removes mso-* styles (Microsoft Word)
// - Strips Google Docs wrapper classes
// - Normalizes nested lists
// - Preserves semantic formatting (bold, italic, links)
// - Removes font-family, font-size unless allowed

// Accessibility best practices for RTEs

// 1. ARIA attributes
const editorEl = document.getElementById('editor');
editorEl.setAttribute('role', 'textbox');
editorEl.setAttribute('aria-multiline', 'true');
editorEl.setAttribute('aria-label', 'Rich text editor');
editorEl.setAttribute('aria-describedby', 'editor-help');

// Help text for screen readers
const helpText = document.createElement('div');
helpText.id = 'editor-help';
helpText.className = 'sr-only'; // Visually hidden
helpText.textContent = 'Use Ctrl+B for bold, Ctrl+I for italic, Ctrl+K for link';

// 2. Toolbar accessibility
function createAccessibleToolbar(editor) {
  const toolbar = document.createElement('div');
  toolbar.setAttribute('role', 'toolbar');
  toolbar.setAttribute('aria-label', 'Formatting options');
  toolbar.setAttribute('aria-controls', 'editor');
  
  // Button with proper ARIA
  const boldBtn = document.createElement('button');
  boldBtn.setAttribute('aria-label', 'Bold');
  boldBtn.setAttribute('aria-pressed', 'false');
  boldBtn.innerHTML = '<strong>B</strong>';
  
  boldBtn.onclick = () => {
    editor.bold();
    boldBtn.setAttribute('aria-pressed', 
      boldBtn.getAttribute('aria-pressed') === 'true' ? 'false' : 'true'
    );
  };
  
  toolbar.appendChild(boldBtn);
  
  // Keyboard navigation within toolbar
  toolbar.addEventListener('keydown', (e) => {
    const buttons = toolbar.querySelectorAll('button');
    const current = document.activeElement;
    const index = Array.from(buttons).indexOf(current);
    
    if (e.key === 'ArrowRight') {
      e.preventDefault();
      buttons[(index + 1) % buttons.length].focus();
    } else if (e.key === 'ArrowLeft') {
      e.preventDefault();
      buttons[(index - 1 + buttons.length) % buttons.length].focus();
    }
  });
  
  return toolbar;
}

// 3. Announce formatting changes
function announceFormat(format, applied) {
  const announcement = document.createElement('div');
  announcement.setAttribute('role', 'status');
  announcement.setAttribute('aria-live', 'polite');
  announcement.className = 'sr-only';
  announcement.textContent = `${format} ${applied ? 'applied' : 'removed'}`;
  
  document.body.appendChild(announcement);
  setTimeout(() => announcement.remove(), 1000);
}

// 4. Focus management
editor.on('focus', () => {
  // Ensure toolbar buttons show focus state
  toolbar.classList.add('editor-focused');
});

editor.on('blur', () => {
  toolbar.classList.remove('editor-focused');
});

// Get content
const html = editor.getHTML();  // '<p><strong>Hello</strong> world</p>'
const text = editor.getText();  // 'Hello world'

// Set content
editor.setHTML('<p>New content</p>');

// Check if empty
if (editor.isEmpty()) {
  showPlaceholder();
}

// SelectionState interface
interface SelectionState {
  range: Range | null;      // Native Range object
  collapsed: boolean;       // True = cursor, False = selection
  text: string;            // Selected text content
  rect: DOMRect | null;    // Position for toolbar
  formats: FormatState;    // Current formatting
}

interface FormatState {
  bold: boolean;
  italic: boolean;
  underline: boolean;
  strike: boolean;
  code: boolean;
  link: string | null;     // URL if in link
  heading: number | null;  // 1-6 or null
  list: 'ordered' | 'unordered' | null;
  blockquote: boolean;
  align: 'left' | 'center' | 'right' | 'justify';
}

// Usage: Update toolbar based on selection
editor.on('selectionChange', (selection) => {
  if (selection) {
    boldButton.classList.toggle('active', selection.formats.bold);
    italicButton.classList.toggle('active', selection.formats.italic);
  }
});

// Event handling
const editor = Scribe.init('#editor');

// Subscribe
const handleChange = (html) => {
  console.log('Content changed:', html);
  autoSave(html);
};
editor.on('change', handleChange);

// Subscribe to selection changes for toolbar
editor.on('selectionChange', (selection) => {
  if (selection && !selection.collapsed) {
    showFloatingToolbar(selection.rect, selection.formats);
  } else {
    hideFloatingToolbar();
  }
});

// Cleanup (important!)
function cleanup() {
  editor.off('change', handleChange);
  editor.destroy();
}

// Toggle read-only mode
function togglePreview() {
  const isPreview = editor.isReadOnly();
  editor.setReadOnly(!isPreview);
}

// History
document.querySelector('#undo').onclick = () => editor.undo();
document.querySelector('#redo').onclick = () => editor.redo();

// Cleanup when done
window.addEventListener('beforeunload', () => {
  editor.destroy();
});

// Apply styling to selection
editor.setFontSize(18);
editor.setFontFamily('Georgia');
editor.setColor('#ff0000');
editor.setBackgroundColor('#ffff00');

// Note: These use inline styles
// For better maintainability, consider using classes via plugins

// SanitizeConfig interface
interface SanitizeConfig {
  // Tags allowed in output
  allowedTags?: string[];
  
  // Attributes allowed per tag ('*' = all tags)
  allowedAttributes?: Record<string, string[]>;
  
  // URL schemes allowed in href/src
  allowedSchemes?: string[];
  
  // Remove empty tags like <p></p>
  stripEmpty?: boolean;
}

// Default configuration
const defaultSanitize: SanitizeConfig = {
  allowedTags: [
    'p', 'br', 'div', 'span',
    'strong', 'b', 'em', 'i', 'u', 's', 'del', 'ins',
    'sub', 'sup', 'mark', 'code', 'pre',
    'a', 'img',
    'ul', 'ol', 'li',
    'blockquote', 'hr',
    'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
    'table', 'thead', 'tbody', 'tr', 'td', 'th'
  ],
  allowedAttributes: {
    'a': ['href', 'target', 'rel', 'title'],
    'img': ['src', 'alt', 'width', 'height', 'title'],
    'td': ['colspan', 'rowspan'],
    'th': ['colspan', 'rowspan'],
    '*': ['class', 'id', 'style']
  },
  allowedSchemes: ['http', 'https', 'mailto', 'tel'],
  stripEmpty: true
};

// Strict configuration (minimal formatting)
const strictSanitize: SanitizeConfig = {
  allowedTags: ['p', 'br', 'strong', 'em', 'a'],
  allowedAttributes: {
    'a': ['href']
  },
  allowedSchemes: ['https'],
  stripEmpty: true
};

// ═══════════════════════════════════════════════
// OLD ARCHITECTURE (DOM-Driven)
// ═══════════════════════════════════════════════

// ❌ Toolbar read state from queryCommandState
const isBold = document.queryCommandState('bold');
const fontSize = document.queryCommandValue('fontSize');

// ❌ State detection was browser-dependent
// Chrome, Firefox, Safari returned different values

// ❌ No normalization after commands
document.execCommand('bold');
// Left behind <span>, empty nodes, zero-width spaces

// ❌ No selection lifecycle
// Selection lost when clicking toolbar buttons
// Manual save/restore with fragile timing

// ═══════════════════════════════════════════════
// NEW ARCHITECTURE (Editor-State-Driven)
// ═══════════════════════════════════════════════

// ✅ Toolbar reads from command metadata
const meta = editor.getCommandState('bold');
// → { active: true, supported: true, category: 'inline', ... }

// ✅ FormatState computed from DOM walk + computed styles
const state = editor.getFormatState();
// → { bold: true, italic: false, link: null, ... }

// ✅ DOM normalization after every command
editor.bold();
// → Automatically: merge nodes, remove empties, clean junk

// ✅ Selection lifecycle with snapshot stack
editor.saveSelection('modal');
// → Pushes to stack, IME-safe, reason-tagged
editor.restoreSelection();
// → Pops from stack, applies to document

// ═══════════════════════════════════════════════
// PLUGIN COMMAND MIGRATION
// ═══════════════════════════════════════════════

// OLD: Plugin commands used exec() and queryCommandState
const oldPlugin = {
  name: 'highlight',
  commands: {
    highlight: (editor, color) => {
      // ❌ Used execCommand directly
      document.execCommand('hiliteColor', false, color);
    }
  },
  toolbarItems: [{
    name: 'highlight',
    command: 'highlight',
    // ❌ isActive read from DOM
    isActive: (state) => false, // couldn't detect
  }]
};

// NEW: Plugin commands work with editor state
const newPlugin = {
  name: 'highlight',
  commands: {
    highlight: (editor, color) => {
      // ✅ Still uses execCommand internally (that's fine)
      // But the DOM is normalized AFTER by the core engine
      editor.getDocument().execCommand('hiliteColor', false, color);
    }
  },
  toolbarItems: [{
    name: 'highlight',
    command: 'highlight',
    // ✅ isActive reads from FormatState
    isActive: (state) => !!state.backgroundColor,
  }]
};

// KEY CHANGE: Commands still use execCommand for DOM mutations.
// What changed is HOW STATE IS DETECTED:
// - Old: queryCommandState / DOM heuristics
// - New: FormatState from SelectionManager + CommandMetadata

// ═══════════════════════════════════════════════
// TOOLBAR INTEGRATION MIGRATION
// ═══════════════════════════════════════════════

// OLD: Toolbar subscribed to selectionChange
editor.on('selectionChange', (selection) => {
  // ❌ Read formats directly from selection
  if (selection) {
    boldBtn.classList.toggle('active', selection.formats.bold);
  }
});

// NEW: Toolbar subscribes to formatChange (diffed, efficient)
editor.on('formatChange', ({ current, changed, source }) => {
  // ✅ Only fires when format state ACTUALLY changes
  // ✅ 'changed' array tells you exactly what changed
  for (const key of changed) {
    const btn = toolbar.querySelector(`[data-format="${key}"]`);
    if (btn) btn.classList.toggle('active', !!current[key]);
  }
});

// EVEN BETTER: Use command metadata
editor.on('formatChange', () => {
  toolbar.querySelectorAll('button').forEach(btn => {
    const cmd = btn.dataset.command;
    const meta = editor.getCommandState(cmd);
    if (meta) {
      btn.classList.toggle('active', meta.active);
      btn.disabled = !meta.supported;
      // Rich attributes (link URL, font size, etc.)
      if (meta.attributes) {
        updateAttributeUI(cmd, meta.attributes);
      }
    }
  });
});

// METADATA-DRIVEN TOOLBAR (fully dynamic)
function buildToolbar(editor) {
  const commands = editor.getAllCommandStates();
  const toolbar = document.createElement('div');
  
  // Group by category
  const groups = {};
  commands.forEach(cmd => {
    if (!cmd.fixedToolbar) return;
    const cat = cmd.category;
    if (!groups[cat]) groups[cat] = [];
    groups[cat].push(cmd);
  });
  
  // Render groups with separators
  Object.entries(groups).forEach(([category, cmds]) => {
    const group = document.createElement('div');
    group.className = 'toolbar-group';
    cmds.forEach(cmd => {
      const btn = document.createElement('button');
      btn.dataset.command = cmd.name;
      btn.textContent = cmd.label;
      btn.title = cmd.shortcut || cmd.label;
      group.appendChild(btn);
    });
    toolbar.appendChild(group);
  });
  
  return toolbar;
}

// ═══════════════════════════════════════════════
// SELECTION MANAGEMENT MIGRATION
// ═══════════════════════════════════════════════

// OLD: Single save slot, no reason tracking
editor.saveSelection();
// ... do stuff ...
editor.restoreSelection();

// NEW: Stack-based with reason tags
editor.saveSelection('modal');
// Opens a nested dropdown inside the modal:
editor.saveSelection('dropdown');
// Restores are LIFO (last-in, first-out):
editor.restoreSelection(); // restores dropdown selection
editor.restoreSelection(); // restores modal selection

// NEW: IME-safe
// During Chinese/Japanese/Korean composition,
// save/restore are no-ops to prevent corruption.
// No migration needed — just works automatically.

// NEW: normalize() method
// After complex DOM manipulations in plugins:
editor.normalize();
// Cleans up any browser artifacts