@sutrata/editor 0.1.1 → 0.2.0

package/src/editor/frontmatter-field.ts

@@ -1,115 +0,0 @@
-import type { EditorView } from 'prosemirror-view'
-import { parse } from '@sutrata/parser'
-import { schema } from './schema'
-import { sutraToProsemirror } from './sutra-to-prosemirror'
-
-/**
- * Sets a single flat (non-dotted) top-level frontmatter key, e.g. `style: classic`.
- * Mirrors StatisticsDialog.tsx's actor-name updater (dotted-key, nested-map case) but
- * for the simpler flat-key case: patches the live ProseMirror `title_page` node when a
- * view is mounted and already has one, otherwise falls back to editing the raw text
- * (also used when no title_page node exists yet — the editor's text-sync effect will
- * rebuild the doc, including a fresh title_page node, from the new text).
- */
-export function setFlatFrontmatterField(
-  view: EditorView | null,
-  text: string,
-  setText: (next: string) => void,
-  key: string,
-  value: string,
-): void {
-  if (view) {
-    let titlePagePos: number | null = null
-    view.state.doc.forEach((node, offset) => {
-      if (node.type.name === 'title_page') titlePagePos = offset
-    })
-
-    if (titlePagePos !== null) {
-      let tr = view.state.tr
-      const tpNode = view.state.doc.nodeAt(titlePagePos)!
-      let existingPos: number | null = null
-      let pos = titlePagePos + 1
-      tpNode.forEach(field => {
-        if (field.attrs['fmKey'] === key) existingPos = pos
-        pos += field.nodeSize
-      })
-
-      if (existingPos !== null) {
-        const fieldNode = view.state.doc.nodeAt(existingPos)!
-        if (value === '') {
-          tr = tr.delete(existingPos, existingPos + fieldNode.nodeSize)
-        } else {
-          tr = tr.replaceWith(existingPos + 1, existingPos + fieldNode.nodeSize - 1, schema.text(value))
-        }
-      } else if (value !== '') {
-        const insertPos = titlePagePos + tpNode.nodeSize - 1
-        const newField = schema.nodes['frontmatter_field']!.create({ fmKey: key }, schema.text(value))
-        tr = tr.insert(insertPos, newField)
-      }
-      view.dispatch(tr)
-      return
-    }
-  }
-  setText(setFlatFrontmatterFieldInText(text, key, value))
-}
-
-/** Raw-text fallback for when no ProseMirror view is mounted (or it has no title_page
- *  node yet). Creates a frontmatter block from scratch if the document doesn't have one. */
-export function setFlatFrontmatterFieldInText(text: string, key: string, value: string): string {
-  const lines = text.split('\n')
-  const fmStartIndex = lines.indexOf('---')
-  if (fmStartIndex === -1) {
-    if (value === '') return text
-    return `---\n${key}: ${value}\n---\n\n${text}`
-  }
-  const fmEndIndex = lines.indexOf('---', fmStartIndex + 1)
-  if (fmEndIndex === -1) return text
-
-  const fmLines = lines.slice(fmStartIndex + 1, fmEndIndex)
-  let keyLineIdx = -1
-  for (let i = 0; i < fmLines.length; i++) {
-    const match = /^([A-Za-z0-9_-]+):/.exec(fmLines[i]!)
-    if (match && match[1] === key) { keyLineIdx = i; break }
-  }
-
-  if (keyLineIdx === -1) {
-    if (value !== '') fmLines.push(`${key}: ${value}`)
-  } else if (value === '') {
-    fmLines.splice(keyLineIdx, 1)
-  } else {
-    fmLines[keyLineIdx] = `${key}: ${value}`
-  }
-
-  return [...lines.slice(0, fmStartIndex + 1), ...fmLines, ...lines.slice(fmEndIndex)].join('\n')
-}
-
-/**
- * Replace the whole title page with the frontmatter of `nextText` (the full Sutra text
- * after a title-page form save). When the formatted editor is mounted, this is one
- * ProseMirror transaction that swaps the `title_page` node, so it is a single undo step and
- * the caret and scroll position are kept; the editor's normal sync then updates the text.
- * Otherwise (source mode, no view) the text is set directly.
- */
-export function applyTitlePageText(
-  view: EditorView | null,
-  nextText: string,
-  setText: (next: string) => void,
-): void {
-  if (!view) { setText(nextText); return }
-  const nextDoc = sutraToProsemirror(parse(nextText))
-  const first = nextDoc.firstChild
-  const nextTp = first && first.type.name === 'title_page' ? first : null
-
-  let tpPos: number | null = null
-  let tpSize = 0
-  view.state.doc.forEach((node, offset) => {
-    if (tpPos === null && node.type.name === 'title_page') { tpPos = offset; tpSize = node.nodeSize }
-  })
-
-  let tr = view.state.tr
-  if (tpPos !== null && nextTp) tr = tr.replaceWith(tpPos, tpPos + tpSize, nextTp)
-  else if (tpPos !== null) tr = tr.delete(tpPos, tpPos + tpSize)
-  else if (nextTp) tr = tr.insert(0, nextTp)
-  else return
-  view.dispatch(tr)
-}

