@sutrata/editor 0.1.1 → 0.2.0

package/src/findreplace/FindReplace.tsx

@@ -1,242 +0,0 @@
-import React, { useState, useCallback, useEffect, useRef } from 'react'
-import { useDocument } from '../context/DocumentContext'
-import { useTranslation } from '../i18n/useTranslation'
-import { findAll, replaceAll } from './find-engine'
-import { findInPmDoc, scrollToPmMatch } from './scroll-to-match'
-import type { PmMatch } from './scroll-to-match'
-import { getEditorView } from '../editor/editor-bus'
-import { setFindHighlights, clearFindHighlights } from '../editor/find-highlight-plugin'
-import { setSourceFindHighlights, clearSourceFindHighlights, scrollToSourceMatch } from '../source/find-highlight-source'
-
-export function FindReplace() {
-  const { text, setText, mode, findReplaceVisible, setFindReplaceVisible, findMode, setFindMode } = useDocument()
-  const { t } = useTranslation()
-  const [query, setQuery] = useState('')
-  const [replacement, setReplacement] = useState('')
-  const [caseSensitive, setCaseSensitive] = useState(false)
-  const [matches, setMatches] = useState<PmMatch[]>([])
-  const [currentIndex, setCurrentIndex] = useState(0)
-  const queryRef = useRef<HTMLInputElement>(null)
-  const nextIndexAfterReplace = useRef<number | null>(null)
-
-  // Recompute matches whenever query/text/caseSensitive/mode changes.
-  // In formatted mode we search the PM doc's display text (not raw Sutra) so
-  // offsets are correct; in source mode the CodeMirror doc *is* the raw Sutra
-  // text, so raw-offset matches from find-engine map directly onto it.
-  useEffect(() => {
-    if (!query) {
-      setMatches([])
-      setCurrentIndex(0)
-      clearFindHighlights()
-      clearSourceFindHighlights()
-      return
-    }
-    let found: PmMatch[]
-    if (mode === 'source') {
-      found = findAll(text, query, { caseSensitive }).map(m => ({
-        start: m.start, end: m.end, pmFrom: m.start, pmTo: m.end, text: m.text,
-      }))
-    } else {
-      const view = getEditorView()
-      found = view ? findInPmDoc(view.state.doc, query, { caseSensitive }) : []
-    }
-    setMatches(found)
-    const highlight = mode === 'source' ? setSourceFindHighlights : setFindHighlights
-    const scrollTo = mode === 'source' ? scrollToSourceMatch : scrollToPmMatch
-    if (nextIndexAfterReplace.current !== null) {
-      const idx = Math.min(nextIndexAfterReplace.current, Math.max(0, found.length - 1))
-      setCurrentIndex(idx)
-      nextIndexAfterReplace.current = null
-      highlight(found, idx)
-      if (found.length > 0) scrollTo(found[idx]!)
-    } else {
-      setCurrentIndex(0)
-      highlight(found, 0)
-      if (found.length > 0) scrollTo(found[0]!)
-    }
-  // text in deps so we re-search after replace; view not in deps (stable ref)
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [query, text, caseSensitive, mode])
-
-  // Scroll to current match and update active highlight whenever index changes.
-  const didMount = useRef(false)
-  useEffect(() => {
-    if (!didMount.current) { didMount.current = true; return }
-    if (mode === 'source') {
-      setSourceFindHighlights(matches, currentIndex)
-      if (matches.length > 0) scrollToSourceMatch(matches[currentIndex]!)
-    } else {
-      setFindHighlights(matches, currentIndex)
-      if (matches.length > 0) scrollToPmMatch(matches[currentIndex]!)
-    }
-  }, [currentIndex, matches, mode])
-
-  // Clear highlights when the panel closes.
-  useEffect(() => {
-    if (!findReplaceVisible) {
-      clearFindHighlights()
-      clearSourceFindHighlights()
-    }
-  }, [findReplaceVisible])
-
-  // Focus the input when the panel opens.
-  useEffect(() => {
-    if (findReplaceVisible) queryRef.current?.focus()
-  }, [findReplaceVisible])
-
-  const goNext = useCallback(() => {
-    if (matches.length === 0) return
-    setCurrentIndex(i => (i + 1) % matches.length)
-  }, [matches.length])
-
-  const goPrev = useCallback(() => {
-    if (matches.length === 0) return
-    setCurrentIndex(i => (i - 1 + matches.length) % matches.length)
-  }, [matches.length])
-
-  const handleReplaceOne = useCallback(() => {
-    if (matches.length === 0) return
-    const match = matches[currentIndex]!
-    let newText: string
-    if (mode === 'source') {
-      // In source mode the match's start/end are already raw Sutra offsets.
-      newText = text.slice(0, match.start) + replacement + text.slice(match.end)
-    } else {
-      const needle = match.text
-      // Find the Nth (currentIndex-th) occurrence of the matched display text in the
-      // raw Sutra source. Display text and raw source share the same word characters;
-      // sigils (##, **, blank lines) don't contain prose words, so occurrence index is stable.
-      let rawIdx = -1
-      let count = 0
-      let searchFrom = 0
-      while (searchFrom < text.length) {
-        const found = text.indexOf(needle, searchFrom)
-        if (found === -1) break
-        if (count === currentIndex) { rawIdx = found; break }
-        count++
-        searchFrom = found + 1
-      }
-      if (rawIdx === -1) return
-      newText = text.slice(0, rawIdx) + replacement + text.slice(rawIdx + needle.length)
-    }
-    nextIndexAfterReplace.current = Math.min(currentIndex, matches.length - 2)
-    setText(newText)
-  }, [matches, currentIndex, text, replacement, setText, mode])
-
-  const handleReplaceAll = useCallback(() => {
-    if (!query || matches.length === 0) return
-    setText(replaceAll(text, query, replacement, { caseSensitive }))
-  }, [text, query, replacement, caseSensitive, matches.length, setText])
-
-  const handleQueryKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Escape') { setFindReplaceVisible(false); return }
-    if (e.key === 'Enter' && e.shiftKey) { e.preventDefault(); goPrev(); return }
-    if (e.key === 'Enter') { e.preventDefault(); goNext(); return }
-  }, [setFindReplaceVisible, goNext, goPrev])
-
-  if (!findReplaceVisible) return null
-
-  const isReplace = findMode === 'replace'
-  const hasMatches = matches.length > 0
-
-  return (
-    <div className="cs-find-replace" role="dialog" aria-label={isReplace ? 'Find and Replace' : 'Find'}>
-      <div className="cs-fr-header">
-        <div className="cs-fr-mode-tabs">
-          <button
-            className={`cs-fr-tab${!isReplace ? ' cs-fr-tab-active' : ''}`}
-            onClick={() => setFindMode('find')}
-          >{t('findreplace.findOnly')}</button>
-          <button
-            className={`cs-fr-tab${isReplace ? ' cs-fr-tab-active' : ''}`}
-            onClick={() => setFindMode('replace')}
-          >{t('findreplace.title')}</button>
-        </div>
-        <button
-          className="cs-fr-close"
-          aria-label="Close"
-          onClick={() => setFindReplaceVisible(false)}
-        >×</button>
-      </div>
-
-      {/* Search row: input + nav buttons inline + Aa toggle */}
-      <div className="cs-fr-row">
-        <input
-          ref={queryRef}
-          className="cs-fr-input"
-          type="text"
-          placeholder={t('findreplace.find')}
-          value={query}
-          onChange={e => setQuery(e.target.value)}
-          onKeyDown={handleQueryKeyDown}
-          aria-label="Find"
-        />
-        <button
-          type="button"
-          className="cs-fr-nav-btn"
-          aria-label="Previous match"
-          title="Previous match (Shift+Enter)"
-          onClick={goPrev}
-          disabled={!hasMatches}
-        >▲</button>
-        <button
-          type="button"
-          className="cs-fr-nav-btn"
-          aria-label="Next match"
-          title="Next match (Enter)"
-          onClick={goNext}
-          disabled={!hasMatches}
-        >▼</button>
-        <button
-          type="button"
-          className={`cs-fr-toggle${caseSensitive ? ' cs-fr-active' : ''}`}
-          onClick={() => setCaseSensitive(v => !v)}
-          title={t('findreplace.caseSensitive')}
-          aria-pressed={caseSensitive}
-        >Aa</button>
-      </div>
-
-      {/* Status: count or no-match, always same height to avoid layout shift */}
-      <div className="cs-fr-status">
-        {query && !hasMatches && (
-          <span className="cs-fr-nomatch">{t('findreplace.noMatches')}</span>
-        )}
-        {hasMatches && (
-          <span className="cs-fr-nav-count">{currentIndex + 1} of {matches.length}</span>
-        )}
-      </div>
-
-      {isReplace && (
-        <>
-          <div className="cs-fr-row">
-            <input
-              className="cs-fr-input"
-              type="text"
-              placeholder={t('findreplace.replace')}
-              value={replacement}
-              onChange={e => setReplacement(e.target.value)}
-              onKeyDown={e => { if (e.key === 'Escape') setFindReplaceVisible(false) }}
-              aria-label="Replace with"
-            />
-          </div>
-          <div className="cs-fr-actions">
-            <button
-              className="cs-fr-btn"
-              onClick={handleReplaceOne}
-              disabled={!hasMatches}
-            >
-              {t('findreplace.replaceOne')}
-            </button>
-            <button
-              className="cs-fr-btn"
-              onClick={handleReplaceAll}
-              disabled={!query || !hasMatches}
-            >
-              {t('findreplace.replaceAll')}
-            </button>
-          </div>
-        </>
-      )}
-    </div>
-  )
-}

