@sutrata/editor 0.1.0

package/tests/titlepage/TitlePageDialog.test.tsx

@@ -0,0 +1,90 @@
+import { useEffect } from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { DocumentProvider, useDocument } from '../../src/context/DocumentContext'
+import { TranslationProvider } from '../../src/i18n/useTranslation'
+import { TitlePageDialog } from '../../src/titlepage/TitlePageDialog'
+
+const SRC = `---
+title: The Last Train
+date: June 2026
+lang: hi
+---
+
+## INT. STATION - NIGHT
+`
+
+let latestText = ''
+
+function Harness({ onClose }: { onClose: () => void }) {
+  const { text, setText, setMode } = useDocument()
+  useEffect(() => { setMode('source'); setText(SRC) }, []) // eslint-disable-line react-hooks/exhaustive-deps
+  latestText = text
+  return text === SRC || text.includes('title:') ? <TitlePageDialog onClose={onClose} /> : null
+}
+
+function renderDialog() {
+  const onClose = vi.fn()
+  render(
+    <TranslationProvider>
+      <DocumentProvider>
+        <Harness onClose={onClose} />
+      </DocumentProvider>
+    </TranslationProvider>,
+  )
+  return onClose
+}
+
+describe('TitlePageDialog', () => {
+  it('shows a tab per section and opens on Title & Story, pre-filled from frontmatter', () => {
+    renderDialog()
+    for (const name of ['Title & Story', 'Credits', 'Draft', 'Contact & Rights', 'Document Settings', 'Other Fields']) {
+      expect(screen.getByRole('tab', { name })).toBeInTheDocument()
+    }
+    expect(screen.getByRole('tab', { name: 'Title & Story' })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByLabelText('Title')).toHaveValue('The Last Train')
+  })
+
+  it('switches panels on tab click, hiding fields from other tabs', () => {
+    // The inactive panel's fields stay in the DOM (form state must survive a tab
+    // switch), but the panel is hidden via the `hidden` attribute — jest-dom's
+    // toBeVisible() honors that (and ancestor `hidden`), so it's used instead of a
+    // presence check.
+    renderDialog()
+    expect(screen.getByLabelText('Primary language')).not.toBeVisible()
+    fireEvent.click(screen.getByRole('tab', { name: 'Document Settings' }))
+    expect(screen.getByRole('tab', { name: 'Document Settings' })).toHaveAttribute('aria-selected', 'true')
+    expect(screen.getByLabelText('Primary language')).toBeVisible()
+    expect(screen.getByLabelText('Primary language')).toHaveValue('hi')
+    expect(screen.getByLabelText('Title')).not.toBeVisible()
+  })
+
+  it('keeps a free-text date as text and offers the date picker', () => {
+    renderDialog()
+    fireEvent.click(screen.getByRole('tab', { name: 'Draft' }))
+    const date = screen.getByLabelText('Date')
+    expect(date).toHaveValue('June 2026')
+    expect(date).not.toHaveAttribute('type', 'date')
+    fireEvent.click(screen.getByRole('button', { name: 'Pick a date' }))
+    expect(screen.getByLabelText('Date')).toHaveAttribute('type', 'date')
+  })
+
+  it('offers style and language dropdowns and writes the choices to the frontmatter', () => {
+    const onClose = renderDialog()
+    fireEvent.click(screen.getByRole('tab', { name: 'Document Settings' }))
+    fireEvent.change(screen.getByLabelText('Screenplay style'), { target: { value: 'traditional' } })
+    fireEvent.change(screen.getByLabelText('Other languages'), { target: { value: 'en' } })
+    fireEvent.change(screen.getByLabelText('Page size'), { target: { value: 'A4' } })
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(onClose).toHaveBeenCalled()
+    expect(latestText).toContain('style: traditional')
+    expect(latestText).toContain('lang-secondary: [en]')
+    expect(latestText).toContain('page: A4')
+    expect(latestText).toContain('date: June 2026')
+  })
+
+  it('does not change the text when saved without edits', () => {
+    renderDialog()
+    fireEvent.click(screen.getByRole('button', { name: 'Save' }))
+    expect(latestText).toBe(SRC)
+  })
+})

package/tests/titlepage/apply-title-page.test.ts

