@lapis-notes/api 0.1.0

package/dist/components/editor/editor.js

@@ -0,0 +1,132 @@
+import { indentUnit } from "@codemirror/language";
+import { Compartment, EditorState } from "@codemirror/state";
+import { EditorView, GutterMarker, keymap, lineNumbers, } from "@codemirror/view";
+import { indentMore, indentLess } from "@codemirror/commands";
+import { createBaseCodeMirrorExtensions } from "@lapismd/mira/codemirror";
+import { foldGutter } from "./extensions/fold-gutter";
+import { resolveApplication } from "../../application-compatibility";
+export class BlockLineMarker extends GutterMarker {
+    from;
+    to;
+    constructor(from, to) {
+        super();
+        this.from = from;
+        this.to = to;
+    }
+    eq(other) {
+        return this.from === other.from && this.to === other.to;
+    }
+    toDOM() {
+        const div = createDiv();
+        div.className = "cm-line-block";
+        div.createDiv({ cls: "" }).setText(this.from.toString());
+        if (this.from !== this.to) {
+            const mid = Math.floor((this.from + this.to) / 2);
+            div.createDiv({ cls: "" }).setText(mid.toString());
+            div.createDiv({ cls: "" }).setText(this.to.toString());
+        }
+        return div;
+    }
+}
+export class EditorConfig {
+    configs = {};
+    register(key, controller) {
+        const compartment = new Compartment();
+        this.configs[key] = { config: compartment, controller };
+    }
+    has(key) {
+        return !!this.configs[key];
+    }
+    extension(application) {
+        const app = resolveApplication(application);
+        const config = app.configuration.getConfiguration();
+        return Object.entries(this.configs).map(([key, props]) => props.config.of(props.controller(config.get(key), app) || []));
+    }
+    update(view, key, value, application) {
+        if (!this.has(key))
+            return;
+        const app = resolveApplication(application);
+        const props = this.configs[key];
+        const configValue = value ?? app.configuration.getConfiguration().get(key);
+        const newValue = props.controller(configValue, app) || [];
+        view.dispatch({ effects: props.config.reconfigure(newValue) });
+    }
+}
+/**
+ * Source-editor CodeMirror shell backed by Mira base extensions + Lapis live
+ * configuration compartments. Language packs are passed in by the caller;
+ * Markdown live-preview / rich Mira surfaces are not included.
+ */
+export function markupEditor(options = {}, ...extensions) {
+    const language = options.language?.trim() || "text";
+    return [
+        ...extensions,
+        ...createBaseCodeMirrorExtensions({
+            // Lapis editorConfig compartments own these live toggles.
+            lineNumbers: false,
+            lineWrapping: false,
+            spellcheck: false,
+        }),
+        editorConfig.extension(options.app),
+        EditorView.editorAttributes.of({
+            class: "cm-editor-source markdown-editor-surface",
+            "data-language": language,
+        }),
+        EditorView.contentAttributes.of({ "aria-label": "Source editor" }),
+    ];
+}
+export const editorConfig = new EditorConfig();
+function normalizeIndentWidth(width) {
+    if (typeof width !== "number" || !Number.isFinite(width)) {
+        return 2;
+    }
+    return Math.max(1, Math.floor(width));
+}
+editorConfig.register("editor.display.showLineNumbers", (show) => {
+    show = show ?? true;
+    return show
+        ? [
+            lineNumbers({}),
+            // lineNumberWidgetMarker.of((view, widget, block) => {
+            //   if (block.from > 1) {
+            //     return new BlockLineMarker(
+            //       view.state.doc.lineAt(block.from).number,
+            //       view.state.doc.lineAt(block.to).number,
+            //     );
+            //   }
+            //   return null;
+            // }),
+        ]
+        : [];
+});
+editorConfig.register("editor.display.foldIndent", (fold) => {
+    // Language packs supply fold ranges; Mira base registers codeFolding() +
+    // foldKeymap. This mounts the Mira-styled fold gutter chevrons.
+    fold = fold ?? true;
+    return fold ? foldGutter() : [];
+});
+editorConfig.register("editor.display.wrapLines", (wrap) => {
+    wrap = wrap ?? true;
+    return wrap ? [EditorView.lineWrapping] : [];
+});
+editorConfig.register("editor.display.showIndentationGuides", (show) => show
+    ? EditorView.editorAttributes.of({ class: "cm-show-indentation-guides" })
+    : []);
+editorConfig.register("editor.behaviour.indentVisualWidth", (width) => {
+    const normalizedWidth = normalizeIndentWidth(width);
+    return EditorState.tabSize.of(normalizedWidth);
+});
+editorConfig.register("editor.behaviour.indentUsingTabs", (useTabs, app) => {
+    const config = app.configuration.getConfiguration();
+    const width = normalizeIndentWidth(config.get("editor.behaviour.indentVisualWidth"));
+    return [
+        indentUnit.of((useTabs ?? true) ? "\t" : " ".repeat(width)),
+        keymap.of([
+            {
+                key: "Tab",
+                run: indentMore,
+                shift: indentLess,
+            },
+        ]),
+    ];
+});

