@sutrata/editor 0.1.1 → 0.2.0

package/src/editor/EditorView.tsx

@@ -1,82 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { EditorState } from 'prosemirror-state'
-import { EditorView as PmEditorView } from 'prosemirror-view'
-import { parse } from '@sutrata/parser'
-import { schema } from './schema'
-import { buildPlugins } from './plugins'
-import { sutraToProsemirror } from './sutra-to-prosemirror'
-import { prosemirrorToSutra } from './prosemirror-to-sutra'
-import { setEditorView, emit } from './editor-bus'
-import { useDocument } from '../context/DocumentContext'
-import { SceneHeadingView } from './scene-heading-view'
-import { FrontmatterFieldView } from './frontmatter-field-view'
-import { applyStyleVars } from '../styles/css-adapter'
-
-export function EditorView() {
-  const { text, setText, resolvedStyle } = useDocument()
-  const mountRef = useRef<HTMLDivElement>(null)
-  const viewRef = useRef<PmEditorView | null>(null)
-  const textRef = useRef(text)
-  textRef.current = text
-  // When true, the next text change originated from the editor itself —
-  // the sync effect must skip it to avoid clobbering in-flight transactions.
-  const selfChangeRef = useRef(false)
-
-  // Mount once: create ProseMirror view
-  useEffect(() => {
-    if (!mountRef.current) return
-
-    const doc = sutraToProsemirror(parse(textRef.current))
-    const state = EditorState.create({ doc, schema, plugins: buildPlugins() })
-
-    const view = new PmEditorView(mountRef.current, {
-      state,
-      nodeViews: {
-        scene_heading: (node, view, getPos) => new SceneHeadingView(node, view, getPos),
-        frontmatter_field: (node, view, getPos) => new FrontmatterFieldView(node, view, getPos),
-      },
-      dispatchTransaction(tr) {
-        const newState = view.state.apply(tr)
-        view.updateState(newState)
-        if (tr.docChanged) {
-          const newText = prosemirrorToSutra(newState.doc)
-          if (newText !== textRef.current) {
-            selfChangeRef.current = true
-            setText(newText)
-          }
-        }
-        emit()
-      },
-    })
-    viewRef.current = view
-    setEditorView(view)
-
-    return () => { setEditorView(null); view.destroy(); viewRef.current = null }
-  }, []) // eslint-disable-line react-hooks/exhaustive-deps
-
-  // Sync external text changes into ProseMirror (e.g. switching from source mode).
-  // Skip when the editor itself produced the change — it already has the right state.
-  useEffect(() => {
-    if (selfChangeRef.current) {
-      selfChangeRef.current = false
-      return
-    }
-    const view = viewRef.current
-    if (!view) return
-    const currentText = prosemirrorToSutra(view.state.doc)
-    if (currentText !== text) {
-      const doc = sutraToProsemirror(parse(text))
-      const state = EditorState.create({ doc, schema, plugins: buildPlugins() })
-      view.updateState(state)
-    }
-  }, [text])
-
-  // Apply the document's resolved style as CSS custom properties on the mount element.
-  // Works identically for built-in and user-imported styles — both are plain
-  // ScreenplayStyleDefinition objects by the time they reach here.
-  useEffect(() => {
-    if (mountRef.current) applyStyleVars(mountRef.current, resolvedStyle)
-  }, [resolvedStyle])
-
-  return <div ref={mountRef} className="cs-editor-mount" />
-}

package/src/editor/SelectionMenu.tsx

