@rightkit/document-workspace 0.0.0-stage → 0.1.1

package/dist/documents/mdx/MdxSplitPane.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+import type { SearchProvider } from "@rightkit/document-core/documents/types";
+import { type DocumentSearchMode } from "@rightkit/document-core/documents/DocumentToolbarFind";
+interface Props {
+    text: string;
+    documentPath?: string;
+    subscribeEdits?: (path: string, cb: () => void) => () => void;
+    getEditSnapshot?: (path: string) => string | undefined;
+    devMode?: boolean;
+    active?: boolean;
+    showSource: boolean;
+    /** Wave 2 Read mode: the MDX preview is inherently read-only (sandboxed iframe); the flag only
+     *  forces the source drawer closed — the drawer is the editing surface. */
+    readOnly?: boolean;
+    onChange: (text: string) => void;
+    onSave: () => void;
+    registerSearchProvider: (provider: SearchProvider | null) => void;
+    findBar?: ReactNode;
+    findMode?: DocumentSearchMode;
+    onRequestFind?: () => void;
+    onRequestReplace?: () => void;
+    /** Close the shared find bar when the rendered/source surface switches. */
+    onCloseFind?: () => void;
+    onOpenPath?: (path: string, opts?: {
+        background?: boolean;
+    }) => void;
+    /** Reports every grant minted for this document's compile-time imports + in-preview link clicks,
+     *  so the owning tab can revoke them on close. */
+    onImportGranted?: (entryPath: string, grantedPath: string) => void;
+}
+export declare function MdxSplitPane({ text, documentPath, subscribeEdits, getEditSnapshot, showSource, onChange, onSave, registerSearchProvider, findBar, findMode, onRequestFind, onRequestReplace, onCloseFind, onOpenPath, onImportGranted, readOnly, active, }: Props): import("react").JSX.Element;
+export {};

package/dist/documents/mdx/MdxSplitPane.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// MdxSplitPane: the MDX branch of the markdown/mdx split pane. Mirrors MarkdownSplitPane
+// structurally — same source drawer (CodeMirror markdown mode + markdownToolbar), same
+// find-provider-publish pattern, same source-fullscreen / focus / typewriter, same outline.
+//
+// The preview slot is the only difference: instead of mounting <MarkdownView> in the app's
+// React tree, it mounts <MdxPreviewFrame> — a sandboxed iframe (sandbox="allow-scripts", never
+// allow-same-origin) where the compiled MDX renders. The duplication vs MarkdownSplitPane is
+// intentional: each format owns its own split pane so changes to one don't accidentally affect
+// the other. The shared code (TextEditor, MarkdownSourceToolbar, MarkdownSourceActions, etc.)
+// lives in the markdown/ folder; this file reuses them by import.
+import { useCloseFindOnSurfaceChange } from "@rightkit/document-core/app/useCloseFindOnSurfaceChange";
+import { useCallback, useEffect, useRef } from "react";
+import { useEditText } from "@rightkit/document-core/app/useEditText";
+import { useMirroredEditText } from "@rightkit/document-core/documents/useMirroredEditText";
+import { useSplitResize } from "@rightkit/document-core/documents/useSplitResize";
+import { MarkdownSourceDrawer, useMarkdownSourceDrawer } from "../markdown/MarkdownSplitPane.js";
+import { MdxPreviewFrame } from "@rightkit/markdown-editor/documents/mdx/MdxPreviewFrame";
+import { DocumentToolbarSearch } from "@rightkit/document-core/documents/DocumentToolbarFind";
+const noopSubscribeEdits = (_path, _cb) => () => { };
+const noopEditSnapshot = (_path) => undefined;
+export function MdxSplitPane({ text, documentPath, subscribeEdits, getEditSnapshot, showSource, onChange, onSave, registerSearchProvider, findBar, findMode, onRequestFind, onRequestReplace, onCloseFind, onOpenPath, onImportGranted, readOnly = false, active = true, }) {
+    const liveText = useEditText(subscribeEdits ?? noopSubscribeEdits, getEditSnapshot ?? noopEditSnapshot, documentPath ?? "");
+    const [localText, setLocalText] = useMirroredEditText(liveText, text);
+    const handleChange = useCallback((next) => {
+        setLocalText(next);
+        onChange(next);
+    }, [onChange, setLocalText]);
+    const renderedText = localText;
+    const containerRef = useRef(null);
+    const { sourceWidth, setSourceWidth, sourceFullscreen, drawerProps } = useMarkdownSourceDrawer(renderedText, undefined, undefined, undefined, documentPath);
+    // The active surface owns find: the source editor while the drawer is open, else the MDX
+    // preview. publish() exposes whichever is active so neither child's register/unregister can
+    // clobber the other during the toggle. Same invariant as MarkdownSplitPane.tsx:54-64.
+    const previewProviderRef = useRef(null);
+    const sourceProviderRef = useRef(null);
+    // Read mode keeps the drawer closed even if a persisted view asks for "source" — the drawer is
+    // the editing surface, and Read never exposes one.
+    const drawer = showSource && !readOnly;
+    useCloseFindOnSurfaceChange(drawer, !!findMode, onCloseFind);
+    const showSourceRef = useRef(drawer);
+    showSourceRef.current = drawer;
+    const publish = useCallback(() => {
+        registerSearchProvider(showSourceRef.current ? sourceProviderRef.current : previewProviderRef.current);
+    }, [registerSearchProvider]);
+    const registerPreviewProvider = useCallback((p) => {
+        previewProviderRef.current = p;
+        publish();
+    }, [publish]);
+    const registerSourceProvider = useCallback((p) => {
+        sourceProviderRef.current = p;
+        publish();
+    }, [publish]);
+    useEffect(() => {
+        publish();
+    }, [publish]);
+    useEffect(() => () => registerSearchProvider(null), [registerSearchProvider]);
+    const startResize = useSplitResize(containerRef, setSourceWidth);
+    return (_jsxs("div", { ref: containerRef, className: "flex h-full min-h-0 min-w-0 bg-ink", children: [!(drawer && sourceFullscreen) && (_jsxs("section", { className: "relative flex min-h-0 min-w-0 flex-1 flex-col", children: [!drawer && findBar ? (_jsx("div", { className: "no-print vr-chrome vr-document-toolbar vr-document-toolbar-search-layout relative shrink-0 border-b border-line bg-panel-2 text-muted", children: _jsx(DocumentToolbarSearch, { findBar: findBar, activeMode: findMode, onRequestFind: onRequestFind, onRequestReplace: undefined }) })) : null, _jsx("div", { "data-document-scroll": true, className: "min-h-0 flex-1 overflow-auto", children: _jsx(MdxPreviewFrame, { source: renderedText, documentPath: documentPath ?? "", onOpenPath: onOpenPath, registerSearchProvider: registerPreviewProvider, onImportGranted: onImportGranted, active: active, printPreview: !drawer }) })] })), drawer && !sourceFullscreen && (_jsx("div", { onPointerDown: startResize, role: "separator", tabIndex: 0, "aria-orientation": "vertical", "aria-valuemin": 30, "aria-valuenow": sourceWidth, "aria-label": "Resize MDX source drawer", className: "w-1.5 shrink-0 cursor-col-resize bg-line transition-colors hover:bg-copper/60" })), drawer && (_jsx(MarkdownSourceDrawer, { documentPath: documentPath, text: renderedText, onChange: handleChange, onSave: onSave, registerSourceProvider: registerSourceProvider, findBar: findBar, findMode: findMode, onRequestFind: onRequestFind, onRequestReplace: onRequestReplace, ...drawerProps, restoreTitle: "Restore MDX split", expandTitle: "Expand MDX source", className: `relative flex min-h-0 min-w-0 flex-col border-l border-line bg-panel ${sourceFullscreen ? "flex-1" : "shrink-0"}` }))] }));
+}

