@lapis-notes/api 0.1.0

package/dist/components/editor/extensions/class-highlighter/index.js

@@ -0,0 +1,47 @@
+import { tagHighlighter, tags } from "@lezer/highlight";
+export const classHighlighter = tagHighlighter([
+    { tag: tags.link, class: "cm-link" },
+    { tag: tags.heading, class: "cm-heading" },
+    { tag: tags.emphasis, class: "cm-emphasis" },
+    { tag: tags.strong, class: "cm-strong" },
+    { tag: tags.keyword, class: "cm-keyword" },
+    { tag: tags.atom, class: "cm-meta" },
+    { tag: tags.bool, class: "cm-bool" },
+    { tag: tags.url, class: "cm-url" },
+    { tag: tags.labelName, class: "cm-label" },
+    { tag: tags.inserted, class: "cm-inserted" },
+    { tag: tags.deleted, class: "cm-deleted" },
+    { tag: tags.literal, class: "cm-literal" },
+    { tag: tags.string, class: "cm-string" },
+    { tag: tags.attributeValue, class: "cm-string" },
+    { tag: tags.number, class: "cm-number" },
+    {
+        tag: [tags.regexp, tags.escape, tags.special(tags.string)],
+        class: "cm-string-2",
+    },
+    { tag: tags.variableName, class: "cm-variable" },
+    { tag: tags.local(tags.variableName), class: "cm-local" },
+    {
+        tag: tags.definition(tags.variableName),
+        class: "cm-definition",
+    },
+    { tag: tags.special(tags.variableName), class: "cm-variable-2" },
+    {
+        tag: tags.definition(tags.propertyName),
+        class: "cm-definition",
+    },
+    { tag: tags.typeName, class: "cm-type" },
+    { tag: tags.namespace, class: "cm-namespace" },
+    { tag: tags.className, class: "cm-class" },
+    { tag: tags.macroName, class: "cm-macro" },
+    { tag: tags.propertyName, class: "cm-property" },
+    { tag: tags.attributeName, class: "cm-attribute" },
+    { tag: tags.operator, class: "cm-operator" },
+    { tag: [tags.comment, tags.contentSeparator], class: "cm-comment" },
+    { tag: tags.meta, class: "cm-meta" },
+    { tag: tags.processingInstruction, class: "cm-meta" },
+    { tag: tags.invalid, class: "cm-invalid" },
+    { tag: tags.punctuation, class: "cm-punctuation" },
+    { tag: tags.bracket, class: "cm-bracket" },
+    { tag: tags.strikethrough, class: "cm-line-through" },
+]);

package/dist/components/editor/extensions/fold-gutter/index.d.ts

@@ -0,0 +1,8 @@
+import type { Extension } from "@codemirror/state";
+/**
+ * Mira / Obsidian-style fold chevron. `open` means the range is expanded and
+ * can be folded (chevron points down); closed means folded (chevron points
+ * endward).
+ */
+export declare function useFoldIcon(open: boolean): HTMLDivElement;
+export declare function foldGutter(): Extension;

package/dist/components/editor/extensions/fold-gutter/index.js

@@ -0,0 +1,40 @@
+import { foldGutter as editorFoldGutter } from "@codemirror/language";
+/**
+ * Mira / Obsidian-style fold chevron. `open` means the range is expanded and
+ * can be folded (chevron points down); closed means folded (chevron points
+ * endward).
+ */
+export function useFoldIcon(open) {
+    const foldIcon = document.createElement("div");
+    foldIcon.className = "collapse-icon";
+    const foldIcon_svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    const foldIcon_svg_path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+    foldIcon_svg.setAttributeNS(null, "viewBox", "0 0 24 24");
+    foldIcon_svg.setAttributeNS(null, "fill", "none");
+    foldIcon_svg.setAttributeNS(null, "stroke", "currentColor");
+    foldIcon_svg.setAttributeNS(null, "stroke-width", "2");
+    foldIcon_svg.setAttributeNS(null, "stroke-linecap", "round");
+    foldIcon_svg.setAttributeNS(null, "stroke-linejoin", "round");
+    foldIcon_svg.setAttributeNS(null, "class", "svg-icon");
+    foldIcon_svg_path.setAttribute("d", "M3 8L12 17L21 8");
+    foldIcon_svg.appendChild(foldIcon_svg_path);
+    if (open) {
+        foldIcon.classList.add("open-fold-icon");
+    }
+    else {
+        foldIcon.classList.add("closed-fold-icon");
+        foldIcon_svg.setAttribute("style", "height: 100%; transform: rotate(-90deg);");
+    }
+    foldIcon.appendChild(foldIcon_svg);
+    // Keep leaf-content tab activation from seeing pointerdown; click still
+    // bubbles to the CodeMirror fold gutter handler.
+    for (const type of ["pointerdown", "mousedown"]) {
+        foldIcon.addEventListener(type, (event) => {
+            event.stopPropagation();
+        });
+    }
+    return foldIcon;
+}
+export function foldGutter() {
+    return editorFoldGutter({ markerDOM: useFoldIcon });
+}

