@silverbulletmd/silverbullet 2.10.0 → 2.11.0

package/plug-api/ui/scroll.ts

@@ -0,0 +1,30 @@
+/**
+ * `block: "nearest"` scrolling, confined to one container.
+ *
+ * scrollIntoView can cross a same-origin iframe boundary and scroll the host
+ * editor. Restricting the calculation to one container prevents that.
+ */
+export function revealInContainer(el: Element, container: Element) {
+  const c = container.getBoundingClientRect();
+  const e = el.getBoundingClientRect();
+  if (e.top < c.top) {
+    container.scrollTop += e.top - c.top;
+  } else if (e.bottom > c.bottom) {
+    // An element taller than the container aligns to its top rather than
+    // scrolling past it, same as `block: "nearest"`.
+    container.scrollTop += Math.min(e.bottom - c.bottom, e.top - c.top);
+  }
+}
+
+/**
+ * `revealInContainer`, with the container found by walking up from `el` via
+ * `closest(selector)` -- for a caller that doesn't already hold a reference
+ * to the scroll container.
+ */
+export function revealInClosest(
+  el: Element | null | undefined,
+  selector: string,
+) {
+  const container = el?.closest(selector);
+  if (el && container) revealInContainer(el, container);
+}

package/plug-api/ui/tree_model.ts