package/src/findreplace/find-engine.ts

@@ -1,97 +0,0 @@
-/**
- * Find & Replace engine for Sutrata.
- * NFC-normalized, grapheme-boundary-aware search/replace.
- */
-
-export interface FindMatch {
-  start: number  // character offset in text
-  end: number    // exclusive end
-  text: string   // matched text
-}
-
-export interface FindOptions {
-  caseSensitive?: boolean
-}
-
-/**
- * Normalize text for comparison: NFC + optional case-fold.
- */
-function normalize(text: string, caseSensitive: boolean): string {
-  const nfc = text.normalize('NFC')
-  return caseSensitive ? nfc : nfc.toLowerCase()
-}
-
-/**
- * Find all occurrences of `query` in `text`.
- * Both are NFC-normalized before comparison.
- * Case-insensitivity applies only to scripts with case (Latin, Greek, Cyrillic);
- * it's a silent no-op for caseless scripts (Devanagari, Tamil, etc.).
- */
-export function findAll(text: string, query: string, options: FindOptions = {}): FindMatch[] {
-  if (!query || !text) return []
-
-  const { caseSensitive = true } = options
-  const normalizedText = normalize(text, caseSensitive)
-  const normalizedQuery = normalize(query, caseSensitive)
-
-  if (!normalizedQuery) return []
-
-  const matches: FindMatch[] = []
-  let searchFrom = 0
-
-  while (searchFrom < normalizedText.length) {
-    const idx = normalizedText.indexOf(normalizedQuery, searchFrom)
-    if (idx === -1) break
-
-    matches.push({
-      start: idx,
-      end: idx + normalizedQuery.length,
-      text: text.slice(idx, idx + normalizedQuery.length),
-    })
-
-    searchFrom = idx + 1 // Advance by 1 to allow overlapping but not infinite loop
-  }
-
-  return matches
-}
-
-/**
- * Replace all occurrences of `query` in `text` with `replacement`.
- * Preserves the original text's casing/encoding for replaced segments.
- */
-export function replaceAll(text: string, query: string, replacement: string, options: FindOptions = {}): string {
-  const matches = findAll(text, query, options)
-  if (matches.length === 0) return text
-
-  let result = ''
-  let lastEnd = 0
-
-  for (const match of matches) {
-    result += text.slice(lastEnd, match.start)
-    result += replacement
-    lastEnd = match.end
-  }
-  result += text.slice(lastEnd)
-
-  return result
-}
-
-/**
- * Replace all occurrences within a specific range [rangeStart, rangeEnd).
- * Text outside the range is preserved unchanged.
- */
-export function replaceInRange(
-  text: string,
-  query: string,
-  replacement: string,
-  rangeStart: number,
-  rangeEnd: number,
-  options: FindOptions = {}
-): string {
-  const before = text.slice(0, rangeStart)
-  const within = text.slice(rangeStart, rangeEnd)
-  const after = text.slice(rangeEnd)
-
-  const replacedWithin = replaceAll(within, query, replacement, options)
-  return before + replacedWithin + after
-}

