@sutrata/editor 0.1.0 → 0.1.2

package/src/editor/prosemirror-to-sutra.ts

@@ -1,192 +0,0 @@
-import { Node as PmNode } from 'prosemirror-model'
-import { schema } from './schema'
-
-function nodeText(node: PmNode): string {
-  return node.textContent
-}
-
-function inlineToMarkdown(node: PmNode): string {
-  let result = ''
-  node.forEach(child => {
-    if (child.isText) {
-      let text = child.text ?? ''
-      if (child.marks.find(m => m.type === schema.marks['bold'])) text = `**${text}**`
-      else if (child.marks.find(m => m.type === schema.marks['italic'])) text = `*${text}*`
-      else if (child.marks.find(m => m.type === schema.marks['underline'])) text = `_${text}_`
-      else if (child.marks.find(m => m.type === schema.marks['note_mark'])) text = `[[${text}]]`
-      result += text
-    }
-  })
-  return result
-}
-
-/**
- * Extract the text value of a frontmatter_field node, converting hard_break
- * nodes back to '\n' so multi-line values round-trip correctly.
- */
-function fieldText(node: PmNode): string {
-  let result = ''
-  node.forEach(child => {
-    if (child.isText) result += child.text ?? ''
-    else if (child.type === schema.nodes['hard_break']) result += '\n'
-  })
-  return result.trim()
-}
-
-/**
- * title_page node → frontmatter text block. Dotted keys ("title.hi") are
- * reassembled into one-level nested maps (2-space indent, matching the
- * parser's minimal-YAML frontmatter format). Fields with empty key AND
- * empty value are skipped; returns '' if nothing remains.
- * Multi-line values are serialized as YAML literal block scalars (|).
- */
-function serializeTitlePage(node: PmNode): string {
-  const data = new Map<string, string | Record<string, string>>()
-  node.forEach(field => {
-    if (field.type.name !== 'frontmatter_field') return
-    const key = ((field.attrs['fmKey'] as string) ?? '').trim()
-    const value = fieldText(field)
-    if (!key) return
-    const dot = key.indexOf('.')
-    if (dot > 0 && dot < key.length - 1) {
-      const parent = key.slice(0, dot)
-      const sub = key.slice(dot + 1)
-      const existing = data.get(parent)
-      const map: Record<string, string> = existing !== undefined && typeof existing === 'object' ? existing : {}
-      map[sub] = value
-      data.set(parent, map)
-    } else {
-      data.set(key, value)
-    }
-  })
-  if (data.size === 0) return ''
-  const lines: string[] = ['---']
-  for (const [key, value] of data) {
-    if (typeof value === 'string') {
-      if (value === '') {
-        lines.push(`${key}:`)
-      } else if (value.includes('\n')) {
-        // YAML literal block scalar: preserves newlines verbatim
-        lines.push(`${key}: |`)
-        for (const ln of value.split('\n')) lines.push(`  ${ln}`)
-      } else {
-        lines.push(`${key}: ${value}`)
-      }
-    } else {
-      lines.push(`${key}:`)
-      for (const [sub, sv] of Object.entries(value)) lines.push(`  ${sub}: ${sv}`)
-    }
-  }
-  lines.push('---')
-  return lines.join('\n') + '\n\n'
-}
-
-export function prosemirrorToSutra(doc: PmNode): string {
-  // Collect all top-level nodes into an array first
-  const pmNodes: PmNode[] = []
-  doc.forEach(node => pmNodes.push(node))
-
-  const blocks: string[] = []
-  let i = 0
-
-  let frontmatter = ''
-  if (pmNodes.length > 0 && pmNodes[0]!.type.name === 'title_page') {
-    frontmatter = serializeTitlePage(pmNodes[0]!)
-    i = 1
-  }
-
-  while (i < pmNodes.length) {
-    const node = pmNodes[i]!
-    const type = node.type.name
-
-    if (type === 'character') {
-      // Group: character cue + following dialogue/parenthetical lines (no blank line between them).
-      // Name, extension and dual-marker are all just typed text now — see
-      // character-decoration-plugin.ts — so the node's own text is the
-      // whole cue line, verbatim.
-      const lines: string[] = [`@${nodeText(node)}`]
-      i++
-      while (i < pmNodes.length) {
-        const next = pmNodes[i]!
-        const nextType = next.type.name
-        if (nextType === 'dialogue') {
-          lines.push(inlineToMarkdown(next))
-          i++
-        } else if (nextType === 'parenthetical') {
-          lines.push(`( ${nodeText(next)} )`)
-          i++
-        } else {
-          break
-        }
-      }
-      blocks.push(lines.join('\n'))
-      continue
-    }
-
-    if (type === 'scene_heading') {
-      const id = node.attrs['id'] ? ` {#${node.attrs['id'] as string}}` : ''
-      // Group heading + optional synopsis + metadata lines with single newlines (no blank
-      // line between them), so the parser recognises them as one heading block.
-      const headingLines: string[] = [`## ${nodeText(node)}${id}`]
-      i++
-      while (i < pmNodes.length && pmNodes[i]!.type.name === 'scene_metadata') {
-        const m = pmNodes[i]!
-        headingLines.push(`& ${m.attrs['metaKey'] as string}: ${nodeText(m)}`)
-        i++
-      }
-      blocks.push(headingLines.join('\n'))
-      continue
-    }
-    if (type === 'scene_metadata') {
-      // Orphan metadata (outside a heading group) — emit as-is
-      blocks.push(`& ${node.attrs['metaKey'] as string}: ${nodeText(node)}`)
-      i++; continue
-    }
-    if (type === 'section') {
-      const id = node.attrs['id'] ? ` {#${node.attrs['id'] as string}}` : ''
-      blocks.push(`# ${nodeText(node)}${id}`)
-      i++; continue
-    }
-    if (type === 'action') {
-      blocks.push(inlineToMarkdown(node))
-      i++; continue
-    }
-    if (type === 'dialogue') {
-      // Orphan dialogue (should not occur after the grouping above, but handle gracefully)
-      blocks.push(inlineToMarkdown(node))
-      i++; continue
-    }
-    if (type === 'parenthetical') {
-      // Orphan parenthetical
-      blocks.push(`( ${nodeText(node)} )`)
-      i++; continue
-    }
-    if (type === 'transition') {
-      blocks.push(`>> ${nodeText(node)}`)
-      i++; continue
-    }
-    if (type === 'centered') {
-      blocks.push(`>> ${nodeText(node)} <<`)
-      i++; continue
-    }
-    if (type === 'lyrics') {
-      blocks.push(`~ ${inlineToMarkdown(node)}`)
-      i++; continue
-    }
-    if (type === 'note') {
-      blocks.push(`[[ ${nodeText(node)} ]]`)
-      i++; continue
-    }
-    if (type === 'comment') {
-      blocks.push(`<!-- ${nodeText(node)} -->`)
-      i++; continue
-    }
-    if (type === 'page_break') {
-      blocks.push('===')
-      i++; continue
-    }
-    i++ // unknown node type — skip
-  }
-
-  return frontmatter + blocks.join('\n\n') + '\n'
-}