@@ -0,0 +1,263 @@
+import type { Row } from "./tree_types.ts";
+
+export type TreeNode = {
+  path: string;
+  segment: string;
+  row?: Row;
+  children: TreeNode[];
+  isFolder: boolean;
+};
+
+export type VisibleRow = { node: TreeNode; depth: number };
+
+/** A folder reads only its own row's priority: an implicit folder, or one
+ * whose page carries no priority, stays where the alphabet put it however its
+ * children are decorated. */
+function priorityOf(node: TreeNode): number {
+  const priority = node.row?.priority;
+  return typeof priority === "number" && Number.isFinite(priority)
+    ? priority
+    : 0;
+}
+
+export function buildTree(
+  rows: Row[],
+  separator: string,
+  foldersFirst: boolean,
+): TreeNode {
+  const root: TreeNode = {
+    path: "",
+    segment: "",
+    children: [],
+    isFolder: true,
+  };
+  const byPath = new Map<string, TreeNode>([["", root]]);
+  const ensure = (path: string): TreeNode => {
+    let node = byPath.get(path);
+    if (node) return node;
+    const idx = path.lastIndexOf(separator);
+    const parent = ensure(idx === -1 ? "" : path.slice(0, idx));
+    node = {
+      path,
+      segment: idx === -1 ? path : path.slice(idx + separator.length),
+      children: [],
+      isFolder: false,
+    };
+    byPath.set(path, node);
+    parent.children.push(node);
+    parent.isFolder = true;
+    return node;
+  };
+  for (const row of rows) {
+    const path = String(row.obj.name ?? row.primary);
+    ensure(path).row = row;
+  }
+  // Stable, so everything a row says nothing about keeps the order the source
+  // put it in -- which is what makes an undecorated tree alphabetical.
+  const sortLevel = (n: TreeNode) => {
+    n.children.sort((a, b) => {
+      if (foldersFirst && a.isFolder !== b.isFolder) return a.isFolder ? -1 : 1;
+      return priorityOf(b) - priorityOf(a);
+    });
+    n.children.forEach(sortLevel);
+  };
+  sortLevel(root);
+  return root;
+}
+
+export function flattenVisible(
+  root: TreeNode,
+  expanded: Set<string>,
+): VisibleRow[] {
+  const out: VisibleRow[] = [];
+  const walk = (node: TreeNode, depth: number) => {
+    for (const child of node.children) {
+      out.push({ node: child, depth });
+      if (child.isFolder && expanded.has(child.path)) walk(child, depth + 1);
+    }
+  };
+  walk(root, 0);
+  return out;
+}
+
+export function pruneTree(
+  root: TreeNode,
+  scores: Map<string, number>,
+): TreeNode {
+  // Post-order: each node's best score is computed once, from its
+  // already-scored children, rather than re-walked on every sort comparison.
+  const bestScores = new Map<TreeNode, number>();
+  const prune = (n: TreeNode): TreeNode | null => {
+    const children = n.children
+      .map(prune)
+      .filter((c): c is TreeNode => c !== null);
+    if (children.length === 0 && !scores.has(n.path)) return null;
+    const copy = { ...n, children };
+    bestScores.set(
+      copy,
+      Math.max(
+        scores.get(n.path) ?? -1,
+        ...children.map((c) => bestScores.get(c)!),
+      ),
+    );
+    copy.children.sort((a, b) => bestScores.get(b)! - bestScores.get(a)!);
+    return copy;
+  };
+  return prune(root) ?? { ...root, children: [] };
+}
+
+export function ancestorPaths(path: string, separator: string): string[] {
+  const parts = path.split(separator);
+  return parts
+    .slice(0, -1)
+    .map((_, i) => parts.slice(0, i + 1).join(separator));
+}
+
+/**
+ * `prev` with `paths` expanded. Under `expandAll` expanding is a *removal*:
+ * the set holds what the user collapsed, and everything not in it is already
+ * open. Toggling needs no such branch -- flipping membership means "collapse"
+ * under one reading and "expand" under the other, which is the same gesture.
+ */
+export function withExpanded(
+  prev: Set<string>,
+  paths: string[],
+  expandAll: boolean,
+): Set<string> {
+  const next = new Set(prev);
+  for (const path of paths) {
+    if (expandAll) next.delete(path);
+    else next.add(path);
+  }
+  return next;
+}
+
+export function allFolderPaths(node: TreeNode): Set<string> {
+  const out = new Set<string>();
+  const walk = (n: TreeNode) => {
+    for (const child of n.children) {
+      if (child.isFolder) {
+        out.add(child.path);
+        walk(child);
+      }
+    }
+  };
+  walk(node);
+  return out;
+}
+
+/**
+ * The object a node hands to a caller. A copy, deliberately: `isFolder` is a
+ * UI-injected hint, and stamping it onto the row's own object would leave it
+ * on the caller's cached row forever. Same shape `planMove` produces, so a
+ * folder reaches downstream code looking the same either way.
+ */
+export function nodeObject(node: TreeNode): Record<string, any> {
+  const obj: Record<string, any> = node.row
+    ? { ...node.row.obj }
+    : { name: node.path };
+  if (node.isFolder) obj.isFolder = true;
+  return obj;
+}
+
+/** Every node under `root`, in tree order (the root itself excluded). */
+export function allNodes(root: TreeNode): TreeNode[] {
+  const out: TreeNode[] = [];
+  const walk = (n: TreeNode) => {
+    for (const child of n.children) {
+      out.push(child);
+      walk(child);
+    }
+  };
+  walk(root);
+  return out;
+}
+
+export function findNode(root: TreeNode, path: string): TreeNode | undefined {
+  if (path === root.path) return root;
+  for (const child of root.children) {
+    if (path === child.path) return child;
+    if (path.startsWith(child.path)) {
+      const found = findNode(child, path);
+      if (found) return found;
+    }
+  }
+  return undefined;
+}
+
+export type MovePlan =
+  | { kind: "none" }
+  | { kind: "collision"; newName: string }
+  | { kind: "move"; obj: Record<string, any>; newName: string };
+
+/**
+ * What dropping `draggedPath` on `targetFolder` (`""` = root) amounts to: the
+ * new name, the object to hand the mover, or a reason not to move at all.
+ * Kept here, away from the DOM, because every interesting case is a
+ * path/tree question -- and the drop handler must not guess at any of them.
+ */
+export function planMove(
+  root: TreeNode,
+  draggedPath: string,
+  targetFolder: string,
+  separator: string,
+): MovePlan {
+  if (!draggedPath || draggedPath === targetFolder) return { kind: "none" };
+  // Into its own subtree: the prefix rename would chase itself.
+  if (targetFolder.startsWith(draggedPath + separator)) return { kind: "none" };
+  const idx = draggedPath.lastIndexOf(separator);
+  const segment =
+    idx === -1 ? draggedPath : draggedPath.slice(idx + separator.length);
+  const newName =
+    targetFolder === "" ? segment : targetFolder + separator + segment;
+  if (newName === draggedPath) return { kind: "none" };
+  const node = findNode(root, draggedPath);
+  if (!node) return { kind: "none" };
+  // Any node, not just row-bearing ones: dropping onto a name that already
+  // exists as a folder would merge two subtrees, silently overwriting every
+  // page whose name appears in both.
+  if (findNode(root, newName)) return { kind: "collision", newName };
+  return { kind: "move", obj: nodeObject(node), newName };
+}
+
+export type TreeDisplay = {
+  tree: TreeNode;
+  visible: VisibleRow[];
+  effectiveExpanded: Set<string>;
+};
+
+/**
+ * Combines build + (optional) prune + auto-expand-while-filtering + flatten
+ * into the single derivation both a tree renderer and its host's keyboard
+ * math need, so they never compute two different visible-row lists.
+ *
+ * `effectiveExpanded` is the one answer to "is this folder open", whichever
+ * reading `state` has: everything downstream -- the chevrons, `ArrowLeft`,
+ * spring-loading -- asks it and never the raw set.
+ *
+ * @param state the persisted set, and how to read it: the folders the user
+ * opened, or (under `expandAll`) the ones they closed.
+ */
+export function computeTreeDisplay(
+  rows: Row[],
+  separator: string,
+  foldersFirst: boolean,
+  state: { expanded: Set<string>; expandAll: boolean },
+  scores?: Map<string, number>,
+): TreeDisplay {
+  const built = buildTree(rows, separator, foldersFirst);
+  const tree = scores ? pruneTree(built, scores) : built;
+  // Filtering force-expands the pruned tree either way, so the two readings
+  // converge there and neither set is consulted -- no double bookkeeping.
+  let effectiveExpanded: Set<string>;
+  if (scores) {
+    effectiveExpanded = allFolderPaths(tree);
+  } else if (state.expandAll) {
+    effectiveExpanded = allFolderPaths(tree);
+    for (const path of state.expanded) effectiveExpanded.delete(path);
+  } else {
+    effectiveExpanded = state.expanded;
+  }
+  const visible = flattenVisible(tree, effectiveExpanded);
+  return { tree, visible, effectiveExpanded };
+}