package/dist/documents/txt/LinkDialog.d.ts

@@ -0,0 +1,8 @@
+export declare function LinkDialog({ initialText, initialUrl, onInsert, onCancel, onRemove, }: {
+    initialText: string;
+    initialUrl?: string;
+    onInsert: (text: string, url: string) => void;
+    onCancel: () => void;
+    /** Provided when editing an existing link — shows a "Remove link" button. */
+    onRemove?: () => void;
+}): import("react").JSX.Element;

package/dist/documents/txt/LinkDialog.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ActionDialog } from "@rightkit/react-shell/react";
+import { DIALOG_SLOTS, cancelAction, dangerAction, primaryAction } from "@rightkit/document-core/app/chrome";
+// Notepad/Word-style link dialog: Display text + Address, shared by source editors so link
+// insertion is consistent across formats. Keyboard: autofocus, Enter inserts, Esc cancels. The
+// caller restores the saved selection and performs the actual insert in onInsert.
+export function LinkDialog({ initialText, initialUrl = "", onInsert, onCancel, onRemove, }) {
+    const [text, setText] = useState(initialText);
+    const [url, setUrl] = useState(initialUrl);
+    const textRef = useRef(null);
+    const urlRef = useRef(null);
+    useEffect(() => {
+        // If text is already selected, jump straight to the address; otherwise start with display text.
+        (initialText ? urlRef.current : textRef.current)?.focus();
+    }, [initialText]);
+    const submit = () => {
+        const u = url.trim();
+        if (!u)
+            return;
+        onInsert(text.trim() || u, u); // insert exactly as typed — no rewriting
+    };
+    const onKey = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            submit();
+        }
+    };
+    return (_jsxs(ActionDialog, { title: "Link", ariaLabel: "Link", onClose: onCancel, width: 420, autoFocus: false, slots: { ...DIALOG_SLOTS, header: `mb-4 ${DIALOG_SLOTS.header}` }, actions: [
+            ...(onRemove ? [dangerAction("Remove link", onRemove)] : []),
+            cancelAction(onCancel),
+            { ...primaryAction(onRemove ? "Update" : "Insert", submit), disabled: !url.trim() },
+        ], children: [_jsx("label", { htmlFor: "vr-link-text", className: "mb-1 block text-chrome-xs uppercase tracking-[0.15em] text-muted-2", children: "Display text" }), _jsx("input", { id: "vr-link-text", ref: textRef, value: text, onChange: (e) => setText(e.target.value), onKeyDown: onKey, placeholder: "Text to show", className: "mb-4 w-full rounded border border-line bg-ink px-3 py-1.5 text-sm text-paper outline-none focus:border-copper" }), _jsx("label", { htmlFor: "vr-link-url", className: "mb-1 block text-chrome-xs uppercase tracking-[0.15em] text-muted-2", children: "Address" }), _jsx("input", { id: "vr-link-url", ref: urlRef, value: url, onChange: (e) => setUrl(e.target.value), onKeyDown: onKey, placeholder: "https://example.com", className: "mb-5 w-full rounded border border-line bg-ink px-3 py-1.5 font-mono text-sm text-paper outline-none focus:border-copper" })] }));
+}

