@lapis-notes/csv 0.0.0-stage → 0.2.0

package/dist/lib/components/csv-data-table.svelte.d.ts

@@ -0,0 +1,21 @@
+import { CsvGrid } from "../model/csv-grid";
+type Props = {
+    grid: CsvGrid;
+    headerRow: boolean;
+    showRowNumbers: boolean;
+    scrollViewport?: HTMLElement | null;
+    /** Grid row indexes to keep. Null shows every body row. */
+    rowFilter?: ReadonlySet<number> | null;
+    searchCell?: {
+        row: number;
+        col: number;
+    } | null;
+    onChange: (grid: CsvGrid) => void;
+    onSettingsChange?: (patch: {
+        headerRow?: boolean;
+    }) => void;
+    onToggleSource?: () => void;
+};
+declare const CsvDataTable: import("svelte").Component<Props, {}, "">;
+type CsvDataTable = ReturnType<typeof CsvDataTable>;
+export default CsvDataTable;

package/dist/lib/components/csv-find.svelte

@@ -0,0 +1,382 @@
+<script lang="ts">
+  import type { Attachment } from "svelte/attachments";
+  import { setSearchQuery } from "@codemirror/search";
+  import type { EditorView } from "@codemirror/view";
+  import { cn } from "@lapis-notes/ui";
+  import ArrowDown from "@lucide/svelte/icons/arrow-down";
+  import ArrowUp from "@lucide/svelte/icons/arrow-up";
+  import CaseSensitive from "@lucide/svelte/icons/case-sensitive";
+  import ChevronDown from "@lucide/svelte/icons/chevron-down";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
+  import Regex from "@lucide/svelte/icons/regex";
+  import Replace from "@lucide/svelte/icons/replace";
+  import ReplaceAll from "@lucide/svelte/icons/replace-all";
+  import SearchIcon from "@lucide/svelte/icons/search";
+  import WholeWord from "@lucide/svelte/icons/whole-word";
+  import X from "@lucide/svelte/icons/x";
+  import {
+    csvCellMatches,
+    csvDocumentMatches,
+    csvSearchQuery,
+    replaceCellText,
+    searchReplacement,
+    type CsvCellMatch,
+  } from "../model/csv-search";
+  import "../../styles/csv-find.css";
+
+  type CellEdit = { row: number; col: number; value: string };
+
+  let {
+    open = $bindable(false),
+    searchRequest = 0,
+    rows = [],
+    editor = null,
+    revision = 0,
+    searchValue = $bindable(""),
+    replaceValue = $bindable(""),
+    caseSensitive = $bindable(false),
+    wholeWord = $bindable(false),
+    regexp = $bindable(false),
+    active = $bindable(0),
+    onReplaceCells,
+  }: {
+    open?: boolean;
+    searchRequest?: number;
+    rows?: readonly (readonly string[])[];
+    editor?: EditorView | null;
+    revision?: number;
+    searchValue?: string;
+    replaceValue?: string;
+    caseSensitive?: boolean;
+    wholeWord?: boolean;
+    regexp?: boolean;
+    active?: number;
+    onReplaceCells?: (edits: CellEdit[]) => void;
+  } = $props();
+
+  let replaceOpen = $state(false);
+
+  const canReplace = $derived(editor != null || onReplaceCells != null);
+
+  function readQuery() {
+    return csvSearchQuery({
+      search: searchValue,
+      replace: replaceValue,
+      caseSensitive,
+      wholeWord,
+      regexp,
+    });
+  }
+
+  const tableMatches = $derived.by(() => {
+    if (editor) return [];
+    return csvCellMatches(rows, readQuery());
+  });
+  const sourceMatches = $derived.by(() => {
+    if (!editor) return [];
+    void revision;
+    return csvDocumentMatches(editor.state.doc, readQuery());
+  });
+  const matchCount = $derived(
+    editor ? sourceMatches.length : tableMatches.length,
+  );
+  const currentIndex = $derived(
+    matchCount === 0 ? 0 : Math.min(active, matchCount - 1),
+  );
+  const noMatches = $derived(
+    Boolean(searchValue) && (!readQuery().valid || matchCount === 0),
+  );
+  const status = $derived(
+    !searchValue
+      ? ""
+      : noMatches
+        ? "No matches"
+        : `${currentIndex + 1} of ${matchCount}`,
+  );
+
+  function close() {
+    open = false;
+  }
+
+  function move(delta: number) {
+    if (matchCount === 0) return;
+    active = (currentIndex + delta + matchCount) % matchCount;
+  }
+
+  function replaceTable(list: readonly CsvCellMatch[]) {
+    if (!onReplaceCells || list.length === 0) return;
+    const query = readQuery();
+    const groups: Record<string, CsvCellMatch[]> = {};
+    for (const match of list) {
+      const key = `${match.row}:${match.col}`;
+      const group = groups[key] ?? [];
+      group.push(match);
+      groups[key] = group;
+    }
+    const edits: CellEdit[] = [];
+    for (const group of Object.values(groups)) {
+      const first = group[0];
+      if (!first) continue;
+      const cell = rows[first.row]?.[first.col] ?? "";
+      edits.push({
+        row: first.row,
+        col: first.col,
+        value: replaceCellText(cell, group, query),
+      });
+    }
+    onReplaceCells(edits);
+  }
+
+  function replaceSource(list: readonly { from: number; to: number }[]) {
+    const view = editor;
+    if (!view || list.length === 0) return;
+    const query = readQuery();
+    view.dispatch({
+      changes: [...list]
+        .sort((left, right) => right.from - left.from)
+        .map((match) => ({
+          from: match.from,
+          to: match.to,
+          insert: searchReplacement(
+            query,
+            view.state.sliceDoc(match.from, match.to),
+          ),
+        })),
+    });
+  }
+
+  function replaceCurrent() {
+    if (editor) {
+      const match = sourceMatches[currentIndex];
+      if (match) replaceSource([match]);
+      return;
+    }
+    const match = tableMatches[currentIndex];
+    if (match) replaceTable([match]);
+  }
+
+  function replaceAll() {
+    if (editor) {
+      replaceSource(sourceMatches);
+      return;
+    }
+    replaceTable(tableMatches);
+  }
+
+  function onKeydown(event: KeyboardEvent) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      close();
+      return;
+    }
+    if (event.key !== "Enter") return;
+    event.preventDefault();
+    move(event.shiftKey ? -1 : 1);
+  }
+
+  const sourcePaintKey = $derived(
+    editor
+      ? [
+          revision,
+          open ? 1 : 0,
+          searchValue,
+          replaceValue,
+          caseSensitive ? 1 : 0,
+          wholeWord ? 1 : 0,
+          regexp ? 1 : 0,
+          active,
+        ].join("\u0000")
+      : "table",
+  );
+
+  const paintSource: Attachment<HTMLElement> = () => {
+    const view = editor;
+    if (!view) return;
+    const query = readQuery();
+    const shown = open;
+    const index = currentIndex;
+    view.dispatch({
+      effects: setSearchQuery.of(shown ? query : csvSearchQuery({ search: "" })),
+    });
+    if (!shown) return;
+    const list = csvDocumentMatches(view.state.doc, query);
+    const match = list[index];
+    if (!match) return;
+    const selection = view.state.selection.main;
+    if (selection.from === match.from && selection.to === match.to) return;
+    view.dispatch({
+      selection: { anchor: match.from, head: match.to },
+      scrollIntoView: true,
+    });
+  };
+
+  const focusSearchField: Attachment<HTMLInputElement> = (node) => {
+    node.focus();
+    node.select();
+  };
+</script>
+
+{#key sourcePaintKey}
+  <span hidden {@attach paintSource}></span>
+{/key}
+
+{#if open}
+  <search class="ui-transcript-search" data-csv-find>
+    <div class="ui-transcript-search__body">
+      {#if canReplace}
+        <button
+          type="button"
+          class="ui-transcript-search__button"
+          aria-label="Toggle replace"
+          aria-expanded={replaceOpen}
+          title="Toggle replace"
+          onclick={() => (replaceOpen = !replaceOpen)}
+        >
+          {#if replaceOpen}
+            <ChevronDown size={16} aria-hidden="true" />
+          {:else}
+            <ChevronRight size={16} aria-hidden="true" />
+          {/if}
+        </button>
+      {/if}
+      <div class="ui-transcript-search__fields">
+        <div class="ui-transcript-search__row">
+          <div
+            class={cn("ui-transcript-search__field", {
+              "ui-transcript-search__field--invalid": noMatches,
+            })}
+          >
+            <span class="ui-transcript-search__find-icon">
+              <SearchIcon size={16} aria-hidden="true" />
+            </span>
+            {#key searchRequest}
+              <input
+                {@attach focusSearchField}
+                class="ui-transcript-search__input"
+                type="text"
+                placeholder="Find"
+                aria-label="Find"
+                aria-invalid={noMatches}
+                value={searchValue}
+                onkeydown={onKeydown}
+                oninput={(event) => {
+                  searchValue = event.currentTarget.value;
+                  active = 0;
+                }}
+              />
+            {/key}
+            {#if status}
+              <span class="ui-transcript-search__count">{status}</span>
+            {/if}
+            <div
+              class="ui-transcript-search__options"
+              role="group"
+              aria-label="Search options"
+            >
+              <button
+                type="button"
+                class={cn(
+                  "ui-transcript-search__button ui-transcript-search__toggle",
+                  { "ui-transcript-search__button--active": caseSensitive },
+                )}
+                aria-label="Case sensitive"
+                aria-pressed={caseSensitive}
+                title="Case sensitive"
+                onclick={() => (caseSensitive = !caseSensitive)}
+              >
+                <CaseSensitive size={16} aria-hidden="true" />
+              </button>
+              <button
+                type="button"
+                class={cn(
+                  "ui-transcript-search__button ui-transcript-search__toggle",
+                  { "ui-transcript-search__button--active": wholeWord },
+                )}
+                aria-label="Match whole word"
+                aria-pressed={wholeWord}
+                title="Match whole word"
+                onclick={() => (wholeWord = !wholeWord)}
+              >
+                <WholeWord size={16} aria-hidden="true" />
+              </button>
+              <button
+                type="button"
+                class={cn(
+                  "ui-transcript-search__button ui-transcript-search__toggle",
+                  { "ui-transcript-search__button--active": regexp },
+                )}
+                aria-label="Use regular expression"
+                aria-pressed={regexp}
+                title="Use regular expression"
+                onclick={() => (regexp = !regexp)}
+              >
+                <Regex size={16} aria-hidden="true" />
+              </button>
+            </div>
+          </div>
+          <button
+            type="button"
+            class="ui-transcript-search__button"
+            aria-label="Previous match"
+            title="Previous match"
+            onclick={() => move(-1)}
+          >
+            <ArrowUp size={16} aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="ui-transcript-search__button"
+            aria-label="Next match"
+            title="Next match"
+            onclick={() => move(1)}
+          >
+            <ArrowDown size={16} aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="ui-transcript-search__button"
+            aria-label="Close search"
+            title="Close search"
+            onclick={close}
+          >
+            <X size={16} aria-hidden="true" />
+          </button>
+        </div>
+        {#if replaceOpen && canReplace}
+          <div
+            class="ui-transcript-search__row ui-transcript-search__replace-row"
+          >
+            <input
+              class="ui-transcript-search__input ui-transcript-search__replace-input"
+              type="text"
+              placeholder="Replace"
+              aria-label="Replace"
+              value={replaceValue}
+              onkeydown={onKeydown}
+              oninput={(event) => (replaceValue = event.currentTarget.value)}
+            />
+            <button
+              type="button"
+              class="ui-transcript-search__button"
+              aria-label="Replace match"
+              title="Replace match"
+              onclick={replaceCurrent}
+            >
+              <Replace size={16} aria-hidden="true" />
+            </button>
+            <button
+              type="button"
+              class="ui-transcript-search__button"
+              aria-label="Replace all matches"
+              title="Replace all"
+              onclick={replaceAll}
+            >
+              <ReplaceAll size={16} aria-hidden="true" />
+            </button>
+          </div>
+        {/if}
+      </div>
+    </div>
+    <span class="ui-transcript-search__status" role="status">{status}</span>
+  </search>
+{/if}

package/dist/lib/components/csv-find.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { EditorView } from "@codemirror/view";
+import "../../styles/csv-find.css";
+type CellEdit = {
+    row: number;
+    col: number;
+    value: string;
+};
+type $$ComponentProps = {
+    open?: boolean;
+    searchRequest?: number;
+    rows?: readonly (readonly string[])[];
+    editor?: EditorView | null;
+    revision?: number;
+    searchValue?: string;
+    replaceValue?: string;
+    caseSensitive?: boolean;
+    wholeWord?: boolean;
+    regexp?: boolean;
+    active?: number;
+    onReplaceCells?: (edits: CellEdit[]) => void;
+};
+declare const CsvFind: import("svelte").Component<$$ComponentProps, {}, "open" | "active" | "searchValue" | "replaceValue" | "caseSensitive" | "wholeWord" | "regexp">;
+type CsvFind = ReturnType<typeof CsvFind>;
+export default CsvFind;

package/dist/lib/components/csv-row-virtualizer.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type VirtualItem, type VirtualizerOptions } from "@tanstack/virtual-core";
+export declare const CSV_ROW_HEIGHT = 32;
+/** Rows kept above and below the viewport so a fast scroll does not run into the spacer. */
+export declare const CSV_ROW_OVERSCAN = 16;
+export declare function createCsvRowVirtualizer(): {
+    readonly items: VirtualItem[];
+    readonly totalSize: number;
+    setOptions(next: Partial<VirtualizerOptions<HTMLElement, HTMLTableRowElement>>): void;
+};

package/dist/lib/components/csv-row-virtualizer.svelte.js

@@ -0,0 +1,59 @@
+import { elementScroll, observeElementOffset, observeElementRect, Virtualizer, } from "@tanstack/virtual-core";
+import { flushSync } from "svelte";
+export const CSV_ROW_HEIGHT = 32;
+/** Rows kept above and below the viewport so a fast scroll does not run into the spacer. */
+export const CSV_ROW_OVERSCAN = 16;
+export function createCsvRowVirtualizer() {
+    let items = $state.raw([]);
+    let totalSize = $state(0);
+    let flushing = false;
+    const options = {
+        count: 0,
+        enabled: false,
+        estimateSize: () => CSV_ROW_HEIGHT,
+        getScrollElement: () => null,
+        observeElementOffset,
+        observeElementRect,
+        onChange: (instance, scrolling) => {
+            items = instance.getVirtualItems();
+            totalSize = instance.getTotalSize();
+            if (!scrolling || flushing)
+                return;
+            flushing = true;
+            try {
+                flushSync();
+            }
+            finally {
+                flushing = false;
+            }
+        },
+        overscan: CSV_ROW_OVERSCAN,
+        scrollToFn: elementScroll,
+    };
+    const virtualizer = new Virtualizer(options);
+    $effect(() => {
+        const cleanup = virtualizer._didMount();
+        virtualizer._willUpdate();
+        return cleanup;
+    });
+    return {
+        get items() {
+            return items;
+        },
+        get totalSize() {
+            return totalSize;
+        },
+        setOptions(next) {
+            virtualizer.setOptions({
+                ...virtualizer.options,
+                ...next,
+                onChange: options.onChange,
+            });
+            // virtual-core only observes the scroll element from `_willUpdate`.
+            // The count and scrollport arrive after mount, so rebinding has to
+            // happen here or `getVirtualItems()` stays empty.
+            virtualizer._willUpdate();
+            virtualizer.measure();
+        },
+    };
+}

package/dist/lib/components/csv-source-view.svelte

@@ -0,0 +1,127 @@
+<script lang="ts">
+  import { EditorState } from "@codemirror/state";
+  import { EditorView } from "@codemirror/view";
+  import type { App, TFile } from "@lapis-notes/api";
+  import type { Attachment } from "svelte/attachments";
+  import {
+    DEFAULT_CSV_SETTINGS,
+    resolveDelimiter,
+  } from "../../csv-settings";
+  import { csvSourceExtensions } from "../codemirror/csv-source-extensions";
+  import { CsvGrid } from "../model/csv-grid";
+  import { csvBodyCounts, isCsvFindShortcut } from "../model/csv-search";
+  import CsvFind from "./csv-find.svelte";
+  import CsvStatusBar from "./csv-status-bar.svelte";
+
+  let {
+    app,
+    file,
+    onShowTable,
+    onShowCanvas,
+  }: {
+    app: App;
+    file: TFile;
+    onShowTable: () => void;
+    onShowCanvas?: () => void;
+  } = $props();
+
+  let editor = $state<EditorView | null>(null);
+  let text = $state("");
+  let revision = $state(0);
+  let searchOpen = $state(false);
+  let searchRequest = $state(0);
+
+  const counts = $derived.by(() => {
+    if (!text) return { columns: 0, rows: 0 };
+    const delimiter = resolveDelimiter(DEFAULT_CSV_SETTINGS, file.extension);
+    const grid = CsvGrid.fromText(text, { delimiter, headerRow: true });
+    return csvBodyCounts(grid.getRowCount(), grid.getColCount(), true);
+  });
+
+  function openSearch() {
+    searchOpen = true;
+    searchRequest += 1;
+  }
+
+  function toggleSearch() {
+    if (searchOpen) {
+      searchOpen = false;
+      return;
+    }
+    openSearch();
+  }
+
+  function onFindShortcut(event: KeyboardEvent) {
+    if (!isCsvFindShortcut(event)) return;
+    event.preventDefault();
+    event.stopPropagation();
+    openSearch();
+  }
+
+  const findShortcut: Attachment<HTMLElement> = (node) => {
+    node.addEventListener("keydown", onFindShortcut, true);
+    return () => node.removeEventListener("keydown", onFindShortcut, true);
+  };
+
+  const mountEditor: Attachment<HTMLDivElement> = (parent) => {
+    let view: EditorView | null = null;
+    let disposed = false;
+    let writing = false;
+    const currentApp = app;
+    const currentFile = file;
+    void currentApp.vault.cachedRead(currentFile).then((next) => {
+      if (disposed) return;
+      text = next;
+      view = new EditorView({
+        parent,
+        state: EditorState.create({
+          doc: next,
+          extensions: [
+            csvSourceExtensions(currentApp),
+            EditorView.updateListener.of((update) => {
+              if (!update.docChanged || writing) return;
+              const value = update.state.doc.toString();
+              text = value;
+              revision += 1;
+              writing = true;
+              void currentApp.vault.modify(currentFile, value).finally(() => {
+                writing = false;
+              });
+            }),
+          ],
+        }),
+      });
+      editor = view;
+      revision += 1;
+    });
+    return () => {
+      disposed = true;
+      editor = null;
+      view?.destroy();
+    };
+  };
+</script>
+
+<div
+  class="csv-source-pane"
+  data-testid="csv-source"
+  data-csv-role="source"
+  {@attach findShortcut}
+>
+  <CsvFind
+    bind:open={searchOpen}
+    {searchRequest}
+    {editor}
+    {revision}
+  />
+  <div class="csv-source-pane__editor" {@attach mountEditor}></div>
+  <CsvStatusBar
+    columns={counts.columns}
+    rows={counts.rows}
+    {searchOpen}
+    mode="source"
+    onToggleSearch={toggleSearch}
+    onToggleMode={onShowTable}
+    {onShowCanvas}
+  />
+</div>

package/dist/lib/components/csv-source-view.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { App, TFile } from "@lapis-notes/api";
+type $$ComponentProps = {
+    app: App;
+    file: TFile;
+    onShowTable: () => void;
+    onShowCanvas?: () => void;
+};
+declare const CsvSourceView: import("svelte").Component<$$ComponentProps, {}, "">;
+type CsvSourceView = ReturnType<typeof CsvSourceView>;
+export default CsvSourceView;