@@ -0,0 +1,61 @@
+import { EditorState } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+import { history, undo } from 'prosemirror-history'
+import { parse } from '@sutrata/parser'
+import { schema } from '../../src/editor/schema'
+import { sutraToProsemirror } from '../../src/editor/sutra-to-prosemirror'
+import { prosemirrorToSutra } from '../../src/editor/prosemirror-to-sutra'
+import { applyTitlePageText } from '../../src/editor/frontmatter-field'
+import { readTitlePage, writeTitlePage } from '../../src/titlepage/frontmatter-form'
+
+const SRC = `---
+title: The Last Train
+author: Meera
+---
+
+## INT. STATION - NIGHT
+
+Action line.
+`
+
+function mount(text: string) {
+  const state = EditorState.create({ doc: sutraToProsemirror(parse(text)), schema, plugins: [history()] })
+  return new EditorView(document.createElement('div'), { state })
+}
+
+describe('applyTitlePageText (formatted mode)', () => {
+  it('swaps the title page in one undoable transaction and leaves the body alone', () => {
+    const view = mount(SRC)
+    const f = readTitlePage(parse(SRC).frontmatter!.data)
+    const next = writeTitlePage(SRC, f, { ...f, author: 'Vikram', style: 'traditional' })
+    const setText = vi.fn()
+
+    applyTitlePageText(view, next, setText)
+
+    expect(setText).not.toHaveBeenCalled()
+    const out = prosemirrorToSutra(view.state.doc)
+    expect(out).toContain('author: Vikram')
+    expect(out).toContain('style: traditional')
+    expect(out).toContain('Action line.')
+
+    undo(view.state, view.dispatch)
+    expect(prosemirrorToSutra(view.state.doc)).toContain('author: Meera')
+    view.destroy()
+  })
+
+  it('inserts a title page when the document had none', () => {
+    const body = '## INT. ROOM - DAY\n\nAction.\n'
+    const view = mount(body)
+    const f = readTitlePage(undefined)
+    applyTitlePageText(view, writeTitlePage(body, f, { ...f, title: 'New Film' }), vi.fn())
+    expect(view.state.doc.firstChild!.type.name).toBe('title_page')
+    expect(prosemirrorToSutra(view.state.doc)).toContain('title: New Film')
+    view.destroy()
+  })
+
+  it('falls back to setting the text when no editor view is mounted', () => {
+    const setText = vi.fn()
+    applyTitlePageText(null, 'X', setText)
+    expect(setText).toHaveBeenCalledWith('X')
+  })
+})

package/tests/titlepage/frontmatter-form.test.ts