package/dist/documents/txt/MarkdownSourceToolbar.d.ts

@@ -0,0 +1,8 @@
+export declare function MarkdownSourceToolbar({ setHeading, wrapInline, linePrefix, openLink, insertBlock, formatTables, }: {
+    setHeading: (level: number) => void;
+    wrapInline: (before: string, after: string) => void;
+    linePrefix: (prefix: string) => void;
+    openLink: (prefix: "[" | "![") => void;
+    insertBlock: (block: string, caretOffset?: number) => void;
+    formatTables: () => void;
+}): import("react").JSX.Element;

package/dist/documents/txt/MarkdownSourceToolbar.js

@@ -0,0 +1,25 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TBtn, Sep, Group, Dropdown, Item } from "@rightkit/document-core/documents/toolbarPrimitives";
+import { DIAGRAM_TEMPLATES, insertTableTemplate, mermaidBlock } from "@rightkit/markdown-editor/documents/markdown/markdownTools";
+import { shortcutLabel } from "@rightkit/document-core/platform";
+const HEADINGS = [
+    { label: "Paragraph", level: 0 },
+    { label: "Heading 1", level: 1 },
+    { label: "Heading 2", level: 2 },
+    { label: "Heading 3", level: 3 },
+    { label: "Heading 4", level: 4 },
+    { label: "Heading 5", level: 5 },
+    { label: "Heading 6", level: 6 },
+];
+export function MarkdownSourceToolbar({ setHeading, wrapInline, linePrefix, openLink, insertBlock, formatTables, }) {
+    return (_jsxs(_Fragment, { children: [_jsx(Dropdown, { label: "Heading", title: "Paragraph style", minWidth: 92, panelWidth: 130, children: (close) => HEADINGS.map((h) => (_jsx(Item, { onRun: () => {
+                        setHeading(h.level);
+                        close();
+                    }, children: h.label }, h.level))) }), _jsx(Sep, {}), _jsxs(Group, { children: [_jsx(TBtn, { label: "B", title: `Bold (${shortcutLabel("mod+b")})`, bold: true, onRun: () => wrapInline("**", "**") }), _jsx(TBtn, { label: "I", title: `Italic (${shortcutLabel("mod+i")})`, italic: true, onRun: () => wrapInline("*", "*") }), _jsx(TBtn, { label: "S", title: "Strikethrough", strike: true, onRun: () => wrapInline("~~", "~~") }), _jsx(TBtn, { label: "H", title: "Highlight", onRun: () => wrapInline("==", "==") }), _jsx(TBtn, { label: "<", title: "Inline code", width: 32, onRun: () => wrapInline("`", "`") })] }), _jsx(Sep, {}), _jsxs(Group, { children: [_jsx(TBtn, { label: "\u2022", title: "Bulleted list", onRun: () => linePrefix("- ") }), _jsx(TBtn, { label: "1.", title: "Numbered list", onRun: () => linePrefix("1. ") }), _jsx(TBtn, { label: "\u2611", title: "Task list", onRun: () => linePrefix("- [ ] ") }), _jsx(TBtn, { label: "\u275D", title: "Blockquote", onRun: () => linePrefix("> ") })] }), _jsx(Sep, {}), _jsxs(Group, { children: [_jsx(TBtn, { label: "link", title: `Link (${shortcutLabel("mod+k")})`, width: 40, onRun: () => openLink("[") }), _jsx(TBtn, { label: "[[", title: "Wiki link", width: 32, onRun: () => wrapInline("[[", "]]") }), _jsx(TBtn, { label: "img", title: "Image", width: 36, onRun: () => openLink("![") })] }), _jsx(Sep, {}), _jsxs(Group, { children: [_jsx(TBtn, { label: "\u25A6", title: "Insert table", onRun: () => {
+                            const table = insertTableTemplate(3, 3);
+                            insertBlock(table, table.length);
+                        } }), _jsx(TBtn, { label: "fmt|", title: "Format tables", width: 42, onRun: formatTables }), _jsx(TBtn, { label: "\u2015", title: "Horizontal rule", onRun: () => insertBlock("---\n") }), _jsx(TBtn, { label: "{ }", title: "Code block", width: 32, onRun: () => insertBlock("```\n\n```\n", 4) })] }), _jsx(Sep, {}), _jsxs(Group, { children: [_jsx(TBtn, { label: "toc", title: "Insert table of contents", width: 38, onRun: () => insertBlock("[toc]\n\n") }), _jsx(Dropdown, { label: "diagram", title: "Insert Mermaid diagram", minWidth: 74, panelWidth: 158, children: (close) => DIAGRAM_TEMPLATES.map((template) => (_jsx(Item, { onRun: () => {
+                                insertBlock(mermaidBlock(template.code));
+                                close();
+                            }, children: template.label }, template.label))) })] })] }));
+}