package/src/editor/grapheme-cursor.ts

@@ -1,99 +0,0 @@
-import type { Command } from 'prosemirror-state'
-import { EditorState, TextSelection, Transaction } from 'prosemirror-state'
-
-/**
- * Segment text into grapheme clusters using Intl.Segmenter.
- * Falls back to codepoint-by-codepoint if Segmenter is unavailable.
- */
-function getGraphemes(text: string): string[] {
-  if (typeof Intl !== 'undefined' && 'Segmenter' in Intl) {
-    const segmenter = new (Intl as any).Segmenter(undefined, { granularity: 'grapheme' })
-    return Array.from(segmenter.segment(text), (s: any) => s.segment)
-  }
-  // Fallback: iterate by Unicode codepoint (Array.from handles surrogates)
-  return Array.from(text)
-}
-
-/**
- * Move cursor one grapheme cluster left or right.
- * Returns true if the command was applied, false if at a boundary.
- */
-export function moveByGrapheme(dir: 'left' | 'right'): Command {
-  return (state: EditorState, dispatch?: (tr: Transaction) => void): boolean => {
-    const { selection, doc } = state
-    const { $cursor } = selection as TextSelection
-
-    // Only apply to collapsed (cursor) selections
-    if (!$cursor) return false
-
-    const pos = $cursor.pos
-
-    if (dir === 'right') {
-      // Get text from cursor to end of parent block
-      const end = $cursor.end()
-      if (pos >= end) return false
-      const text = doc.textBetween(pos, end)
-      const graphemes = getGraphemes(text)
-      if (graphemes.length === 0) return false
-      const advance = graphemes[0]?.length ?? 0
-      if (advance === 0) return false
-      if (dispatch) {
-        const tr = state.tr.setSelection(TextSelection.create(doc, pos + advance))
-        dispatch(tr)
-      }
-      return true
-    } else {
-      // dir === 'left'
-      const start = $cursor.start()
-      if (pos <= start) return false
-      const text = doc.textBetween(start, pos)
-      const graphemes = getGraphemes(text)
-      if (graphemes.length === 0) return false
-      const retreat = graphemes[graphemes.length - 1]?.length ?? 0
-      if (dispatch) {
-        const tr = state.tr.setSelection(TextSelection.create(doc, pos - retreat))
-        dispatch(tr)
-      }
-      return true
-    }
-  }
-}
-
-/**
- * Extend selection one grapheme cluster left or right.
- */
-export function extendByGrapheme(dir: 'left' | 'right'): Command {
-  return (state: EditorState, dispatch?: (tr: Transaction) => void): boolean => {
-    const { selection, doc } = state
-    const { anchor, head } = selection
-
-    if (dir === 'right') {
-      const $head = doc.resolve(head)
-      const end = $head.end()
-      if (head >= end) return false
-      const text = doc.textBetween(head, end)
-      const graphemes = getGraphemes(text)
-      if (graphemes.length === 0) return false
-      const advance = graphemes[0]?.length ?? 0
-      if (advance === 0) return false
-      if (dispatch) {
-        const tr = state.tr.setSelection(TextSelection.create(doc, anchor, head + advance))
-        dispatch(tr)
-      }
-      return true
-    } else {
-      const $head = doc.resolve(head)
-      const start = $head.start()
-      if (head <= start) return false
-      const text = doc.textBetween(start, head)
-      const graphemes = getGraphemes(text)
-      if (graphemes.length === 0) return false
-      const retreat = graphemes[graphemes.length - 1]?.length ?? 0
-      if (dispatch) {
-        const tr = state.tr.setSelection(TextSelection.create(doc, anchor, head - retreat))
-        dispatch(tr)
-      }
-      return true
-    }
-  }
-}

package/src/editor/ime-plugin.ts