package/dist/components/editor/extensions/gutter-line-style-sync/index.d.ts

@@ -0,0 +1,2 @@
+import type { Extension } from "@codemirror/state";
+export declare function gutterLineStyleSyncExtension(): Extension;

package/dist/components/editor/extensions/gutter-line-style-sync/index.js

@@ -0,0 +1,118 @@
+import { EditorView, ViewPlugin, } from "@codemirror/view";
+function collectVisibleLineStyles(view) {
+    return Array.from(view.dom.querySelectorAll(".cm-content .cm-line"), (line) => {
+        const style = getComputedStyle(line);
+        const rect = line.getBoundingClientRect();
+        return {
+            top: rect.top,
+            bottom: rect.bottom,
+            lineHeight: style.lineHeight,
+            paddingTop: style.paddingTop,
+        };
+    });
+}
+function collectGutterColumns(view) {
+    return Array.from(view.dom.querySelectorAll(".cm-gutters .cm-gutter"), (gutter) => Array.from(gutter.querySelectorAll(".cm-gutterElement"), (element) => {
+        const rect = element.getBoundingClientRect();
+        return {
+            element,
+            top: rect.top,
+            bottom: rect.bottom,
+        };
+    }));
+}
+function mutationMayAffectGutters(mutation) {
+    if (mutation.type === "attributes") {
+        return mutation.attributeName === "class";
+    }
+    return mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0;
+}
+function findMatchingLineStyle(gutterElement, lineStyles) {
+    let bestMatch = null;
+    let bestDistance = Number.POSITIVE_INFINITY;
+    for (const lineStyle of lineStyles) {
+        const overlaps = gutterElement.top < lineStyle.bottom &&
+            gutterElement.bottom > lineStyle.top;
+        if (overlaps) {
+            return lineStyle;
+        }
+        const distance = Math.abs(gutterElement.top - lineStyle.top);
+        if (distance < bestDistance) {
+            bestDistance = distance;
+            bestMatch = lineStyle;
+        }
+    }
+    return bestMatch;
+}
+class GutterLineStyleSyncPlugin {
+    view;
+    mutationObserver;
+    resizeObserver;
+    syncScheduled = false;
+    constructor(view) {
+        this.view = view;
+        this.mutationObserver = new MutationObserver((mutations) => {
+            if (mutations.some(mutationMayAffectGutters)) {
+                this.scheduleSync();
+            }
+        });
+        this.mutationObserver.observe(this.view.dom, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ["class"],
+        });
+        this.resizeObserver = new ResizeObserver(() => {
+            this.scheduleSync();
+        });
+        this.resizeObserver.observe(this.view.dom);
+        this.resizeObserver.observe(this.view.contentDOM);
+        this.scheduleSync();
+    }
+    update(update) {
+        if (update.docChanged || update.viewportChanged || update.geometryChanged) {
+            this.scheduleSync();
+        }
+    }
+    destroy() {
+        this.mutationObserver.disconnect();
+        this.resizeObserver.disconnect();
+    }
+    scheduleSync() {
+        if (this.syncScheduled) {
+            return;
+        }
+        this.syncScheduled = true;
+        this.view.requestMeasure({
+            read: (view) => ({
+                lineStyles: collectVisibleLineStyles(view),
+                gutterColumns: collectGutterColumns(view),
+            }),
+            write: ({ lineStyles, gutterColumns }) => {
+                this.syncScheduled = false;
+                this.applyLineStyles(lineStyles, gutterColumns);
+            },
+        });
+    }
+    applyLineStyles(lineStyles, gutterColumns) {
+        for (const gutterElements of gutterColumns) {
+            for (const gutterElement of gutterElements) {
+                const lineStyle = findMatchingLineStyle(gutterElement, lineStyles);
+                if (!lineStyle) {
+                    gutterElement.element.style.removeProperty("line-height");
+                    gutterElement.element.style.removeProperty("padding-top");
+                    continue;
+                }
+                if (gutterElement.element.style.lineHeight !== lineStyle.lineHeight) {
+                    gutterElement.element.style.lineHeight = lineStyle.lineHeight;
+                }
+                if (gutterElement.element.style.paddingTop !== lineStyle.paddingTop) {
+                    gutterElement.element.style.paddingTop = lineStyle.paddingTop;
+                }
+            }
+        }
+    }
+}
+export function gutterLineStyleSyncExtension() {
+    return ViewPlugin.fromClass(GutterLineStyleSyncPlugin);
+}