@@ -1,152 +0,0 @@
-import React, { useState, useEffect } from 'react'
-import { useLanguage } from '../i18n/LanguageContext'
-import { useDocument } from '../context/DocumentContext'
-import { insertSutra } from './insert-helper'
-import { VoiceConfirmDialog } from '../ai/VoiceConfirmDialog'
-import { SparklesIcon } from '../shell/icons'
-
-const VOICE_LANG_MAP: Record<string, string> = {
-  en: 'en-US',
-  hi: 'hi-IN',
-  ta: 'ta-IN',
-  te: 'te-IN',
-  ml: 'ml-IN',
-  kn: 'kn-IN',
-  bn: 'bn-IN',
-  gu: 'gu-IN',
-  mr: 'mr-IN',
-}
-
-function isSelectionInEditor(sel: Selection): boolean {
-  if (sel.rangeCount === 0) return false
-  const range = sel.getRangeAt(0)
-  let node: Node | null = range.commonAncestorContainer
-  while (node) {
-    if (node instanceof HTMLElement) {
-      if (node.classList.contains('ProseMirror') || node.classList.contains('cm-content')) {
-        return true
-      }
-    }
-    node = node.parentNode
-  }
-  return false
-}
-
-export function SelectionMenu() {
-  const { currentLanguage } = useLanguage()
-  const { mode } = useDocument()
-  const [menuPosition, setMenuPosition] = useState<{ x: number; y: number } | null>(null)
-  const [selectedText, setSelectedText] = useState<string>('')
-  const [showConfirm, setShowConfirm] = useState<boolean>(false)
-
-  useEffect(() => {
-    const handleSelectionChange = () => {
-      if (showConfirm) return
-
-      const sel = window.getSelection()
-      if (!sel || sel.isCollapsed || !isSelectionInEditor(sel)) {
-        setMenuPosition(null)
-        setSelectedText('')
-        return
-      }
-
-      const text = sel.toString().trim()
-      if (!text) {
-        setMenuPosition(null)
-        setSelectedText('')
-        return
-      }
-
-      const range = sel.getRangeAt(0)
-      const rect = range.getBoundingClientRect()
-
-      setMenuPosition({
-        x: rect.left + rect.width / 2,
-        y: rect.top - 8,
-      })
-      setSelectedText(sel.toString())
-    }
-
-    document.addEventListener('selectionchange', handleSelectionChange)
-    return () => {
-      document.removeEventListener('selectionchange', handleSelectionChange)
-    }
-  }, [showConfirm])
-
-  const handleCut = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    document.execCommand('cut')
-    setMenuPosition(null)
-  }
-
-  const handleCopy = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    document.execCommand('copy')
-    setMenuPosition(null)
-  }
-
-  const handleFormat = (e: React.MouseEvent) => {
-    e.preventDefault()
-    e.stopPropagation()
-    setShowConfirm(true)
-    setMenuPosition(null)
-  }
-
-  if (showConfirm) {
-    const langCode = VOICE_LANG_MAP[currentLanguage] || 'en-US'
-    return (
-      <VoiceConfirmDialog
-        rawTranscript={selectedText}
-        langCode={langCode}
-        onConfirm={(formattedText) => {
-          insertSutra(formattedText, mode)
-          setShowConfirm(false)
-        }}
-        onCancel={() => {
-          setShowConfirm(false)
-        }}
-      />
-    )
-  }
-
-  if (!menuPosition) return null
-
-  return (
-    <div
-      className="cs-selection-menu"
-      style={{
-        left: `${menuPosition.x}px`,
-        top: `${menuPosition.y}px`,
-      }}
-      role="toolbar"
-      aria-label="Text Selection Actions"
-    >
-      <button
-        type="button"
-        className="cs-selection-btn cs-selection-btn-format"
-        onClick={handleFormat}
-        title="Format selected text using AI"
-      >
-        <SparklesIcon size={12} />
-        <span>Format</span>
-      </button>
-      <div className="cs-selection-sep" />
-      <button
-        type="button"
-        className="cs-selection-btn"
-        onClick={handleCut}
-      >
-        Cut
-      </button>
-      <button
-        type="button"
-        className="cs-selection-btn"
-        onClick={handleCopy}
-      >
-        Copy
-      </button>
-    </div>
-  )
-}

package/src/editor/attr-pencil-plugin.ts