package/src/findreplace/scroll-to-match.ts

@@ -1,89 +0,0 @@
-import type { Node } from 'prosemirror-model'
-import { getEditorView } from '../editor/editor-bus'
-
-/**
- * Walk the PM doc once and return:
- * - `text`: flat concatenation of all text node content (no sigils, no blank lines)
- * - `pmPositions`: parallel array where pmPositions[i] is the PM doc position
- *   corresponding to character i in `text`
- */
-export function buildPmTextMap(doc: Node): { text: string; pmPositions: number[] } {
-  const chars: string[] = []
-  const pmPositions: number[] = []
-
-  doc.nodesBetween(0, doc.content.size, (node, pmPos) => {
-    if (node.isText) {
-      const t = node.text!
-      for (let i = 0; i < t.length; i++) {
-        chars.push(t[i]!)
-        pmPositions.push(pmPos + i)
-      }
-    }
-    return true
-  })
-
-  return { text: chars.join(''), pmPositions }
-}
-
-export interface PmMatch {
-  start: number   // index into PM text map
-  end: number
-  pmFrom: number  // PM doc position
-  pmTo: number
-  text: string
-}
-
-export function findInPmDoc(
-  doc: Node,
-  query: string,
-  options: { caseSensitive?: boolean } = {},
-): PmMatch[] {
-  if (!query) return []
-  const { text, pmPositions } = buildPmTextMap(doc)
-  if (!text) return []
-
-  const { caseSensitive = false } = options
-  const haystack = caseSensitive ? text : text.toLowerCase()
-  const needle   = caseSensitive ? query : query.toLowerCase()
-
-  const matches: PmMatch[] = []
-  let searchFrom = 0
-  while (searchFrom < haystack.length) {
-    const idx = haystack.indexOf(needle, searchFrom)
-    if (idx === -1) break
-    const end = idx + needle.length
-    matches.push({
-      start: idx,
-      end,
-      pmFrom: pmPositions[idx]!,
-      pmTo:   pmPositions[end - 1]! + 1,
-      text: text.slice(idx, end),
-    })
-    searchFrom = idx + 1
-  }
-  return matches
-}
-
-/**
- * Scroll the editor so the given match is visible.
- * Highlighting is handled by the find-highlight plugin (decorations) — no selection
- * dispatch here so focus stays in the find input.
- */
-export function scrollToPmMatch(match: PmMatch): void {
-  const view = getEditorView()
-  if (!view) return
-  try {
-    const domNode = view.nodeDOM(match.pmFrom)
-    const el = domNode instanceof Element ? domNode : (domNode as Element | null)?.parentElement
-    el?.scrollIntoView({ behavior: 'smooth', block: 'center' })
-  } catch {
-    // At doc boundary — ignore
-  }
-}
-
-/** Legacy: maps a flat text-space offset to PM position. Used by tests only. */
-export function textOffsetToPmPos(doc: Node, textOffset: number): number | null {
-  const { pmPositions } = buildPmTextMap(doc)
-  if (textOffset >= pmPositions.length) return null
-  return pmPositions[textOffset] ?? null
-}