@@ -1,85 +0,0 @@
-import { Plugin } from 'prosemirror-state'
-import { EditorView } from 'prosemirror-view'
-
-/**
- * IME Composition plugin for ProseMirror.
- *
- * During IME composition (phonetic input for Indic/CJK scripts), the browser
- * fires compositionstart → compositionupdate (many) → compositionend.
- * ProseMirror's default behaviour re-renders the DOM on every transaction,
- * which destroys the IME candidate window mid-composition.
- *
- * This plugin:
- *  1. Tracks composition state via DOM events.
- *  2. Holds incoming transactions in a queue while composition is active.
- *  3. Flushes the queue on compositionend so the final committed text is
- *     applied as a single transaction — no duplicates, no drops.
- */
-export function createImePlugin() {
-  return new Plugin({
-    view(editorView: EditorView) {
-      return new ImePluginView(editorView)
-    },
-  })
-}
-
-class ImePluginView {
-  private composing = false
-  private pendingTr: import('prosemirror-state').Transaction | null = null
-  private view: EditorView
-
-  constructor(view: EditorView) {
-    this.view = view
-
-    this.onCompositionStart = this.onCompositionStart.bind(this)
-    this.onCompositionEnd = this.onCompositionEnd.bind(this)
-
-    view.dom.addEventListener('compositionstart', this.onCompositionStart)
-    view.dom.addEventListener('compositionend', this.onCompositionEnd)
-  }
-
-  private onCompositionStart() {
-    this.composing = true
-  }
-
-  private onCompositionEnd() {
-    this.composing = false
-    // Flush any pending transaction now that composition is done
-    if (this.pendingTr) {
-      const tr = this.pendingTr
-      this.pendingTr = null
-      this.view.dispatch(tr)
-    }
-  }
-
-  update() {
-    // Called by ProseMirror after each state update.
-    // Nothing to do here — we handle composition via DOM events.
-  }
-
-  destroy() {
-    this.view.dom.removeEventListener('compositionstart', this.onCompositionStart)
-    this.view.dom.removeEventListener('compositionend', this.onCompositionEnd)
-  }
-
-  /** Returns whether composition is currently active. */
-  isComposing(): boolean {
-    return this.composing
-  }
-}
-
-/** Singleton accessor — lets EditorView.tsx skip DOM updates during composition. */
-let _imeView: ImePluginView | null = null
-
-export function createImePluginWithRef() {
-  return new Plugin({
-    view(editorView: EditorView) {
-      _imeView = new ImePluginView(editorView)
-      return _imeView
-    },
-  })
-}
-
-export function isComposing(): boolean {
-  return _imeView?.isComposing() ?? false
-}

package/src/editor/insert-helper.ts

@@ -1,43 +0,0 @@
-import { Fragment, Slice } from 'prosemirror-model'
-import { parse } from '@sutrata/parser'
-import { sutraToProsemirror } from './sutra-to-prosemirror'
-import { getEditorView, getSourceView } from './editor-bus'
-
-export function insertSutra(sutraText: string, mode: 'formatted' | 'source') {
-  if (mode === 'formatted') {
-    const view = getEditorView()
-    if (!view) return
-    
-    const ast = parse(sutraText)
-    const pmDoc = sutraToProsemirror(ast)
-    
-    // Extract nodes from the parsed doc, skipping title_page
-    const nodes: any[] = []
-    pmDoc.content.forEach(node => {
-      if (node.type.name !== 'title_page') {
-        nodes.push(node)
-      }
-    })
-    
-    if (nodes.length > 0) {
-      const fragment = Fragment.from(nodes)
-      const slice = new Slice(fragment, 0, 0)
-      const tr = view.state.tr.replaceSelection(slice)
-      view.dispatch(tr)
-      view.focus()
-    }
-  } else {
-    const cm = getSourceView()
-    if (!cm) return
-    const transaction = cm.state.update({
-      changes: {
-        from: cm.state.selection.main.from,
-        to: cm.state.selection.main.to,
-        insert: sutraText,
-      },
-      selection: { anchor: cm.state.selection.main.from + sutraText.length }
-    })
-    cm.dispatch(transaction)
-    cm.focus()
-  }
-}

package/src/editor/keymap.ts