package/plug-api/ui/tree_types.ts

@@ -0,0 +1,66 @@
+import type { Description } from "./description.ts";
+
+export type Decoration = {
+  text?: string;
+  icon?: string;
+  cssClass?: string;
+  position?: "left" | "right";
+  /** Native tooltip, for a chip whose text is deliberately imprecise. */
+  title?: string;
+};
+
+export type Row = {
+  obj: Record<string, any>;
+  primary: string;
+  /**
+   * What a *tree* row shows in place of its last path segment. For a view
+   * whose hierarchy is synthesized rather than read off a name, the path is
+   * what nests the row and this is what it reads as.
+   */
+  label?: string;
+  description?: Description;
+  decorations?: Decoration[];
+  /** Extra CSS classes for the row element itself. */
+  cssClass?: string;
+  /** Tree mode: floats the row above its lower-priority siblings (default 0).
+   * Only ever reorders one level; a folder takes its own row's priority. */
+  priority?: number;
+};
+
+/**
+ * A row action, minus whatever decides what it does and whether it applies:
+ * the renderer only ever knows what to draw and which index to hand back.
+ */
+export type ActionMeta = {
+  /**
+   * A Feather name (bare or `feather:`-prefixed), or literal SVG markup (a
+   * string starting with `<svg` after trimming leading whitespace) --
+   * resolved to a node by the consuming plug.
+   */
+  icon?: string;
+  label: string;
+  /** Whether the action has a `when` predicate, i.e. needs a mask to show. */
+  hasWhen: boolean;
+  /** `"rw"` hides the action while the client is in read-only mode. */
+  requireMode?: "rw";
+};
+
+/**
+ * What a consumer has to say about one rendered thing: which actions apply to
+ * it, and which icon it draws with. Meant to be computed for a whole batch at
+ * once, never per hover, per keystroke, or per selection change.
+ */
+export type RowState = {
+  /** Per-action `when` result, parallel to the action list. */
+  actions?: boolean[];
+  /** The row's icon, as a template node to clone. */
+  icon?: Element;
+};
+
+/** Row state by rendered thing. Exactly one half is populated, per mode. */
+export type RowStates = {
+  /** Tree mode, keyed by node path -- covers folders and page/folder duals. */
+  byPath?: Map<string, RowState>;
+  /** List mode, keyed by the row itself. */
+  byRow?: WeakMap<Row, RowState>;
+};

