@lapis-notes/api 0.1.0

package/dist/suggest.d.ts

@@ -0,0 +1,193 @@
+import { Scope } from "./command.svelte";
+import type { App } from "./context.svelte";
+import type { Editor, EditorPosition } from "./editor.svelte";
+import type { TFile } from "./storage";
+import { Modal } from "./settings.svelte";
+import { type FuzzyMatch } from "./search";
+export interface CloseableComponent {
+    close(): void;
+}
+/** @public */
+export interface ISuggestOwner<T> {
+    /**
+     * Render the suggestion item into DOM.
+     *
+     * @public
+     */
+    renderSuggestion(value: T, el: HTMLElement): void;
+    /**
+     * Called when the user makes a selection.
+     *
+     * @public
+     */
+    selectSuggestion(value: T, evt: MouseEvent | KeyboardEvent): void;
+}
+/**
+ * Base class for adding a type-ahead popover.
+ *
+ * @public
+ */
+export declare abstract class PopoverSuggest<T> implements ISuggestOwner<T>, CloseableComponent {
+    readonly app: App;
+    readonly scope?: Scope | undefined;
+    /** @public */
+    constructor(app: App, scope?: Scope | undefined);
+    /** @public */
+    open(): void;
+    /** @public */
+    close(): void;
+    /**
+     * @inheritDoc
+     * @public
+     */
+    abstract renderSuggestion(value: T, el: HTMLElement): void;
+    /**
+     * @inheritDoc
+     * @public
+     */
+    abstract selectSuggestion(value: T, evt: MouseEvent | KeyboardEvent): void;
+}
+export declare abstract class AbstractInputSuggest<T> extends PopoverSuggest<T> {
+    readonly textInputEl: HTMLInputElement | HTMLDivElement;
+    limit: number;
+    suggestEl: HTMLElement;
+    instructionContainerEl: HTMLElement;
+    emptyStateEl: HTMLElement;
+    private instructions;
+    private suggestions;
+    private itemElements;
+    private activeIndex;
+    private isOpen;
+    private selectCallback;
+    constructor(app: App, textInputEl: HTMLInputElement | HTMLDivElement);
+    setValue(value: string): void;
+    getValue(): string;
+    protected abstract getSuggestions(query: string): T[] | Promise<T[]>;
+    open(): void;
+    close(): void;
+    selectSuggestion(value: T, evt: MouseEvent | KeyboardEvent): void;
+    setInstructions(instructions: Instruction[]): this;
+    onSelect(callback: (value: T, evt: MouseEvent | KeyboardEvent) => any): this;
+    private readonly onInput;
+    private readonly onBlur;
+    private readonly onKeyDown;
+    private attachSuggestEl;
+    private updateSuggestions;
+    private renderInstructions;
+    private setActiveSuggestion;
+}
+export declare abstract class SuggestModal<T> extends Modal implements ISuggestOwner<T> {
+    limit: number;
+    emptyStateText: string;
+    inputEl: HTMLInputElement;
+    instructionContainerEl: HTMLElement;
+    resultContainerEl: HTMLElement;
+    private instructions;
+    private suggestions;
+    private itemElements;
+    private activeIndex;
+    private activeSuggestion;
+    constructor(app: App);
+    setPlaceholder(placeholder: string): void;
+    setInstructions(instructions: Instruction[]): void;
+    onNoSuggestion(): void;
+    updateSuggestions(): Promise<void>;
+    open(): void;
+    selectSuggestion(value: T, evt: MouseEvent | KeyboardEvent): void;
+    selectActiveSuggestion(evt: MouseEvent | KeyboardEvent): void;
+    private renderInstructions;
+    private setActiveSuggestion;
+    private onKeyDown;
+    abstract getSuggestions(query: string): T[] | Promise<T[]>;
+    abstract renderSuggestion(value: T, el: HTMLElement): void;
+    abstract onChooseSuggestion(item: T, evt: MouseEvent | KeyboardEvent): void;
+}
+export declare abstract class FuzzySuggestModal<T> extends SuggestModal<FuzzyMatch<T>> {
+    getSuggestions(query: string): FuzzyMatch<T>[];
+    renderSuggestion(item: FuzzyMatch<T>, el: HTMLElement): void;
+    onChooseSuggestion(item: FuzzyMatch<T>, evt: MouseEvent | KeyboardEvent): void;
+    abstract getItems(): T[];
+    abstract getItemText(item: T): string;
+    abstract onChooseItem(item: T, evt: MouseEvent | KeyboardEvent): void;
+}
+/** @public */
+export interface EditorSuggestContext extends EditorSuggestTriggerInfo {
+    /** @public */
+    editor: Editor;
+    /** @public */
+    file: TFile;
+}
+/** @public */
+export interface EditorSuggestTriggerInfo {
+    /**
+     * The start position of the triggering text. This is used to position the
+     * popover.
+     *
+     * @public
+     */
+    start: EditorPosition;
+    /**
+     * The end position of the triggering text. This is used to position the
+     * popover.
+     *
+     * @public
+     */
+    end: EditorPosition;
+    /**
+     * They query string (usually the text between start and end) that will be
+     * used to generate the suggestion content.
+     *
+     * @public
+     */
+    query: string;
+}
+export interface Instruction {
+    /** @public */
+    command: string;
+    /** @public */
+    purpose: string;
+}
+export declare abstract class EditorSuggest<T> extends PopoverSuggest<T> {
+    /**
+     * Current suggestion context, containing the result of `onTrigger`. This will
+     * be null any time the EditorSuggest is not supposed to run.
+     *
+     * @public
+     */
+    context: EditorSuggestContext | null;
+    scope: Scope;
+    suggestEl: HTMLElement;
+    /**
+     * Override this to use a different limit for suggestion items
+     *
+     * @public
+     */
+    limit: number;
+    /** @public */
+    constructor(app: App);
+    /** @public */
+    setInstructions(instructions: Instruction[]): void;
+    close(): void;
+    open(): void;
+    /**
+     * Based on the editor line and cursor position, determine if this
+     * EditorSuggest should be triggered at this moment. Typically, you would run
+     * a regular expression on the current line text before the cursor. Return
+     * null to indicate that this editor suggest is not supposed to be triggered.
+     *
+     * Please be mindful of performance when implementing this function, as it
+     * will be triggered very often (on each keypress). Keep it simple, and return
+     * null as early as possible if you determine that it is not the right time.
+     *
+     * @public
+     */
+    abstract onTrigger(cursor: EditorPosition, editor: Editor, file: TFile | null): EditorSuggestTriggerInfo | null;
+    /**
+     * Generate suggestion items based on this context. Can be async, but
+     * preferably sync. When generating async suggestions, you should pass the
+     * context along.
+     *
+     * @public
+     */
+    abstract getSuggestions(context: EditorSuggestContext): T[] | Promise<T[]>;
+}