@@ -1,124 +0,0 @@
-import { keymap } from 'prosemirror-keymap'
-import { undo, redo } from 'prosemirror-history'
-import { toggleMark } from 'prosemirror-commands'
-import { TextSelection } from 'prosemirror-state'
-import type { Command } from 'prosemirror-state'
-import { schema } from './schema'
-import { moveByGrapheme, extendByGrapheme } from './grapheme-cursor'
-
-const smartEnter: Command = (state, dispatch) => {
-  const { $from } = state.selection
-  const node = $from.parent
-
-  if (node.type === schema.nodes['frontmatter_field']) {
-    // Enter moves to the next field, or exits into the body. New fields are
-    // added via the pencil menu, never by splitting.
-    if (dispatch) {
-      const after = $from.after()
-      dispatch(state.tr.setSelection(TextSelection.near(state.doc.resolve(after), 1)))
-    }
-    return true
-  }
-  if (node.type === schema.nodes['scene_heading'] && $from.pos === $from.end()) {
-    if (dispatch) {
-      const actionType = schema.nodes['action']!
-      const insertPos = $from.after()
-      const tr = state.tr.insert(insertPos, actionType.create())
-      dispatch(tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos + 1))))
-    }
-    return true
-  }
-  if (node.type === schema.nodes['character']) {
-    if (dispatch) {
-      const dialogueType = schema.nodes['dialogue']!
-      const insertPos = $from.after()
-      const tr = state.tr.insert(insertPos, dialogueType.create())
-      dispatch(tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos + 1))))
-    }
-    return true
-  }
-  if (node.type === schema.nodes['dialogue'] || node.type === schema.nodes['parenthetical']) {
-    if (dispatch) {
-      const actionType = schema.nodes['action']!
-      const insertPos = $from.after()
-      const tr = state.tr.insert(insertPos, actionType.create())
-      dispatch(tr.setSelection(TextSelection.near(tr.doc.resolve(insertPos + 1))))
-    }
-    return true
-  }
-  // Every other block type (action, transition, centered, lyrics, section,
-  // scene_metadata, note, comment…) has no dedicated rule above: split into
-  // another node of the SAME type. Without an explicit `typesAfter`, PM's
-  // default splitBlock command picks the first node type declared in the
-  // `block` group in schema.ts (scene_heading) rather than preserving the
-  // current type — so plain baseKeymap fallthrough silently turns the next
-  // line into a scene heading.
-  if (dispatch) {
-    const tr = state.tr.split($from.pos, 1, [{ type: node.type }])
-    dispatch(tr.scrollIntoView())
-  }
-  return true
-}
-
-export const keymapBindings: Record<string, Command> = {
-  // Editing
-  'Mod-z': undo,
-  'Mod-y': redo,
-  'Mod-Shift-Z': redo,
-  'Mod-b': (state, dispatch) => {
-    const mark = schema.marks['bold']!
-    if (state.selection.empty) return false
-    return toggleMark(mark)(state, dispatch)
-  },
-  'Mod-i': (state, dispatch) => {
-    const mark = schema.marks['italic']!
-    if (state.selection.empty) return false
-    return toggleMark(mark)(state, dispatch)
-  },
-  'Mod-u': (state, dispatch) => {
-    const mark = schema.marks['underline']!
-    if (state.selection.empty) return false
-    return toggleMark(mark)(state, dispatch)
-  },
-  'Enter': smartEnter,
-  'Shift-Enter': (state, dispatch) => {
-    const { $from } = state.selection
-    if ($from.parent.type !== schema.nodes['frontmatter_field']) return false
-    if (dispatch) {
-      const br = schema.nodes['hard_break']!.create()
-      dispatch(state.tr.replaceSelectionWith(br).scrollIntoView())
-    }
-    return true
-  },
-  'Tab': (state, _dispatch, view) => {
-    const { $from } = state.selection
-    if ($from.parent.type !== schema.nodes['scene_heading']) return false
-    if (!view) return false
-    const pos = $from.before()
-    const domNode = view.nodeDOM(pos)
-    const el = domNode instanceof HTMLElement ? domNode : (domNode as Node | null)?.parentElement
-    const input = el?.querySelector<HTMLInputElement>('input.cs-scene-id-input')
-    if (input) { input.focus(); input.select(); return true }
-    return false
-  },
-  'ArrowDown': (state, dispatch) => {
-    const { $from } = state.selection
-    if ($from.parent.type !== schema.nodes['scene_heading']) return false
-    // PM's built-in ArrowDown gets confused by the sibling scene-number input.
-    // Explicitly jump to the start of the node after the scene heading.
-    const afterPos = $from.after()
-    if (afterPos > state.doc.content.size) return false
-    if (dispatch) {
-      dispatch(state.tr.setSelection(TextSelection.near(state.doc.resolve(afterPos), 1)))
-    }
-    return true
-  },
-  'ArrowLeft': moveByGrapheme('left'),
-  'ArrowRight': moveByGrapheme('right'),
-  'Shift-ArrowLeft': extendByGrapheme('left'),
-  'Shift-ArrowRight': extendByGrapheme('right'),
-}
-
-export function buildKeymap() {
-  return keymap(keymapBindings)
-}