@@ -0,0 +1,115 @@
+import { parse } from '@sutrata/parser'
+import { readTitlePage, writeTitlePage, splitList } from '../../src/titlepage/frontmatter-form'
+
+const SRC = `---
+format: sutra/1.0
+title:
+  hi: आख़िरी ट्रेन
+  en: The Last Train
+author: रंगी पराता
+date: June 2026
+contact: |
+  rangi@example.com
+  +91 98xxx xxxxx
+lang: hi
+lang-secondary: [en]
+producer: Big Films
+characters:
+  JOHN: Actor One
+---
+
+## INT. STATION - NIGHT
+`
+
+const read = (text: string) => readTitlePage(parse(text).frontmatter?.data as Record<string, unknown>)
+
+describe('readTitlePage', () => {
+  it('reads the multilingual title with the primary language first', () => {
+    const f = read(SRC)
+    expect(f.title).toBe('आख़िरी ट्रेन')
+    expect(f.altTitles).toEqual([{ lang: 'en', text: 'The Last Train' }])
+    expect(f.lang).toBe('hi')
+    expect(f.langSecondary).toEqual(['en'])
+    expect(f.contact).toBe('rangi@example.com\n+91 98xxx xxxxx')
+  })
+
+  it('lists simple unknown keys as custom rows, hides format and nested maps', () => {
+    const f = read(SRC)
+    expect(f.custom).toEqual([{ key: 'producer', value: 'Big Films' }])
+  })
+
+  it('splits list values in every shape', () => {
+    expect(splitList('[en, sa]')).toEqual(['en', 'sa'])
+    expect(splitList('en')).toEqual(['en'])
+    expect(splitList(['ta'])).toEqual(['ta'])
+  })
+})
+
+describe('writeTitlePage', () => {
+  it('leaves the text byte-identical when nothing changed', () => {
+    const f = read(SRC)
+    expect(writeTitlePage(SRC, f, { ...f })).toBe(SRC)
+  })
+
+  it('rewrites only the changed key and keeps everything else in place', () => {
+    const f = read(SRC)
+    const out = writeTitlePage(SRC, f, { ...f, author: 'Meera Nair' })
+    expect(out).toBe(SRC.replace('author: रंगी पराता', 'author: Meera Nair'))
+  })
+
+  it('appends new keys in canonical order before the closing fence', () => {
+    const f = read(SRC)
+    const out = writeTitlePage(SRC, f, { ...f, style: 'traditional', page: 'A4', draft: 'Second Draft' })
+    const fm = out.split('---')[1]!
+    expect(fm.trimEnd().split('\n').slice(-3)).toEqual(['draft: Second Draft', 'page: A4', 'style: traditional'])
+    expect(parse(out).frontmatter!.data['style']).toBe('traditional')
+  })
+
+  it('removes keys that were cleared', () => {
+    const f = read(SRC)
+    const out = writeTitlePage(SRC, f, { ...f, contact: '' })
+    expect(out).not.toContain('contact')
+    expect(out).not.toContain('rangi@example.com')
+    expect(out).toContain('author: रंगी पराता')
+  })
+
+  it('writes the multilingual title as a nested map and a plain title as a scalar', () => {
+    const f = read(SRC)
+    const both = writeTitlePage(SRC, f, { ...f, altTitles: [...f.altTitles, { lang: 'ta', text: 'கடைசி ரயில்' }] })
+    expect(parse(both).frontmatter!.data['title']).toEqual({ hi: 'आख़िरी ट्रेन', en: 'The Last Train', ta: 'கடைசி ரயில்' })
+    const single = writeTitlePage(SRC, f, { ...f, altTitles: [] })
+    expect(parse(single).frontmatter!.data['title']).toBe('आख़िरी ट्रेन')
+  })
+
+  it('writes secondary languages as a flow list and multi-line contact as a block', () => {
+    const f = read(SRC)
+    const out = writeTitlePage(SRC, f, { ...f, langSecondary: ['en', 'sa'], contact: 'a@b.c\nPhone' })
+    expect(out).toContain('lang-secondary: [en, sa]')
+    expect(out).toContain('contact: |\n  a@b.c\n  Phone')
+    expect(parse(out).frontmatter!.data['contact']).toBe('a@b.c\nPhone')
+  })
+
+  it('edits, removes and adds custom fields, never touching nested unknown maps', () => {
+    const f = read(SRC)
+    const out = writeTitlePage(SRC, f, { ...f, custom: [{ key: 'studio', value: 'Lotus' }] })
+    expect(out).not.toContain('producer:')
+    expect(out).toContain('studio: Lotus')
+    expect(out).toContain('characters:\n  JOHN: Actor One')
+    expect(out).toContain('format: sutra/1.0')
+  })
+
+  it('creates a frontmatter block when the document has none', () => {
+    const body = '## INT. ROOM - DAY\n'
+    const f = read(body)
+    const out = writeTitlePage(body, f, { ...f, title: 'New Film', date: '2026-09-19' })
+    expect(out).toBe('---\ntitle: New Film\ndate: 2026-09-19\n---\n\n## INT. ROOM - DAY\n')
+  })
+
+  it('preserves CRLF line endings', () => {
+    const crlf = SRC.replace(/\n/g, '\r\n')
+    const f = read(crlf)
+    const out = writeTitlePage(crlf, f, { ...f, author: 'X' })
+    expect(out).toContain('author: X\r\n')
+    expect(out.replace(/\r\n/g, '')).not.toContain('\n')
+  })
+})

package/tests/toolbar-actions.test.ts