@@ -1,172 +0,0 @@
-/**
- * Attribute pencil plugin — uniform inline editing affordance for scene
- * attributes and title-page frontmatter.
- *
- * A pencil widget (visible on hover) sits at the end of every scene heading
- * and at the top-right of the title page card.
- *
- * - Scene heading: opens a dropdown of attribute keys not yet present (plus a
- *   custom-key input). Picking one inserts the node via a normal PM
- *   transaction and places the cursor in the empty value, so there is no full
- *   state rebuild and no cursor jump.
- * - Title page: opens the sectioned title page form (TitlePageDialog), where
- *   frontmatter fields are added and edited.
- */
-import { Plugin, PluginKey, TextSelection } from 'prosemirror-state'
-import { Decoration, DecorationSet } from 'prosemirror-view'
-import type { EditorView } from 'prosemirror-view'
-import type { Node as PmNode } from 'prosemirror-model'
-import { schema } from './schema'
-import { openTitlePageForm } from './editor-bus'
-
-const SCENE_META_KEYS = ['synopsis', 'status', 'tags', 'location', 'time', 'lang']
-
-let openMenu: HTMLElement | null = null
-
-function closeMenu() {
-  if (openMenu) {
-    openMenu.remove()
-    openMenu = null
-    document.removeEventListener('mousedown', onDocMousedown)
-  }
-}
-
-function onDocMousedown(e: MouseEvent) {
-  if (openMenu && !openMenu.contains(e.target as Node)) closeMenu()
-}
-
-function showMenu(anchor: HTMLElement, options: string[], onPick: (key: string) => void) {
-  closeMenu()
-  const menu = document.createElement('div')
-  menu.className = 'cs-attr-menu'
-
-  for (const key of options) {
-    const item = document.createElement('button')
-    item.type = 'button'
-    item.className = 'cs-attr-menu-item'
-    item.textContent = `+ ${key}`
-    item.addEventListener('mousedown', e => {
-      e.preventDefault()
-      closeMenu()
-      onPick(key)
-    })
-    menu.appendChild(item)
-  }
-
-  const customRow = document.createElement('div')
-  customRow.className = 'cs-attr-menu-custom'
-  const input = document.createElement('input')
-  input.type = 'text'
-  input.placeholder = 'custom key…'
-  input.addEventListener('keydown', e => {
-    e.stopPropagation()
-    if (e.key === 'Enter') {
-      const k = input.value.trim()
-      if (k) { closeMenu(); onPick(k) }
-    } else if (e.key === 'Escape') {
-      closeMenu()
-    }
-  })
-  input.addEventListener('mousedown', e => e.stopPropagation())
-  customRow.appendChild(input)
-  menu.appendChild(customRow)
-
-  const rect = anchor.getBoundingClientRect()
-  menu.style.left = `${rect.left}px`
-  menu.style.top = `${rect.bottom + 4}px`
-  document.body.appendChild(menu)
-  openMenu = menu
-  // Defer so the click that opened the menu doesn't immediately close it
-  setTimeout(() => document.addEventListener('mousedown', onDocMousedown), 0)
-  input.focus()
-}
-
-/** Insert an attribute node and place the cursor inside its (empty) content. */
-function insertNode(view: EditorView, pos: number, node: PmNode) {
-  const tr = view.state.tr.insert(pos, node)
-  view.dispatch(tr.setSelection(TextSelection.near(tr.doc.resolve(pos + 1))))
-  view.focus()
-}
-
-/**
- * For a scene heading at top-level index `index`, compute which attribute
- * keys already exist and where a new attribute line should be inserted
- * (after the heading, synopsis, and existing metadata lines).
- */
-function sceneAttrContext(view: EditorView, headingPos: number) {
-  const doc = view.state.doc
-  const $heading = doc.resolve(headingPos)
-  const headingNode = doc.nodeAt(headingPos)!
-  let pos = headingPos + headingNode.nodeSize
-  let index = $heading.index(0) + 1
-  const presentKeys = new Set<string>()
-
-  while (index < doc.childCount) {
-    const sibling = doc.child(index)
-    if (sibling.type.name === 'scene_metadata') {
-      presentKeys.add(sibling.attrs['metaKey'] as string)
-    } else {
-      break
-    }
-    pos += sibling.nodeSize
-    index++
-  }
-  return { insertPos: pos, presentKeys }
-}
-
-function makePencil(className: string, title: string, onClick: (btn: HTMLElement) => void): HTMLElement {
-  const btn = document.createElement('button')
-  btn.type = 'button'
-  btn.className = className
-  btn.title = title
-  btn.textContent = '✎'
-  btn.contentEditable = 'false'
-  btn.addEventListener('mousedown', e => {
-    e.preventDefault()
-    e.stopPropagation()
-    onClick(btn)
-  })
-  return btn
-}
-
-export const attrPencilKey = new PluginKey('attrPencil')
-
-export function createAttrPencilPlugin(): Plugin {
-  return new Plugin({
-    key: attrPencilKey,
-    props: {
-      decorations(state) {
-        const decos: Decoration[] = []
-        state.doc.forEach((node, offset) => {
-          if (node.type.name === 'scene_heading') {
-            // Widget inside the heading, after its text
-            decos.push(Decoration.widget(offset + node.nodeSize - 1, view =>
-              makePencil('cs-attr-pencil', 'Add scene attribute', btn => {
-                const ctx = sceneAttrContext(view, offset)
-                const options = SCENE_META_KEYS.filter(k => !ctx.presentKeys.has(k))
-                showMenu(btn, options, key => {
-                  const fresh = sceneAttrContext(view, offset)
-                  insertNode(view, fresh.insertPos, schema.nodes['scene_metadata']!.create({ metaKey: key }))
-                })
-              }),
-            { side: 1 }))
-          }
-          if (node.type.name === 'title_page') {
-            // Title page fields are added and edited in the title page form; the pencil
-            // (top-right of the card, positioned by CSS) opens it.
-            decos.push(Decoration.widget(offset + 1, () =>
-              makePencil('cs-attr-pencil cs-tp-pencil', 'Edit title page', () => {
-                closeMenu()
-                openTitlePageForm()
-              }),
-            { side: -1, key: 'tp-pencil' }))
-          }
-        })
-        return DecorationSet.create(state.doc, decos)
-      },
-    },
-    view() {
-      return { destroy: closeMenu }
-    },
-  })
-}