package/dist/components/editor/editor.svelte

@@ -0,0 +1,176 @@
+<script lang="ts">
+  import { onMount, untrack } from "svelte";
+  import { type Editor as EditorApi } from "../../editor.svelte";
+  import { dirname } from "../../storage/path";
+  import { WorkspaceLeaf } from "../../workspace.svelte";
+  import { editorConfig } from "./editor";
+  import { ScrollArea } from "@lapismd/design-core/shadcn/scroll-area";
+  import { cn } from "../../utils";
+  import type { App } from "../../context.svelte";
+  import { useApplicationState } from "../../application-state.svelte";
+  import "@lapismd/mira/themes/obsidian.css";
+  import "./editor.css";
+
+  type Props = {
+    app?: App;
+    leaf?: WorkspaceLeaf;
+    editor: EditorApi;
+    class?: string;
+    scrollOwner?: "self" | "ancestor";
+  };
+
+  let {
+    app: providedApplication,
+    leaf,
+    editor,
+    class: className = "",
+    scrollOwner = "self",
+  }: Props = $props();
+  const ownership = untrack(() => ({ providedApplication, leaf, editor }));
+  const app = useApplicationState(
+    ownership.providedApplication ?? ownership.leaf?.application,
+  );
+  ownership.editor.bindApplication(app);
+  let file = $derived(editor.file);
+  let isMobileWorkspace = $derived(app.workspace.displayMode === "mobile");
+  let showInlineTitle = $derived(
+    app.configuration
+      .getConfiguration()
+      .get("appearence.interface.showInlineTitle"),
+  );
+  let shouldShowDesktopInlineTitle = $derived(
+    showInlineTitle && !isMobileWorkspace,
+  );
+  let shouldShowMobileInlineTitle = $derived(
+    isMobileWorkspace && file !== null,
+  );
+
+  let spellcheck = $derived(
+    app.configuration
+      .getConfiguration()
+      .get("editor.behaviour.spellCheck", false),
+  );
+  const codeMirror = (node: HTMLDivElement) => {
+    let focusTimeout: ReturnType<typeof setTimeout> | null = null;
+    const root = node.getRootNode();
+    if (root instanceof Document || root instanceof ShadowRoot) {
+      editor.view.setRoot(root);
+    }
+    node.append(editor.view.dom);
+    focusTimeout = setTimeout(() => {
+      editor.view.focus();
+    });
+
+    return {
+      update(qs: string) {},
+      destroy() {
+        if (focusTimeout !== null) {
+          clearTimeout(focusTimeout);
+          focusTimeout = null;
+        }
+      },
+    };
+  };
+
+  function editorConfigUpdated({ key, value }: { key: string; value: any }) {
+    editorConfig.update(editor.view, key, value, app);
+  }
+
+  onMount(() => {
+    const trackChanges = editor.trackChanges();
+    const configUpdated = app.configuration.on("updated", editorConfigUpdated);
+    return () => {
+      trackChanges();
+      app.configuration.offref(configUpdated);
+    };
+  });
+
+  function renameFile(name: string | null) {
+    if (name && editor.file && name !== editor.file.name) {
+      const path = `${dirname(editor.file.path)}/${name}.${editor.file.extension}`;
+      app.fileManager.renameFile(editor.file, path);
+    }
+  }
+
+  function renameDone(evt: KeyboardEvent) {
+    if (evt.key == "Enter") {
+      renameFile((evt.target as HTMLDivElement).getText());
+      editor.view.focus();
+      evt.preventDefault();
+    }
+  }
+</script>
+
+{#snippet editorContent()}
+  <div
+    class={cn(
+      "cm-editor-scroll-area-content markdown-editor-surface",
+      className,
+    )}
+    data-ui-component="editor"
+    data-ui-part="scroll-content"
+    data-mira-theme="obsidian"
+  >
+    <div
+      class="cm-editor-scroll-area-inner"
+      data-ui-component="editor"
+      data-ui-part="scroll-inner"
+    >
+      <div class="cm-scroller">
+        <div class="cm-sizer">
+          <!-- svelte-ignore a11y_no_static_element_interactions -->
+          {#if shouldShowDesktopInlineTitle && file}
+            <div
+              onkeydown={renameDone}
+              onfocusout={(evt) =>
+                renameFile((evt.target as HTMLDivElement).getText())}
+              class="inline-title cm-editor-inline-title"
+              contenteditable="true"
+              {spellcheck}
+              autocapitalize="on"
+              tabindex="-1"
+              enterkeyhint="done"
+            >
+              {file?.name}
+            </div>
+          {/if}
+          {#if shouldShowMobileInlineTitle && file}
+            <!-- svelte-ignore a11y_no_static_element_interactions -->
+            <div
+              onkeydown={renameDone}
+              onfocusout={(evt) =>
+                renameFile((evt.target as HTMLDivElement).getText())}
+              class="inline-title cm-editor-inline-title"
+              data-mobile-inline-title="true"
+              data-mobile-inline-title-input="true"
+              aria-label="Active note title"
+              contenteditable="true"
+              {spellcheck}
+              autocapitalize="on"
+              tabindex="-1"
+              enterkeyhint="done"
+            >
+              {file?.name}
+            </div>
+          {/if}
+          <div use:codeMirror class="cm-editor-content"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+{/snippet}
+
+{#if scrollOwner === "self"}
+  <ScrollArea class="cm-editor-scroll-area" data-mira-theme="obsidian">
+    {@render editorContent()}
+  </ScrollArea>
+{:else}
+  <div
+    class="cm-editor-scroll-area cm-editor-scroll-area--ancestor"
+    data-ui-component="editor"
+    data-ui-part="scroll-owner-ancestor"
+    data-mira-theme="obsidian"
+  >
+    {@render editorContent()}
+  </div>
+{/if}

package/dist/components/editor/editor.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Editor as EditorApi } from "../../editor.svelte";
+import { WorkspaceLeaf } from "../../workspace.svelte";
+import type { App } from "../../context.svelte";
+import "@lapismd/mira/themes/obsidian.css";
+import "./editor.css";
+type Props = {
+    app?: App;
+    leaf?: WorkspaceLeaf;
+    editor: EditorApi;
+    class?: string;
+    scrollOwner?: "self" | "ancestor";
+};
+declare const Editor: import("svelte").Component<Props, {}, "">;
+type Editor = ReturnType<typeof Editor>;
+export default Editor;

package/dist/components/editor/embedded-editor-surface.d.ts

@@ -0,0 +1,12 @@
+import type { Extension } from "@codemirror/state";
+import type { App } from "../../context.svelte";
+import type { Editor } from "../../editor.svelte";
+export interface EmbeddedEditorExtensionOptions {
+    viewType: string;
+    mode?: string;
+    sourcePath?: string;
+    fallbackLanguage?: string;
+}
+export declare function embeddedEditorContext(options: EmbeddedEditorExtensionOptions): Record<string, unknown>;
+export declare function resolveEmbeddedEditorExtensions(app: App, options: EmbeddedEditorExtensionOptions): Extension[];
+export declare function applyEmbeddedEditorExtensions(app: App, editor: Editor, options: EmbeddedEditorExtensionOptions): void;

package/dist/components/editor/embedded-editor-surface.js

@@ -0,0 +1,22 @@
+import { markupEditor } from "./editor";
+export function embeddedEditorContext(options) {
+    return {
+        ...(options.mode ? { mode: options.mode } : {}),
+        ...(options.sourcePath ? { file: options.sourcePath } : {}),
+    };
+}
+export function resolveEmbeddedEditorExtensions(app, options) {
+    const registered = app.editorExtensions(options.viewType, embeddedEditorContext(options));
+    if (registered.length > 0) {
+        return registered;
+    }
+    return [
+        markupEditor({
+            language: options.fallbackLanguage ?? options.viewType,
+            app,
+        }),
+    ];
+}
+export function applyEmbeddedEditorExtensions(app, editor, options) {
+    editor.updateExtensions(resolveEmbeddedEditorExtensions(app, options));
+}

package/dist/components/editor/embedded-editor-surface.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+  import { onMount, untrack } from "svelte";
+  import type { App, Editor, WorkspaceLeaf } from "../..";
+  import { Editor as EditorController } from "../../editor.svelte";
+  import NoteEditor from "./editor.svelte";
+  import { applyEmbeddedEditorExtensions } from "./embedded-editor-surface";
+
+  let {
+    app,
+    leaf,
+    editor: providedEditor,
+    value = "",
+    viewType = "markdown",
+    mode = "source",
+    sourcePath = "",
+    fallbackLanguage = viewType,
+    scrollOwner = "self",
+    class: className = "",
+    onChange,
+  }: {
+    app: App;
+    leaf?: WorkspaceLeaf;
+    editor?: Editor;
+    value?: string;
+    viewType?: string;
+    mode?: string;
+    sourcePath?: string;
+    fallbackLanguage?: string;
+    scrollOwner?: "self" | "ancestor";
+    class?: string;
+    onChange?: (value: string) => void | Promise<void>;
+  } = $props();
+
+  const initial = untrack(() => ({ app, providedEditor, value }));
+  const ownsEditor = initial.providedEditor === undefined;
+  const editor =
+    initial.providedEditor ??
+    new EditorController(initial.value, [], initial.app);
+  editor.bindApplication(initial.app);
+
+  function refreshExtensions(): void {
+    applyEmbeddedEditorExtensions(app, editor, {
+      viewType,
+      mode,
+      sourcePath,
+      fallbackLanguage,
+    });
+  }
+
+  $effect(() => {
+    viewType;
+    mode;
+    sourcePath;
+    fallbackLanguage;
+    refreshExtensions();
+  });
+
+  $effect(() => {
+    if (ownsEditor && value !== editor.getValue()) {
+      editor.replaceContent(value);
+    }
+  });
+
+  onMount(() => {
+    const changed = editor.on("change", (next) => {
+      void onChange?.(next);
+    });
+    const configurationChanged = app.configuration.on("updated", () => {
+      refreshExtensions();
+    });
+    const pluginEnabled = app.plugins?.on("plugin-enabled", () => {
+      refreshExtensions();
+    });
+    const pluginDisabled = app.plugins?.on("plugin-disabled", () => {
+      refreshExtensions();
+    });
+
+    return () => {
+      const flushed = editor.flushChanges();
+      editor.offref(changed);
+      app.configuration.offref(configurationChanged);
+      if (pluginEnabled) app.plugins.offref(pluginEnabled);
+      if (pluginDisabled) app.plugins.offref(pluginDisabled);
+      void flushed.finally(() => {
+        if (ownsEditor) editor.destroy();
+      });
+    };
+  });
+</script>
+
+<div
+  class={["embedded-editor-surface", className].filter(Boolean).join(" ")}
+  data-ui-component="embedded-editor-surface"
+  data-ui-part="root"
+  data-editor-view-type={viewType}
+  data-editor-mode={mode}
+  data-editor-scroll-owner={scrollOwner}
+>
+  <NoteEditor {app} {leaf} {editor} {scrollOwner} />
+</div>
+
+<style>
+  .embedded-editor-surface {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: hidden;
+    width: 100%;
+  }
+
+  .embedded-editor-surface :global(.cm-editor-scroll-area) {
+    flex: 1 1 auto;
+    min-height: 0;
+  }
+</style>

package/dist/components/editor/embedded-editor-surface.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { App, Editor, WorkspaceLeaf } from "../..";
+type $$ComponentProps = {
+    app: App;
+    leaf?: WorkspaceLeaf;
+    editor?: Editor;
+    value?: string;
+    viewType?: string;
+    mode?: string;
+    sourcePath?: string;
+    fallbackLanguage?: string;
+    scrollOwner?: "self" | "ancestor";
+    class?: string;
+    onChange?: (value: string) => void | Promise<void>;
+};
+declare const EmbeddedEditorSurface: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmbeddedEditorSurface = ReturnType<typeof EmbeddedEditorSurface>;
+export default EmbeddedEditorSurface;

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

@@ -0,0 +1,2 @@
+export { lapisCodeMirrorAutocomplete, type LapisCodeMirrorAutocompleteConfig, } from "./lapis-code-mirror-autocomplete";
+export { vaultFilesMatchingPathSubstring, markdownNotesVaultFilter, embeddableMediaVaultFilter, isImageEmbedLinkPath, type VaultFilePredicate, type VaultFilesPathMatchOptions, } from "./vault-completion-sources";

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

@@ -0,0 +1,2 @@
+export { lapisCodeMirrorAutocomplete, } from "./lapis-code-mirror-autocomplete";
+export { vaultFilesMatchingPathSubstring, markdownNotesVaultFilter, embeddableMediaVaultFilter, isImageEmbedLinkPath, } from "./vault-completion-sources";

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

@@ -0,0 +1,16 @@
+import { autocompletion } from "@codemirror/autocomplete";
+import type { Extension } from "@codemirror/state";
+/** Options accepted by `@codemirror/autocomplete`'s `autocompletion()`. */
+export type LapisCodeMirrorAutocompleteConfig = Exclude<Parameters<typeof autocompletion>[0], undefined>;
+/**
+ * Shared CodeMirror autocompletion defaults for Lapis editors. Popover-aligned
+ * surfaces come from `@lapis-notes/ui/codemirror-autocomplete.css`; this sets
+ * shared defaults (e.g. `icons: false`) plus a light `EditorView.theme`.
+ *
+ * **Facet merge:** multiple `autocompletion()` extensions merge completion
+ * config (`addToOptions` concatenate; `optionClass` / `tooltipClass` join with
+ * spaces; `icons` uses AND). Avoid defining conflicting `override` arrays in
+ * two extensions — either pass every `CompletionSource` in one call or rely on
+ * a single extension that provides `override`.
+ */
+export declare function lapisCodeMirrorAutocomplete(config?: LapisCodeMirrorAutocompleteConfig): Extension[];

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

@@ -0,0 +1,34 @@
+import { autocompletion } from "@codemirror/autocomplete";
+import { EditorView } from "@codemirror/view";
+/**
+ * Align tooltip typography with the app shell. List chrome is themed via
+ * `@lapis-notes/ui/codemirror-autocomplete.css`.
+ */
+const lapisAutocompleteTooltipTheme = EditorView.theme({
+    ".cm-tooltip.cm-tooltip-autocomplete": {
+        fontFamily: "inherit",
+    },
+    ".cm-tooltip.cm-completionInfo": {
+        fontFamily: "inherit",
+    },
+});
+/**
+ * Shared CodeMirror autocompletion defaults for Lapis editors. Popover-aligned
+ * surfaces come from `@lapis-notes/ui/codemirror-autocomplete.css`; this sets
+ * shared defaults (e.g. `icons: false`) plus a light `EditorView.theme`.
+ *
+ * **Facet merge:** multiple `autocompletion()` extensions merge completion
+ * config (`addToOptions` concatenate; `optionClass` / `tooltipClass` join with
+ * spaces; `icons` uses AND). Avoid defining conflicting `override` arrays in
+ * two extensions — either pass every `CompletionSource` in one call or rely on
+ * a single extension that provides `override`.
+ */
+export function lapisCodeMirrorAutocomplete(config = {}) {
+    return [
+        lapisAutocompleteTooltipTheme,
+        autocompletion({
+            ...config,
+            icons: false,
+        }),
+    ];
+}

package/dist/components/editor/extensions/autocomplete/vault-completion-sources.d.ts

@@ -0,0 +1,27 @@
+import type { TFile } from "../../../../storage/fs";
+import type { App } from "../../../../context.svelte";
+export type VaultFilePredicate = (file: TFile) => boolean;
+/** Markdown notes only — useful for wiki-link targets. */
+export declare function markdownNotesVaultFilter(file: TFile): boolean;
+/**
+ * Common raster / SVG extensions suitable for embed completions (![[...]]).
+ * Aligns with plugin-markdown media MIME keys where practical.
+ */
+export declare function embeddableMediaVaultFilter(file: TFile): boolean;
+/**
+ * True when `linkPath` (wiki target or path string) uses an image-like
+ * extension. Replaces plugin-local string checks against `isImageAsset`.
+ */
+export declare function isImageEmbedLinkPath(linkPath: string): boolean;
+export interface VaultFilesPathMatchOptions {
+    /** Application that owns the vault. */
+    app?: App;
+    filter?: VaultFilePredicate;
+    /** Max matches (default 150). */
+    limit?: number;
+}
+/**
+ * Vault files whose path contains `query`, optionally filtered, capped for UI
+ * performance.
+ */
+export declare function vaultFilesMatchingPathSubstring(query: string, options?: VaultFilesPathMatchOptions): TFile[];

package/dist/components/editor/extensions/autocomplete/vault-completion-sources.js

@@ -0,0 +1,55 @@
+import { resolveApplication } from "../../../../application-compatibility";
+const IMAGE_EMBED_EXTENSIONS = new Set([
+    "png",
+    "jpg",
+    "jpeg",
+    "gif",
+    "webp",
+    "svg",
+    "bmp",
+    "ico",
+    "tif",
+    "tiff",
+    "avif",
+    "apng",
+]);
+/** Markdown notes only — useful for wiki-link targets. */
+export function markdownNotesVaultFilter(file) {
+    const ext = file.extension.toLowerCase();
+    return ext === "md" || ext === "markdown";
+}
+/**
+ * Common raster / SVG extensions suitable for embed completions (![[...]]).
+ * Aligns with plugin-markdown media MIME keys where practical.
+ */
+export function embeddableMediaVaultFilter(file) {
+    return IMAGE_EMBED_EXTENSIONS.has(file.extension.toLowerCase());
+}
+/**
+ * True when `linkPath` (wiki target or path string) uses an image-like
+ * extension. Replaces plugin-local string checks against `isImageAsset`.
+ */
+export function isImageEmbedLinkPath(linkPath) {
+    const index = linkPath.lastIndexOf(".");
+    if (index === -1) {
+        return false;
+    }
+    return IMAGE_EMBED_EXTENSIONS.has(linkPath.slice(index + 1).toLowerCase());
+}
+/**
+ * Vault files whose path contains `query`, optionally filtered, capped for UI
+ * performance.
+ */
+export function vaultFilesMatchingPathSubstring(query, options = {}) {
+    const limit = options.limit ?? 150;
+    const filter = options.filter;
+    const application = resolveApplication(options.app);
+    return application.vault
+        .getFiles()
+        .filter((file) => {
+        if (filter && !filter(file))
+            return false;
+        return file.path.includes(query);
+    })
+        .slice(0, limit);
+}

package/dist/components/editor/extensions/class-highlighter/index.d.ts

@@ -0,0 +1 @@
+export declare const classHighlighter: import("@lezer/highlight").Highlighter;