@@ -0,0 +1,93 @@
+import { describe, it, expect } from 'vitest'
+import { EditorState, TextSelection } from 'prosemirror-state'
+import { schema } from '../src/editor/schema'
+import { makeSetBlock, makeSetOrToggleNote, makeToggleMark } from '../src/shell/toolbar-actions'
+
+function stateWith(typeName: string, text: string) {
+  const node = schema.nodes[typeName]!.create(null, text ? schema.text(text) : undefined)
+  const doc = schema.nodes['doc']!.create(null, node)
+  let state = EditorState.create({ schema, doc })
+  state = state.apply(state.tr.setSelection(TextSelection.create(state.doc, 1)))
+  return state
+}
+
+describe('makeSetBlock', () => {
+  it('changes the current block type', () => {
+    const state = stateWith('action', 'hello')
+    let next = state
+    makeSetBlock('character')(state, (tr) => { next = state.apply(tr) })
+    expect(next.doc.firstChild!.type.name).toBe('character')
+  })
+})
+
+describe('makeToggleMark', () => {
+  it('returns false on empty selection (does nothing)', () => {
+    const state = stateWith('action', 'hello')
+    const result = makeToggleMark('bold')(state, () => {})
+    expect(result).toBe(false)
+  })
+
+  it('applies the note_mark to a selected range, so an inline note can be created from the WYSIWYG toolbar', () => {
+    const state = stateWith('action', 'Add the rain here please')
+    const withSelection = state.apply(
+      state.tr.setSelection(TextSelection.create(state.doc, 1, 1 + 'Add the rain'.length))
+    )
+    let next = withSelection
+    const applied = makeToggleMark('note_mark')(withSelection, (tr) => { next = withSelection.apply(tr) })
+    expect(applied).toBe(true)
+
+    const markType = schema.marks['note_mark']!
+    let hasMark = false
+    next.doc.firstChild!.descendants(node => {
+      if (node.isText && node.marks.some(m => m.type === markType)) hasMark = true
+    })
+    expect(hasMark).toBe(true)
+  })
+})
+
+function noteMarkedText(doc: EditorState['doc']): string {
+  const markType = schema.marks['note_mark']!
+  let text = ''
+  doc.firstChild!.descendants(node => {
+    if (node.isText && node.marks.some(m => m.type === markType)) text += node.text
+  })
+  return text
+}
+
+describe('makeSetOrToggleNote', () => {
+  it('marks only the selected text as a note on an Action line, leaving the rest of the line intact', () => {
+    const state = stateWith('action', 'Add the rain here please')
+    const withSelection = state.apply(
+      state.tr.setSelection(TextSelection.create(state.doc, 1, 1 + 'Add the rain'.length))
+    )
+    let next = withSelection
+    const applied = makeSetOrToggleNote()(withSelection, (tr) => { next = withSelection.apply(tr) })
+
+    expect(applied).toBe(true)
+    expect(next.doc.firstChild!.type.name).toBe('action')
+    expect(noteMarkedText(next.doc)).toBe('Add the rain')
+    expect(next.doc.textContent).toBe('Add the rain here please')
+  })
+
+  it('marks the whole line as a note on an Action line with no selection', () => {
+    const state = stateWith('action', 'Add the rain here please')
+    let next = state
+    const applied = makeSetOrToggleNote()(state, (tr) => { next = state.apply(tr) })
+
+    expect(applied).toBe(true)
+    expect(next.doc.firstChild!.type.name).toBe('action')
+    expect(noteMarkedText(next.doc)).toBe('Add the rain here please')
+  })
+
+  it('falls back to converting the whole block to a note element on any line other than Action', () => {
+    const state = stateWith('dialogue', 'We should go home now.')
+    const withSelection = state.apply(
+      state.tr.setSelection(TextSelection.create(state.doc, 1, 1 + 'We should'.length))
+    )
+    let next = withSelection
+    const applied = makeSetOrToggleNote()(withSelection, (tr) => { next = withSelection.apply(tr) })
+
+    expect(applied).toBe(true)
+    expect(next.doc.firstChild!.type.name).toBe('note')
+  })
+})

