@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/page/export-report.mjs

@@ -0,0 +1,23 @@
+import { say } from "./notices.mjs";
+import { failure, postJson } from "./post.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+
+// Exporting the report. Saving itself is autosave.mjs.
+
+// "导出报告" builds the offline file from the saved source (exports/<slug>.html); the editor saves
+// whatever waits first. The view copy with the reading state is the kit's "导出当前视图副本" (ui.js).
+
+/** Export the report (map: slug, token); returns { ok, path } or { ok: false, reason, message }. */
+export async function exportReport(map) {
+  say(t("正在导出…"), "prompt");
+  try {
+    const response = await postJson("/__gallery/workspace/export", map.token, { slug: map.slug });
+    const result = await response.json().catch(() => ({ ok: false, reason: "server", message: String(response.status) }));
+    if (result.ok) say(t("已导出 {0}", result.path), "note", 6000);
+    else say(t("未导出：{0}", failure(result, result.reason)), "error");
+    return result;
+  } catch {
+    say(t("未导出：连不上 Gallery 的服务（gallery open 会启动它）"), "error");
+    return { ok: false, reason: "offline", message: t("无法连接预览服务器") };
+  }
+}

package/browser/editor/page/fills.mjs

@@ -0,0 +1,60 @@
+import { IN_LAYER } from "../../shared/layers.mjs";
+import { drawOver, fillRectOf, reachOf, shapeOf } from "./overlay-layer.mjs";
+import { own } from "./overlays.mjs";
+import { addStyle, element } from "./ui.mjs";
+
+// The fills laid over blocks (docs/editor.md, "Overlays"), one painter for all of them: the blocks
+// selected (selection/) and the blocks of the 批注 whose card shows (annotate/). There is one fill per
+// block, in the editor's own layer for that block (overlay-layer.mjs), never inside it, and what it
+// covers is the block's own to say: where it shows (a list item with its marker), how far the fill
+// reaches past it (reachOf), the room its neighbours leave (roomOf), its corners and what cuts it. Only
+// the colour is the caller's.
+
+const STYLE = `
+  /* A block's fill, as a box selection's rectangle: blue for the blocks selected, warm for a 批注's. */
+  .ge-halo, .ge-note-halo { position: absolute; left: 0; top: 0; z-index: ${IN_LAYER.halo}; pointer-events: none; }
+  .ge-halo { background: var(--ge-halo); }
+  .ge-note-halo { background: var(--ge-note); }
+`;
+
+/**
+ * The fills of one colour. kind: what the overlays call them; className: the colour; stands(block):
+ * whether a block's fill still stands for something, besides the block being on the page. Returns
+ * { paint(blocks), clear(), count }: paint draws a fill on each of `blocks` that shows, where it is now,
+ * and takes away those of any other block at once; clear takes every fill down; count is how many there are.
+ */
+export function createFills({ kind, className, stands }) {
+  addStyle(STYLE);
+  const fills = new Map(); // block -> its fill
+
+  function paint(blocks) {
+    const wanted = new Set(blocks);
+    for (const [block, fill] of fills) {
+      if (wanted.has(block)) continue;
+      fill.remove();
+      fills.delete(block);
+    }
+    for (const block of wanted) {
+      const shape = shapeOf(block);
+      let fill = fills.get(block);
+      if (!shape) { // not shown now (another Sheet, a closed disclosure)
+        fill?.remove();
+        continue;
+      }
+      if (!fill) {
+        const made = element("div", { class: className });
+        own(made, kind, { owner: block, alive: () => fills.get(block) === made && block.isConnected && stands(block), expected: () => fillRectOf(block) });
+        fills.set(block, made);
+        fill = made;
+      }
+      drawOver(fill, shape, reachOf(shape.radius, shape.reach, shape.room));
+    }
+  }
+
+  function clear() {
+    for (const fill of fills.values()) fill.remove();
+    fills.clear();
+  }
+
+  return { paint, clear, get count() { return fills.size; } };
+}

package/browser/editor/page/find/index.mjs