package/src/editor/scene-heading-view.ts

@@ -1,147 +0,0 @@
-import type { Node as PmNode } from 'prosemirror-model'
-import { TextSelection } from 'prosemirror-state'
-import type { EditorView, NodeView, ViewMutationRecord } from 'prosemirror-view'
-
-/**
- * NodeView for scene_heading. Renders the heading text (ProseMirror-managed)
- * plus an editable scene-number input on the right. Tab from inside the text
- * area or a click on the number triggers focus of the input.
- *
- * The id value is stored purely as a node attribute — the PM content model
- * only contains the heading text.
- */
-export class SceneHeadingView implements NodeView {
-  dom: HTMLElement
-  contentDOM: HTMLElement
-  private input: HTMLInputElement
-  private pmView: EditorView
-  private getPos: () => number | undefined
-
-  constructor(node: PmNode, view: EditorView, getPos: () => number | undefined) {
-    this.pmView = view
-    this.getPos = getPos
-
-    // Outer wrapper — flex row, same as CSS sets for .cs-scene-heading
-    this.dom = document.createElement('div')
-    this.dom.className = 'cs-scene-heading'
-    if (node.attrs['id']) {
-      this.dom.dataset['sceneId'] = node.attrs['id'] as string
-    }
-
-    // Left: ProseMirror manages text content here
-    this.contentDOM = document.createElement('span')
-    this.contentDOM.className = 'cs-scene-heading-text'
-    this.dom.appendChild(this.contentDOM)
-
-    // Right: scene number input
-    this.input = document.createElement('input')
-    this.input.type = 'text'
-    this.input.className = 'cs-scene-id-input'
-    this.input.placeholder = '#'
-    this.input.value = (node.attrs['id'] as string | null) ?? ''
-    this.input.setAttribute('aria-label', 'Scene number')
-    this.input.spellcheck = false
-
-    this.input.addEventListener('keydown', this.onInputKeydown)
-    this.input.addEventListener('blur', this.onInputBlur)
-    // Prevent PM from handling clicks inside the input
-    this.input.addEventListener('mousedown', (e) => e.stopPropagation())
-
-    this.dom.appendChild(this.input)
-  }
-
-  /** Focus the id input — called by Tab keymap handler */
-  focusInput() {
-    this.input.focus()
-    this.input.select()
-  }
-
-  private commit() {
-    const raw = this.input.value.trim()
-    const id = raw === '' ? null : raw
-    const pos = this.getPos()
-    if (pos === undefined) return
-    const node = this.pmView.state.doc.nodeAt(pos)
-    if (!node) return
-    if (node.attrs['id'] === id) return
-    const tr = this.pmView.state.tr.setNodeMarkup(pos, undefined, { ...node.attrs, id })
-    this.pmView.dispatch(tr)
-  }
-
-  private onInputKeydown = (e: KeyboardEvent) => {
-    if (e.key === 'Escape') {
-      e.preventDefault()
-      e.stopPropagation()
-      this.input.value = (this.pmView.state.doc.nodeAt(this.getPos() ?? 0)?.attrs['id'] as string | null) ?? ''
-      this.pmView.focus()
-      return
-    }
-    if (e.key === 'ArrowUp' || (e.key === 'Tab' && e.shiftKey)) {
-      e.preventDefault()
-      e.stopPropagation()
-      this.commit()
-      const pos = this.getPos()
-      if (pos !== undefined) {
-        const node = this.pmView.state.doc.nodeAt(pos)
-        if (node) {
-          const endOfText = pos + node.nodeSize - 1
-          const sel = TextSelection.near(this.pmView.state.doc.resolve(endOfText), -1)
-          this.pmView.dispatch(this.pmView.state.tr.setSelection(sel))
-        }
-      }
-      this.pmView.focus()
-      return
-    }
-    if (e.key === 'Enter' || e.key === 'Tab' || e.key === 'ArrowDown') {
-      e.preventDefault()
-      e.stopPropagation()
-      this.commit()
-      // Move cursor to the start of the node after the scene heading
-      const pos = this.getPos()
-      if (pos !== undefined) {
-        const node = this.pmView.state.doc.nodeAt(pos)
-        if (node) {
-          const afterPos = pos + node.nodeSize
-          const { doc } = this.pmView.state
-          if (afterPos <= doc.content.size) {
-            const sel = TextSelection.near(doc.resolve(afterPos), 1)
-            this.pmView.dispatch(this.pmView.state.tr.setSelection(sel))
-          }
-        }
-      }
-      this.pmView.focus()
-      return
-    }
-  }
-
-  private onInputBlur = () => {
-    this.commit()
-  }
-
-  update(node: PmNode): boolean {
-    if (node.type.name !== 'scene_heading') return false
-    const id = (node.attrs['id'] as string | null) ?? ''
-    // Keep DOM attr in sync
-    if (id) this.dom.dataset['sceneId'] = id
-    else delete this.dom.dataset['sceneId']
-    // Only update input if it doesn't have focus (avoid clobbering in-progress edits)
-    if (document.activeElement !== this.input) {
-      this.input.value = id
-    }
-    return true
-  }
-
-  destroy() {
-    this.input.removeEventListener('keydown', this.onInputKeydown)
-    this.input.removeEventListener('blur', this.onInputBlur)
-  }
-
-  stopEvent(event: Event): boolean {
-    // Let PM handle events inside contentDOM; swallow events on the input
-    return event.target === this.input || (this.input.contains(event.target as Node))
-  }
-
-  ignoreMutation(mutation: ViewMutationRecord): boolean {
-    return this.input.contains(mutation.target as Node) || mutation.target === this.input
-  }
-}