package/src/fonts/tofu-detect.ts

@@ -1,53 +0,0 @@
-// Detect if a string contains unmapped glyphs (tofu / .notdef boxes)
-// by rendering to an invisible canvas and comparing dimensions
-
-export function detectTofu(text: string, fontFamily: string = 'monospace'): boolean {
-  if (!text || !text.length) return false
-  if (typeof document === 'undefined') return false // SSR/Node env
-
-  // Create invisible canvas
-  const canvas = document.createElement('canvas')
-  const ctx = canvas.getContext('2d')
-  if (!ctx) return false
-
-  canvas.width = 1000
-  canvas.height = 100
-
-  // Render reference .notdef character (U+FFFD, replacement char)
-  ctx.font = `12px ${fontFamily}`
-  ctx.fillStyle = 'black'
-  ctx.fillText('�', 10, 50)
-
-  try {
-    const refData = ctx.getImageData(0, 0, canvas.width, canvas.height).data
-    const refPixels = countNonZeroPixels(refData)
-
-    // Render each character from input text
-    for (const char of text) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height)
-      ctx.fillText(char, 10, 50)
-      const charData = ctx.getImageData(0, 0, canvas.width, canvas.height).data
-      const charPixels = countNonZeroPixels(charData)
-
-      // If pixel count matches .notdef (within 10% tolerance), it's likely tofu
-      if (Math.abs(charPixels - refPixels) < refPixels * 0.1) {
-        return true
-      }
-    }
-  } catch {
-    return false
-  }
-
-  return false
-}
-
-function countNonZeroPixels(imageData: Uint8ClampedArray): number {
-  let count = 0
-  // Every 4th value is alpha; count pixels where any channel is non-zero
-  for (let i = 0; i < imageData.length; i += 4) {
-    if ((imageData[i] ?? 0) > 0 || (imageData[i + 1] ?? 0) > 0 || (imageData[i + 2] ?? 0) > 0) {
-      count++
-    }
-  }
-  return count
-}