@@ -0,0 +1,107 @@
+import { addStyle } from "../ui.mjs";
+
+// A report opened from 搜索文档 at a hit (the workbench's search, shared/search.mjs): the page finds
+// the words again in its text (the time they occur after the same text as the hit's, else the hit's
+// nth time, else the first), scrolls them to the window's upper middle and marks them in Notion's
+// search yellow (the CSS Custom Highlight API: nothing in the page changes) until the reader
+// presses or types, or 4 seconds pass. Words in a detail card: it opens, and they are scrolled so in
+// its content. Words in a closed disclosure or a hidden panel: what holds them is brought into view
+// instead. The text is read as the server reads the file: a line a block, the header and formulas
+// left out, runs of spaces as one, case alike.
+
+const NAME = "ge-found";
+const STYLE = `
+  ::highlight(${NAME}) { color: inherit; background-color: rgba(255, 203, 0, .42); }
+  :root[data-doc-theme="dark"] ::highlight(${NAME}) { background-color: rgba(255, 196, 0, .32); }
+`;
+const SKIP = "script, style, template, noscript, svg, .katex, main > header";
+const BLOCK = "p, li, h1, h2, h3, h4, h5, h6, td, th, caption, summary, figcaption, pre, blockquote, dt, dd, div, section, figure, details";
+
+// The page's text as one string, its blocks a line each, and where each of its characters comes from.
+function pageText(root) {
+  let text = "";
+  const at = []; // index in text -> { node, offset } (null for a line's end)
+  let block = null;
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT, {
+    acceptNode: (node) => (node.parentElement?.closest(SKIP) ? NodeFilter.FILTER_REJECT : NodeFilter.FILTER_ACCEPT),
+  });
+  for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+    const own = node.parentElement.closest(BLOCK);
+    if (own !== block && text && !text.endsWith("\n")) {
+      text += "\n";
+      at.push(null);
+    }
+    block = own;
+    const value = node.nodeValue;
+    for (let offset = 0; offset < value.length; offset++) {
+      let char = value[offset];
+      if (char === "\u200b") continue;
+      if (/\s/.test(char)) {
+        if (!text || text.endsWith(" ") || text.endsWith("\n")) continue;
+        char = " ";
+      }
+      text += char;
+      at.push({ node, offset });
+    }
+  }
+  return { text, at };
+}
+
+let clear = null;
+
+/**
+ * Show `words` where the hit was ({ before, index }): { ok, shown }. `open(node)`: what opens by
+ * itself to show `node` opened, the box it scrolls in returned, or null (dialog/page.mjs show).
+ */
+export function revealText({ text: words, before = "", index = 0 }, open = () => null) {
+  clear?.();
+  const query = String(words ?? "").replace(/\s+/g, " ").trim().toLowerCase();
+  const main = document.querySelector("main");
+  if (!query || !main) return { ok: false, reason: "missing" };
+  addStyle(STYLE);
+  const { text, at } = pageText(main);
+  const lower = text.toLowerCase();
+  const found = [];
+  for (let from = lower.indexOf(query); from >= 0; from = lower.indexOf(query, from + query.length)) found.push(from);
+  if (!found.length) return { ok: false, reason: "missing" };
+  const context = String(before).replace(/\s+/g, " ").toLowerCase();
+  const start = (context ? found.find((from) => lower.slice(Math.max(0, from - context.length), from).endsWith(context)) : undefined) ?? found[index] ?? found[0];
+  const first = at[start];
+  const last = at[start + query.length - 1];
+  if (!first || !last) return { ok: false, reason: "missing" };
+  const range = document.createRange();
+  range.setStart(first.node, first.offset);
+  range.setEnd(last.node, last.offset + 1);
+  const box = open(first.node);
+
+  // Hidden (a closed disclosure, a panel not shown): its nearest shown container is what comes into view.
+  let shown = range.getClientRects().length > 0;
+  let target = range;
+  if (!shown) {
+    for (let node = first.node.parentElement; node && node !== main; node = node.parentElement) {
+      if (node.getClientRects().length) {
+        target = node;
+        break;
+      }
+    }
+  }
+  const rect = target.getBoundingClientRect();
+  if (box) box.scrollTop += rect.top - box.getBoundingClientRect().top - box.clientHeight * 0.35;
+  else scrollTo({ top: Math.max(0, scrollY + rect.top - innerHeight * 0.35), behavior: "instant" });
+  if (!shown) return { ok: true, shown: false };
+
+  const highlight = new Highlight(range);
+  CSS.highlights.set(NAME, highlight);
+  const timer = setTimeout(() => clear?.(), 4000);
+  const done = () => {
+    clearTimeout(timer);
+    if (CSS.highlights.get(NAME) === highlight) CSS.highlights.delete(NAME);
+    removeEventListener("pointerdown", done, true);
+    removeEventListener("keydown", done, true);
+    clear = null;
+  };
+  addEventListener("pointerdown", done, true);
+  addEventListener("keydown", done, true);
+  clear = done;
+  return { ok: true, shown: true };
+}