package/src/editor/schema.ts

@@ -1,156 +0,0 @@
-import { Schema } from 'prosemirror-model'
-import type { NodeSpec, MarkSpec } from 'prosemirror-model'
-
-const nodes: Record<string, NodeSpec> = {
-  doc: { content: 'title_page? block+' },
-
-  // Frontmatter rendered as an editable card at the top of the document.
-  // Only valid as the first child of doc (not in the block group).
-  title_page: {
-    content: 'frontmatter_field+',
-    toDOM: () => ['div', { class: 'cs-title-page-block' }, 0],
-    parseDOM: [{ tag: 'div.cs-title-page-block' }],
-  },
-
-  frontmatter_field: {
-    content: '(text | hard_break)*',
-    marks: '',
-    attrs: { fmKey: { default: '' } },
-    toDOM: (node) => ['div', { class: 'cs-fm-field', 'data-key': node.attrs['fmKey'] as string }, 0],
-    parseDOM: [{ tag: 'div.cs-fm-field', getAttrs: (dom) => ({ fmKey: (dom as HTMLElement).dataset['key'] ?? '' }) }],
-  },
-
-  scene_heading: {
-    group: 'block',
-    content: 'inline*',
-    attrs: { id: { default: null } },
-    toDOM: (node) => {
-      const attrs: Record<string, string> = { class: 'cs-scene-heading' }
-      if (node.attrs['id']) attrs['data-scene-id'] = node.attrs['id'] as string
-      return ['div', attrs, 0]
-    },
-    parseDOM: [{ tag: 'div.cs-scene-heading', getAttrs: (dom) => ({ id: (dom as HTMLElement).dataset['sceneId'] ?? null }) }],
-  },
-
-  action: {
-    group: 'block',
-    content: 'inline*',
-    toDOM: () => ['div', { class: 'cs-action' }, 0],
-    parseDOM: [{ tag: 'div.cs-action' }],
-  },
-
-  character: {
-    group: 'block',
-    content: 'inline*',
-    toDOM: () => ['div', { class: 'cs-character' }, 0],
-    parseDOM: [{ tag: 'div.cs-character' }],
-  },
-
-  dialogue: {
-    group: 'block',
-    content: 'inline*',
-    toDOM: () => ['div', { class: 'cs-dialogue' }, 0],
-    parseDOM: [{ tag: 'div.cs-dialogue' }],
-  },
-
-  parenthetical: {
-    group: 'block',
-    content: 'inline*',
-    toDOM: () => ['div', { class: 'cs-parenthetical' }, 0],
-    parseDOM: [{ tag: 'div.cs-parenthetical' }],
-  },
-
-  transition: {
-    group: 'block',
-    content: 'inline*',
-    toDOM: () => ['div', { class: 'cs-transition' }, 0],
-    parseDOM: [{ tag: 'div.cs-transition' }],
-  },
-
-  centered: {
-    group: 'block',
-    content: 'inline*',
-    toDOM: () => ['div', { class: 'cs-centered' }, 0],
-    parseDOM: [{ tag: 'div.cs-centered' }],
-  },
-
-  lyrics: {
-    group: 'block',
-    content: 'inline*',
-    toDOM: () => ['div', { class: 'cs-lyrics' }, 0],
-    parseDOM: [{ tag: 'div.cs-lyrics' }],
-  },
-
-  scene_metadata: {
-    group: 'block',
-    content: 'inline*',
-    attrs: { metaKey: { default: '' } },
-    toDOM: (node) => ['div', { class: 'cs-scene-metadata', 'data-key': node.attrs['metaKey'] as string }, 0],
-    parseDOM: [{ tag: 'div.cs-scene-metadata', getAttrs: (dom) => ({ metaKey: (dom as HTMLElement).dataset['key'] ?? '' }) }],
-  },
-
-  note: {
-    group: 'block',
-    content: 'inline*',
-    toDOM: () => ['div', { class: 'cs-note' }, 0],
-    parseDOM: [{ tag: 'div.cs-note' }],
-  },
-
-  comment: {
-    group: 'block',
-    content: 'inline*',
-    toDOM: () => ['div', { class: 'cs-comment' }, 0],
-    parseDOM: [{ tag: 'div.cs-comment' }],
-  },
-
-  page_break: {
-    group: 'block',
-    toDOM: () => ['div', { class: 'cs-page-break' }],
-    parseDOM: [{ tag: 'div.cs-page-break' }],
-  },
-
-  section: {
-    group: 'block',
-    content: 'inline*',
-    attrs: { level: { default: 1 }, id: { default: null } },
-    toDOM: (node) => [`h${(node.attrs['level'] as number) + 1}`, { class: 'cs-section' }, 0],
-    parseDOM: [
-      { tag: 'h2.cs-section', getAttrs: () => ({ level: 1 }) },
-      { tag: 'h3.cs-section', getAttrs: () => ({ level: 2 }) },
-    ],
-  },
-
-  hard_break: {
-    inline: true,
-    group: 'inline',
-    selectable: false,
-    toDOM: () => ['br'],
-    parseDOM: [{ tag: 'br' }],
-  },
-
-  text: { group: 'inline' },
-}
-
-const marks: Record<string, MarkSpec> = {
-  bold: {
-    toDOM: () => ['strong', 0],
-    parseDOM: [{ tag: 'strong' }],
-  },
-  italic: {
-    toDOM: () => ['em', 0],
-    parseDOM: [{ tag: 'em' }],
-  },
-  underline: {
-    toDOM: () => ['u', 0],
-    parseDOM: [{ tag: 'u' }],
-  },
-  // Named note_mark, not note, since a block-level `note` node already exists
-  // (whole-line [[ ]] notes) and ProseMirror forbids a name being both.
-  note_mark: {
-    toDOM: () => ['span', { class: 'cs-inline-note' }, 0],
-    parseDOM: [{ tag: 'span.cs-inline-note' }],
-  },
-}
-
-export const schema = new Schema({ nodes, marks })
-export type SutraSchema = typeof schema