package/dist/documents/txt/SourceEditorToolbar.d.ts

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+export declare function SourceEditorToolbar({ folded, showInvisibles, actions, markdownControls, onFormat, onToggleFold, onGoToLine, onToggleInvisibles, }: {
+    folded: boolean;
+    showInvisibles: boolean;
+    actions?: ReactNode;
+    /** Markdown formatting controls (heading, bold, lists, ...), flowed into the same row. */
+    markdownControls?: ReactNode;
+    onFormat: () => void;
+    onToggleFold: () => void;
+    onGoToLine: () => void;
+    onToggleInvisibles: () => void;
+}): import("react").JSX.Element;

package/dist/documents/txt/SourceEditorToolbar.js

@@ -0,0 +1,4 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function SourceEditorToolbar({ folded, showInvisibles, actions, markdownControls, onFormat, onToggleFold, onGoToLine, onToggleInvisibles, }) {
+    return (_jsxs("div", { className: "no-print vr-chrome vr-capsule-scroll flex min-h-9 min-w-0 flex-nowrap items-center gap-1 whitespace-nowrap px-1 text-chrome-xs text-muted", children: [_jsx("button", { type: "button", title: "Format source", "aria-label": "Format source", onClick: onFormat, className: "vr-press vr-focus rounded px-2 py-1 hover:bg-panel-2 hover:text-paper", children: "fmt" }), _jsx("span", { className: "mx-1 h-5 w-px bg-line" }), _jsx("button", { type: "button", title: folded ? "Unfold all" : "Fold all", "aria-label": folded ? "Unfold all" : "Fold all", "aria-pressed": folded, onClick: onToggleFold, className: `vr-press vr-focus rounded px-2 py-1 hover:bg-panel-2 hover:text-paper ${folded ? "text-copper-hi" : ""}`, children: folded ? "unfold" : "fold" }), _jsx("button", { type: "button", title: "Go to line", "aria-label": "Go to line", onClick: onGoToLine, className: "vr-press vr-focus rounded px-2 py-1 hover:bg-panel-2 hover:text-paper", children: "line" }), _jsx("span", { className: "mx-1 h-5 w-px bg-line" }), _jsx("button", { type: "button", title: showInvisibles ? "Hide invisible characters" : "Show invisible characters", "aria-label": showInvisibles ? "Hide invisible characters" : "Show invisible characters", "aria-pressed": showInvisibles, onClick: onToggleInvisibles, className: `vr-press vr-focus rounded px-2 py-1 hover:bg-panel-2 hover:text-paper ${showInvisibles ? "text-copper-hi" : ""}`, children: "marks" }), markdownControls && (_jsxs(_Fragment, { children: [_jsx("span", { className: "mx-1 h-5 w-px bg-line" }), markdownControls] })), actions && (_jsxs(_Fragment, { children: [_jsx("div", { className: "min-w-2 flex-1" }), _jsx("div", { className: "flex shrink-0 items-center gap-1", children: actions })] }))] }));
+}

package/dist/documents/txt/TxtEditor.d.ts