package/browser/editor/page/flags.mjs

@@ -0,0 +1,70 @@
+import { IN_LAYER } from "../../shared/layers.mjs";
+import { FOLLOW, task } from "./frames.mjs";
+import { fillExtentOf } from "./geometry.mjs";
+import { drawOver, shapeOf } from "./overlay-layer.mjs";
+import { onSettle, own } from "./overlays.mjs";
+import { addStyle, element } from "./ui.mjs";
+
+// The red frame round a block the page cannot save as it is (docs/editor.md, "Conflicts"): a block
+// in conflict (data-ge-flag="conflict", conflicts.mjs) or a new block that has no place in the file
+// yet (data-ge-flag="check", editor.mjs). Drawn in the editor's layer like every other frame (frame.mjs,
+// selection/), 2px past the block, so it follows its corners, its list marker and what clips it, and
+// no rule of the report's own elements (the outline some of them take off) can undo it. It stands
+// for the attribute: each flagged block shown has one, and it goes with the flag or the block.
+
+const REACH = 2;
+const STYLE = `
+  .ge-flag { position: absolute; left: 0; top: 0; z-index: ${IN_LAYER.frame}; box-sizing: border-box; border: ${REACH}px solid var(--doc-danger, #c04848); pointer-events: none; }
+`;
+
+/** editing(): whether the page is being edited. */
+export function createFlags(editing) {
+  addStyle(STYLE);
+  const frames = new Map(); // flagged block -> its frame
+
+  const reach = (shape) => ({ x: REACH, y: REACH, radius: shape.radius > 0 ? shape.radius + REACH : 4 });
+  const outset = (box) => box && { left: box.left - REACH, top: box.top - REACH, right: box.right + REACH, bottom: box.bottom + REACH };
+
+  function takeDown() {
+    for (const frame of frames.values()) frame.remove();
+    frames.clear();
+  }
+
+  function run() {
+    const flagged = new Set(editing() ? document.querySelectorAll("[data-ge-flag]") : []);
+    for (const [block, frame] of frames) {
+      if (flagged.has(block) && block.isConnected) continue;
+      frame.remove();
+      frames.delete(block);
+    }
+    for (const block of flagged) {
+      const shape = shapeOf(block);
+      let frame = frames.get(block);
+      if (!shape) { // not shown now (another Sheet, a closed disclosure)
+        frame?.remove();
+        frames.delete(block);
+        continue;
+      }
+      if (!frame) {
+        frame = element("div", { class: "ge-flag" });
+        const mine = frame;
+        own(mine, "flag", { owner: block, alive: () => frames.get(block) === mine && block.isConnected && block.hasAttribute("data-ge-flag") && editing(), expected: () => outset(fillExtentOf(block)) });
+        frames.set(block, frame);
+      }
+      drawOver(frame, shape, reach(shape));
+    }
+    return frames.size > 0 ? FOLLOW : false; // drawn again when a flagged block may have moved (frames.mjs)
+  }
+  const drawing = task("flag", { run, fail: takeDown });
+
+  // A flag set or taken off, editing begun or ended: draw again. Blocks taken off the page go at once.
+  new MutationObserver(() => drawing.wake()).observe(document.documentElement, { attributes: true, subtree: true, attributeFilter: ["data-ge-flag", "data-ge-editing"] });
+  onSettle(() => {
+    for (const [block, frame] of frames) {
+      if (block.isConnected) continue;
+      frame.remove();
+      frames.delete(block);
+    }
+  });
+  drawing.wake();
+}