package/dist/components/editor/extensions/lint/index.d.ts

@@ -0,0 +1,4 @@
+export { lapisCodeMirrorLint, type LapisCodeMirrorLintOptions, type LapisCodeMirrorLintConfig, closeLintPanel, diagnosticCount, forEachDiagnostic, forceLinting, lintGutter, lintKeymap, linter, nextDiagnostic, openLintPanel, previousDiagnostic, setDiagnostics, setDiagnosticsEffect, type Action, type Diagnostic, type LintSource, } from "./lapis-code-mirror-lint";
+export { mapToLapisLintDiagnostic, markdownlintRuleUrl, type LapisLintDiagnosticMeta, type MapToLapisLintDiagnosticOptions, } from "./lapis-lint-diagnostic";
+export { inlineProblemExtension, toggleInlineProblem, showInlineProblem, type InlineProblemSpec, } from "./lapis-lint-inline-widget";
+export { lapisLintHoverTooltip } from "./lapis-lint-hover-tooltip";

package/dist/components/editor/extensions/lint/index.js

@@ -0,0 +1,4 @@
+export { lapisCodeMirrorLint, closeLintPanel, diagnosticCount, forEachDiagnostic, forceLinting, lintGutter, lintKeymap, linter, nextDiagnostic, openLintPanel, previousDiagnostic, setDiagnostics, setDiagnosticsEffect, } from "./lapis-code-mirror-lint";
+export { mapToLapisLintDiagnostic, markdownlintRuleUrl, } from "./lapis-lint-diagnostic";
+export { inlineProblemExtension, toggleInlineProblem, showInlineProblem, } from "./lapis-lint-inline-widget";
+export { lapisLintHoverTooltip } from "./lapis-lint-hover-tooltip";

package/dist/components/editor/extensions/lint/lapis-code-mirror-lint.d.ts

@@ -0,0 +1,26 @@
+import { lintGutter, linter, type LintSource } from "@codemirror/lint";
+import type { Extension } from "@codemirror/state";
+declare const lintSeverityIcons: {
+    readonly error: "circle-x";
+    readonly warning: "triangle-alert";
+    readonly info: "info";
+    readonly hint: "lightbulb";
+};
+export declare function workspaceLintMarkerMask(severity: keyof typeof lintSeverityIcons): string;
+type LintConfig = NonNullable<Parameters<typeof linter>[1]>;
+type LintGutterConfig = NonNullable<Parameters<typeof lintGutter>[0]>;
+export interface LapisCodeMirrorLintOptions {
+    source: LintSource | null;
+    lint?: LintConfig;
+    gutter?: LintGutterConfig | false;
+}
+export type LapisCodeMirrorLintConfig = LintConfig & {
+    gutter?: LintGutterConfig | false;
+};
+/**
+ * Shared CodeMirror lint defaults for Lapis editors. Workspace CSS owns the
+ * visible chrome; this sets shared behavior and a light `EditorView.theme`.
+ */
+export declare function lapisCodeMirrorLint(source: LintSource | null, config?: LapisCodeMirrorLintConfig): Extension[];
+export declare function lapisCodeMirrorLint(options: LapisCodeMirrorLintOptions): Extension[];
+export { closeLintPanel, diagnosticCount, forEachDiagnostic, forceLinting, lintGutter, lintKeymap, linter, nextDiagnostic, openLintPanel, previousDiagnostic, setDiagnostics, setDiagnosticsEffect, type Action, type Diagnostic, type LintSource, } from "@codemirror/lint";

package/dist/components/editor/extensions/lint/lapis-code-mirror-lint.js