@@ -0,0 +1,39 @@
+import { type ReactNode } from "react";
+import type { EditorView } from "@codemirror/view";
+import type { SearchProvider } from "@rightkit/document-core/documents/types";
+import type { SourceLanguage } from "./sourceFormatting.js";
+export { applyInlineWrap, buildImageEmbed, buildMarkdownLink, formatHtmlSource, formatSource, sourceDiagnostics, } from "./sourceFormatting.js";
+import { type DocumentSearchMode } from "@rightkit/document-core/documents/DocumentToolbarFind";
+import type { SourceEditorViewState, TextEditorProps } from "./sourceEditorTypes.js";
+export type { SourceEditorViewState } from "./sourceEditorTypes.js";
+interface Props extends TextEditorProps {
+    text: string;
+    onChange: (text: string) => void;
+    onSave: () => void;
+    /** Mono for source/code editing; reading font for plain txt. */
+    mono?: boolean;
+    /** Show the markdown formatting bar (txt + md/mdx source). Parity with new Notepad / md editors. */
+    markdownToolbar?: boolean;
+    /** Read-only source view — no editing or replace (e.g. navigated HTML sub-pages that aren't the entry file). */
+    readOnly?: boolean;
+    /** Source language profile. Markdown gets toolbar-aware shortcuts; HTML gets HTML parsing; plain is for TXT. */
+    language?: SourceLanguage;
+    registerSearchProvider: (provider: SearchProvider | null) => void;
+    /** Shared FindBar element placed in source toolbar chrome. */
+    findBar?: ReactNode;
+    findMode?: DocumentSearchMode;
+    onRequestFind?: () => void;
+    onRequestReplace?: () => void;
+    /** Optional right-side controls rendered in the source toolbar. */
+    sourceToolbarActions?: ReactNode;
+    initialViewState?: SourceEditorViewState | null;
+    onViewStateChange?: (state: SourceEditorViewState) => void;
+    onEditorReady?: (view: EditorView | null) => void;
+    onSourceScrollLine?: (line: number) => void;
+    autoFocus?: boolean;
+    sourceFocusMode?: boolean;
+    sourceTypewriterMode?: boolean;
+    active?: boolean;
+    markdownCore?: import("@rightkit/markdown-editor/documents/markdown/core/MarkdownDocumentCore").MarkdownDocumentCore;
+}
+export declare function TextEditor({ documentPath, text, onChange, onSave, mono, markdownToolbar, readOnly, dockToolbar, language, registerSearchProvider, findBar, findMode, onRequestFind, onRequestReplace, sourceToolbarActions, initialViewState, onViewStateChange, onEditorReady, onSourceScrollLine, autoFocus, sourceFocusMode, sourceTypewriterMode, externalHistory, active, markdownCore: explicitMarkdownCore, }: Props): import("react").JSX.Element;

package/dist/documents/txt/TxtEditor.js

