@sutrata/editor 0.1.0

package/tests/editor/language-class-plugin.test.ts

@@ -0,0 +1,265 @@
+import { describe, it, expect } from 'vitest'
+import { EditorState } from 'prosemirror-state'
+import { schema } from '../../src/editor/schema'
+import { createLanguageClassPlugin } from '../../src/editor/language-class-plugin'
+
+describe('language-class-plugin', () => {
+  function createStateWithPlugin(docContent: any) {
+    const plugin = createLanguageClassPlugin()
+    const state = EditorState.create({
+      doc: schema.node('doc', null, [schema.nodeFromJSON(docContent)]),
+      plugins: [plugin],
+    })
+    return { state, plugin }
+  }
+
+  function collectDecorations(decorationSet: any): any[] {
+    // DecorationSet.find() returns an array of Decoration objects
+    return decorationSet.find()
+  }
+
+  it('applies .cs-lang-en to English text block', () => {
+    const { state, plugin } = createStateWithPlugin({
+      type: 'action',
+      content: [{ type: 'text', text: 'Hello world' }],
+    })
+
+    const decorationSet = plugin.getState(state)
+    expect(decorationSet).toBeDefined()
+
+    const decorations = collectDecorations(decorationSet)
+    expect(decorations.length).toBeGreaterThan(0)
+
+    const hasEnglishClass = decorations.some((d: any) =>
+      d.spec?.class?.includes('cs-lang-en')
+    )
+    expect(hasEnglishClass).toBe(true)
+  })
+
+  it('applies .cs-lang-ta to Tamil text block', () => {
+    const { state, plugin } = createStateWithPlugin({
+      type: 'dialogue',
+      content: [{ type: 'text', text: 'இது ஒரு தமிழ் வாக்கியம்' }],
+    })
+
+    const decorationSet = plugin.getState(state)
+    const decorations = collectDecorations(decorationSet)
+    expect(decorations.length).toBeGreaterThan(0)
+
+    // Check that a decoration with Tamil class exists
+    const hasTamilClass = decorations.some((d: any) =>
+      d.spec?.class?.includes('cs-lang-ta')
+    )
+    expect(hasTamilClass).toBe(true)
+  })
+
+  it('applies .cs-lang-hi to Hindi/Devanagari text block', () => {
+    const { state, plugin } = createStateWithPlugin({
+      type: 'character',
+      content: [{ type: 'text', text: 'यह एक हिंदी वाक्य है' }],
+    })
+
+    const decorationSet = plugin.getState(state)
+    const decorations = collectDecorations(decorationSet)
+
+    const hasHindiClass = decorations.some((d: any) =>
+      d.spec?.class?.includes('cs-lang-hi')
+    )
+    expect(hasHindiClass).toBe(true)
+  })
+
+  it('respects inline {lang=…} tag override', () => {
+    const { state, plugin } = createStateWithPlugin({
+      type: 'parenthetical',
+      content: [{ type: 'text', text: 'English text {lang=ml}' }],
+    })
+
+    const decorationSet = plugin.getState(state)
+    const decorations = collectDecorations(decorationSet)
+
+    const hasMalayalamClass = decorations.some((d: any) =>
+      d.spec?.class?.includes('cs-lang-ml')
+    )
+    expect(hasMalayalamClass).toBe(true)
+  })
+
+  it('updates classes on doc change', () => {
+    const { state: initialState, plugin } = createStateWithPlugin({
+      type: 'action',
+      content: [{ type: 'text', text: 'Hello world' }],
+    })
+
+    let state = initialState
+    let decorationSet = plugin.getState(state)
+    let decorations = collectDecorations(decorationSet)
+
+    const englishCount = decorations.filter((d: any) =>
+      d.spec?.class?.includes('cs-lang-en')
+    ).length
+    expect(englishCount).toBeGreaterThan(0)
+
+    // Update the doc - select all text in the block and replace with Tamil
+    // The block content starts at position 1 (after the opening tag)
+    // Find the end of the text node
+    const selection = state.selection
+    const from = 1  // start of content in the block
+    const to = state.doc.content.content[0].nodeSize - 1  // end of action node minus closing
+
+    const tr = state.tr.deleteRange(from, to).insertText('இது ஒரு தமிழ் வாக்கியம்', from)
+    const newState = state.apply(tr)
+    decorationSet = plugin.getState(newState)
+    decorations = collectDecorations(decorationSet)
+
+    // Should now have Tamil decoration
+    const hasTamilClass = decorations.some((d: any) =>
+      d.spec?.class?.includes('cs-lang-ta')
+    )
+    expect(hasTamilClass).toBe(true)
+  })
+
+  it('defaults to .cs-lang-en for empty blocks', () => {
+    const { state, plugin } = createStateWithPlugin({
+      type: 'dialogue',
+      content: [],
+    })
+
+    const decorationSet = plugin.getState(state)
+    const decorations = collectDecorations(decorationSet)
+
+    const hasEnglishClass = decorations.some((d: any) =>
+      d.spec?.class?.includes('cs-lang-en')
+    )
+    expect(hasEnglishClass).toBe(true)
+  })
+
+  it('handles multiple blocks with different languages', () => {
+    const plugin = createLanguageClassPlugin()
+    const state = EditorState.create({
+      doc: schema.node('doc', null, [
+        schema.node('action', null, [schema.text('Hello world')]),
+        schema.node('dialogue', null, [schema.text('இது ஒரு தமிழ் வாக்கியம்')]),
+        schema.node('character', null, [schema.text('यह एक हिंदी वाक्य है')]),
+      ]),
+      plugins: [plugin],
+    })
+
+    const decorationSet = plugin.getState(state)
+    const decorations = collectDecorations(decorationSet)
+
+    const englishCount = decorations.filter((d: any) =>
+      d.spec?.class?.includes('cs-lang-en')
+    ).length
+    const tamilCount = decorations.filter((d: any) =>
+      d.spec?.class?.includes('cs-lang-ta')
+    ).length
+    const hindiCount = decorations.filter((d: any) =>
+      d.spec?.class?.includes('cs-lang-hi')
+    ).length
+
+    expect(englishCount).toBe(1)
+    expect(tamilCount).toBe(1)
+    expect(hindiCount).toBe(1)
+  })
+
+  it('class persists across selection changes', () => {
+    const { state: initialState, plugin } = createStateWithPlugin({
+      type: 'dialogue',
+      content: [{ type: 'text', text: 'இது ஒரு தமிழ் வாக்கியம்' }],
+    })
+
+    const decorationSet1 = plugin.getState(initialState)
+    const decorations1 = collectDecorations(decorationSet1)
+
+    // Change selection without changing doc
+    const tr = initialState.tr.setSelection(initialState.selection)
+    const newState = initialState.apply(tr)
+    const decorationSet2 = plugin.getState(newState)
+    const decorations2 = collectDecorations(decorationSet2)
+
+    // Decorations should remain the same
+    const class1 = decorations1[0]?.spec?.class
+    const class2 = decorations2[0]?.spec?.class
+
+    expect(class1).toBe(class2)
+    expect(class1).toContain('cs-lang-ta')
+  })
+
+  it('applies Telugu language class correctly', () => {
+    const { state, plugin } = createStateWithPlugin({
+      type: 'parenthetical',
+      content: [{ type: 'text', text: 'ఇది ఒక నమూనా లైన్' }],
+    })
+
+    const decorationSet = plugin.getState(state)
+    const decorations = collectDecorations(decorationSet)
+
+    const hasTeluguClass = decorations.some((d: any) =>
+      d.spec?.class?.includes('cs-lang-te')
+    )
+    expect(hasTeluguClass).toBe(true)
+  })
+
+  it('applies Kannada language class correctly', () => {
+    const { state, plugin } = createStateWithPlugin({
+      type: 'centered',
+      content: [{ type: 'text', text: 'ಇದು ಒಂದು ಮಾದರಿ ಲೈನ್' }],
+    })
+
+    const decorationSet = plugin.getState(state)
+    const decorations = collectDecorations(decorationSet)
+
+    const hasKannadaClass = decorations.some((d: any) =>
+      d.spec?.class?.includes('cs-lang-kn')
+    )
+    expect(hasKannadaClass).toBe(true)
+  })
+
+  it('applies Malayalam language class correctly', () => {
+    const { state, plugin } = createStateWithPlugin({
+      type: 'lyrics',
+      content: [{ type: 'text', text: 'ഇത് ഒരു സാമ്പിൾ ലൈൻ ആണ്' }],
+    })
+
+    const decorationSet = plugin.getState(state)
+    const decorations = collectDecorations(decorationSet)
+
+    const hasMalayalamClass = decorations.some((d: any) =>
+      d.spec?.class?.includes('cs-lang-ml')
+    )
+    expect(hasMalayalamClass).toBe(true)
+  })
+
+  it('does not apply classes to non-block nodes', () => {
+    const plugin = createLanguageClassPlugin()
+    const state = EditorState.create({
+      doc: schema.node('doc', null, [
+        schema.node('action', null, [schema.text('Some text')]),
+      ]),
+      plugins: [plugin],
+    })
+
+    const decorationSet = plugin.getState(state)
+    const decorations = collectDecorations(decorationSet)
+
+    // Should have exactly 1 decoration (for the action block, not for inline text nodes)
+    expect(decorations.length).toBe(1)
+  })
+
+  it('skips decorating the doc node itself', () => {
+    const { state, plugin } = createStateWithPlugin({
+      type: 'action',
+      content: [{ type: 'text', text: 'Hello' }],
+    })
+
+    const decorationSet = plugin.getState(state)
+    const decorations = collectDecorations(decorationSet)
+
+    // Should not have a decoration for the doc node (offset 0)
+    const hasDocDecoration = decorations.some((d: any) =>
+      d.from === 0 && d.to === state.doc.nodeSize
+    )
+    // The decoration should be for the action block, not the entire doc
+    expect(decorations.length).toBeGreaterThan(0)
+    expect(hasDocDecoration).toBe(false)
+  })
+})