package/src/editor/language-class-plugin.ts

@@ -1,91 +0,0 @@
-import { Plugin } from 'prosemirror-state'
-import { Decoration, DecorationSet } from 'prosemirror-view'
-import { detectScript } from '../i18n/language-detect'
-import type { Node as PmNode } from 'prosemirror-model'
-import type { EditorState } from 'prosemirror-state'
-
-/**
- * ProseMirror plugin that applies language-specific CSS classes to block nodes
- * based on detected or specified language (from metadata or inline tags)
- */
-export function createLanguageClassPlugin() {
-  return new Plugin({
-    state: {
-      init(config, state) {
-        // Initialize decorations for the initial document
-        return computeDecorations(state.doc)
-      },
-      apply(tr, set, oldState, newState) {
-        // If document changed, recompute decorations
-        if (tr.docChanged) {
-          return computeDecorations(newState.doc)
-        }
-        // Otherwise, return the existing decoration set
-        return set
-      },
-    },
-    props: {
-      decorations(state: EditorState) {
-        return this.getState(state)
-      },
-    },
-  })
-}
-
-/**
- * Compute language decorations for the entire document
- */
-function computeDecorations(doc: PmNode): DecorationSet {
-  const decorations: Decoration[] = []
-
-  // Iterate through all block nodes and assign language class
-  doc.forEach((node, offset) => {
-    if (node.isBlock && node.type.name !== 'doc') {
-      const lang = resolveBlockLanguage(node)
-      const className = `cs-lang-${lang}`
-
-      // Create a decoration (class marker) for this block
-      // Pass class in both attrs (for DOM rendering) and spec (for testing/reference)
-      const deco = Decoration.node(
-        offset,
-        offset + node.nodeSize,
-        {
-          class: className,
-        },
-        {
-          class: className,
-        }
-      )
-      decorations.push(deco)
-    }
-  })
-
-  return DecorationSet.create(doc, decorations)
-}
-
-/**
- * Resolve the language for a single block node
- * Checks: node metadata → detected script → fallback to 'en'
- */
-function resolveBlockLanguage(node: PmNode): string {
-  // Check for metadata lang attribute (e.g., lang: hi)
-  if (node.attrs?.lang) {
-    return node.attrs.lang as string
-  }
-
-  // Check for inline {lang=…} tag in the node's text
-  if (node.textContent) {
-    const inlineMatch = /\{lang=([a-z]{2})\}/.exec(node.textContent)
-    if (inlineMatch?.[1]) {
-      return inlineMatch[1]
-    }
-  }
-
-  // Detect from text content
-  if (node.textContent) {
-    return detectScript(node.textContent)
-  }
-
-  // Fallback to English
-  return 'en'
-}

package/src/editor/plugins.ts

@@ -1,26 +0,0 @@
-import { history } from 'prosemirror-history'
-import { baseKeymap } from 'prosemirror-commands'
-import { keymap } from 'prosemirror-keymap'
-import { buildKeymap } from './keymap'
-import { createLanguageClassPlugin } from './language-class-plugin'
-import { createCharacterDecorationPlugin } from './character-decoration-plugin'
-import { createImePluginWithRef } from './ime-plugin'
-import { createAutocompletePlugin } from '../autocomplete/AutocompletePlugin'
-import { createSpellcheckPlugin } from '../spellcheck/spellcheck-plugin'
-import { createAttrPencilPlugin } from './attr-pencil-plugin'
-import { createFindHighlightPlugin } from './find-highlight-plugin'
-
-export function buildPlugins() {
-  return [
-    history(),
-    buildKeymap(),
-    keymap(baseKeymap),
-    createLanguageClassPlugin(),
-    createCharacterDecorationPlugin(),
-    createImePluginWithRef(),
-    createAutocompletePlugin(),
-    createSpellcheckPlugin(),
-    createAttrPencilPlugin(),
-    createFindHighlightPlugin(),
-  ]
-}