package/src/i18n/LanguageContext.tsx

@@ -1,207 +0,0 @@
-import React, { createContext, useContext, useState, useCallback } from 'react'
-import { parse, DocumentNode, SceneHeadingNode, ContentNode } from '@sutrata/parser'
-import { detectScript } from './language-detect'
-
-interface LanguageContextType {
-  currentLanguage: string
-  resolveLanguageAtCaret: (text: string, caretPos: number, docFrontmatter?: Record<string, any>) => string
-}
-
-const LanguageContext = createContext<LanguageContextType | undefined>(undefined)
-
-export function LanguageProvider({ children }: { children: React.ReactNode }) {
-  const [currentLanguage, setCurrentLanguage] = useState<string>('en')
-
-  const resolveLanguageAtCaret = useCallback(
-    (text: string, caretPos: number, docFrontmatter: Record<string, any> = {}): string => {
-      try {
-        const ast = parse(text)
-        let effectiveLanguage = 'en'
-
-        // 1. Default to document frontmatter lang if present (lowest priority)
-        if (docFrontmatter.lang) {
-          effectiveLanguage = docFrontmatter.lang
-        }
-
-        // 2. Find the block containing the caret
-        const blockInfo = findBlockAtPosition(ast, caretPos)
-        if (!blockInfo) {
-          return effectiveLanguage
-        }
-
-        const block = blockInfo.node
-
-        // 3. Check for & lang: scene metadata (beats frontmatter)
-        if (isSceneHeading(block) && block.metadata && block.metadata.length > 0) {
-          const langMeta = block.metadata.find(m => m.key === 'lang')
-          if (langMeta) {
-            effectiveLanguage = langMeta.value
-          }
-        }
-
-        // 4. Check for inline {lang=…} tag (beats all)
-        const inlineTag = findInlineLangTag(block, caretPos)
-        if (inlineTag) {
-          effectiveLanguage = inlineTag
-        }
-
-        // 5. Fallback: detect from text at caret if no higher-priority language was found
-        // This applies when: no inline tag, no scene metadata, and no frontmatter lang
-        if (!inlineTag && !hasLangMetadata(block) && !docFrontmatter.lang) {
-          const blockText = getBlockText(block)
-          if (blockText) {
-            effectiveLanguage = detectScript(blockText)
-          }
-        }
-
-        return effectiveLanguage
-      } catch (err) {
-        console.error('Error resolving language at caret:', err)
-        return 'en'
-      }
-    },
-    []
-  )
-
-  return (
-    <LanguageContext.Provider value={{ currentLanguage, resolveLanguageAtCaret }}>
-      {children}
-    </LanguageContext.Provider>
-  )
-}
-
-export function useLanguage() {
-  const context = useContext(LanguageContext)
-  if (!context) {
-    throw new Error('useLanguage must be used within LanguageProvider')
-  }
-  return context
-}
-
-// Helper: Check if a node is a SceneHeadingNode
-function isSceneHeading(node: ContentNode): node is SceneHeadingNode {
-  return (node as any).type === 'scene-heading'
-}
-
-// Helper: Get text content from a block
-function getBlockText(block: ContentNode): string {
-  const blockAny = block as any
-
-  // For SceneHeadingNode, extract text from children (action, dialogue, etc.)
-  if (blockAny.type === 'scene-heading' && blockAny.children && blockAny.children.length > 0) {
-    const childTexts = blockAny.children
-      .map((child: any) => {
-        if (child.type === 'action' && child.spans) {
-          return extractTextFromSpans(child.spans)
-        }
-        if (child.type === 'dialogue' && child.spans) {
-          return extractTextFromSpans(child.spans)
-        }
-        if (child.text) return child.text
-        return ''
-      })
-      .filter((t: string) => t.length > 0)
-      .join(' ')
-
-    if (childTexts) return childTexts
-  }
-
-  // Direct text property (for action, transition, note, etc.)
-  if (blockAny.text) return blockAny.text
-
-  // Inline spans (for action, dialogue, lyrics)
-  if (blockAny.spans) {
-    return blockAny.spans
-      .map((span: any) => {
-        if (span.type === 'text') return span.text
-        if (span.type === 'note') return span.text
-        if (span.spans) return extractTextFromSpans(span.spans)
-        return ''
-      })
-      .join('')
-  }
-
-  return ''
-}
-
-// Helper: Extract text from nested spans
-function extractTextFromSpans(spans: any[]): string {
-  return spans
-    .map(span => {
-      if (span.type === 'text') return span.text
-      if (span.type === 'note') return span.text
-      if (span.spans) return extractTextFromSpans(span.spans)
-      return ''
-    })
-    .join('')
-}
-
-// Helper: Check if block has lang metadata
-function hasLangMetadata(block: ContentNode): boolean {
-  if (!isSceneHeading(block)) return false
-  return block.metadata && block.metadata.length > 0 && block.metadata.some(m => m.key === 'lang')
-}
-
-// Helper: Find the block containing the caret position
-// Returns the block and its start position
-function findBlockAtPosition(
-  ast: DocumentNode,
-  pos: number
-): { node: ContentNode; startPos: number } | null {
-  if (!ast.children) return null
-
-  // Approximate position tracking - simplified for now
-  // In a real implementation, this would use actual byte offsets
-  let currentPos = 0
-
-  for (const child of ast.children) {
-    const blockAny = child as any
-    // Use raw text for more accurate length calculation
-    const blockLength = blockAny.raw ? blockAny.raw.length + 1 : 50 // +1 for newline, fallback to ~50 chars
-
-    if (pos >= currentPos && pos < currentPos + blockLength) {
-      return { node: child, startPos: currentPos }
-    }
-    currentPos += blockLength
-  }
-
-  // If position is beyond all blocks, return the last block as fallback
-  if (ast.children.length > 0) {
-    let totalPos = 0
-    const lastChild = ast.children[ast.children.length - 1]!
-    return { node: lastChild, startPos: totalPos }
-  }
-
-  return null
-}
-
-// Helper: Get the length of a block in characters
-function getBlockLength(block: ContentNode): number {
-  const blockAny = block as any
-  if (blockAny.raw) {
-    return blockAny.raw.length + 1 // +1 for newline
-  }
-  return (blockAny.text?.length ?? 0) + 1 // +1 for newline
-}
-
-// Helper: Find inline {lang=XX} tag in the block
-function findInlineLangTag(block: ContentNode, caretPos: number): string | null {
-  const blockText = getBlockText(block)
-  if (!blockText) return null
-
-  // Regex to find {lang=XX} tags - match 2-letter language codes
-  const tagRegex = /\{lang=([a-z]{2})\}/g
-  let match
-  let closestTag: string | null = null
-  let closestDistance = Infinity
-
-  while ((match = tagRegex.exec(blockText)) !== null) {
-    const distance = Math.abs(caretPos - match.index)
-    if (distance < closestDistance) {
-      closestDistance = distance
-      closestTag = match[1] ?? null
-    }
-  }
-
-  return closestTag
-}