@@ -0,0 +1,186 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy, Suspense, useEffect, useMemo, useRef, useState } from "react";
+import { useSettings } from "@rightkit/document-core/settings/settings";
+import { LinkDialog } from "./LinkDialog.js";
+export { applyInlineWrap, buildImageEmbed, buildMarkdownLink, formatHtmlSource, formatSource, sourceDiagnostics, } from "./sourceFormatting.js";
+import { viewRightTheme } from "./sourceTheme.js";
+import { SourceEditorToolbar } from "./SourceEditorToolbar.js";
+import { DocumentToolbarSearch } from "@rightkit/document-core/documents/DocumentToolbarFind";
+import { useSourceSearch } from "./useSourceSearch.js";
+import { useTextEditorCommands } from "./useTextEditorCommands.js";
+import { useCodeMirrorSourceEditor } from "./useCodeMirrorSourceEditor.js";
+import { printDocumentContent } from "@rightkit/document-core/app/documentPrinting";
+import { logError } from "@rightkit/document-core/state/diagnostics";
+import { toast } from "@rightkit/platform-ui/headless";
+import { DocBar } from "@rightkit/document-core/app/shell/docBar";
+const MarkdownSourceToolbar = lazy(() => import("./MarkdownSourceToolbar.js").then((m) => ({ default: m.MarkdownSourceToolbar })));
+export function TextEditor({ documentPath, text, onChange, onSave, mono = false, markdownToolbar = false, readOnly = false, dockToolbar = true, language = markdownToolbar ? "markdown" : "plain", registerSearchProvider, findBar, findMode, onRequestFind, onRequestReplace, sourceToolbarActions, initialViewState = null, onViewStateChange, onEditorReady, onSourceScrollLine, autoFocus = false, sourceFocusMode = false, sourceTypewriterMode = false, externalHistory = false, active = false, markdownCore: explicitMarkdownCore, }) {
+    const markdownCore = explicitMarkdownCore ?? null;
+    const coreHistory = language === "markdown" ? markdownCore : null;
+    const { settings } = useSettings();
+    const hostRef = useRef(null);
+    const viewRef = useRef(null);
+    const activeRef = useRef(active);
+    activeRef.current = active;
+    useEffect(() => {
+        if (!active || language !== "plain")
+            return;
+        const onPrint = (event) => {
+            event.preventDefault();
+            void printDocumentContent({ kind: "plain-text", text: textRef.current })
+                .then((printed) => {
+                if (printed)
+                    return;
+                logError("print:failed:txt");
+                toast("Couldn't open print dialog", "error");
+            })
+                .catch(() => {
+                logError("print:failed:txt");
+                toast("Couldn't open print dialog", "error");
+            });
+        };
+        window.addEventListener("viewright:print", onPrint);
+        return () => window.removeEventListener("viewright:print", onPrint);
+    }, [active, language]);
+    const allowNextTabFocusRef = useRef(false);
+    const suppressChangeRef = useRef(false);
+    const textRef = useRef(text);
+    const onChangeRef = useRef(onChange);
+    const onSaveRef = useRef(onSave);
+    const formatOnSaveRef = useRef(false);
+    const onViewStateChangeRef = useRef(onViewStateChange);
+    const onEditorReadyRef = useRef(onEditorReady);
+    const onSourceScrollLineRef = useRef(onSourceScrollLine);
+    const readOnlyRef = useRef(readOnly);
+    const registerSearchProviderRef = useRef(registerSearchProvider);
+    const registeredProviderRef = useRef(null);
+    const sourceWrap = true;
+    const [sourceFolded, setSourceFolded] = useState(false);
+    const [showInvisibles, setShowInvisibles] = useState(false);
+    const [goLineOpen, setGoLineOpen] = useState(false);
+    const [goLineValue, setGoLineValue] = useState("");
+    const useReadingFont = language === "plain" && !mono;
+    // Memoize the theme so the SAME extension instance flows into both the initial `themeCompartment.of`
+    // and the reconfigure effect. Rebuilding it per render churned CodeMirror's StyleModule (each
+    // EditorView.theme() mints a new generated class, and the editor could end up tagged with a class
+    // whose styles were already unmounted) — which silently dropped the source font-size/padding, so the
+    // editor fell back to the inherited 16px instead of var(--source-size). That nondeterministic size is
+    // the "font shift" seen on opening source.
+    const themeExtension = useMemo(() => viewRightTheme(language, useReadingFont), [language, useReadingFont]);
+    // Link/image insertion via the shared Notepad-style dialog (Display text + Address).
+    const [linkState, setLinkState] = useState(null);
+    useEffect(() => {
+        onChangeRef.current = onChange;
+    }, [onChange]);
+    useEffect(() => {
+        onSaveRef.current = onSave;
+    }, [onSave]);
+    useEffect(() => {
+        formatOnSaveRef.current = settings.formatOnSave;
+    }, [settings.formatOnSave]);
+    useEffect(() => {
+        onViewStateChangeRef.current = onViewStateChange;
+    }, [onViewStateChange]);
+    useEffect(() => {
+        onEditorReadyRef.current = onEditorReady;
+    }, [onEditorReady]);
+    useEffect(() => {
+        onSourceScrollLineRef.current = onSourceScrollLine;
+    }, [onSourceScrollLine]);
+    const { dispatchSearchHighlights, refreshSearch, replaceAndFind, runFind, searchRef, stepSearch, } = useSourceSearch({ viewRef, readOnlyRef });
+    const { formatFromEditor, formatTablesFromEditor, goToLine, insertBlock, insertLinkFromDialog: applyLinkFromDialog, linePrefix, openLink, saveFromEditor, setHeading, toggleFoldAll, wrapInline, } = useTextEditorCommands({
+        formatOnSaveRef,
+        language,
+        onSaveRef,
+        readOnlyRef,
+        setLinkState,
+        setSourceFolded,
+        sourceFolded,
+        viewRef,
+    });
+    const insertLinkFromDialog = (label, url) => {
+        const st = linkState;
+        setLinkState(null);
+        applyLinkFromDialog(st, label, url);
+    };
+    useCodeMirrorSourceEditor({
+        activeRef,
+        allowNextTabFocusRef,
+        autoFocus,
+        dispatchSearchHighlights,
+        documentPath,
+        externalHistory: externalHistory || Boolean(coreHistory),
+        formatFromEditor,
+        hostRef,
+        initialViewState,
+        language,
+        markdownToolbar,
+        onChangeRef,
+        onEditorReadyRef,
+        onSourceScrollLineRef,
+        onViewStateChangeRef,
+        openLink,
+        readOnly,
+        readOnlyRef,
+        registerSearchProvider,
+        registerSearchProviderRef,
+        registeredProviderRef,
+        refreshSearch,
+        replaceAndFind,
+        runFind,
+        saveFromEditor,
+        searchRef,
+        settingsSpellcheck: settings.spellcheck,
+        settingsWordWrap: settings.wordWrap,
+        showInvisibles,
+        sourceTypewriterMode,
+        sourceWrap,
+        stepSearch,
+        suppressChangeRef,
+        text,
+        textRef,
+        themeExtension,
+        viewRef,
+        wrapInline,
+        markdownCore: coreHistory,
+    });
+    // Inactive panes are hidden with `content-visibility: hidden`; when one is shown again CodeMirror
+    // re-measures from estimated line heights and lands on the wrong offset. Remember the offset the
+    // user left while active and put it back after the pane is visible again.
+    const activeScrollRef = useRef(null);
+    useEffect(() => {
+        const scroller = viewRef.current?.scrollDOM;
+        if (!active || !scroller)
+            return;
+        const saved = activeScrollRef.current;
+        const restore = () => {
+            if (!saved)
+                return;
+            scroller.scrollTop = saved.top;
+            scroller.scrollLeft = saved.left;
+        };
+        let frame = requestAnimationFrame(() => {
+            restore();
+            frame = requestAnimationFrame(restore);
+        });
+        const onScroll = () => {
+            activeScrollRef.current = { top: scroller.scrollTop, left: scroller.scrollLeft };
+        };
+        scroller.addEventListener("scroll", onScroll, { passive: true });
+        return () => {
+            cancelAnimationFrame(frame);
+            scroller.removeEventListener("scroll", onScroll);
+        };
+    }, [active]);
+    return (_jsxs(_Fragment, { children: [linkState && (_jsx(LinkDialog, { initialText: linkState.text, onInsert: insertLinkFromDialog, onCancel: () => setLinkState(null) })), _jsxs("div", { className: "relative flex h-full min-w-0 flex-col overflow-hidden", children: [language !== "plain" && dockToolbar && (_jsx(DocBar, { children: _jsx("div", { className: "vr-capsule h-[42px] min-w-0 px-1", children: _jsxs("div", { className: "vr-document-toolbar-search-layout flex min-w-0 items-center", children: [_jsx("div", { className: "vr-document-toolbar-main min-w-0", children: _jsx(SourceEditorToolbar, { folded: sourceFolded, showInvisibles: showInvisibles, actions: sourceToolbarActions, markdownControls: markdownToolbar ? (_jsx(Suspense, { fallback: null, children: _jsx(MarkdownSourceToolbar, { setHeading: setHeading, wrapInline: wrapInline, linePrefix: linePrefix, openLink: openLink, insertBlock: insertBlock, formatTables: formatTablesFromEditor }) })) : undefined, onFormat: formatFromEditor, onToggleFold: toggleFoldAll, onGoToLine: () => setGoLineOpen(true), onToggleInvisibles: () => setShowInvisibles((value) => !value) }) }), _jsx(DocumentToolbarSearch, { findBar: findBar, activeMode: findMode, onRequestFind: onRequestFind, onRequestReplace: onRequestReplace })] }) }) })), language !== "plain" && !dockToolbar && (_jsx("div", { className: "no-print vr-document-toolbar flex shrink-0 flex-col", children: _jsxs("div", { className: "vr-document-toolbar-search-layout", children: [_jsx("div", { className: "vr-document-toolbar-main min-w-0", children: _jsx(SourceEditorToolbar, { folded: sourceFolded, showInvisibles: showInvisibles, actions: sourceToolbarActions, markdownControls: markdownToolbar ? (_jsx(Suspense, { fallback: null, children: _jsx(MarkdownSourceToolbar, { setHeading: setHeading, wrapInline: wrapInline, linePrefix: linePrefix, openLink: openLink, insertBlock: insertBlock, formatTables: formatTablesFromEditor }) })) : undefined, onFormat: formatFromEditor, onToggleFold: toggleFoldAll, onGoToLine: () => setGoLineOpen(true), onToggleInvisibles: () => setShowInvisibles((value) => !value) }) }), _jsx(DocumentToolbarSearch, { findBar: findBar, activeMode: findMode, onRequestFind: onRequestFind, onRequestReplace: onRequestReplace })] }) })), _jsxs("div", { className: "relative min-h-0 min-w-0 flex-1 overflow-hidden", children: [language === "plain" && findBar && (_jsx("div", { className: "no-print vr-chrome absolute right-3 top-3 z-50 max-w-[calc(100%-1.5rem)]", children: findBar })), goLineOpen && (_jsxs("form", { className: "absolute right-3 top-3 z-50 flex items-center gap-2 rounded border border-line bg-panel-2 px-2 py-1 text-chrome-xs text-muted shadow-xl", onSubmit: (e) => {
+                                    e.preventDefault();
+                                    const line = Number.parseInt(goLineValue, 10);
+                                    if (Number.isFinite(line))
+                                        goToLine(line);
+                                    setGoLineOpen(false);
+                                    setGoLineValue("");
+                                }, children: [_jsx("label", { htmlFor: "vr-source-go-line", children: "line" }), _jsx("input", { id: "vr-source-go-line", value: goLineValue, onChange: (e) => setGoLineValue(e.target.value), className: "w-20 rounded border border-line bg-ink px-2 py-1 text-paper outline-none focus:border-copper", inputMode: "numeric" }), _jsx("button", { type: "submit", className: "vr-press vr-focus rounded px-2 py-1 text-copper-hi hover:bg-panel", children: "go" }), _jsx("button", { type: "button", className: "vr-press vr-focus rounded px-2 py-1 hover:bg-panel hover:text-paper", onClick: () => {
+                                            setGoLineOpen(false);
+                                            setGoLineValue("");
+                                        }, children: "close" })] })), _jsx("div", { ref: hostRef, "data-vr-density": useReadingFont ? "reading" : language === "plain" ? "plain" : "source", className: `h-full w-full min-w-0 ${sourceFocusMode ? "vr-source-focus" : ""}` })] })] })] }));
+}

