@sutrata/editor 0.1.0

package/dist/editor/language-class-plugin.js

@@ -0,0 +1,75 @@
+import { Plugin } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+import { detectScript } from '../i18n/language-detect';
+/**
+ * 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) {
+                return this.getState(state);
+            },
+        },
+    });
+}
+/**
+ * Compute language decorations for the entire document
+ */
+function computeDecorations(doc) {
+    const decorations = [];
+    // 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) {
+    // Check for metadata lang attribute (e.g., lang: hi)
+    if (node.attrs?.lang) {
+        return node.attrs.lang;
+    }
+    // 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/dist/editor/plugins.d.ts

@@ -0,0 +1 @@
+export declare function buildPlugins(): (import("prosemirror-state").Plugin<any> | import("prosemirror-state").Plugin<import("prosemirror-view").DecorationSet>)[];

package/dist/editor/plugins.js

@@ -0,0 +1,25 @@
+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(),
+    ];
+}

package/dist/editor/prosemirror-to-sutra.d.ts

@@ -0,0 +1,2 @@
+import { Node as PmNode } from 'prosemirror-model';
+export declare function prosemirrorToSutra(doc: PmNode): string;

package/dist/editor/prosemirror-to-sutra.js

@@ -0,0 +1,208 @@
+import { schema } from './schema';
+function nodeText(node) {
+    return node.textContent;
+}
+function inlineToMarkdown(node) {
+    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) {
+    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) {
+    const data = new Map();
+    node.forEach(field => {
+        if (field.type.name !== 'frontmatter_field')
+            return;
+        const key = (field.attrs['fmKey'] ?? '').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 = 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 = ['---'];
+    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) {
+    // Collect all top-level nodes into an array first
+    const pmNodes = [];
+    doc.forEach(node => pmNodes.push(node));
+    const blocks = [];
+    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 = [`@${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']}}` : '';
+            // 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 = [`## ${nodeText(node)}${id}`];
+            i++;
+            while (i < pmNodes.length && pmNodes[i].type.name === 'scene_metadata') {
+                const m = pmNodes[i];
+                headingLines.push(`& ${m.attrs['metaKey']}: ${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']}: ${nodeText(node)}`);
+            i++;
+            continue;
+        }
+        if (type === 'section') {
+            const id = node.attrs['id'] ? ` {#${node.attrs['id']}}` : '';
+            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/dist/editor/scene-heading-view.d.ts

@@ -0,0 +1,27 @@
+import type { Node as PmNode } from 'prosemirror-model';
+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 declare class SceneHeadingView implements NodeView {
+    dom: HTMLElement;
+    contentDOM: HTMLElement;
+    private input;
+    private pmView;
+    private getPos;
+    constructor(node: PmNode, view: EditorView, getPos: () => number | undefined);
+    /** Focus the id input — called by Tab keymap handler */
+    focusInput(): void;
+    private commit;
+    private onInputKeydown;
+    private onInputBlur;
+    update(node: PmNode): boolean;
+    destroy(): void;
+    stopEvent(event: Event): boolean;
+    ignoreMutation(mutation: ViewMutationRecord): boolean;
+}

package/dist/editor/scene-heading-view.js

@@ -0,0 +1,136 @@
+import { TextSelection } from 'prosemirror-state';
+/**
+ * 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 {
+    dom;
+    contentDOM;
+    input;
+    pmView;
+    getPos;
+    constructor(node, view, getPos) {
+        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'];
+        }
+        // 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'] ?? '';
+        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();
+    }
+    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);
+    }
+    onInputKeydown = (e) => {
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            this.input.value = this.pmView.state.doc.nodeAt(this.getPos() ?? 0)?.attrs['id'] ?? '';
+            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;
+        }
+    };
+    onInputBlur = () => {
+        this.commit();
+    };
+    update(node) {
+        if (node.type.name !== 'scene_heading')
+            return false;
+        const id = node.attrs['id'] ?? '';
+        // 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) {
+        // Let PM handle events inside contentDOM; swallow events on the input
+        return event.target === this.input || (this.input.contains(event.target));
+    }
+    ignoreMutation(mutation) {
+        return this.input.contains(mutation.target) || mutation.target === this.input;
+    }
+}

package/dist/editor/schema.d.ts

@@ -0,0 +1,3 @@
+import { Schema } from 'prosemirror-model';
+export declare const schema: Schema<string, string>;
+export type SutraSchema = typeof schema;

package/dist/editor/schema.js

@@ -0,0 +1,135 @@
+import { Schema } from 'prosemirror-model';
+const nodes = {
+    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'] }, 0],
+        parseDOM: [{ tag: 'div.cs-fm-field', getAttrs: (dom) => ({ fmKey: dom.dataset['key'] ?? '' }) }],
+    },
+    scene_heading: {
+        group: 'block',
+        content: 'inline*',
+        attrs: { id: { default: null } },
+        toDOM: (node) => {
+            const attrs = { class: 'cs-scene-heading' };
+            if (node.attrs['id'])
+                attrs['data-scene-id'] = node.attrs['id'];
+            return ['div', attrs, 0];
+        },
+        parseDOM: [{ tag: 'div.cs-scene-heading', getAttrs: (dom) => ({ id: dom.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'] }, 0],
+        parseDOM: [{ tag: 'div.cs-scene-metadata', getAttrs: (dom) => ({ metaKey: dom.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'] + 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 = {
+    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 });

package/dist/editor/sutra-to-prosemirror.d.ts

@@ -0,0 +1,3 @@
+import { Node as PmNode } from 'prosemirror-model';
+import type { DocumentNode } from '@sutrata/parser';
+export declare function sutraToProsemirror(doc: DocumentNode): PmNode;