package/src/editor/character-decoration-plugin.ts

@@ -1,104 +0,0 @@
-import { Plugin } from 'prosemirror-state'
-import { Decoration, DecorationSet } from 'prosemirror-view'
-import type { Node as PmNode } from 'prosemirror-model'
-import type { EditorState } from 'prosemirror-state'
-
-/**
- * ProseMirror plugin that styles a character cue's trailing extension
- * "(V.O.)"/"(O.S.)" and dual-dialogue "^" marker live, purely from the text
- * pattern — there's no dedicated UI to set these; per the format spec, any
- * content in parentheses at the end of a character line is an extension,
- * and a trailing "^" marks dual dialogue. No node attrs or persisted marks
- * are involved — decorations are recomputed from scratch on every doc
- * change, the same way createLanguageClassPlugin() does for script classes.
- */
-export function createCharacterDecorationPlugin() {
-  return new Plugin({
-    state: {
-      init(_config, state) {
-        return computeDecorations(state.doc)
-      },
-      apply(tr, set, _oldState, newState) {
-        if (tr.docChanged) {
-          return computeDecorations(newState.doc)
-        }
-        return set
-      },
-    },
-    props: {
-      decorations(state: EditorState) {
-        return this.getState(state)
-      },
-    },
-  })
-}
-
-interface DecorationRanges {
-  parenStart?: number
-  parenEnd?: number
-  dualStart?: number
-  dualEnd?: number
-}
-
-/**
- * Finds the trailing "(...)"-group span and/or trailing "^" span in a
- * character cue's text, as character offsets into `text`. Either, both, or
- * neither may be present. The "^" is checked (and stripped from
- * consideration) first, since it comes after any extension groups.
- */
-export function findCharacterDecorationRanges(text: string): DecorationRanges {
-  const ranges: DecorationRanges = {}
-
-  let working = text
-  const dualMatch = /\s(\^)\s*$/.exec(text)
-  if (dualMatch) {
-    ranges.dualStart = dualMatch.index + dualMatch[0].indexOf('^')
-    ranges.dualEnd = ranges.dualStart + 1
-    working = text.slice(0, dualMatch.index)
-  }
-
-  const parenMatch = /(\s+\([^()]*\))+\s*$/.exec(working)
-  if (parenMatch) {
-    const matched = parenMatch[0]
-    const leadingWs = matched.length - matched.trimStart().length
-    ranges.parenStart = parenMatch.index + leadingWs
-    ranges.parenEnd = parenMatch.index + matched.trimEnd().length
-  }
-
-  return ranges
-}
-
-function computeDecorations(doc: PmNode): DecorationSet {
-  const decorations: Decoration[] = []
-
-  doc.forEach((node, pos) => {
-    if (node.type.name !== 'character') return
-    const text = node.textContent
-    if (!text) return
-
-    const { parenStart, parenEnd, dualStart, dualEnd } = findCharacterDecorationRanges(text)
-    // +1: text content starts one position inside the block node
-    const contentStart = pos + 1
-
-    if (parenStart !== undefined && parenEnd !== undefined) {
-      // class passed in both attrs (DOM rendering) and spec (testing/reference) —
-      // matches language-class-plugin.ts's convention.
-      decorations.push(Decoration.inline(
-        contentStart + parenStart,
-        contentStart + parenEnd,
-        { class: 'cs-character-extension' },
-        { class: 'cs-character-extension' }
-      ))
-    }
-    if (dualStart !== undefined && dualEnd !== undefined) {
-      decorations.push(Decoration.inline(
-        contentStart + dualStart,
-        contentStart + dualEnd,
-        { class: 'cs-character-dual-marker' },
-        { class: 'cs-character-dual-marker' }
-      ))
-    }
-  })
-
-  return DecorationSet.create(doc, decorations)
-}