package/tests/voice-commands.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect } from 'vitest';
+import { parseVoiceCommand } from '../src/ai/commands';
+
+describe('Voice Commands Pre-processor', () => {
+  it('should parse English commands correctly', () => {
+    const result1 = parseVoiceCommand('new scene INT. HALLWAYS - DAY', 'en-US');
+    expect(result1.type).toBe('scene');
+    expect(result1.text).toBe('INT. HALLWAYS - DAY');
+    expect(result1.isLiteral).toBe(false);
+
+    const result2 = parseVoiceCommand('character RAJ', 'en-US');
+    expect(result2.type).toBe('character');
+    expect(result2.text).toBe('RAJ');
+
+    const result3 = parseVoiceCommand('dialogue Hello world', 'en-US');
+    expect(result3.type).toBe('dialogue');
+    expect(result3.text).toBe('Hello world');
+  });
+
+  it('should parse Hindi commands correctly', () => {
+    const result1 = parseVoiceCommand('नया दृश्य अंतःपुर - दिन', 'hi-IN');
+    expect(result1.type).toBe('scene');
+    expect(result1.text).toBe('अंतःपुर - दिन');
+
+    const result2 = parseVoiceCommand('पात्र राहुल', 'hi-IN');
+    expect(result2.type).toBe('character');
+    expect(result2.text).toBe('राहुल');
+  });
+
+  it('should parse Tamil commands correctly', () => {
+    const result1 = parseVoiceCommand('புதிய காட்சி தெரு - பகல்', 'ta-IN');
+    expect(result1.type).toBe('scene');
+    expect(result1.text).toBe('தெரு - பகல்');
+
+    const result2 = parseVoiceCommand('வசனம் வணக்கம் உலகமே', 'ta-IN');
+    expect(result2.type).toBe('dialogue');
+    expect(result2.text).toBe('வணக்கம் உலகமே');
+  });
+
+  it('should handle literal bypass keyword to escape commands', () => {
+    const result1 = parseVoiceCommand('literal new scene heading', 'en-US');
+    expect(result1.type).toBe('action');
+    expect(result1.text).toBe('new scene heading');
+    expect(result1.isLiteral).toBe(true);
+
+    const result2 = parseVoiceCommand('शब्दशः नया दृश्य', 'hi-IN');
+    expect(result2.type).toBe('action');
+    expect(result2.text).toBe('नया दृश्य');
+    expect(result2.isLiteral).toBe(true);
+  });
+
+  it('should default to action type for plain speech', () => {
+    const result = parseVoiceCommand('The sun rises slowly over the mountains.', 'en-US');
+    expect(result.type).toBe('action');
+    expect(result.text).toBe('The sun rises slowly over the mountains.');
+    expect(result.isLiteral).toBe(false);
+  });
+});

package/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "declaration": true,
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "resolveJsonModule": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/vitest.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'vitest/config'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./vitest.setup.ts'],
+  },
+})

package/vitest.setup.ts

@@ -0,0 +1,65 @@
+import '@testing-library/jest-dom/vitest'
+import { vi } from 'vitest'
+
+// jsdom doesn't implement URL.createObjectURL / revokeObjectURL
+if (typeof URL.createObjectURL === 'undefined') {
+  URL.createObjectURL = vi.fn(() => 'blob:mock')
+  URL.revokeObjectURL = vi.fn()
+}
+
+// Mock canvas for jsdom environment - jsdom doesn't fully implement canvas API
+if (typeof window !== 'undefined') {
+  const mockCanvas2DContext = {
+    fillStyle: 'black',
+    font: '12px monospace',
+    fillText: vi.fn(),
+    clearRect: vi.fn(),
+    getImageData: vi.fn((x, y, width, height) => {
+      // Return a mock ImageData object
+      const data = new Uint8ClampedArray(width * height * 4)
+      return {
+        data,
+        width,
+        height,
+        colorSpace: 'srgb',
+      }
+    }),
+  }
+
+  // Mock HTMLCanvasElement.prototype.getContext
+  HTMLCanvasElement.prototype.getContext = vi.fn(function (
+    contextType: string
+  ) {
+    if (contextType === '2d') {
+      return { ...mockCanvas2DContext }
+    }
+    return null
+  })
+}
+
+// Mock localStorage for jsdom / Node 22 compatibility
+const createStorageMock = () => {
+  let store: Record<string, string> = {}
+  return {
+    getItem: vi.fn((key: string) => store[key] ?? null),
+    setItem: vi.fn((key: string, value: string) => { store[key] = String(value) }),
+    removeItem: vi.fn((key: string) => { delete store[key] }),
+    clear: vi.fn(() => { store = {} }),
+    get length() { return Object.keys(store).length },
+    key: vi.fn((i: number) => Object.keys(store)[i] ?? null),
+  }
+}
+
+const storageMock = createStorageMock()
+if (typeof window !== 'undefined') {
+  Object.defineProperty(window, 'localStorage', {
+    value: storageMock,
+    writable: true,
+    configurable: true,
+  })
+}
+Object.defineProperty(globalThis, 'localStorage', {
+  value: storageMock,
+  writable: true,
+  configurable: true,
+})