package/src/editor/sutra-to-prosemirror.ts

@@ -1,156 +0,0 @@
-import { Node as PmNode } from 'prosemirror-model'
-import { schema } from './schema'
-import type { DocumentNode, SceneHeadingNode, SceneContentNode,
-  InlineSpan } from '@sutrata/parser'
-
-function spansToNodes(spans: InlineSpan[]): PmNode[] {
-  return spans.flatMap(span => {
-    if (span.type === 'text') return span.text ? [schema.text(span.text)] : []
-    if (span.type === 'note') {
-      if (!span.text) return []
-      const markType = schema.marks['note_mark']!
-      return [schema.text(span.text).mark([markType.create()])]
-    }
-    const inner = spansToNodes(span.spans)
-    const markType = schema.marks[span.type]
-    if (!markType || inner.length === 0) return inner
-    return inner.map(n => n.mark([markType.create()]))
-  })
-}
-
-function textNodes(text: string): PmNode[] {
-  const lines = text.split('\n')
-  const nodes: PmNode[] = []
-  for (let i = 0; i < lines.length; i++) {
-    const line = lines[i]
-    if (line) nodes.push(schema.text(line))
-    if (i < lines.length - 1) nodes.push(schema.nodes['hard_break']!.create())
-  }
-  return nodes
-}
-
-function sceneContentToNodes(nodes: SceneContentNode[]): PmNode[] {
-  const result: PmNode[] = []
-  for (const node of nodes) {
-    switch (node.type) {
-      case 'action':
-        result.push(schema.nodes['action']!.create({}, spansToNodes(node.spans)))
-        break
-      case 'character': {
-        // Name, extension and dual-marker are rendered as one continuous
-        // text run — see character-decoration-plugin.ts, which recognizes
-        // a trailing "(...)"/"^" live and styles it, rather than storing
-        // them as separate node attrs.
-        const cueText = [node.name, node.extension, node.isDual ? '^' : null]
-          .filter((part): part is string => !!part)
-          .join(' ')
-        result.push(schema.nodes['character']!.create({}, textNodes(cueText)))
-        for (const child of node.children) {
-          if (child.type === 'dialogue') {
-            result.push(schema.nodes['dialogue']!.create({}, spansToNodes(child.spans)))
-          } else {
-            result.push(schema.nodes['parenthetical']!.create({}, textNodes(child.text)))
-          }
-        }
-        break
-      }
-      case 'dual-dialogue':
-        result.push(...sceneContentToNodes([node.left]))
-        result.push(...sceneContentToNodes([node.right]))
-        break
-      case 'transition':
-        result.push(schema.nodes['transition']!.create({}, textNodes(node.text)))
-        break
-      case 'centered':
-        result.push(schema.nodes['centered']!.create({}, textNodes(node.text)))
-        break
-      case 'lyrics':
-        result.push(schema.nodes['lyrics']!.create({}, spansToNodes(node.spans)))
-        break
-      case 'note':
-        result.push(schema.nodes['note']!.create({}, textNodes(node.text)))
-        break
-      case 'comment':
-        result.push(schema.nodes['comment']!.create({}, textNodes(node.text)))
-        break
-      case 'page-break':
-        result.push(schema.nodes['page_break']!.create())
-        break
-    }
-  }
-  return result
-}
-
-/**
- * Frontmatter → title_page node. One frontmatter_field per key; one-level
- * nested maps (multilingual title:) flatten to dotted keys ("title.hi").
- */
-function frontmatterToNode(doc: DocumentNode): PmNode | null {
-  const fm = doc.frontmatter
-  if (!fm) return null
-  const fields: PmNode[] = []
-  for (const [key, value] of Object.entries(fm.data)) {
-    if (value !== null && typeof value === 'object') {
-      for (const [sub, subVal] of Object.entries(value as Record<string, string>)) {
-        fields.push(schema.nodes['frontmatter_field']!.create({ fmKey: `${key}.${sub}` }, textNodes(String(subVal))))
-      }
-    } else {
-      fields.push(schema.nodes['frontmatter_field']!.create({ fmKey: key }, textNodes(String(value ?? ''))))
-    }
-  }
-  if (fields.length === 0) return null
-  return schema.nodes['title_page']!.create({}, fields)
-}
-
-export function sutraToProsemirror(doc: DocumentNode): PmNode {
-  const topNodes: PmNode[] = []
-
-  const titlePage = frontmatterToNode(doc)
-  if (titlePage) topNodes.push(titlePage)
-
-  for (const node of doc.children) {
-    switch (node.type) {
-      case 'section':
-        topNodes.push(schema.nodes['section']!.create({ level: node.level, id: node.id }, textNodes(node.text)))
-        break
-      case 'scene-heading': {
-        const sceneNode = node as SceneHeadingNode
-        topNodes.push(schema.nodes['scene_heading']!.create({ id: sceneNode.id }, textNodes(sceneNode.text)))
-        for (const meta of sceneNode.metadata) {
-          topNodes.push(schema.nodes['scene_metadata']!.create({ metaKey: meta.key }, textNodes(meta.value)))
-        }
-        topNodes.push(...sceneContentToNodes(sceneNode.children))
-        break
-      }
-      case 'action':
-        topNodes.push(schema.nodes['action']!.create({}, spansToNodes(node.spans)))
-        break
-      case 'transition':
-        topNodes.push(schema.nodes['transition']!.create({}, textNodes(node.text)))
-        break
-      case 'centered':
-        topNodes.push(schema.nodes['centered']!.create({}, textNodes(node.text)))
-        break
-      case 'lyrics':
-        topNodes.push(schema.nodes['lyrics']!.create({}, spansToNodes(node.spans)))
-        break
-      case 'note':
-        topNodes.push(schema.nodes['note']!.create({}, textNodes(node.text)))
-        break
-      case 'comment':
-        topNodes.push(schema.nodes['comment']!.create({}, textNodes(node.text)))
-        break
-      case 'page-break':
-        topNodes.push(schema.nodes['page_break']!.create())
-        break
-    }
-  }
-
-  // doc content is 'title_page? block+' — always need at least one body block
-  const hasBlock = topNodes.some(n => n.type.name !== 'title_page')
-  if (!hasBlock) {
-    topNodes.push(schema.nodes['action']!.create({}, []))
-  }
-
-  return schema.nodes['doc']!.create({}, topNodes)
-}