@rightkit/document-workspace 0.0.0-stage → 0.1.0

package/dist/documents/txt/sourceExtensions.js

@@ -0,0 +1,444 @@
+import { defaultKeymap, historyKeymap, indentLess, indentMore, toggleComment, } from "@codemirror/commands";
+import { autocompletion, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { MARKDOWN_INSERT_TEMPLATES } from "@rightkit/markdown-editor/documents/markdown/insert/markdownInsertTemplates";
+import { foldGutter, foldKeymap } from "@codemirror/language";
+import { linter, lintKeymap } from "@codemirror/lint";
+import { Decoration, EditorView, gutter, GutterMarker, highlightActiveLineGutter, keymap, lineNumbers, ViewPlugin, WidgetType, } from "@codemirror/view";
+import { EditorSelection, EditorState, Prec, RangeSetBuilder, StateEffect, StateField, } from "@codemirror/state";
+import { buildImageEmbed, sourceDiagnostics } from "./sourceFormatting.js";
+export const setSearchHighlights = StateEffect.define();
+export const searchHighlightField = StateField.define({
+    create: () => Decoration.none,
+    update(value, tr) {
+        let next = value.map(tr.changes);
+        for (const effect of tr.effects) {
+            if (effect.is(setSearchHighlights))
+                next = buildSearchDecorations(effect.value.matches, effect.value.activeIndex);
+        }
+        return next;
+    },
+    provide: (field) => EditorView.decorations.from(field),
+});
+export const searchHighlightClickExtension = Prec.highest(EditorView.domEventHandlers({
+    mousedown(event, view) {
+        if (event.button !== 0)
+            return false;
+        const eventTarget = event.target;
+        const target = eventTarget instanceof Element
+            ? eventTarget
+            : eventTarget instanceof Node
+                ? eventTarget.parentElement
+                : null;
+        if (!target?.closest(".cm-vr-searchMatchActive"))
+            return false;
+        // Find already owns the exact match selection. Run before CodeMirror's pointer handler so one
+        // click transfers focus without first collapsing or relocating that exact range.
+        event.preventDefault();
+        view.focus();
+        return true;
+    },
+}));
+class InvisibleCharWidget extends WidgetType {
+    label;
+    constructor(label) {
+        super();
+        this.label = label;
+    }
+    toDOM() {
+        const span = document.createElement("span");
+        span.className = "cm-vr-invisibleChar";
+        span.textContent = this.label;
+        return span;
+    }
+}
+// T2-4: decorate only the visible ranges (view.visibleRanges), not the whole document. The prior
+// StateField called doc.toString() + looped every character on every docChanged with no windowing \u2014
+// O(document) per keystroke regardless of file size. A ViewPlugin recomputes only on doc/viewport
+// change and only walks what's actually on screen (plus CodeMirror's small overdraw margin).
+class InvisibleCharsPlugin {
+    decorations;
+    constructor(view) {
+        this.decorations = buildInvisibleDecorations(view);
+    }
+    update(update) {
+        if (update.docChanged || update.viewportChanged) {
+            this.decorations = buildInvisibleDecorations(update.view);
+        }
+    }
+}
+export function invisibleCharactersExtension(enabled) {
+    if (!enabled)
+        return [];
+    return [
+        ViewPlugin.fromClass(InvisibleCharsPlugin, {
+            decorations: (plugin) => plugin.decorations,
+        }),
+    ];
+}
+function buildInvisibleDecorations(view) {
+    const builder = new RangeSetBuilder();
+    for (const { from, to } of view.visibleRanges) {
+        const text = view.state.sliceDoc(from, to);
+        for (let i = 0; i < text.length; i++) {
+            const char = text[i];
+            const pos = from + i;
+            if (char === " ")
+                builder.add(pos, pos + 1, Decoration.replace({ widget: new InvisibleCharWidget("\u00b7") }));
+            else if (char === "\t")
+                builder.add(pos, pos + 1, Decoration.replace({ widget: new InvisibleCharWidget("\u2192") }));
+        }
+    }
+    return builder.finish();
+}
+function buildSearchDecorations(matches, activeIndex) {
+    const builder = new RangeSetBuilder();
+    matches.forEach((match, index) => {
+        if (match.end <= match.start)
+            return;
+        builder.add(match.start, match.end, Decoration.mark({
+            class: index === activeIndex ? "cm-vr-searchMatch cm-vr-searchMatchActive" : "cm-vr-searchMatch",
+        }));
+    });
+    return builder.finish();
+}
+export function languageExtension(_language) {
+    return [];
+}
+export async function loadLanguageExtension(language) {
+    if (language === "markdown") {
+        const [{ markdown }, { javascript: jsLang }, { LanguageDescription }] = await Promise.all([
+            import("@codemirror/lang-markdown"),
+            import("@codemirror/lang-javascript"),
+            import("@codemirror/language"),
+        ]);
+        return [
+            markdown({
+                codeLanguages: [
+                    LanguageDescription.of({
+                        name: "javascript",
+                        alias: ["js", "jsx", "mjs", "cjs"],
+                        support: jsLang(),
+                    }),
+                    LanguageDescription.of({
+                        name: "typescript",
+                        alias: ["ts", "tsx"],
+                        support: jsLang({ typescript: true, jsx: true }),
+                    }),
+                ],
+            }),
+        ];
+    }
+    if (language === "html") {
+        const { html } = await import("@codemirror/lang-html");
+        return [html({ autoCloseTags: true, selfClosingTags: true })];
+    }
+    return [];
+}
+export function visualSourceLineSelection(view, pos) {
+    const cursor = EditorSelection.cursor(pos);
+    return {
+        anchor: view.moveToLineBoundary(cursor, false, true).head,
+        head: view.moveToLineBoundary(cursor, true, true).head,
+    };
+}
+function selectSourceLine(view, line, event) {
+    const contentRect = view.contentDOM.getBoundingClientRect();
+    const hit = view.posAtCoords({ x: contentRect.left + 1, y: event.clientY }, false);
+    const pos = Math.max(line.from, Math.min(line.to, hit ?? line.from));
+    view.dispatch({
+        selection: visualSourceLineSelection(view, pos),
+        scrollIntoView: true,
+        userEvent: "select.pointer",
+    });
+    view.focus();
+}
+function selectLineFromGutter(view, line, event) {
+    if (!(event instanceof MouseEvent) || event.button !== 0)
+        return false;
+    const target = event.target instanceof Element ? event.target : null;
+    if (target?.closest(".cm-foldGutter"))
+        return false;
+    selectSourceLine(view, line, event);
+    event.preventDefault();
+    return true;
+}
+class LineSelectMarker extends GutterMarker {
+    toDOM() {
+        const span = document.createElement("span");
+        span.setAttribute("aria-hidden", "true");
+        return span;
+    }
+}
+const lineSelectMarker = new LineSelectMarker();
+const plainLineSelectGutter = gutter({
+    class: "cm-lineSelectGutter",
+    lineMarker: () => lineSelectMarker,
+    domEventHandlers: {
+        mousedown: selectLineFromGutter,
+    },
+});
+export function gutterExtension(language) {
+    if (language === "plain")
+        return [plainLineSelectGutter];
+    return [
+        lineNumbers({ domEventHandlers: { mousedown: selectLineFromGutter } }),
+        foldGutter(),
+        highlightActiveLineGutter(),
+    ];
+}
+export function readOnlyExtension(readOnly) {
+    return [EditorState.readOnly.of(readOnly), EditorView.editable.of(!readOnly)];
+}
+export function contentAttributesExtension(spellcheck, readOnly) {
+    return EditorView.contentAttributes.of({
+        spellcheck: String(spellcheck && !readOnly),
+        "aria-label": "Source editor",
+    });
+}
+function wordWrapExtension(wordWrap) {
+    return wordWrap
+        ? [
+            EditorView.lineWrapping,
+            EditorView.theme({
+                ".cm-scroller": { overflowX: "hidden !important" },
+                ".cm-content": { minWidth: "0 !important" },
+            }),
+        ]
+        : [];
+}
+export function sourceWrapExtension(wordWrap, language, sourceWrap) {
+    return language === "plain" ? wordWrapExtension(wordWrap) : wordWrapExtension(sourceWrap);
+}
+export function imagePasteExtension(language, onMarkdownHtmlPaste) {
+    if (language === "plain")
+        return [];
+    return [
+        EditorView.domEventHandlers({
+            paste(event, view) {
+                if (language === "markdown" &&
+                    onMarkdownHtmlPaste &&
+                    event.clipboardData?.getData("text/html")) {
+                    const handled = onMarkdownHtmlPaste(event, view);
+                    if (handled instanceof Promise) {
+                        void handled;
+                        return true;
+                    }
+                    if (handled)
+                        return true;
+                }
+                const items = event.clipboardData?.items;
+                if (!items)
+                    return false;
+                const image = Array.from(items).find((it) => it.kind === "file" && it.type.startsWith("image/"));
+                const file = image?.getAsFile();
+                if (!file)
+                    return false;
+                event.preventDefault();
+                const reader = new FileReader();
+                reader.onload = () => {
+                    const dataUrl = typeof reader.result === "string" ? reader.result : "";
+                    if (!dataUrl)
+                        return;
+                    const snippet = buildImageEmbed(language, dataUrl);
+                    const { from, to } = view.state.selection.main;
+                    view.dispatch({
+                        changes: { from, to, insert: snippet },
+                        selection: { anchor: from + snippet.length },
+                        scrollIntoView: true,
+                    });
+                };
+                reader.readAsDataURL(file);
+                return true;
+            },
+        }),
+    ];
+}
+export function diagnosticsExtension(language, _core = null) {
+    if (language === "plain")
+        return [];
+    return [linter((view) => sourceDiagnostics(language, view.state.doc.toString()), { delay: 350 })];
+}
+export async function loadDiagnosticsExtension(language, core = null) {
+    if (language === "plain")
+        return [];
+    if (language !== "markdown" || !core) {
+        return diagnosticsExtension(language, core);
+    }
+    const [{ analyzeMarkdown }, { buildCodeMirrorDiagnostics }] = await Promise.all([
+        import("@rightkit/markdown-editor/documents/markdown/analysis/analyzeMarkdown"),
+        import("@rightkit/markdown-editor/documents/markdown/analysis/markdownIssueCodeMirror"),
+    ]);
+    return [
+        linter((view) => {
+            const diagnostics = sourceDiagnostics(language, view.state.doc.toString());
+            const snapshot = core.snapshot();
+            if (snapshot.logicalSource !== view.state.doc.toString())
+                return diagnostics;
+            return [...diagnostics, ...buildCodeMirrorDiagnostics(analyzeMarkdown(snapshot))];
+        }, { delay: 350 }),
+    ];
+}
+/** 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 function slashInsertCompletionSource(context) {
+    const match = context.matchBefore(/(?:^|\s)\/[\w-]*/);
+    if (!match)
+        return null;
+    const slashAt = match.from + match.text.indexOf("/");
+    const options = MARKDOWN_INSERT_TEMPLATES.map((template) => ({
+        label: template.label,
+        detail: "/ insert",
+        type: "text",
+        apply: (view, _completion, _from, to) => {
+            view.dispatch({
+                changes: { from: slashAt, to, insert: template.snippet },
+                selection: { anchor: slashAt + template.cursorOffset },
+                userEvent: "input.complete",
+            });
+        },
+    }));
+    return { from: slashAt + 1, options, validFor: /^[\w-]*$/ };
+}
+export function completionExtension(language) {
+    return autocompletion({
+        ...(language === "markdown" ? { override: [slashInsertCompletionSource] } : {}),
+        activateOnTyping: language !== "plain",
+        defaultKeymap: false,
+        icons: false,
+    });
+}
+export async function loadMarkdownCoreCompletionExtension(core) {
+    if (!core)
+        return [];
+    const { completionStartAt, completionsAt } = await import("@rightkit/markdown-editor/documents/markdown/references/markdownCompletion");
+    return [
+        autocompletion({
+            override: [
+                slashInsertCompletionSource,
+                (context) => {
+                    const before = context.state.sliceDoc(0, context.pos);
+                    const from = completionStartAt(before);
+                    if (from === null)
+                        return null;
+                    const snapshot = core.snapshot();
+                    const options = completionsAt({
+                        textBefore: before,
+                        folderFiles: [],
+                        sessionFiles: [],
+                        headings: snapshot.sourceMap.nodes,
+                    });
+                    if (!options.length)
+                        return null;
+                    return {
+                        from,
+                        options: options.map((option) => ({
+                            label: option.label,
+                            detail: option.detail,
+                            type: option.kind === "image" ? "text" : "link",
+                            apply: option.insertText,
+                        })),
+                    };
+                },
+            ],
+            activateOnTyping: true,
+            defaultKeymap: false,
+            icons: false,
+        }),
+    ];
+}
+export function sourceKeymap(markdownToolbar, onSave, onFormat, allowNextTabFocusRef, wrapInline, openLink, externalHistory = false, externalUndo, externalRedo) {
+    return keymap.of([
+        ...(externalHistory
+            ? [
+                {
+                    key: "Mod-z",
+                    run: () => {
+                        externalUndo?.();
+                        return true;
+                    },
+                },
+                {
+                    key: "Mod-y",
+                    run: () => {
+                        externalRedo?.();
+                        return true;
+                    },
+                },
+                {
+                    key: "Mod-Shift-z",
+                    run: () => {
+                        externalRedo?.();
+                        return true;
+                    },
+                },
+            ]
+            : []),
+        {
+            key: "Mod-s",
+            run: () => {
+                onSave();
+                return true;
+            },
+        },
+        {
+            key: "Shift-Alt-f",
+            run: () => {
+                onFormat();
+                return true;
+            },
+        },
+        { key: "Mod-/", run: toggleComment },
+        {
+            key: "Escape",
+            run: () => {
+                allowNextTabFocusRef.current = true;
+                return false;
+            },
+        },
+        {
+            key: "Tab",
+            run: (view) => {
+                if (allowNextTabFocusRef.current) {
+                    allowNextTabFocusRef.current = false;
+                    return false;
+                }
+                return indentMore(view);
+            },
+        },
+        { key: "Shift-Tab", run: indentLess },
+        ...(markdownToolbar
+            ? [
+                {
+                    key: "Mod-b",
+                    run: () => {
+                        wrapInline("**", "**");
+                        return true;
+                    },
+                },
+                {
+                    key: "Mod-i",
+                    run: () => {
+                        wrapInline("*", "*");
+                        return true;
+                    },
+                },
+                {
+                    key: "Mod-k",
+                    run: () => {
+                        openLink("[");
+                        return true;
+                    },
+                },
+            ]
+            : []),
+        // Completion keys first: with the slash/completion popup open, Enter accepts the option instead
+        // of defaultKeymap's insertNewlineAndIndent (completionKeymap commands return false when closed).
+        ...completionKeymap,
+        ...defaultKeymap,
+        ...(externalHistory ? [] : historyKeymap),
+        ...closeBracketsKeymap,
+        ...lintKeymap,
+        ...foldKeymap,
+    ]);
+}

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