package/src/editor/editor-bus.ts

@@ -1,51 +0,0 @@
-import type { EditorView } from 'prosemirror-view'
-import type { Command } from 'prosemirror-state'
-import type { EditorView as CmEditorView } from '@codemirror/view'
-
-let currentView: EditorView | null = null
-let currentSourceView: CmEditorView | null = null
-const listeners = new Set<() => void>()
-
-export function setEditorView(view: EditorView | null): void {
-  currentView = view
-  emit()
-}
-
-export function getEditorView(): EditorView | null {
-  return currentView
-}
-
-export function setSourceView(view: CmEditorView | null): void {
-  currentSourceView = view
-}
-
-export function getSourceView(): CmEditorView | null {
-  return currentSourceView
-}
-
-export function runCommand(cmd: Command): void {
-  if (!currentView) return
-  cmd(currentView.state, currentView.dispatch, currentView)
-  currentView.focus()
-}
-
-export function activeBlockType(): string | null {
-  if (!currentView) return null
-  return currentView.state.selection.$from.parent.type.name
-}
-
-export function subscribe(fn: () => void): () => void {
-  listeners.add(fn)
-  return () => listeners.delete(fn)
-}
-
-export function emit(): void {
-  listeners.forEach(fn => fn())
-}
-
-/** Window event that opens the title page form (TitlePageDialog, mounted by AppShell). */
-export const OPEN_TITLE_PAGE_EVENT = 'cs:open-title-page'
-
-export function openTitlePageForm(): void {
-  window.dispatchEvent(new CustomEvent(OPEN_TITLE_PAGE_EVENT))
-}

package/src/editor/find-highlight-plugin.ts