package/dist/documents/txt/sourceEditorTypes.d.ts

@@ -0,0 +1,49 @@
+import type { EditorView } from "@codemirror/view";
+import type { ReactNode } from "react";
+import type { SearchProvider } from "@rightkit/document-core/documents/types";
+import type { SourceLanguage } from "./sourceFormatting.js";
+export interface SourceEditorViewState {
+    anchor: number;
+    head: number;
+    scrollTop: number;
+    scrollLeft: number;
+}
+export type SourceLinkPrefix = "[" | "![";
+export interface SourceLinkState {
+    start: number;
+    end: number;
+    text: string;
+    prefix: SourceLinkPrefix;
+}
+export interface TextEditorProps {
+    /** Exact owning tab path for resource census attribution. */
+    documentPath?: string;
+    text: string;
+    onChange: (text: string) => void;
+    onSave: () => void;
+    /** Mono for source/code editing; reading font for plain txt. */
+    mono?: boolean;
+    /** Show the markdown formatting bar (txt + md/mdx source). Parity with new Notepad / md editors. */
+    markdownToolbar?: boolean;
+    /** Read-only source view, e.g. navigated HTML sub-pages that are not the entry file. */
+    readOnly?: boolean;
+    /** Source language profile. Markdown gets toolbar-aware shortcuts; HTML gets HTML parsing; plain is for TXT. */
+    language?: SourceLanguage;
+    registerSearchProvider: (provider: SearchProvider | null) => void;
+    /** Shared FindBar element (or null), floated top-right inside the editor area. */
+    findBar?: ReactNode;
+    /** Put the source toolbar in the app's docked document bar (default). Embedded sources that
+     *  share the bar with another capsule (HTML's source drawer) keep their own strip. */
+    dockToolbar?: boolean;
+    /** Optional right-side controls rendered in the source toolbar. */
+    sourceToolbarActions?: ReactNode;
+    initialViewState?: SourceEditorViewState | null;
+    onViewStateChange?: (state: SourceEditorViewState) => void;
+    onEditorReady?: (view: EditorView | null) => void;
+    onSourceScrollLine?: (line: number) => void;
+    autoFocus?: boolean;
+    sourceFocusMode?: boolean;
+    sourceTypewriterMode?: boolean;
+    /** Use document-level undo/redo instead of CodeMirror history. */
+    externalHistory?: boolean;
+}

