@sutrata/editor 0.1.2 → 0.2.0

package/dist/editor/EditorView.js

@@ -12,8 +12,28 @@ import { useDocument } from '../context/DocumentContext';
 import { SceneHeadingView } from './scene-heading-view';
 import { FrontmatterFieldView } from './frontmatter-field-view';
 import { applyStyleVars } from '../styles/css-adapter';
+import { useCanEdit } from '../extensions/session';
+import { useDecorationProviders } from '../extensions/decorations';
+import { useCollabBinding } from '../extensions/collab';
+import { createExternalDecorationsPlugin } from './external-decorations-plugin';
 export function EditorView() {
-    const { text, setText, resolvedStyle } = useDocument();
+    const { text, ast, setText, resolvedStyle } = useDocument();
+    const astRef = useRef(ast);
+    astRef.current = ast;
+    // Embedder decorations and collab plugins join the built-in ones every time
+    // the state is (re)created. Both are read once per state: pass stable values.
+    const decorationProviders = useDecorationProviders();
+    const collab = useCollabBinding();
+    const plugins = () => [
+        ...buildPlugins(),
+        ...(decorationProviders.length > 0 ? [createExternalDecorationsPlugin(decorationProviders, () => astRef.current)] : []),
+        ...(collab ? collab.plugins(schema) : []),
+    ];
+    // Read-only sessions: not editable, and every doc-changing transaction —
+    // typed, or dispatched by a toolbar/navigator/node view — is dropped here.
+    const canEdit = useCanEdit();
+    const canEditRef = useRef(canEdit);
+    canEditRef.current = canEdit;
     const mountRef = useRef(null);
     const viewRef = useRef(null);
     const textRef = useRef(text);
@@ -26,14 +46,17 @@ export function EditorView() {
         if (!mountRef.current)
             return;
         const doc = sutraToProsemirror(parse(textRef.current));
-        const state = EditorState.create({ doc, schema, plugins: buildPlugins() });
+        const state = EditorState.create({ doc, schema, plugins: plugins() });
         const view = new PmEditorView(mountRef.current, {
             state,
             nodeViews: {
                 scene_heading: (node, view, getPos) => new SceneHeadingView(node, view, getPos),
                 frontmatter_field: (node, view, getPos) => new FrontmatterFieldView(node, view, getPos),
             },
+            editable: () => canEditRef.current,
             dispatchTransaction(tr) {
+                if (tr.docChanged && !canEditRef.current)
+                    return;
                 const newState = view.state.apply(tr);
                 view.updateState(newState);
                 if (tr.docChanged) {
@@ -48,7 +71,8 @@ export function EditorView() {
         });
         viewRef.current = view;
         setEditorView(view);
-        return () => { setEditorView(null); view.destroy(); viewRef.current = null; };
+        const detachCollab = collab?.attach(view);
+        return () => { detachCollab?.(); setEditorView(null); view.destroy(); viewRef.current = null; };
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
     // Sync external text changes into ProseMirror (e.g. switching from source mode).
     // Skip when the editor itself produced the change — it already has the right state.
@@ -63,10 +87,14 @@ export function EditorView() {
         const currentText = prosemirrorToSutra(view.state.doc);
         if (currentText !== text) {
             const doc = sutraToProsemirror(parse(text));
-            const state = EditorState.create({ doc, schema, plugins: buildPlugins() });
+            const state = EditorState.create({ doc, schema, plugins: plugins() });
             view.updateState(state);
         }
     }, [text]);
+    // Re-evaluate `editable` when the session's permission changes.
+    useEffect(() => {
+        viewRef.current?.setProps({});
+    }, [canEdit]);
     // Apply the document's resolved style as CSS custom properties on the mount element.
     // Works identically for built-in and user-imported styles — both are plain
     // ScreenplayStyleDefinition objects by the time they reach here.

package/dist/editor/SelectionMenu.js

@@ -1,10 +1,11 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import { useLanguage } from '../i18n/LanguageContext';
 import { useDocument } from '../context/DocumentContext';
 import { insertSutra } from './insert-helper';
 import { VoiceConfirmDialog } from '../ai/VoiceConfirmDialog';
 import { SparklesIcon } from '../shell/icons';
+import { useAI } from '../extensions/ai-provider';
 const VOICE_LANG_MAP = {
     en: 'en-US',
     hi: 'hi-IN',
@@ -34,6 +35,7 @@ function isSelectionInEditor(sel) {
 export function SelectionMenu() {
     const { currentLanguage } = useLanguage();
     const { mode } = useDocument();
+    const ai = useAI();
     const [menuPosition, setMenuPosition] = useState(null);
     const [selectedText, setSelectedText] = useState('');
     const [showConfirm, setShowConfirm] = useState(false);
@@ -84,7 +86,7 @@ export function SelectionMenu() {
         setShowConfirm(true);
         setMenuPosition(null);
     };
-    if (showConfirm) {
+    if (showConfirm && ai) {
         const langCode = VOICE_LANG_MAP[currentLanguage] || 'en-US';
         return (_jsx(VoiceConfirmDialog, { rawTranscript: selectedText, langCode: langCode, onConfirm: (formattedText) => {
                 insertSutra(formattedText, mode);
@@ -98,5 +100,5 @@ export function SelectionMenu() {
     return (_jsxs("div", { className: "cs-selection-menu", style: {
             left: `${menuPosition.x}px`,
             top: `${menuPosition.y}px`,
-        }, role: "toolbar", "aria-label": "Text Selection Actions", children: [_jsxs("button", { type: "button", className: "cs-selection-btn cs-selection-btn-format", onClick: handleFormat, title: "Format selected text using AI", children: [_jsx(SparklesIcon, { size: 12 }), _jsx("span", { children: "Format" })] }), _jsx("div", { className: "cs-selection-sep" }), _jsx("button", { type: "button", className: "cs-selection-btn", onClick: handleCut, children: "Cut" }), _jsx("button", { type: "button", className: "cs-selection-btn", onClick: handleCopy, children: "Copy" })] }));
+        }, role: "toolbar", "aria-label": "Text Selection Actions", children: [ai && (_jsxs(_Fragment, { children: [_jsxs("button", { type: "button", className: "cs-selection-btn cs-selection-btn-format", onClick: handleFormat, title: "Format selected text using AI", children: [_jsx(SparklesIcon, { size: 12 }), _jsx("span", { children: "Format" })] }), _jsx("div", { className: "cs-selection-sep" })] })), _jsx("button", { type: "button", className: "cs-selection-btn", onClick: handleCut, children: "Cut" }), _jsx("button", { type: "button", className: "cs-selection-btn", onClick: handleCopy, children: "Copy" })] }));
 }

package/dist/editor/external-decorations-plugin.d.ts

@@ -0,0 +1,23 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+import type { Node as PmNode } from 'prosemirror-model';
+import type { DocumentNode } from '@sutrata/parser';
+import type { DecorationProvider } from '../extensions/decorations';
+/**
+ * Renders DecorationProvider output (extensions/decorations.ts) in the
+ * formatted editor. Anchors are { sceneId, from?, to? } with offsets into the
+ * scene's text; this plugin maps them to document positions, recomputes on
+ * every document change and whenever a provider signals a change, and routes
+ * clicks on decorated elements to the spec's onClick (in any session mode).
+ */
+export declare const externalDecorationsKey: PluginKey<DecorationSet>;
+interface SceneRange {
+    from: number;
+    to: number;
+}
+/** Top-level position range of every scene with an id, heading through the block before the next heading. */
+export declare function sceneRanges(doc: PmNode): Map<string, SceneRange>;
+/** Scene text as anchors see it: blocks joined with '\n', line breaks as '\n'. */
+export declare function textOf(doc: PmNode, range: SceneRange, to?: number): string;
+export declare function createExternalDecorationsPlugin(providers: readonly DecorationProvider[], getAst: () => DocumentNode): Plugin<DecorationSet>;
+export {};

package/dist/editor/external-decorations-plugin.js

@@ -0,0 +1,151 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+/**
+ * Renders DecorationProvider output (extensions/decorations.ts) in the
+ * formatted editor. Anchors are { sceneId, from?, to? } with offsets into the
+ * scene's text; this plugin maps them to document positions, recomputes on
+ * every document change and whenever a provider signals a change, and routes
+ * clicks on decorated elements to the spec's onClick (in any session mode).
+ */
+export const externalDecorationsKey = new PluginKey('externalDecorations');
+const REFRESH = 'refresh';
+const CLICK_ATTR = 'data-cs-deco';
+/** Top-level position range of every scene with an id, heading through the block before the next heading. */
+export function sceneRanges(doc) {
+    const ranges = new Map();
+    let open = null;
+    doc.forEach((node, offset) => {
+        if (node.type.name !== 'scene_heading')
+            return;
+        if (open?.id && !ranges.has(open.id))
+            ranges.set(open.id, { from: open.from, to: offset });
+        open = { id: node.attrs['id'] ?? null, from: offset };
+    });
+    const last = open;
+    if (last?.id && !ranges.has(last.id))
+        ranges.set(last.id, { from: last.from, to: doc.content.size });
+    return ranges;
+}
+/** Scene text as anchors see it: blocks joined with '\n', line breaks as '\n'. */
+export function textOf(doc, range, to = range.to) {
+    return doc.textBetween(range.from, to, '\n', '\n');
+}
+/**
+ * Document position for a scene-text offset. `start` bias picks the first
+ * position at which `offset` characters precede (so an offset at a block
+ * boundary lands at the start of the next block); `end` bias the last one.
+ */
+function posAt(doc, range, offset, bias) {
+    // Smallest position p with at least `target` characters of scene text before it.
+    const smallest = (target) => {
+        let lo = range.from;
+        let hi = range.to;
+        while (lo < hi) {
+            const mid = (lo + hi) >> 1;
+            if (textOf(doc, range, mid).length >= target)
+                hi = mid;
+            else
+                lo = mid + 1;
+        }
+        return lo;
+    };
+    if (bias === 'end' || offset >= textOf(doc, range).length)
+        return smallest(offset);
+    // Just before character `offset`: one position before the point where it has been passed.
+    return Math.max(range.from, smallest(offset + 1) - 1);
+}
+/** The top-level block containing `pos`, as a node-decoration range. */
+function blockAt(doc, pos) {
+    let found = null;
+    doc.forEach((node, offset) => {
+        if (!found && pos >= offset && pos <= offset + node.nodeSize)
+            found = { from: offset, to: offset + node.nodeSize };
+    });
+    return found;
+}
+function toDecorations(doc, specs, ranges, onClick, keyPrefix) {
+    const out = [];
+    specs.forEach((spec, i) => {
+        const range = ranges.get(spec.anchor.sceneId);
+        if (!range)
+            return; // unknown id, or a scene without {#id}
+        const clamp = (n) => Math.max(0, Math.min(n, textOf(doc, range).length));
+        const key = `${keyPrefix}:${i}`;
+        if (spec.kind === 'widget') {
+            const pos = spec.anchor.from === undefined ? range.from : posAt(doc, range, clamp(spec.anchor.from), 'start');
+            out.push(Decoration.widget(pos, () => spec.render(), { side: spec.side ?? -1, key }));
+            return;
+        }
+        const attrs = { ...(spec.attrs ?? {}) };
+        if (spec.className)
+            attrs['class'] = spec.className;
+        if (spec.onClick) {
+            attrs[CLICK_ATTR] = key;
+            onClick.set(key, spec.onClick);
+        }
+        if (spec.kind === 'node') {
+            const block = spec.anchor.from === undefined
+                ? { from: range.from, to: range.from + doc.nodeAt(range.from).nodeSize }
+                : blockAt(doc, posAt(doc, range, clamp(spec.anchor.from), 'start'));
+            if (block)
+                out.push(Decoration.node(block.from, block.to, attrs));
+            return;
+        }
+        const from = spec.anchor.from === undefined ? range.from : posAt(doc, range, clamp(spec.anchor.from), 'start');
+        const to = spec.anchor.to === undefined ? range.to : posAt(doc, range, clamp(spec.anchor.to), 'end');
+        if (to > from)
+            out.push(Decoration.inline(from, to, attrs));
+    });
+    return out;
+}
+export function createExternalDecorationsPlugin(providers, getAst) {
+    const onClick = new Map();
+    const compute = (state) => {
+        onClick.clear();
+        const ranges = sceneRanges(state.doc);
+        const ctx = {
+            ast: getAst(),
+            sceneText: id => {
+                const range = ranges.get(id);
+                return range ? textOf(state.doc, range) : null;
+            },
+        };
+        const decorations = providers.flatMap(p => {
+            try {
+                return toDecorations(state.doc, p.getDecorations(ctx), ranges, onClick, p.id);
+            }
+            catch (e) {
+                console.error(`DecorationProvider ${p.id} failed:`, e);
+                return [];
+            }
+        });
+        return DecorationSet.create(state.doc, decorations);
+    };
+    return new Plugin({
+        key: externalDecorationsKey,
+        state: {
+            init: (_, state) => compute(state),
+            apply: (tr, set, _old, state) => (tr.docChanged || tr.getMeta(externalDecorationsKey) === REFRESH ? compute(state) : set),
+        },
+        view(view) {
+            const offs = providers.map(p => p.subscribe(() => {
+                if (!view.isDestroyed)
+                    view.dispatch(view.state.tr.setMeta(externalDecorationsKey, REFRESH));
+            }));
+            return { destroy: () => offs.forEach(off => off()) };
+        },
+        props: {
+            decorations: state => externalDecorationsKey.getState(state),
+            handleDOMEvents: {
+                click(_view, event) {
+                    const el = event.target?.closest?.(`[${CLICK_ATTR}]`);
+                    const handler = el && onClick.get(el.getAttribute(CLICK_ATTR) ?? '');
+                    if (!handler)
+                        return false;
+                    handler(event);
+                    return true;
+                },
+            },
+        },
+    });
+}

package/dist/editor/omitted-scene-plugin.d.ts

@@ -0,0 +1,9 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { DecorationSet } from 'prosemirror-view';
+/**
+ * Omitted scenes (format spec §7.4: `& status: omitted`): the heading is
+ * struck through and followed by an OMITTED badge. The heading, number and
+ * any body kept in a comment stay editable.
+ */
+export declare const omittedSceneKey: PluginKey<DecorationSet>;
+export declare function createOmittedScenePlugin(): Plugin<DecorationSet>;

package/dist/editor/omitted-scene-plugin.js

@@ -0,0 +1,44 @@
+import { Plugin, PluginKey } from 'prosemirror-state';
+import { Decoration, DecorationSet } from 'prosemirror-view';
+/**
+ * Omitted scenes (format spec §7.4: `& status: omitted`): the heading is
+ * struck through and followed by an OMITTED badge. The heading, number and
+ * any body kept in a comment stay editable.
+ */
+export const omittedSceneKey = new PluginKey('omittedScene');
+function decorate(doc) {
+    const decorations = [];
+    let heading = null;
+    doc.forEach((node, pos) => {
+        if (node.type.name === 'scene_heading') {
+            heading = { pos, node };
+            return;
+        }
+        if (node.type.name !== 'scene_metadata') {
+            heading = null;
+            return;
+        }
+        const h = heading;
+        if (h && node.attrs['metaKey'] === 'status' && node.textContent.trim().toLowerCase() === 'omitted') {
+            decorations.push(Decoration.node(h.pos, h.pos + h.node.nodeSize, { class: 'cs-scene-omitted' }));
+            decorations.push(Decoration.widget(h.pos + h.node.nodeSize - 1, () => {
+                const badge = document.createElement('span');
+                badge.className = 'cs-omitted-badge';
+                badge.contentEditable = 'false';
+                badge.textContent = 'OMITTED';
+                return badge;
+            }, { side: 1, key: `omitted-${h.pos}` }));
+        }
+    });
+    return DecorationSet.create(doc, decorations);
+}
+export function createOmittedScenePlugin() {
+    return new Plugin({
+        key: omittedSceneKey,
+        state: {
+            init: (_, state) => decorate(state.doc),
+            apply: (tr, set) => (tr.docChanged ? decorate(tr.doc) : set),
+        },
+        props: { decorations: state => omittedSceneKey.getState(state) },
+    });
+}

package/dist/editor/plugins.js

@@ -9,9 +9,12 @@ import { createAutocompletePlugin } from '../autocomplete/AutocompletePlugin';
 import { createSpellcheckPlugin } from '../spellcheck/spellcheck-plugin';
 import { createAttrPencilPlugin } from './attr-pencil-plugin';
 import { createFindHighlightPlugin } from './find-highlight-plugin';
+import { createOmittedScenePlugin } from './omitted-scene-plugin';
+import { createPrivateMetadataPlugin } from './private-metadata-plugin';
 export function buildPlugins() {
     return [
         history(),
+        createPrivateMetadataPlugin(), // before the keymaps, so Backspace/Delete can't merge hidden x- blocks
         buildKeymap(),
         keymap(baseKeymap),
         createLanguageClassPlugin(),
@@ -21,5 +24,6 @@ export function buildPlugins() {
         createSpellcheckPlugin(),
         createAttrPencilPlugin(),
         createFindHighlightPlugin(),
+        createOmittedScenePlugin(),
     ];
 }

package/dist/editor/private-metadata-plugin.d.ts

@@ -0,0 +1,10 @@
+import { Plugin } from 'prosemirror-state';
+import type { Node as PmNode } from 'prosemirror-model';
+/**
+ * Tool-private `x-` scene metadata (format spec §7.1) stays in the document
+ * but is hidden (`data-private`, see schema.ts). This plugin keeps the caret
+ * out of those hidden blocks and stops Backspace/Delete from merging text
+ * into or out of them; a range deletion that spans one still removes it.
+ */
+export declare function isPrivateBlock(node: PmNode | null | undefined): boolean;
+export declare function createPrivateMetadataPlugin(): Plugin;

package/dist/editor/private-metadata-plugin.js

@@ -0,0 +1,60 @@
+import { Plugin, TextSelection } from 'prosemirror-state';
+/**
+ * Tool-private `x-` scene metadata (format spec §7.1) stays in the document
+ * but is hidden (`data-private`, see schema.ts). This plugin keeps the caret
+ * out of those hidden blocks and stops Backspace/Delete from merging text
+ * into or out of them; a range deletion that spans one still removes it.
+ */
+export function isPrivateBlock(node) {
+    return !!node && node.type.name === 'scene_metadata' && node.attrs['metaKey'].startsWith('x-');
+}
+/** Position just inside the nearest visible top-level block from `index` in `dir`, or null. */
+function visibleBlockPos(doc, index, dir) {
+    for (let i = index; i >= 0 && i < doc.childCount; i += dir) {
+        if (isPrivateBlock(doc.child(i)))
+            continue;
+        let pos = 0;
+        for (let j = 0; j < i; j++)
+            pos += doc.child(j).nodeSize;
+        return dir === 1 ? pos + 1 : pos + doc.child(i).nodeSize - 1;
+    }
+    return null;
+}
+function moveOut(state, index, dir) {
+    const pos = visibleBlockPos(state.doc, index, dir) ?? visibleBlockPos(state.doc, index, dir === 1 ? -1 : 1);
+    return pos === null ? null : state.tr.setSelection(TextSelection.near(state.doc.resolve(pos), dir));
+}
+export function createPrivateMetadataPlugin() {
+    return new Plugin({
+        appendTransaction(trs, oldState, state) {
+            const { $head, empty } = state.selection;
+            if (!empty || $head.depth < 1 || !isPrivateBlock($head.node(1)))
+                return null;
+            if (!trs.some(tr => tr.selectionSet || tr.docChanged))
+                return null;
+            const dir = $head.pos < oldState.selection.head ? -1 : 1;
+            return moveOut(state, $head.index(0), dir);
+        },
+        props: {
+            handleKeyDown(view, event) {
+                if (event.key !== 'Backspace' && event.key !== 'Delete')
+                    return false;
+                const { $head, empty } = view.state.selection;
+                if (!empty || $head.depth !== 1)
+                    return false;
+                const back = event.key === 'Backspace';
+                if (back ? $head.parentOffset !== 0 : $head.parentOffset !== $head.parent.content.size)
+                    return false;
+                const index = $head.index(0);
+                const neighbour = back ? index - 1 : index + 1;
+                if (neighbour < 0 || neighbour >= view.state.doc.childCount || !isPrivateBlock(view.state.doc.child(neighbour)))
+                    return false;
+                // Step over the hidden block(s) instead of merging with them.
+                const tr = moveOut(view.state, neighbour, back ? -1 : 1);
+                if (tr)
+                    view.dispatch(tr);
+                return true;
+            },
+        },
+    });
+}