@@ -0,0 +1,18 @@
+import type { Diagnostic } from "@codemirror/lint";
+export type SourceLanguage = "markdown" | "html" | "plain";
+/** Pure core of the inline-wrap toolbar/shortcut action: wraps the selection [s,e) in
+ *  `before`/`after`, keeping leading/trailing whitespace outside the markers and returning the new
+ *  caret/selection. Exported so link/image/bold/italic wrapping is unit-testable without a DOM.
+ */
+export declare function applyInlineWrap(v: string, s: number, e: number, before: string, after: string): {
+    value: string;
+    start: number;
+    end: number;
+};
+/** Build a Markdown link/image token from the dialog's Display text + Address. Exported for tests. */
+export declare function buildMarkdownLink(prefix: "[" | "![", text: string, url: string): string;
+export declare function formatHtmlSource(source: string): string;
+export declare function formatSource(language: SourceLanguage, source: string): string;
+export declare function sourceDiagnostics(language: SourceLanguage, source: string): Diagnostic[];
+/** The self-contained image token to insert for a pasted image. */
+export declare function buildImageEmbed(language: SourceLanguage, dataUrl: string, alt?: string): string;

package/dist/documents/txt/sourceFormatting.js

@@ -0,0 +1,183 @@
+import { hostAppName } from "../../appName.js";
+/** Pure core of the inline-wrap toolbar/shortcut action: wraps the selection [s,e) in
+ *  `before`/`after`, keeping leading/trailing whitespace outside the markers and returning the new
+ *  caret/selection. Exported so link/image/bold/italic wrapping is unit-testable without a DOM.
+ */
+export function applyInlineWrap(v, s, e, before, after) {
+    const sel = v.slice(s, e);
+    const lead = (sel.match(/^\s*/) ?? [""])[0];
+    const trail = (sel.match(/\s*$/) ?? [""])[0];
+    const core = sel.slice(lead.length, sel.length - trail.length);
+    if (!core) {
+        return {
+            value: v.slice(0, s) + before + after + v.slice(e),
+            start: s + before.length,
+            end: s + before.length,
+        };
+    }
+    const cs = s + lead.length + before.length;
+    return {
+        value: v.slice(0, s) + lead + before + core + after + trail + v.slice(e),
+        start: cs,
+        end: cs + core.length,
+    };
+}
+/** Build a Markdown link/image token from the dialog's Display text + Address. Exported for tests. */
+export function buildMarkdownLink(prefix, text, url) {
+    return `${prefix}${text || (prefix === "![" ? "image" : "link")}](${url})`;
+}
+const VOID_HTML_TAGS = new Set([
+    "area",
+    "base",
+    "br",
+    "col",
+    "embed",
+    "hr",
+    "img",
+    "input",
+    "link",
+    "meta",
+    "param",
+    "source",
+    "track",
+    "wbr",
+]);
+function htmlTagName(token) {
+    return token.match(/^<\/?\s*([a-zA-Z][\w:-]*)/)?.[1].toLowerCase() ?? null;
+}
+function isHtmlMetaToken(token) {
+    return /^<!|^<\?/.test(token) && !/^<!\[CDATA\[/i.test(token);
+}
+function isHtmlClosingTag(token) {
+    return /^<\//.test(token);
+}
+function isHtmlSelfClosing(token) {
+    const name = htmlTagName(token);
+    return !name || /\/>\s*$/.test(token) || VOID_HTML_TAGS.has(name) || isHtmlMetaToken(token);
+}
+function indentLine(level, text) {
+    return `${"  ".repeat(Math.max(0, level))}${text}`;
+}
+export function formatHtmlSource(source) {
+    const tokens = source
+        .replace(/\r\n?/g, "\n")
+        .split(/(<!--[\s\S]*?-->|<!\[CDATA\[[\s\S]*?\]\]>|<![^>]*>|<\/?[^>]+>)/g)
+        .map((token) => token.trim())
+        .filter(Boolean);
+    const lines = [];
+    let level = 0;
+    for (let i = 0; i < tokens.length; i++) {
+        const token = tokens[i];
+        const isTag = token.startsWith("<") && token.endsWith(">");
+        if (!isTag) {
+            lines.push(indentLine(level, token));
+            continue;
+        }
+        const name = htmlTagName(token);
+        const next = tokens[i + 1];
+        const afterNext = tokens[i + 2];
+        if (!isHtmlClosingTag(token) &&
+            name &&
+            next &&
+            afterNext &&
+            !next.startsWith("<") &&
+            isHtmlClosingTag(afterNext) &&
+            htmlTagName(afterNext) === name) {
+            lines.push(indentLine(level, `${token}${next}${afterNext}`));
+            i += 2;
+            continue;
+        }
+        if (isHtmlClosingTag(token)) {
+            level = Math.max(0, level - 1);
+            lines.push(indentLine(level, token));
+            continue;
+        }
+        lines.push(indentLine(level, token));
+        if (!isHtmlSelfClosing(token))
+            level += 1;
+    }
+    return `${lines.join("\n")}\n`;
+}
+export function formatSource(language, source) {
+    if (language === "html")
+        return formatHtmlSource(source);
+    return `${source
+        .replace(/\r\n?/g, "\n")
+        .split("\n")
+        .map((line) => line.replace(/[ \t]+$/g, ""))
+        .join("\n")
+        .replace(/\n*$/g, "")}\n`;
+}
+export function sourceDiagnostics(language, source) {
+    if (language === "plain")
+        return [];
+    const diagnostics = [];
+    // T4-10: track each line's start as a running offset instead of re-joining `lines.slice(0, index)`
+    // per flagged line (was O(n^2) on whitespace-heavy files). `offset` after processing a line equals
+    // exactly what the old `prior.length + (index === 0 ? 0 : 1)` computed for the next line — each line
+    // contributes its own length plus one for the "\n" that joined it to the next.
+    let offset = 0;
+    for (const line of source.replace(/\r\n?/g, "\n").split("\n")) {
+        if (/[ \t]+$/.test(line)) {
+            diagnostics.push({
+                from: offset + line.search(/[ \t]+$/),
+                to: offset + line.length,
+                severity: "info",
+                source: hostAppName(),
+                message: "Trailing whitespace.",
+            });
+        }
+        offset += line.length + 1;
+    }
+    if (language !== "html")
+        return diagnostics.sort((a, b) => a.from - b.from || a.to - b.to);
+    const stack = [];
+    const tagPattern = /<!--[\s\S]*?-->|<![^>]*>|<\/?([a-zA-Z][\w:-]*)\b[^>]*>/g;
+    while (true) {
+        const match = tagPattern.exec(source);
+        if (!match)
+            break;
+        const token = match[0];
+        const name = htmlTagName(token);
+        if (!name || isHtmlMetaToken(token) || token.startsWith("<!--") || isHtmlSelfClosing(token))
+            continue;
+        if (!isHtmlClosingTag(token)) {
+            stack.push({ name, from: match.index, to: match.index + token.length });
+            continue;
+        }
+        const open = stack.pop();
+        if (!open) {
+            diagnostics.push({
+                from: match.index,
+                to: match.index + token.length,
+                severity: "warning",
+                source: hostAppName(),
+                message: `Closing </${name}> has no opening tag.`,
+            });
+        }
+        else if (open.name !== name) {
+            diagnostics.push({
+                from: match.index,
+                to: match.index + token.length,
+                severity: "warning",
+                source: hostAppName(),
+                message: `Closing </${name}> does not match <${open.name}>.`,
+            });
+            stack.push(open);
+        }
+    }
+    for (const open of stack.reverse()) {
+        diagnostics.push({
+            from: open.from,
+            to: open.to,
+            severity: "warning",
+            source: hostAppName(),
+            message: `<${open.name}> is not closed.`,
+        });
+    }
+    return diagnostics.sort((a, b) => a.from - b.from || a.to - b.to);
+}
+/** The self-contained image token to insert for a pasted image. */
+export function buildImageEmbed(language, dataUrl, alt = "") {
+    return language === "html" ? `<img src="${dataUrl}" alt="${alt}" />` : `![${alt}](${dataUrl})`;
+}

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

@@ -0,0 +1,5 @@
+import { HighlightStyle } from "@codemirror/language";
+import type { Extension } from "@codemirror/state";
+import type { SourceLanguage } from "./sourceFormatting.js";
+export declare const sourceHighlightStyle: HighlightStyle;
+export declare function viewRightTheme(language: SourceLanguage, useReadingFont: boolean): Extension;