@lapis-notes/api 0.1.0

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

@@ -0,0 +1,373 @@
+import { forEachDiagnostic } from "@codemirror/lint";
+import {} from "@codemirror/state";
+import { EditorView, ViewPlugin } from "@codemirror/view";
+import { getLapisLintTooltipPayload, } from "./lapis-lint-diagnostic";
+import { showInlineProblem } from "./lapis-lint-inline-widget";
+import { mountLintMessageDom } from "./mount-lint-tooltip";
+const TOOLTIP_GAP_PX = 6;
+const TOOLTIP_VIEWPORT_MARGIN_PX = 12;
+const TOOLTIP_HIDE_DELAY_MS = 350;
+const TOOLTIP_HANDOFF_MARGIN_PX = 10;
+export function pointerWithinLintTooltipHandoff(point, trigger, tooltip, margin = TOOLTIP_HANDOFF_MARGIN_PX) {
+    const left = Math.min(trigger.left, tooltip.left) - margin;
+    const right = Math.max(trigger.right, tooltip.right) + margin;
+    const top = Math.min(trigger.top, tooltip.top) - margin;
+    const bottom = Math.max(trigger.bottom, tooltip.bottom) + margin;
+    return (point.x >= left && point.x <= right && point.y >= top && point.y <= bottom);
+}
+export function lapisLintHoverTooltip() {
+    return [lapisLintTooltipPlugin];
+}
+const lapisLintTooltipPlugin = ViewPlugin.fromClass(class {
+    view;
+    tooltip = null;
+    activeDiagnostic = null;
+    hideTimer = null;
+    handleMouseMove = (event) => {
+        this.withEditorLayout(() => {
+            if (eventTargetIsInsideLapisTooltip(event.target)) {
+                this.cancelScheduledHide();
+                return;
+            }
+            const found = lintMarkerFromEvent(event) != null
+                ? findDiagnosticNearPointer(this.view, event)
+                : findDiagnosticFromLintRange(this.view, event);
+            if (found && this.isActiveDiagnostic(found)) {
+                this.cancelScheduledHide();
+                return;
+            }
+            if (this.isPointerInHandoff(event)) {
+                this.cancelScheduledHide();
+                return;
+            }
+            if (!found) {
+                this.scheduleHideTooltip();
+                return;
+            }
+            this.showTooltip(found);
+        });
+    };
+    handleClick = (event) => {
+        this.withEditorLayout(() => {
+            const marker = lintMarkerFromEvent(event);
+            if (!marker) {
+                return;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            const found = findDiagnosticNearPointer(this.view, event);
+            if (found) {
+                this.showTooltip(found);
+            }
+        });
+    };
+    handleMouseLeave = (event) => {
+        this.withEditorLayout(() => {
+            if (eventTargetIsInsideLapisTooltip(event.relatedTarget)) {
+                return;
+            }
+            if (this.isPointerInHandoff(event)) {
+                this.cancelScheduledHide();
+            }
+            else {
+                this.scheduleHideTooltip();
+            }
+        });
+    };
+    handleDocumentMouseMove = (event) => {
+        this.withEditorLayout(() => {
+            if (eventTargetIsInsideLapisTooltip(event.target) ||
+                eventTargetIsInside(this.view.dom, event.target)) {
+                return;
+            }
+            if (this.isPointerInHandoff(event)) {
+                this.cancelScheduledHide();
+            }
+            else {
+                this.scheduleHideTooltip();
+            }
+        });
+    };
+    handleTooltipMouseEnter = () => {
+        this.cancelScheduledHide();
+    };
+    handleTooltipMouseLeave = (event) => {
+        this.withEditorLayout(() => {
+            if (eventTargetIsInside(this.view.dom, event.relatedTarget) ||
+                this.isPointerInHandoff(event)) {
+                this.cancelScheduledHide();
+            }
+            else {
+                this.scheduleHideTooltip();
+            }
+        });
+    };
+    get viewDocument() {
+        return this.view.dom.ownerDocument;
+    }
+    get viewWindow() {
+        return this.viewDocument.defaultView ?? window;
+    }
+    constructor(view) {
+        this.view = view;
+        view.dom.addEventListener("mousemove", this.handleMouseMove);
+        view.dom.addEventListener("mouseover", this.handleMouseMove);
+        view.dom.addEventListener("click", this.handleClick);
+        view.dom.addEventListener("mouseleave", this.handleMouseLeave);
+        this.viewDocument.addEventListener("mousemove", this.handleDocumentMouseMove);
+    }
+    update(update) {
+        if (update.transactions.some((transaction) => transaction.effects.some((effect) => effect.is(showInlineProblem)))) {
+            this.hideTooltip();
+        }
+        if (this.activeDiagnostic && update.docChanged) {
+            const from = update.changes.mapPos(this.activeDiagnostic.from, 1);
+            const to = update.changes.mapPos(this.activeDiagnostic.to, -1);
+            if (from > to || from > update.state.doc.length) {
+                this.hideTooltip();
+            }
+            else {
+                this.activeDiagnostic = { ...this.activeDiagnostic, from, to };
+            }
+        }
+        if (!this.tooltip || !this.activeDiagnostic) {
+            return;
+        }
+        if (update.docChanged ||
+            update.geometryChanged ||
+            update.viewportChanged) {
+            this.schedulePositionTooltip();
+        }
+    }
+    destroy() {
+        this.view.dom.removeEventListener("mousemove", this.handleMouseMove);
+        this.view.dom.removeEventListener("mouseover", this.handleMouseMove);
+        this.view.dom.removeEventListener("click", this.handleClick);
+        this.view.dom.removeEventListener("mouseleave", this.handleMouseLeave);
+        this.viewDocument.removeEventListener("mousemove", this.handleDocumentMouseMove);
+        this.hideTooltip();
+    }
+    showTooltip(found) {
+        this.cancelScheduledHide();
+        if (this.isActiveDiagnostic(found)) {
+            return;
+        }
+        this.hideTooltip();
+        this.activeDiagnostic = found;
+        this.tooltip = mountLintTooltipForDiagnostic(this.view, found, () => this.hideTooltip());
+        this.tooltip.addEventListener("mouseenter", this.handleTooltipMouseEnter);
+        this.tooltip.addEventListener("mouseleave", this.handleTooltipMouseLeave);
+        this.tooltip.style.position = "fixed";
+        this.tooltip.style.zIndex = "500";
+        this.tooltip.style.top = "-10000px";
+        this.tooltip.style.left = "0";
+        this.viewDocument.body?.appendChild(this.tooltip);
+        this.schedulePositionTooltip();
+    }
+    scheduleHideTooltip() {
+        if (!this.tooltip || this.hideTimer) {
+            return;
+        }
+        this.hideTimer = setTimeout(() => {
+            this.hideTimer = null;
+            this.hideTooltip();
+        }, TOOLTIP_HIDE_DELAY_MS);
+    }
+    cancelScheduledHide() {
+        if (!this.hideTimer) {
+            return;
+        }
+        clearTimeout(this.hideTimer);
+        this.hideTimer = null;
+    }
+    hideTooltip() {
+        this.cancelScheduledHide();
+        this.tooltip?.removeEventListener("mouseenter", this.handleTooltipMouseEnter);
+        this.tooltip?.removeEventListener("mouseleave", this.handleTooltipMouseLeave);
+        this.tooltip?.remove();
+        this.tooltip = null;
+        this.activeDiagnostic = null;
+    }
+    isActiveDiagnostic(found) {
+        return Boolean(this.activeDiagnostic &&
+            this.activeDiagnostic.diagnostic === found.diagnostic &&
+            this.activeDiagnostic.from === found.from &&
+            this.activeDiagnostic.to === found.to);
+    }
+    isPointerInHandoff(event) {
+        const tooltip = this.tooltip;
+        const diagnostic = this.activeDiagnostic;
+        if (!tooltip || !diagnostic) {
+            return false;
+        }
+        const trigger = this.diagnosticRect(diagnostic);
+        if (!trigger) {
+            return false;
+        }
+        return pointerWithinLintTooltipHandoff({ x: event.clientX, y: event.clientY }, trigger, tooltip.getBoundingClientRect());
+    }
+    diagnosticRect(found) {
+        const start = this.view.coordsAtPos(found.from);
+        const end = this.view.coordsAtPos(Math.max(found.from, found.to));
+        if (!start || !end) {
+            return found.anchor ?? null;
+        }
+        return {
+            left: Math.min(start.left, end.left, found.anchor?.left ?? Infinity),
+            right: Math.max(start.right, end.right, start.left + 1, found.anchor?.right ?? -Infinity),
+            top: Math.min(start.top, end.top, found.anchor?.top ?? Infinity),
+            bottom: Math.max(start.bottom, end.bottom, found.anchor?.bottom ?? -Infinity),
+        };
+    }
+    withEditorLayout(run) {
+        try {
+            run();
+        }
+        catch (error) {
+            if (!isEditorLayoutReadError(error)) {
+                throw error;
+            }
+        }
+    }
+    schedulePositionTooltip() {
+        this.view.requestMeasure({
+            key: this,
+            read: (view) => {
+                const found = this.activeDiagnostic;
+                const tooltip = this.tooltip;
+                if (!found || !tooltip) {
+                    return null;
+                }
+                return {
+                    coords: view.coordsAtPos(found.from) ?? found.anchor ?? null,
+                    tooltipRect: tooltip.getBoundingClientRect(),
+                };
+            },
+            write: (measure) => {
+                if (!this.tooltip) {
+                    return;
+                }
+                if (!measure?.coords) {
+                    this.hideTooltip();
+                    return;
+                }
+                this.applyTooltipPosition(measure.coords, measure.tooltipRect);
+            },
+        });
+    }
+    applyTooltipPosition(coords, tooltipRect) {
+        const tooltip = this.tooltip;
+        if (!tooltip) {
+            return;
+        }
+        const maxLeft = this.viewWindow.innerWidth -
+            tooltipRect.width -
+            TOOLTIP_VIEWPORT_MARGIN_PX;
+        const left = Math.max(TOOLTIP_VIEWPORT_MARGIN_PX, Math.min(coords.left, maxLeft));
+        const top = coords.top - tooltipRect.height - TOOLTIP_GAP_PX >
+            TOOLTIP_VIEWPORT_MARGIN_PX
+            ? coords.top - tooltipRect.height - TOOLTIP_GAP_PX
+            : coords.bottom + TOOLTIP_GAP_PX;
+        tooltip.style.left = `${left}px`;
+        tooltip.style.top = `${top}px`;
+    }
+});
+function isEditorLayoutReadError(error) {
+    return (error instanceof Error &&
+        error.message.includes("Reading the editor layout isn't allowed during an update"));
+}
+function findDiagnosticAt(view, pos, side) {
+    let found = null;
+    forEachDiagnostic(view.state, (diagnostic, from, to) => {
+        if (found) {
+            return;
+        }
+        const start = from - (side < 0 ? 1 : 0);
+        const end = to + (side > 0 ? 1 : 0);
+        const covers = from === to ? pos === from : pos >= start && pos <= Math.max(start, end);
+        if (!covers) {
+            return;
+        }
+        const payload = getLapisLintTooltipPayload(diagnostic);
+        if (!payload) {
+            return;
+        }
+        found = {
+            diagnostic,
+            from,
+            to,
+            payload,
+        };
+    });
+    return found;
+}
+function mountLintTooltipForDiagnostic(view, found, onAction) {
+    const dom = mountLintMessageDom(found.diagnostic.message, found.payload.meta, found.payload.includeCopy, {
+        view,
+        from: found.from,
+        to: found.to,
+        actions: found.payload.actions,
+        onAction,
+    });
+    dom.classList.add("cm-lapis-tooltip");
+    return dom;
+}
+function lintMarkerFromEvent(event) {
+    return closestEventTarget(event.target, ".cm-lint-marker");
+}
+function eventTargetIsInsideLapisTooltip(target) {
+    return Boolean(closestEventTarget(target, ".cm-lapis-tooltip") ||
+        closestEventTarget(target, "[data-lint-quick-fix-menu]"));
+}
+function closestEventTarget(target, selector) {
+    if (!target || typeof target.closest !== "function") {
+        return null;
+    }
+    return target.closest(selector);
+}
+function eventTargetIsInside(container, target) {
+    return Boolean(target &&
+        typeof target.nodeType === "number" &&
+        container.contains(target));
+}
+function findDiagnosticFromLintRange(view, event) {
+    const range = closestEventTarget(event.target, ".cm-lintRange");
+    if (!range) {
+        return null;
+    }
+    try {
+        const from = view.posAtDOM(range, 0);
+        const to = view.posAtDOM(range, range.childNodes.length);
+        const found = findDiagnosticAt(view, from, 1) ?? findDiagnosticAt(view, to, -1);
+        return found ? { ...found, anchor: range.getBoundingClientRect() } : null;
+    }
+    catch {
+        return null;
+    }
+}
+function findDiagnosticNearPointer(view, event) {
+    const contentRect = view.contentDOM.getBoundingClientRect();
+    const pos = view.posAtCoords({
+        x: contentRect.left + 1,
+        y: event.clientY,
+    }, false);
+    const line = view.state.doc.lineAt(pos);
+    let found = null;
+    forEachDiagnostic(view.state, (diagnostic, from, to) => {
+        if (found || to < line.from || from > line.to) {
+            return;
+        }
+        const payload = getLapisLintTooltipPayload(diagnostic);
+        if (!payload) {
+            return;
+        }
+        found = {
+            diagnostic,
+            from,
+            to,
+            payload,
+            anchor: lintMarkerFromEvent(event)?.getBoundingClientRect(),
+        };
+    });
+    return found;
+}

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

@@ -0,0 +1,31 @@
+import { StateField } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+export interface InlineProblemSpec {
+    /** Start-of-line character position; the block widget renders below this line. */
+    lineStart: number;
+    /** End-of-line character position; the block widget renders below this line. */
+    lineEnd: number;
+    /** Approximate character offset of the diagnostic start within the line. */
+    column: number;
+    message: string;
+    sourceLabel?: string;
+    ruleId?: string;
+    pointerLeftPx: number;
+    maxWidthPx: number;
+}
+export declare const showInlineProblem: import("@codemirror/state").StateEffectType<InlineProblemSpec | null>;
+/**
+ * StateField that tracks the active inline problem widget.
+ *
+ * Include this in the editor's extensions (e.g. via `lapisCodeMirrorLint`) so
+ * that `toggleInlineProblem` can show or hide the widget.
+ */
+export declare const inlineProblemExtension: StateField<InlineProblemSpec | null>;
+/**
+ * Toggle the inline problem widget below the diagnostic's line.
+ *
+ * Calling with the same position and message a second time dismisses the
+ * widget. A no-op when `inlineProblemExtension` is absent from the editor state
+ * (the dispatched effect is silently ignored by CodeMirror).
+ */
+export declare function toggleInlineProblem(view: EditorView, from: number, spec: Omit<InlineProblemSpec, "lineStart" | "lineEnd" | "column" | "pointerLeftPx" | "maxWidthPx">): void;

package/dist/components/editor/extensions/lint/lapis-lint-inline-widget.js

@@ -0,0 +1,191 @@
+import { StateEffect, StateField } from "@codemirror/state";
+import { Decoration, EditorView, WidgetType } from "@codemirror/view";
+export const showInlineProblem = StateEffect.define();
+class InlineProblemWidget extends WidgetType {
+    spec;
+    constructor(spec) {
+        super();
+        this.spec = spec;
+    }
+    eq(other) {
+        return (this.spec.lineEnd === other.spec.lineEnd &&
+            this.spec.lineStart === other.spec.lineStart &&
+            this.spec.column === other.spec.column &&
+            this.spec.message === other.spec.message &&
+            this.spec.ruleId === other.spec.ruleId);
+    }
+    toDOM(view) {
+        const doc = view.dom.ownerDocument;
+        const root = doc.createElement("div");
+        root.className = "lapis-inline-problem";
+        root.dataset.uiComponent = "editor";
+        root.dataset.uiPart = "inline-problem";
+        root.style.setProperty("--lapis-inline-problem-pointer-left", `${this.spec.pointerLeftPx}px`);
+        root.style.setProperty("--lapis-inline-problem-max-width", `${this.spec.maxWidthPx}px`);
+        const pointer = doc.createElement("div");
+        pointer.className = "lapis-inline-problem__pointer";
+        pointer.dataset.uiComponent = "editor";
+        pointer.dataset.uiPart = "inline-problem-pointer";
+        pointer.setAttribute("aria-hidden", "true");
+        // Header row
+        const header = doc.createElement("div");
+        header.className = "lapis-inline-problem__header";
+        header.dataset.uiComponent = "editor";
+        header.dataset.uiPart = "inline-problem-header";
+        const title = doc.createElement("span");
+        title.className = "lapis-inline-problem__title";
+        title.dataset.uiComponent = "editor";
+        title.dataset.uiPart = "inline-problem-title";
+        const icon = doc.createElement("span");
+        icon.className = "lapis-inline-problem__icon";
+        icon.dataset.uiComponent = "editor";
+        icon.dataset.uiPart = "inline-problem-icon";
+        icon.setAttribute("aria-hidden", "true");
+        icon.textContent = "⚠";
+        const labelEl = doc.createElement("span");
+        labelEl.className = "lapis-inline-problem__label";
+        labelEl.dataset.uiComponent = "editor";
+        labelEl.dataset.uiPart = "inline-problem-label";
+        labelEl.textContent = "Problem";
+        title.append(icon, labelEl);
+        const closeBtn = doc.createElement("button");
+        closeBtn.className = "lapis-inline-problem__close";
+        closeBtn.dataset.uiComponent = "editor";
+        closeBtn.dataset.uiPart = "inline-problem-close";
+        closeBtn.setAttribute("type", "button");
+        closeBtn.setAttribute("aria-label", "Close problem widget");
+        closeBtn.textContent = "×";
+        const consume = (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+        };
+        const closeInlineProblem = () => {
+            view.dispatch({ effects: showInlineProblem.of(null) });
+        };
+        const dismiss = (event) => {
+            consume(event);
+            closeInlineProblem();
+        };
+        const dismissFromMouseUp = (event) => {
+            consume(event);
+            const suppressClickThrough = (clickEvent) => {
+                clickEvent.preventDefault();
+                clickEvent.stopImmediatePropagation();
+            };
+            doc.addEventListener("click", suppressClickThrough, {
+                capture: true,
+                once: true,
+            });
+            doc.defaultView?.setTimeout(() => {
+                doc.removeEventListener("click", suppressClickThrough, true);
+            });
+            closeInlineProblem();
+        };
+        closeBtn.addEventListener("pointerdown", consume);
+        closeBtn.addEventListener("pointerup", consume);
+        closeBtn.addEventListener("mousedown", consume);
+        closeBtn.addEventListener("mouseup", dismissFromMouseUp);
+        closeBtn.addEventListener("click", dismiss);
+        closeBtn.addEventListener("keydown", (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                dismiss(event);
+            }
+        });
+        header.append(title, closeBtn);
+        // Body row
+        const body = doc.createElement("div");
+        body.className = "lapis-inline-problem__body";
+        body.dataset.uiComponent = "editor";
+        body.dataset.uiPart = "inline-problem-body";
+        const msgSpan = doc.createElement("span");
+        msgSpan.className = "lapis-inline-problem__message";
+        msgSpan.dataset.uiComponent = "editor";
+        msgSpan.dataset.uiPart = "inline-problem-message";
+        msgSpan.textContent = this.spec.message;
+        body.append(msgSpan);
+        if (this.spec.sourceLabel != null || this.spec.ruleId != null) {
+            const sourceTag = doc.createElement("span");
+            sourceTag.className = "lapis-inline-problem__source";
+            sourceTag.dataset.uiComponent = "editor";
+            sourceTag.dataset.uiPart = "inline-problem-source";
+            const src = this.spec.sourceLabel ?? "";
+            const ruleParens = this.spec.ruleId != null ? `(${this.spec.ruleId})` : "";
+            sourceTag.textContent = `${src}${ruleParens}`;
+            body.append(sourceTag);
+        }
+        root.append(pointer, header, body);
+        return root;
+    }
+    ignoreEvent() {
+        return true;
+    }
+}
+/**
+ * StateField that tracks the active inline problem widget.
+ *
+ * Include this in the editor's extensions (e.g. via `lapisCodeMirrorLint`) so
+ * that `toggleInlineProblem` can show or hide the widget.
+ */
+export const inlineProblemExtension = StateField.define({
+    create: () => null,
+    update(spec, tr) {
+        // Keep the anchor position in sync with document edits.
+        if (spec != null && tr.docChanged) {
+            const mappedStart = tr.changes.mapPos(spec.lineStart, 1);
+            const mappedEnd = tr.changes.mapPos(spec.lineEnd, -1);
+            spec = { ...spec, lineStart: mappedStart, lineEnd: mappedEnd };
+        }
+        for (const effect of tr.effects) {
+            if (effect.is(showInlineProblem)) {
+                return effect.value;
+            }
+        }
+        return spec;
+    },
+    provide: (f) => EditorView.decorations.from(f, (spec) => {
+        if (spec == null)
+            return Decoration.none;
+        return Decoration.set([
+            Decoration.widget({
+                widget: new InlineProblemWidget(spec),
+                block: true,
+                inlineOrder: true,
+                side: 1,
+            }).range(spec.lineEnd),
+        ]);
+    }),
+});
+/**
+ * Toggle the inline problem widget below the diagnostic's line.
+ *
+ * Calling with the same position and message a second time dismisses the
+ * widget. A no-op when `inlineProblemExtension` is absent from the editor state
+ * (the dispatched effect is silently ignored by CodeMirror).
+ */
+export function toggleInlineProblem(view, from, spec) {
+    const line = view.state.doc.lineAt(from);
+    const current = view.state.field(inlineProblemExtension, false);
+    const lineStartCoords = view.coordsAtPos(line.from);
+    const lineEndCoords = view.coordsAtPos(line.to);
+    const diagnosticCoords = view.coordsAtPos(from);
+    const contentRect = view.contentDOM.getBoundingClientRect();
+    const lineLeft = lineStartCoords?.left ?? contentRect.left;
+    const lineEndLeft = lineEndCoords?.left ?? lineLeft;
+    const diagnosticLeft = diagnosticCoords?.left ?? lineLeft;
+    const isSameWidget = current != null &&
+        current.lineStart === line.from &&
+        current.lineEnd === line.to &&
+        current.message === spec.message;
+    view.dispatch({
+        effects: showInlineProblem.of(isSameWidget
+            ? null
+            : {
+                ...spec,
+                lineStart: line.from,
+                lineEnd: line.to,
+                column: from - line.from,
+                pointerLeftPx: Math.max(0, diagnosticLeft - lineEndLeft),
+                maxWidthPx: Math.max(240, contentRect.right - lineEndLeft),
+            }),
+    });
+}