@lapis-notes/lapis-plugin-docs 0.0.0-stage → 0.1.0

package/dist/docs/lapis-markdown-extensions.js

@@ -0,0 +1,128 @@
+import { createMiraEditorExtensions } from "@lapismd/mira-editor";
+import { defineMiraExtension, } from "@lapismd/mira/extensions";
+const DOCS_MARKDOWN_SURFACE = { id: "docs" };
+/** Host stubs take no arguments. A provided renderer accepts the markdown string. */
+export function providedMarkdownRenderer(app) {
+    const renderer = app?.props.markdownRenderer;
+    if (typeof renderer !== "function" || renderer.length === 0)
+        return null;
+    return renderer;
+}
+/**
+ * Reading extensions used by the Lapis Markdown view: Mira's Mermaid plugin
+ * plus every Markdown post-processor registered with the host.
+ */
+export function lapisMarkdownExtensions(app, sourcePath, markdown) {
+    const mermaidSetting = app?.configuration
+        .getConfiguration()
+        .get("markdown.mira.plugins.mermaid.enabled", true);
+    const mermaidEnabled = mermaidSetting ?? true;
+    const extensions = createMiraEditorExtensions({
+        features: { mermaid: mermaidEnabled },
+    });
+    if (!app)
+        return extensions;
+    const processors = [
+        ...app.markdownExtensions
+            .getAll()
+            .flatMap((contribution) => contribution.postProcessor ? [contribution.postProcessor] : []),
+        ...(app.mardownPostProcessor ?? []),
+    ];
+    const codeBlockProcessors = app.mardownCodeBlockPostProcessor ?? {};
+    if (processors.length === 0 &&
+        Object.keys(codeBlockProcessors).length === 0) {
+        return extensions;
+    }
+    return [
+        ...extensions,
+        defineMiraExtension({
+            name: "lapis-markdown-plugins",
+            postProcessors: [
+                adaptLapisMarkdownPlugins(app, {
+                    sourcePath,
+                    markdown,
+                    processors,
+                    codeBlockProcessors,
+                }),
+            ],
+        }),
+    ];
+}
+function adaptLapisMarkdownPlugins(app, options) {
+    return (el, node) => {
+        let disposed = false;
+        const children = [];
+        const context = {
+            docId: options.sourcePath,
+            sourcePath: options.sourcePath,
+            frontmatter: null,
+            mode: "reading",
+            surface: DOCS_MARKDOWN_SURFACE,
+            addChild(child) {
+                children.push(child);
+                child.load();
+            },
+            getSectionInfo(target) {
+                return target === el ? sectionInfo(options.markdown, node) : null;
+            },
+        };
+        void app.metadataCache
+            .getFileCacheAsync(options.sourcePath)
+            .then(async (metadata) => {
+            if (disposed)
+                return;
+            context.frontmatter = metadata?.frontmatter ?? null;
+            for (const processor of options.processors) {
+                if (disposed)
+                    return;
+                await processor(el, context);
+            }
+            await runCodeBlockProcessors(el, context, options.codeBlockProcessors);
+        });
+        return () => {
+            disposed = true;
+            for (const child of children.splice(0).reverse())
+                child.unload();
+        };
+    };
+}
+async function runCodeBlockProcessors(el, context, processors) {
+    const blocks = el.querySelectorAll("pre");
+    for (const block of blocks) {
+        const code = block.querySelector("code");
+        const language = [...(code?.classList ?? [])]
+            .find((name) => name.startsWith("language-"))
+            ?.slice("language-".length);
+        if (!language)
+            continue;
+        for (const processor of processors[language] ?? []) {
+            await processor(block, context);
+        }
+    }
+}
+function sectionInfo(markdown, node) {
+    const typed = node;
+    const start = typed.position?.start?.offset;
+    const nodeEnd = typed.position?.end?.offset;
+    if (typeof start !== "number" || typeof nodeEnd !== "number")
+        return null;
+    let end = nodeEnd;
+    if (typed.type === "heading" && typeof typed.depth === "number") {
+        const heading = /^ {0,3}(#{1,6})\s+/gm;
+        for (const match of markdown.slice(nodeEnd).matchAll(heading)) {
+            if ((match[1]?.length ?? 7) <= typed.depth) {
+                end = nodeEnd + (match.index ?? 0);
+                break;
+            }
+        }
+        if (end === nodeEnd)
+            end = markdown.length;
+    }
+    const text = markdown.slice(start, end).replace(/\n+$/, "");
+    const lineStart = markdown.slice(0, start).split("\n").length - 1;
+    return {
+        text,
+        lineStart,
+        lineEnd: lineStart + text.split("\n").length - 1,
+    };
+}

package/dist/docs/pin-reading-chrome.d.ts

@@ -0,0 +1,4 @@
+/** Keep reading chrome inside the visible document body, not the workspace sidebars. */
+export declare function pinReadingChrome(node: HTMLElement): {
+    destroy(): void;
+};

package/dist/docs/pin-reading-chrome.js

@@ -0,0 +1,32 @@
+/** Keep reading chrome inside the visible document body, not the workspace sidebars. */
+export function pinReadingChrome(node) {
+    const place = () => {
+        const frame = node.closest(".docs-display-view");
+        if (!(frame instanceof HTMLElement))
+            return;
+        const rect = frame.getBoundingClientRect();
+        node.style.position = "fixed";
+        node.style.top = `${rect.top}px`;
+        node.style.left = `${rect.left}px`;
+        node.style.width = `${rect.width}px`;
+        node.style.height = `${rect.height}px`;
+        node.style.right = "auto";
+        node.style.bottom = "auto";
+    };
+    place();
+    const frame = node.closest(".docs-display-view");
+    const observer = frame && typeof ResizeObserver !== "undefined"
+        ? new ResizeObserver(place)
+        : null;
+    if (frame)
+        observer?.observe(frame);
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    return {
+        destroy() {
+            observer?.disconnect();
+            window.removeEventListener("scroll", place, true);
+            window.removeEventListener("resize", place);
+        },
+    };
+}

package/dist/docs/sidebar/DocsFoldersSidebar.svelte

@@ -0,0 +1,134 @@
+<script lang="ts">
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import {
+    docsNoteCardCount,
+    type DocsNotePanel,
+    type DocsNoteSummary,
+  } from "../../model";
+  import { isDocsSidebarPanelActive } from "../docs-folder-directory";
+  import {
+    DOCS_SOURCE_ROOT_ID,
+    createDocsSourceFolderTree,
+    filterDocsSourceFolderTree,
+    type DocsSourceFolderTreeNode,
+  } from "./docs-source-folder-tree";
+  import { DEFAULT_DOCS_NOTE_SORT, type DocsNoteSortMode } from "./docs-note-sort";
+
+  let {
+    notes = [],
+    sortMode = DEFAULT_DOCS_NOTE_SORT,
+    query = "",
+    activeNoteId = null,
+    activePanel = "display",
+    openNodes = $bindable<Record<string, boolean>>({}),
+    onSelectNote = () => {},
+    onSelectPanel = () => {},
+  }: {
+    notes?: DocsNoteSummary[];
+    sortMode?: DocsNoteSortMode;
+    query?: string;
+    activeNoteId?: string | null;
+    activePanel?: DocsNotePanel;
+    openNodes?: Record<string, boolean>;
+    onSelectNote?: (noteId: string) => void;
+    onSelectPanel?: (noteId: string, panel: DocsNotePanel) => void;
+  } = $props();
+
+  const tree = $derived.by(() => {
+    const built = createDocsSourceFolderTree(notes, sortMode);
+    return filterDocsSourceFolderTree(built, query, sortMode) ?? built;
+  });
+  let expandedNotes = $state<Record<string, boolean>>({});
+
+  function folderOpen(id: string) {
+    if (id === DOCS_SOURCE_ROOT_ID) return openNodes[id] !== false;
+    return openNodes[id] === true;
+  }
+
+  function toggleFolder(id: string) {
+    openNodes = { ...openNodes, [id]: !folderOpen(id) };
+  }
+
+  function noteOpen(noteId: string) {
+    return activeNoteId === noteId ? expandedNotes[noteId] !== false : expandedNotes[noteId] === true;
+  }
+
+  function panels(note: DocsNoteSummary) {
+    return [
+      { id: "note" as const, label: "Note" },
+      { id: "cards" as const, label: "Cards", count: docsNoteCardCount(note) },
+      { id: "review" as const, label: "Review", count: note.dueCardCount ?? 0 },
+    ];
+  }
+</script>
+
+{#snippet folder(node: DocsSourceFolderTreeNode, depth: number)}
+  <div class="docs-sidebar__group">
+    <button
+      type="button"
+      class="docs-sidebar__row"
+      style={`padding-inline-start: ${0.2 + depth * 0.85}rem`}
+      onclick={() => toggleFolder(node.id)}
+    >
+      <span class="docs-sidebar__chevron" data-open={folderOpen(node.id) ? "true" : "false"}>
+        <ChevronRightIcon aria-hidden="true" />
+      </span>
+      <span class="docs-sidebar__label">{node.label}</span>
+      <span class="docs-sidebar__count">{node.count}</span>
+    </button>
+    {#if folderOpen(node.id)}
+      {#each node.children as child (child.id)}
+        {@render folder(child, depth + 1)}
+      {/each}
+      {#each node.notes as note (note.id)}
+        {@render noteRow(note, depth + 1)}
+      {/each}
+    {/if}
+  </div>
+{/snippet}
+
+{#snippet noteRow(note: DocsNoteSummary, depth: number)}
+  <div class="docs-sidebar__group">
+    <button
+      type="button"
+      class="docs-sidebar__row"
+      style={`padding-inline-start: ${0.2 + depth * 0.85}rem`}
+      aria-current={activeNoteId === note.id ? "true" : undefined}
+      onclick={() => {
+        expandedNotes = { ...expandedNotes, [note.id]: true };
+        onSelectNote(note.id);
+      }}
+    >
+      <span
+        class="docs-sidebar__chevron"
+        data-open={noteOpen(note.id) ? "true" : "false"}
+        role="presentation"
+        onclick={(event) => {
+          event.stopPropagation();
+          expandedNotes = { ...expandedNotes, [note.id]: !noteOpen(note.id) };
+        }}
+      >
+        <ChevronRightIcon aria-hidden="true" />
+      </span>
+      <span class="docs-sidebar__label">{note.title}</span>
+    </button>
+    {#if noteOpen(note.id)}
+      {#each panels(note) as panel (panel.id)}
+        <button
+          type="button"
+          class="docs-sidebar__panel"
+          style={`padding-inline-start: ${1.3 + depth * 0.85}rem`}
+          aria-current={activeNoteId === note.id && isDocsSidebarPanelActive(activePanel, panel.id) ? "true" : undefined}
+          onclick={() => onSelectPanel(note.id, panel.id)}
+        >
+          <span class="docs-sidebar__label">{panel.label}</span>
+          {#if panel.count}
+            <span class="docs-sidebar__count">{panel.count}</span>
+          {/if}
+        </button>
+      {/each}
+    {/if}
+  </div>
+{/snippet}
+
+{@render folder(tree, 0)}

package/dist/docs/sidebar/DocsFoldersSidebar.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type DocsNotePanel, type DocsNoteSummary } from "../../model";
+import { type DocsNoteSortMode } from "./docs-note-sort";
+type $$ComponentProps = {
+    notes?: DocsNoteSummary[];
+    sortMode?: DocsNoteSortMode;
+    query?: string;
+    activeNoteId?: string | null;
+    activePanel?: DocsNotePanel;
+    openNodes?: Record<string, boolean>;
+    onSelectNote?: (noteId: string) => void;
+    onSelectPanel?: (noteId: string, panel: DocsNotePanel) => void;
+};
+declare const DocsFoldersSidebar: import("svelte").Component<$$ComponentProps, {}, "openNodes">;
+type DocsFoldersSidebar = ReturnType<typeof DocsFoldersSidebar>;
+export default DocsFoldersSidebar;

package/dist/docs/sidebar/DocsLinksSidebar.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+  import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
+  import type { DocsBacklink, DocsNoteSummary, DocsWikiLink } from "../../model";
+
+  let {
+    notes = [],
+    backlinks = [],
+    outgoingLinks = [],
+    ambiguousLinks = [],
+    onSelectNote = () => {},
+  }: {
+    notes?: DocsNoteSummary[];
+    backlinks?: DocsBacklink[];
+    outgoingLinks?: DocsWikiLink[];
+    ambiguousLinks?: DocsWikiLink[];
+    onSelectNote?: (noteId: string) => void;
+  } = $props();
+
+  let openGroups = $state<Record<string, boolean>>({
+    backlinks: true,
+    outgoing: true,
+    ambiguous: true,
+  });
+
+  const titleById = $derived(new Map(notes.map((note) => [note.id, note.title])));
+  const visibleOutgoing = $derived(
+    outgoingLinks.filter((link) => !(link.ambiguousNoteIds?.length ?? 0)),
+  );
+
+  function toggle(group: string) {
+    openGroups = { ...openGroups, [group]: !openGroups[group] };
+  }
+</script>
+
+<div class="docs-sidebar__group">
+  <button type="button" class="docs-sidebar__row" onclick={() => toggle("backlinks")}>
+    <span class="docs-sidebar__chevron" data-open={openGroups.backlinks ? "true" : "false"}>
+      <ChevronRightIcon aria-hidden="true" />
+    </span>
+    <span class="docs-sidebar__label">Backlinks</span>
+    <span class="docs-sidebar__count">{backlinks.length}</span>
+  </button>
+  {#if openGroups.backlinks}
+    <div class="docs-sidebar__children">{@render backlinkList()}</div>
+  {/if}
+  <button type="button" class="docs-sidebar__row" onclick={() => toggle("outgoing")}>
+    <span class="docs-sidebar__chevron" data-open={openGroups.outgoing ? "true" : "false"}>
+      <ChevronRightIcon aria-hidden="true" />
+    </span>
+    <span class="docs-sidebar__label">Outgoing</span>
+    <span class="docs-sidebar__count">{visibleOutgoing.length}</span>
+  </button>
+  {#if openGroups.outgoing}
+    <div class="docs-sidebar__children">{@render outgoingList()}</div>
+  {/if}
+  <button type="button" class="docs-sidebar__row" onclick={() => toggle("ambiguous")}>
+    <span class="docs-sidebar__chevron" data-open={openGroups.ambiguous ? "true" : "false"}>
+      <ChevronRightIcon aria-hidden="true" />
+    </span>
+    <span class="docs-sidebar__label">Ambiguous</span>
+    <span class="docs-sidebar__count">{ambiguousLinks.length}</span>
+  </button>
+  {#if openGroups.ambiguous}
+    <div class="docs-sidebar__children">{@render ambiguousList()}</div>
+  {/if}
+</div>
+
+{#snippet backlinkList()}
+  {#each backlinks as link (`${link.sourceNoteId}:${link.raw}`)}
+    <button
+      type="button"
+      class="docs-sidebar__row"
+      style="padding-inline-start: 1.6rem"
+      onclick={() => onSelectNote(link.sourceNoteId)}
+    >
+      <span class="docs-sidebar__label">{link.sourceTitle || titleById.get(link.sourceNoteId) || link.sourceNoteId}</span>
+    </button>
+  {:else}
+    <p class="docs-sidebar__empty">No backlinks.</p>
+  {/each}
+{/snippet}
+
+{#snippet outgoingList()}
+  {#each visibleOutgoing as link (`${link.target}:${link.index}`)}
+    <button
+      type="button"
+      class="docs-sidebar__row"
+      style="padding-inline-start: 1.6rem"
+      disabled={!link.resolvedNoteId}
+      onclick={() => link.resolvedNoteId && onSelectNote(link.resolvedNoteId)}
+    >
+      <span class="docs-sidebar__label">{link.label || titleById.get(link.resolvedNoteId ?? "") || link.target}</span>
+    </button>
+  {:else}
+    <p class="docs-sidebar__empty">No outgoing links.</p>
+  {/each}
+{/snippet}
+
+{#snippet ambiguousList()}
+  {#each ambiguousLinks as link (`ambiguous:${link.target}:${link.index}`)}
+    <p class="docs-sidebar__empty">{link.label || link.raw}</p>
+  {:else}
+    <p class="docs-sidebar__empty">No ambiguous links.</p>
+  {/each}
+{/snippet}

package/dist/docs/sidebar/DocsLinksSidebar.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { DocsBacklink, DocsNoteSummary, DocsWikiLink } from "../../model";
+type $$ComponentProps = {
+    notes?: DocsNoteSummary[];
+    backlinks?: DocsBacklink[];
+    outgoingLinks?: DocsWikiLink[];
+    ambiguousLinks?: DocsWikiLink[];
+    onSelectNote?: (noteId: string) => void;
+};
+declare const DocsLinksSidebar: import("svelte").Component<$$ComponentProps, {}, "">;
+type DocsLinksSidebar = ReturnType<typeof DocsLinksSidebar>;
+export default DocsLinksSidebar;