package/tests/editor/title-page.test.ts

@@ -0,0 +1,124 @@
+import { describe, it, expect, afterEach } from 'vitest'
+import { EditorState, TextSelection } from 'prosemirror-state'
+import { EditorView } from 'prosemirror-view'
+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 { keymapBindings } from '../../src/editor/keymap'
+import { createAttrPencilPlugin } from '../../src/editor/attr-pencil-plugin'
+
+const SAMPLE = `---
+title:
+  en: The Long Rain
+  hi: लंबी बारिश
+author: Sivaraj
+custom_key: kept
+---
+
+## INT. KITCHEN - NIGHT
+
+Action line.
+`
+
+describe('title_page bridge (frontmatter in the editor)', () => {
+  it('renders frontmatter as a title_page node with dotted keys for nested maps', () => {
+    const doc = sutraToProsemirror(parse(SAMPLE))
+    const first = doc.firstChild!
+    expect(first.type.name).toBe('title_page')
+    const keys: string[] = []
+    first.forEach(f => keys.push(f.attrs['fmKey'] as string))
+    expect(keys).toEqual(['title.en', 'title.hi', 'author', 'custom_key'])
+    expect(first.child(0).textContent).toBe('The Long Rain')
+    expect(first.child(1).textContent).toBe('लंबी बारिश')
+  })
+
+  it('round-trips frontmatter through the editor bridge (fixes WYSIWYG frontmatter loss)', () => {
+    const doc = sutraToProsemirror(parse(SAMPLE))
+    const out = prosemirrorToSutra(doc)
+    const reparsed = parse(out)
+    expect(reparsed.frontmatter).not.toBeNull()
+    expect(reparsed.frontmatter!.data).toEqual({
+      title: { en: 'The Long Rain', hi: 'लंबी बारिश' },
+      author: 'Sivaraj',
+      custom_key: 'kept',
+    })
+    expect(out).toContain('## INT. KITCHEN - NIGHT')
+    expect(out).toContain('Action line.')
+  })
+
+  it('does not invent a frontmatter block when none exists', () => {
+    const doc = sutraToProsemirror(parse('## Scene 1\n\nAction.\n'))
+    expect(doc.firstChild!.type.name).toBe('scene_heading')
+    expect(prosemirrorToSutra(doc)).not.toContain('---')
+  })
+
+  it('Enter inside a frontmatter field moves to the next field without splitting', () => {
+    const doc = sutraToProsemirror(parse(SAMPLE))
+    let state = EditorState.create({ doc, schema })
+    // Position 2 = inside the first field's content
+    state = state.apply(state.tr.setSelection(TextSelection.create(state.doc, 2)))
+    expect(state.selection.$from.parent.attrs['fmKey']).toBe('title.en')
+
+    let after: EditorState | null = null
+    const handled = keymapBindings['Enter']!(state, tr => { after = state.apply(tr) })
+    expect(handled).toBe(true)
+    expect(after!.doc.eq(state.doc)).toBe(true) // no split, no new node
+    expect(after!.selection.$from.parent.type.name).toBe('frontmatter_field')
+    expect(after!.selection.$from.parent.attrs['fmKey']).toBe('title.hi')
+  })
+})
+
+describe('attr pencil plugin', () => {
+  let view: EditorView | null = null
+
+  afterEach(() => {
+    view?.destroy()
+    view = null
+    document.querySelector('.cs-attr-menu')?.remove()
+  })
+
+  function mount(text: string): EditorView {
+    const doc = sutraToProsemirror(parse(text))
+    const state = EditorState.create({ doc, schema, plugins: [createAttrPencilPlugin()] })
+    view = new EditorView(document.createElement('div'), { state })
+    return view
+  }
+
+  it('renders a pencil widget on scene headings and the title page card', () => {
+    const v = mount(SAMPLE)
+    const pencils = v.dom.querySelectorAll('.cs-attr-pencil')
+    expect(pencils.length).toBe(2)
+    expect(v.dom.querySelectorAll('.cs-tp-pencil').length).toBe(1)
+  })
+
+  it('scene pencil menu inserts a metadata line with the picked key', () => {
+    const v = mount(SAMPLE)
+    const pencil = [...v.dom.querySelectorAll('.cs-attr-pencil')]
+      .find(p => !p.classList.contains('cs-tp-pencil'))!
+    pencil.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+
+    const menu = document.querySelector('.cs-attr-menu')
+    expect(menu).not.toBeNull()
+    const statusItem = [...menu!.querySelectorAll('.cs-attr-menu-item')]
+      .find(i => i.textContent === '+ status')!
+    statusItem.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+
+    const out = prosemirrorToSutra(v.state.doc)
+    expect(out).toContain('## INT. KITCHEN - NIGHT\n& status:')
+    // Cursor placed inside the new (empty) metadata node
+    expect(v.state.selection.$from.parent.type.name).toBe('scene_metadata')
+  })
+
+  it('title page pencil opens the title page form instead of an add-field menu', () => {
+    const v = mount(SAMPLE)
+    const pencil = v.dom.querySelector('.cs-tp-pencil')!
+    let opened = false
+    window.addEventListener('cs:open-title-page', () => { opened = true })
+
+    pencil.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }))
+
+    expect(opened).toBe(true)
+    expect(document.querySelector('.cs-attr-menu')).toBeNull()
+  })
+})

package/tests/embed-fonts.test.ts

@@ -0,0 +1,17 @@
+import { describe, it, expect } from 'vitest'
+import { embedFontFacesFor } from '../src/styles/embed-fonts'
+
+describe('embed-fonts', () => {
+  it('returns an empty string and does not throw when no matching @font-face rules are loaded', async () => {
+    // jsdom's test document never loads fonts.css via a real <link>, so this exercises the
+    // "nothing found" path — the real embedding behavior is verified end-to-end against an
+    // actual browser (see the multi-style implementation notes), since it depends on
+    // document.styleSheets/fetch/FileReader, none of which jsdom meaningfully implements.
+    const css = await embedFontFacesFor(['Noto Serif', 'Noto Serif Tamil'])
+    expect(css).toBe('')
+  })
+
+  it('does not throw for an empty family list', async () => {
+    await expect(embedFontFacesFor([])).resolves.toBe('')
+  })
+})