@@ -0,0 +1,101 @@
+import { lintGutter, linter } from "@codemirror/lint";
+import { EditorView } from "@codemirror/view";
+import { getWorkspaceIconSvg } from "@lapismd/design-core/workspace/icon";
+import { lapisLintHoverTooltip } from "./lapis-lint-hover-tooltip";
+import { inlineProblemExtension } from "./lapis-lint-inline-widget";
+const lintSeverityIcons = {
+    error: "circle-x",
+    warning: "triangle-alert",
+    info: "info",
+    hint: "lightbulb",
+};
+export function workspaceLintMarkerMask(severity) {
+    const svg = getWorkspaceIconSvg(lintSeverityIcons[severity]);
+    return `url("data:image/svg+xml,${encodeURIComponent(svg)}")`;
+}
+/**
+ * Align tooltip typography and gutter markers with the app shell. Marker masks
+ * are generated from the same public workspace icon source as Problems.
+ */
+const lapisLintTheme = EditorView.theme({
+    ".cm-tooltip.cm-tooltip-lint": {
+        fontFamily: "inherit",
+        padding: 0,
+    },
+    ".cm-gutters .cm-gutter-lint .cm-gutterElement": {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxSizing: "border-box",
+        minWidth: "1.4em",
+        paddingInline: "0.2em",
+    },
+    ".cm-lint-marker": {
+        content: '"" !important',
+        width: "0.875rem",
+        height: "0.875rem",
+        backgroundColor: "currentColor",
+        backgroundImage: "none",
+        maskPosition: "center",
+        maskRepeat: "no-repeat",
+        maskSize: "contain",
+        WebkitMaskPosition: "center",
+        WebkitMaskRepeat: "no-repeat",
+        WebkitMaskSize: "contain",
+    },
+    ".cm-lint-marker-error": {
+        color: "var(--ui-workspace-diagnostic-error, var(--destructive, #dc2626))",
+        maskImage: workspaceLintMarkerMask("error"),
+        WebkitMaskImage: workspaceLintMarkerMask("error"),
+    },
+    ".cm-lint-marker-warning": {
+        color: "var(--ui-workspace-diagnostic-warning, var(--warning, #d97706))",
+        maskImage: workspaceLintMarkerMask("warning"),
+        WebkitMaskImage: workspaceLintMarkerMask("warning"),
+    },
+    ".cm-lint-marker-info": {
+        color: "var(--ui-workspace-diagnostic-information, var(--muted-foreground, #64748b))",
+        maskImage: workspaceLintMarkerMask("info"),
+        WebkitMaskImage: workspaceLintMarkerMask("info"),
+    },
+    ".cm-lint-marker-hint": {
+        color: "var(--ui-workspace-diagnostic-hint, var(--muted-foreground, #64748b))",
+        maskImage: workspaceLintMarkerMask("hint"),
+        WebkitMaskImage: workspaceLintMarkerMask("hint"),
+    },
+});
+function buildLapisCodeMirrorLintExtensions(source, lint, gutter) {
+    const extensions = [
+        inlineProblemExtension,
+        lapisLintHoverTooltip(),
+        linter(source, withoutCodeMirrorTooltip(lint)),
+    ];
+    if (gutter !== false) {
+        extensions.push(lintGutter(withoutCodeMirrorGutterTooltip(gutter)));
+    }
+    extensions.push(lapisLintTheme);
+    return extensions;
+}
+function withoutCodeMirrorTooltip(lint) {
+    return {
+        ...lint,
+        tooltipFilter: () => [],
+    };
+}
+function withoutCodeMirrorGutterTooltip(gutter) {
+    return {
+        ...gutter,
+        tooltipFilter: () => [],
+    };
+}
+export function lapisCodeMirrorLint(sourceOrOptions, config = {}) {
+    if (sourceOrOptions &&
+        typeof sourceOrOptions === "object" &&
+        "source" in sourceOrOptions) {
+        const { source, lint, gutter } = sourceOrOptions;
+        return buildLapisCodeMirrorLintExtensions(source, lint, gutter);
+    }
+    const { gutter, ...lintConfig } = config;
+    return buildLapisCodeMirrorLintExtensions(sourceOrOptions, lintConfig, gutter);
+}
+export { closeLintPanel, diagnosticCount, forEachDiagnostic, forceLinting, lintGutter, lintKeymap, linter, nextDiagnostic, openLintPanel, previousDiagnostic, setDiagnostics, setDiagnosticsEffect, } from "@codemirror/lint";

package/dist/components/editor/extensions/lint/lapis-lint-diagnostic-helpers.d.ts

@@ -0,0 +1,8 @@
+export interface LapisLintDiagnosticMeta {
+    code?: string | number;
+    ruleId?: string;
+    ruleUrl?: string;
+    sourceLabel?: string;
+}
+/** Build a markdownlint documentation URL for a rule code such as `MD041`. */
+export declare function markdownlintRuleUrl(code: string | number, template?: string): string;

package/dist/components/editor/extensions/lint/lapis-lint-diagnostic-helpers.js