package/plug-api/ui/use_fit_collapse.ts

@@ -0,0 +1,67 @@
+import { useLayoutEffect, useRef, useState } from "preact/hooks";
+
+export type FitLevel = "full" | "icons";
+
+/**
+ * Measures whether a row of items (buttons in `barRef`, inside `wrapRef`)
+ * fits at full width, collapsing to `"icons"` when it doesn't.
+ *
+ * The fit is measured rather than guessed at a breakpoint: how wide the bar
+ * wants to be depends on its items' own labels, which no `@container`
+ * condition can express. The measurement happens on layout, only when the
+ * wrapper actually resizes or `signature` changes -- never per frame.
+ *
+ * `signature` should change whenever the set of items (or which of them carry
+ * icons) changes, so a fresh full-width measurement is taken rather than
+ * reusing one from a different set of items.
+ */
+export function useFitCollapse(
+  wrapRef: { current: HTMLElement | null },
+  barRef: { current: HTMLElement | null },
+  signature: string,
+): FitLevel {
+  const [fit, setFit] = useState<FitLevel>("full");
+  // The full-width rendering's own width, recorded while it's on screen: a
+  // collapsed bar can no longer be asked what the fuller one wanted, and this
+  // is what lets a widened wrapper snap straight back to "full" instead of
+  // staying collapsed until something else forces a re-measure.
+  const fullWidth = useRef<number | undefined>(undefined);
+
+  useLayoutEffect(() => {
+    fullWidth.current = undefined;
+    setFit("full");
+  }, [signature]);
+
+  useLayoutEffect(() => {
+    const bar = barRef.current;
+    const wrap = wrapRef.current;
+    if (!bar || !wrap) return;
+    const measure = () => {
+      // Summed rather than read off the bar: it may wrap as a last resort,
+      // and a wrapped bar reports the width it settled for, never the width
+      // it wanted.
+      const style = getComputedStyle(bar);
+      const items = [...bar.children] as HTMLElement[];
+      const gaps =
+        (parseFloat(style.columnGap) || 0) * Math.max(0, items.length - 1);
+      const padding =
+        (parseFloat(style.paddingLeft) || 0) +
+        (parseFloat(style.paddingRight) || 0);
+      const wanted =
+        items.reduce((sum, s) => sum + s.getBoundingClientRect().width, 0) +
+        gaps +
+        padding;
+      if (fit === "full") fullWidth.current = wanted;
+
+      const available = wrap.clientWidth;
+      const full = fullWidth.current;
+      setFit(full !== undefined && full > available ? "icons" : "full");
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(wrap);
+    return () => observer.disconnect();
+  }, [fit, signature]);
+
+  return fit;
+}

package/plugs/builtin_plugs.ts

@@ -1,6 +1,5 @@
 // TODO: Figure out how to keep this up-to-date automatically
 export const builtinPlugNames = [
-  "core",
   "editor",
   "index",
   "sync",

package/plugs/index/types.ts

@@ -0,0 +1,9 @@
+export type AnchorHit = {
+  page: string;
+  hostTag: string;
+};
+
+export type ResolveAnchorResult =
+  | { ok: true; page: string; hostTag: string; range: [number, number] }
+  | { ok: false; reason: "missing" }
+  | { ok: false; reason: "duplicate"; hits: AnchorHit[] };

package/plug-api/lib/memory_cache.ts

@@ -1,21 +0,0 @@
-import { LimitedMap } from "./limited_map.ts";
-
-const cache = new LimitedMap<any>(50);
-
-export async function ttlCache<K, V>(
-  key: K,
-  fn: (key: K) => Promise<V>,
-  ttlSecs?: number,
-): Promise<V> {
-  if (!ttlSecs) {
-    return fn(key);
-  }
-  const serializedKey = JSON.stringify(key);
-  const cached = cache.get(serializedKey);
-  if (cached) {
-    return cached;
-  }
-  const result = await fn(key);
-  cache.set(serializedKey, result, ttlSecs * 1000);
-  return result;
-}