@@ -1,68 +0,0 @@
-import { Plugin, PluginKey } from 'prosemirror-state'
-import { Decoration, DecorationSet } from 'prosemirror-view'
-import type { PmMatch } from '../findreplace/scroll-to-match'
-
-const findHighlightKey = new PluginKey<DecorationSet>('findHighlight')
-
-// Module-level state pushed from FindReplace; the plugin reads this on each update.
-let currentMatches: PmMatch[] = []
-let currentIndex = 0
-let pluginView: import('prosemirror-view').EditorView | null = null
-
-/** Called by FindReplace whenever matches or active index change. */
-export function setFindHighlights(matches: PmMatch[], activeIndex: number): void {
-  currentMatches = matches
-  currentIndex = activeIndex
-  if (pluginView) {
-    // Dispatch a no-op meta transaction to trigger decoration recompute.
-    const tr = pluginView.state.tr.setMeta(findHighlightKey, true)
-    pluginView.dispatch(tr)
-  }
-}
-
-/** Called by FindReplace when the panel closes — clears all highlights. */
-export function clearFindHighlights(): void {
-  setFindHighlights([], 0)
-}
-
-function buildDecorations(matches: PmMatch[], activeIndex: number, doc: import('prosemirror-model').Node): DecorationSet {
-  if (matches.length === 0) return DecorationSet.empty
-  const decos = matches.map((m, i) =>
-    Decoration.inline(m.pmFrom, m.pmTo, {
-      class: i === activeIndex ? 'cs-find-active' : 'cs-find-match',
-    })
-  )
-  return DecorationSet.create(doc, decos)
-}
-
-export function createFindHighlightPlugin(): Plugin {
-  return new Plugin<DecorationSet>({
-    key: findHighlightKey,
-
-    view(view) {
-      pluginView = view
-      return {
-        destroy() { pluginView = null },
-      }
-    },
-
-    state: {
-      init(_config, state) {
-        return buildDecorations(currentMatches, currentIndex, state.doc)
-      },
-      apply(tr, _old, _oldState, newState) {
-        // Recompute on doc change (positions shift) or when we push a meta update.
-        if (tr.docChanged || tr.getMeta(findHighlightKey)) {
-          return buildDecorations(currentMatches, currentIndex, newState.doc)
-        }
-        return _old
-      },
-    },
-
-    props: {
-      decorations(state) {
-        return this.getState(state)
-      },
-    },
-  })
-}

package/src/editor/frontmatter-field-view.ts

@@ -1,52 +0,0 @@
-import type { Node as PmNode } from 'prosemirror-model'
-import type { EditorView, NodeView } from 'prosemirror-view'
-
-export class FrontmatterFieldView implements NodeView {
-  dom: HTMLElement
-  contentDOM: HTMLElement
-  private counter: HTMLElement | null = null
-
-  constructor(node: PmNode, view: EditorView, getPos: () => number | undefined) {
-    this.dom = document.createElement('div')
-    this.dom.className = 'cs-fm-field'
-    this.dom.dataset['key'] = node.attrs['fmKey'] as string
-
-    this.contentDOM = document.createElement('span')
-    this.contentDOM.className = 'cs-fm-field-content'
-    this.dom.appendChild(this.contentDOM)
-
-    if (node.attrs['fmKey'] === 'logline') {
-      this.counter = document.createElement('span')
-      this.counter.className = 'cs-fm-logline-counter'
-      this.updateCounter(node.textContent)
-      this.dom.appendChild(this.counter)
-    }
-  }
-
-  private updateCounter(text: string) {
-    if (!this.counter) return
-    const words = text.split(/\s+/).filter(Boolean).length
-    this.counter.textContent = `${words} words`
-    if (words > 50) {
-      this.counter.style.color = '#c5221f' // red warning
-      this.counter.style.background = '#fce8e6'
-      this.counter.style.borderColor = '#fad2cf'
-    } else if (words > 30) {
-      this.counter.style.color = '#b06000' // orange warn/target
-      this.counter.style.background = '#fef7e0'
-      this.counter.style.borderColor = '#feebc8'
-    } else {
-      this.counter.style.color = '#8a887f' // clean gray
-      this.counter.style.background = '#f0efe9'
-      this.counter.style.borderColor = '#e2e0d8'
-    }
-  }
-
-  update(node: PmNode): boolean {
-    if (node.type.name !== 'frontmatter_field') return false
-    if (node.attrs['fmKey'] === 'logline' && this.counter) {
-      this.updateCounter(node.textContent)
-    }
-    return true
-  }
-}