package/dist/suggest.js

@@ -0,0 +1,391 @@
+import { Scope } from "./command.svelte";
+import { closeCompletion, startCompletion } from "@codemirror/autocomplete";
+import { Modal } from "./settings.svelte";
+import { prepareFuzzySearch, renderMatches } from "./search";
+/**
+ * Base class for adding a type-ahead popover.
+ *
+ * @public
+ */
+export class PopoverSuggest {
+    app;
+    scope;
+    /** @public */
+    constructor(app, scope) {
+        this.app = app;
+        this.scope = scope;
+    }
+    /** @public */
+    open() { }
+    /** @public */
+    close() { }
+}
+export class AbstractInputSuggest extends PopoverSuggest {
+    textInputEl;
+    limit = 100;
+    suggestEl;
+    instructionContainerEl;
+    emptyStateEl;
+    instructions = [];
+    suggestions = [];
+    itemElements = [];
+    activeIndex = -1;
+    isOpen = false;
+    selectCallback = null;
+    constructor(app, textInputEl) {
+        super(app);
+        this.textInputEl = textInputEl;
+        this.suggestEl = createDomElement("div");
+        this.instructionContainerEl = createDomElement("div");
+        this.emptyStateEl = createDomElement("div");
+        this.suggestEl.className = "suggestion-container";
+        this.instructionContainerEl.className = "prompt-instructions";
+        this.emptyStateEl.className = "suggestion-empty";
+        this.emptyStateEl.textContent = "No results found";
+    }
+    setValue(value) {
+        if (isTextInputElement(this.textInputEl)) {
+            this.textInputEl.value = value;
+        }
+        else {
+            this.textInputEl.textContent = value;
+        }
+    }
+    getValue() {
+        return isTextInputElement(this.textInputEl)
+            ? this.textInputEl.value
+            : (this.textInputEl.textContent ?? "");
+    }
+    open() {
+        if (this.isOpen) {
+            return;
+        }
+        this.isOpen = true;
+        this.attachSuggestEl();
+        this.textInputEl.addEventListener("input", this.onInput);
+        this.textInputEl.addEventListener("keydown", this.onKeyDown);
+        this.textInputEl.addEventListener("blur", this.onBlur);
+        void this.updateSuggestions();
+    }
+    close() {
+        if (!this.isOpen) {
+            return;
+        }
+        this.isOpen = false;
+        this.textInputEl.removeEventListener("input", this.onInput);
+        this.textInputEl.removeEventListener("keydown", this.onKeyDown);
+        this.textInputEl.removeEventListener("blur", this.onBlur);
+        this.suggestions = [];
+        this.itemElements = [];
+        this.activeIndex = -1;
+        this.suggestEl.replaceChildren();
+        this.suggestEl.remove?.();
+    }
+    selectSuggestion(value, evt) {
+        this.selectCallback?.(value, evt);
+        this.close();
+    }
+    setInstructions(instructions) {
+        this.instructions = instructions.slice();
+        return this;
+    }
+    onSelect(callback) {
+        this.selectCallback = callback;
+        return this;
+    }
+    onInput = () => {
+        void this.updateSuggestions();
+    };
+    onBlur = () => {
+        setTimeout(() => this.close(), 0);
+    };
+    onKeyDown = (evt) => {
+        if (!this.suggestions.length) {
+            if (evt.key === "Escape") {
+                evt.preventDefault();
+                this.close();
+            }
+            return;
+        }
+        if (evt.key === "ArrowDown") {
+            evt.preventDefault();
+            this.setActiveSuggestion((this.activeIndex + 1) % this.suggestions.length);
+            return;
+        }
+        if (evt.key === "ArrowUp") {
+            evt.preventDefault();
+            this.setActiveSuggestion((this.activeIndex - 1 + this.suggestions.length) %
+                this.suggestions.length);
+            return;
+        }
+        if (evt.key === "Enter" || evt.key === "Tab") {
+            evt.preventDefault();
+            this.selectSuggestion(this.suggestions[this.activeIndex], evt);
+            return;
+        }
+        if (evt.key === "Escape") {
+            evt.preventDefault();
+            this.close();
+        }
+    };
+    attachSuggestEl() {
+        const parent = this.textInputEl.parentElement ??
+            document.body ??
+            document.documentElement;
+        if (!this.suggestEl.parentElement) {
+            parent?.append(this.suggestEl);
+        }
+    }
+    async updateSuggestions() {
+        const suggestions = await this.getSuggestions(this.getValue());
+        const visible = this.limit > 0 ? suggestions.slice(0, this.limit) : suggestions;
+        this.suggestions = visible;
+        this.itemElements = [];
+        this.suggestEl.replaceChildren();
+        this.renderInstructions();
+        if (!visible.length) {
+            this.activeIndex = -1;
+            this.suggestEl.append(this.emptyStateEl);
+            return;
+        }
+        visible.forEach((suggestion, index) => {
+            const itemEl = createDomElement("div");
+            itemEl.className = "suggestion-item";
+            this.renderSuggestion(suggestion, itemEl);
+            itemEl.addEventListener("mousedown", (evt) => {
+                evt.preventDefault();
+                this.selectSuggestion(suggestion, evt);
+            });
+            itemEl.addEventListener("mouseenter", () => {
+                this.setActiveSuggestion(index);
+            });
+            this.suggestEl.append(itemEl);
+            this.itemElements.push(itemEl);
+        });
+        this.setActiveSuggestion(0);
+    }
+    renderInstructions() {
+        this.instructionContainerEl.replaceChildren();
+        if (!this.instructions.length) {
+            return;
+        }
+        for (const instruction of this.instructions) {
+            const row = createDomElement("div");
+            row.className = "prompt-instruction";
+            const commandEl = createDomElement("span");
+            commandEl.className = "prompt-instruction-command";
+            commandEl.textContent = instruction.command;
+            const purposeEl = createDomElement("span");
+            purposeEl.className = "prompt-instruction-purpose";
+            purposeEl.textContent = instruction.purpose;
+            row.append(commandEl, purposeEl);
+            this.instructionContainerEl.append(row);
+        }
+        this.suggestEl.append(this.instructionContainerEl);
+    }
+    setActiveSuggestion(index) {
+        this.activeIndex = index;
+        this.itemElements.forEach((itemEl, itemIndex) => {
+            const active = itemIndex === index;
+            itemEl.classList.toggle("is-selected", active);
+            itemEl.setAttribute("aria-selected", active ? "true" : "false");
+        });
+    }
+}
+function createDomElement(tag) {
+    return document.createElement(tag);
+}
+function isTextInputElement(element) {
+    return ((typeof HTMLInputElement !== "undefined" &&
+        element instanceof HTMLInputElement) ||
+        ("value" in element && typeof element.value === "string"));
+}
+export class SuggestModal extends Modal {
+    limit = 100;
+    emptyStateText = "No results found";
+    inputEl;
+    instructionContainerEl;
+    resultContainerEl;
+    instructions = [];
+    suggestions = [];
+    itemElements = [];
+    activeIndex = -1;
+    activeSuggestion = null;
+    constructor(app) {
+        super(app);
+        this.inputEl = createDomElement("input");
+        this.instructionContainerEl = createDomElement("div");
+        this.resultContainerEl = createDomElement("div");
+        this.inputEl.type = "text";
+        this.inputEl.className = "prompt-input";
+        this.instructionContainerEl.className = "prompt-instructions";
+        this.resultContainerEl.className = "suggestion-container";
+        this.containerEl?.append(this.inputEl, this.instructionContainerEl, this.resultContainerEl);
+        this.inputEl.addEventListener("input", () => {
+            void this.updateSuggestions();
+        });
+        this.inputEl.addEventListener("keydown", (evt) => {
+            this.onKeyDown(evt);
+        });
+    }
+    setPlaceholder(placeholder) {
+        this.inputEl.placeholder = placeholder;
+    }
+    setInstructions(instructions) {
+        this.instructions = instructions.slice();
+        this.renderInstructions();
+    }
+    onNoSuggestion() {
+        this.suggestions = [];
+        this.itemElements = [];
+        this.activeIndex = -1;
+        this.activeSuggestion = null;
+        this.resultContainerEl.textContent = this.emptyStateText;
+    }
+    async updateSuggestions() {
+        const suggestions = await this.getSuggestions(this.inputEl.value);
+        const visible = this.limit > 0 ? suggestions.slice(0, this.limit) : suggestions;
+        this.suggestions = visible;
+        this.resultContainerEl.replaceChildren();
+        this.itemElements = [];
+        if (!visible.length) {
+            this.onNoSuggestion();
+            return;
+        }
+        visible.forEach((suggestion, index) => {
+            const itemEl = createDomElement("div");
+            itemEl.className = "suggestion-item";
+            this.renderSuggestion(suggestion, itemEl);
+            itemEl.addEventListener("click", (evt) => {
+                this.selectSuggestion(suggestion, evt);
+            });
+            itemEl.addEventListener("mouseenter", () => {
+                this.setActiveSuggestion(index);
+            });
+            this.resultContainerEl.append(itemEl);
+            this.itemElements.push(itemEl);
+        });
+        this.setActiveSuggestion(0);
+    }
+    open() {
+        super.open();
+        this.inputEl.focus?.();
+        void this.updateSuggestions();
+    }
+    selectSuggestion(value, evt) {
+        this.onChooseSuggestion(value, evt);
+        this.close();
+    }
+    selectActiveSuggestion(evt) {
+        if (this.activeSuggestion) {
+            this.selectSuggestion(this.activeSuggestion, evt);
+        }
+    }
+    renderInstructions() {
+        this.instructionContainerEl.replaceChildren();
+        if (!this.instructions.length) {
+            return;
+        }
+        for (const instruction of this.instructions) {
+            const row = createDomElement("div");
+            row.className = "prompt-instruction";
+            const commandEl = createDomElement("span");
+            commandEl.className = "prompt-instruction-command";
+            commandEl.textContent = instruction.command;
+            const purposeEl = createDomElement("span");
+            purposeEl.className = "prompt-instruction-purpose";
+            purposeEl.textContent = instruction.purpose;
+            row.append(commandEl, purposeEl);
+            this.instructionContainerEl.append(row);
+        }
+    }
+    setActiveSuggestion(index) {
+        this.activeIndex = index;
+        this.activeSuggestion = this.suggestions[index] ?? null;
+        this.itemElements.forEach((itemEl, itemIndex) => {
+            const active = itemIndex === index;
+            itemEl.classList.toggle("is-selected", active);
+            itemEl.setAttribute("aria-selected", active ? "true" : "false");
+        });
+    }
+    onKeyDown(evt) {
+        if (!this.suggestions.length) {
+            if (evt.key === "Escape") {
+                evt.preventDefault();
+                this.close();
+            }
+            return;
+        }
+        if (evt.key === "ArrowDown") {
+            evt.preventDefault();
+            this.setActiveSuggestion((this.activeIndex + 1) % this.suggestions.length);
+            return;
+        }
+        if (evt.key === "ArrowUp") {
+            evt.preventDefault();
+            this.setActiveSuggestion((this.activeIndex - 1 + this.suggestions.length) %
+                this.suggestions.length);
+            return;
+        }
+        if (evt.key === "Enter" || evt.key === "Tab") {
+            evt.preventDefault();
+            this.selectActiveSuggestion(evt);
+            return;
+        }
+        if (evt.key === "Escape") {
+            evt.preventDefault();
+            this.close();
+        }
+    }
+}
+export class FuzzySuggestModal extends SuggestModal {
+    getSuggestions(query) {
+        const search = prepareFuzzySearch(query);
+        return this.getItems()
+            .map((item) => {
+            const match = search(this.getItemText(item));
+            return match ? { item, match } : null;
+        })
+            .filter((item) => !!item)
+            .sort((a, b) => b.match.score - a.match.score);
+    }
+    renderSuggestion(item, el) {
+        renderMatches(el, this.getItemText(item.item), item.match.matches);
+    }
+    onChooseSuggestion(item, evt) {
+        this.onChooseItem(item.item, evt);
+    }
+}
+export class EditorSuggest extends PopoverSuggest {
+    /**
+     * Current suggestion context, containing the result of `onTrigger`. This will
+     * be null any time the EditorSuggest is not supposed to run.
+     *
+     * @public
+     */
+    context = null;
+    scope = new Scope();
+    suggestEl = createDiv();
+    /**
+     * Override this to use a different limit for suggestion items
+     *
+     * @public
+     */
+    limit = -1;
+    /** @public */
+    constructor(app) {
+        super(app);
+    }
+    /** @public */
+    setInstructions(instructions) { }
+    close() {
+        if (!this.context)
+            return;
+        closeCompletion(this.context.editor.cm);
+    }
+    open() {
+        if (!this.context)
+            return;
+        startCompletion(this.context.editor.cm);
+    }
+}

package/dist/tasks.d.ts

@@ -0,0 +1,7 @@
+export declare class Tasks {
+    private readonly tasks;
+    add(callback: () => Promise<unknown>): void;
+    addPromise(promise: Promise<unknown>): void;
+    isEmpty(): boolean;
+    promise(): Promise<unknown[]>;
+}

package/dist/tasks.js

@@ -0,0 +1,18 @@
+export class Tasks {
+    tasks = new Set();
+    add(callback) {
+        this.addPromise(Promise.resolve().then(callback));
+    }
+    addPromise(promise) {
+        const tracked = Promise.resolve(promise).finally(() => {
+            this.tasks.delete(tracked);
+        });
+        this.tasks.add(tracked);
+    }
+    isEmpty() {
+        return this.tasks.size === 0;
+    }
+    promise() {
+        return Promise.all([...this.tasks]);
+    }
+}