@@ -0,0 +1,7 @@
+const DEFAULT_MARKDOWNLINT_RULE_URL_TEMPLATE = "https://github.com/DavidAnson/markdownlint/blob/main/doc/{rule}.md";
+/** Build a markdownlint documentation URL for a rule code such as `MD041`. */
+export function markdownlintRuleUrl(code, template = DEFAULT_MARKDOWNLINT_RULE_URL_TEMPLATE) {
+    const raw = String(code);
+    const rule = /^MD(\d+)$/i.test(raw) ? `md${raw.slice(2)}` : raw.toLowerCase();
+    return template.replace("{rule}", rule);
+}

package/dist/components/editor/extensions/lint/lapis-lint-diagnostic.d.ts

@@ -0,0 +1,20 @@
+import type { Action, Diagnostic } from "@codemirror/lint";
+import type { LapisLintDiagnosticMeta } from "./lapis-lint-diagnostic-helpers";
+export type { LapisLintDiagnosticMeta } from "./lapis-lint-diagnostic-helpers";
+export { markdownlintRuleUrl } from "./lapis-lint-diagnostic-helpers";
+export interface MapToLapisLintDiagnosticOptions {
+    actions?: Action[];
+    includeViewProblem?: boolean;
+    includeCopy?: boolean;
+}
+export interface LapisLintTooltipPayload {
+    meta: LapisLintDiagnosticMeta;
+    includeCopy: boolean;
+    actions: Action[];
+}
+export declare function getLapisLintTooltipPayload(diagnostic: Diagnostic): LapisLintTooltipPayload | null;
+/**
+ * Enrich a CodeMirror diagnostic with Lapis lint tooltip chrome: rule links,
+ * copy control, and optional built-in actions such as View Problem.
+ */
+export declare function mapToLapisLintDiagnostic(base: Omit<Diagnostic, "renderMessage" | "actions">, meta?: LapisLintDiagnosticMeta, options?: MapToLapisLintDiagnosticOptions): Diagnostic;

package/dist/components/editor/extensions/lint/lapis-lint-diagnostic.js

@@ -0,0 +1,47 @@
+import { toggleInlineProblem } from "./lapis-lint-inline-widget";
+export { markdownlintRuleUrl } from "./lapis-lint-diagnostic-helpers";
+const tooltipPayloads = new WeakMap();
+const tooltipPayloadKey = Symbol.for("@lapis-notes/api/lapis-lint-tooltip-payload");
+export function getLapisLintTooltipPayload(diagnostic) {
+    return (tooltipPayloads.get(diagnostic) ??
+        diagnostic[tooltipPayloadKey] ??
+        null);
+}
+/**
+ * Enrich a CodeMirror diagnostic with Lapis lint tooltip chrome: rule links,
+ * copy control, and optional built-in actions such as View Problem.
+ */
+export function mapToLapisLintDiagnostic(base, meta = {}, options = {}) {
+    const { actions = [], includeViewProblem = true, includeCopy = true, } = options;
+    const builtInActions = [];
+    if (includeViewProblem) {
+        builtInActions.push({
+            name: "View Problem",
+            apply: (view, from) => {
+                toggleInlineProblem(view, from, {
+                    message: base.message,
+                    sourceLabel: meta.sourceLabel,
+                    ruleId: meta.ruleId ?? (meta.code != null ? String(meta.code) : undefined),
+                });
+            },
+        });
+    }
+    const tooltipActions = [...builtInActions, ...actions];
+    const diagnostic = {
+        ...base,
+        // The Lapis hover tooltip owns action rendering. Keeping CodeMirror actions
+        // empty prevents the default lint tooltip/panel from duplicating them.
+        actions: [],
+    };
+    const payload = {
+        meta,
+        includeCopy,
+        actions: tooltipActions,
+    };
+    tooltipPayloads.set(diagnostic, payload);
+    Object.defineProperty(diagnostic, tooltipPayloadKey, {
+        value: payload,
+        enumerable: false,
+    });
+    return diagnostic;
+}

package/dist/components/editor/extensions/lint/lapis-lint-hover-tooltip.d.ts

@@ -0,0 +1,9 @@
+import { type Extension } from "@codemirror/state";
+type RectLike = Pick<DOMRect, "left" | "right" | "top" | "bottom">;
+type PointLike = {
+    x: number;
+    y: number;
+};
+export declare function pointerWithinLintTooltipHandoff(point: PointLike, trigger: RectLike, tooltip: RectLike, margin?: number): boolean;
+export declare function lapisLintHoverTooltip(): Extension[];
+export {};