package/dist/documents/txt/sourceEditorTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/documents/txt/sourceExtensions.d.ts

@@ -0,0 +1,38 @@
+import type { Completion, CompletionContext } from "@codemirror/autocomplete";
+import { EditorView, type DecorationSet } from "@codemirror/view";
+import { StateField, type Extension } from "@codemirror/state";
+import type { MutableRefObject } from "react";
+import type { MarkdownDocumentCore } from "@rightkit/markdown-editor/documents/markdown/core/MarkdownDocumentCore";
+import type { TextMatch } from "@rightkit/document-core/documents/searchUtils";
+import { type SourceLanguage } from "./sourceFormatting.js";
+export declare const setSearchHighlights: import("@codemirror/state").StateEffectType<{
+    matches: TextMatch[];
+    activeIndex: number;
+}>;
+export declare const searchHighlightField: StateField<DecorationSet>;
+export declare const searchHighlightClickExtension: Extension;
+export declare function invisibleCharactersExtension(enabled: boolean): Extension[];
+export declare function languageExtension(_language: SourceLanguage): Extension[];
+export declare function loadLanguageExtension(language: SourceLanguage): Promise<Extension[]>;
+export declare function visualSourceLineSelection(view: EditorView, pos: number): {
+    anchor: number;
+    head: number;
+};
+export declare function gutterExtension(language: SourceLanguage): Extension[];
+export declare function readOnlyExtension(readOnly: boolean): Extension[];
+export declare function contentAttributesExtension(spellcheck: boolean, readOnly: boolean): Extension;
+export declare function sourceWrapExtension(wordWrap: boolean, language: SourceLanguage, sourceWrap: boolean): Extension[];
+export declare function imagePasteExtension(language: SourceLanguage, onMarkdownHtmlPaste?: (event: ClipboardEvent, view: EditorView) => boolean | Promise<boolean>): Extension[];
+export declare function diagnosticsExtension(language: SourceLanguage, _core?: MarkdownDocumentCore | null): Extension[];
+export declare function loadDiagnosticsExtension(language: SourceLanguage, core?: MarkdownDocumentCore | null): Promise<Extension[]>;
+/** Caret-anchored "/" insert menu for Markdown/MDX source: CodeMirror's own completion popup
+ *  (filter-as-you-type, Esc closes, Enter inserts) over the shared insert templates. Triggers on
+ *  "/" at line start or after whitespace; the "/query" text is replaced in one transaction. */
+export declare function slashInsertCompletionSource(context: CompletionContext): {
+    from: number;
+    options: Completion[];
+    validFor: RegExp;
+} | null;
+export declare function completionExtension(language: SourceLanguage): Extension;
+export declare function loadMarkdownCoreCompletionExtension(core: MarkdownDocumentCore | null): Promise<Extension[]>;
+export declare function sourceKeymap(markdownToolbar: boolean, onSave: () => void, onFormat: () => void, allowNextTabFocusRef: MutableRefObject<boolean>, wrapInline: (before: string, after: string) => void, openLink: (prefix: "[" | "![") => void, externalHistory?: boolean, externalUndo?: () => void, externalRedo?: () => void): Extension;