@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/page/merge.mjs

@@ -0,0 +1,124 @@
+// Merging a block's inline HTML word by word (mergeText), and the helpers around it: the server's
+// commits merge with them (source/merge.mjs), and the page undoes a change three ways with them
+// once someone else's words were merged into the block (history.mjs).
+
+// Longest common subsequence of two lists of strings, as index pairs. Shared ends are matched
+// first, so the table only covers the part that changed. (The page's one LCS: the merge, the three-way
+// undo and the conflict card's word diff all use it.)
+export function commonRun(xs, ys) {
+  const head = [];
+  let start = 0;
+  while (start < xs.length && start < ys.length && xs[start] === ys[start]) head.push([start, start++]);
+  let endX = xs.length;
+  let endY = ys.length;
+  const tail = [];
+  while (endX > start && endY > start && xs[endX - 1] === ys[endY - 1]) tail.unshift([--endX, --endY]);
+  const n = endX - start;
+  const m = endY - start;
+  const table = Array.from({ length: n + 1 }, () => new Uint32Array(m + 1));
+  for (let i = n - 1; i >= 0; i--) {
+    for (let j = m - 1; j >= 0; j--) {
+      table[i][j] = xs[start + i] === ys[start + j] ? table[i + 1][j + 1] + 1 : Math.max(table[i + 1][j], table[i][j + 1]);
+    }
+  }
+  const middle = [];
+  for (let i = 0, j = 0; i < n && j < m;) {
+    if (xs[start + i] === ys[start + j]) middle.push([start + i++, start + j++]);
+    else if (table[i + 1][j] >= table[i][j + 1]) i++;
+    else j++;
+  }
+  return [...head, ...middle, ...tail];
+}
+
+// A word diff of two texts, the reader's version against the file's (the conflict card's), or an
+// Agent's baseline against the page (changes/): runs of { tag, text }, tag null
+// for words both have, "del" for the reader's alone and "ins" for the file's alone (an ins before
+// the del it stands beside). Words are runs of letters and digits, spaces, single other characters
+// (each Chinese character on its own); at most 1500 words of each (commonRun above finds what is shared).
+export function wordDiff(mine, theirs) {
+  const tokens = (text) => (text.match(/[A-Za-z0-9]+|\s+|[^A-Za-z0-9\s]/gu) ?? []).slice(0, 1500);
+  const a = tokens(mine);
+  const b = tokens(theirs);
+  const runs = [];
+  const add = (tag, text) => {
+    if (runs.at(-1)?.tag === tag) runs.at(-1).text += text;
+    else runs.push({ tag, text });
+  };
+  let [i, j] = [0, 0];
+  for (const [x, y] of [...commonRun(a, b), [a.length, b.length]]) {
+    while (j < y) add("ins", b[j++]);
+    while (i < x) add("del", a[i++]);
+    if (x < a.length) add(null, a[i++]);
+    j++;
+  }
+  return runs;
+}
+
+// ---------- merging a block both sides changed ----------
+
+// Tokens of a block's inline HTML: a tag, an entity, a word, a run of spaces, or any other single
+// character (each Chinese or Japanese character on its own). Tokens compare by what they mean
+// (`key`): entities decoded, a tag by its name and attributes, spaces collapsed, so the editor's
+// rewrite of text it did not change still matches the source.
+const TOKEN = /<[^>]*>|&(?:#\d+|#x[\da-f]+|[a-z]+\d*);|(?:(?![\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}])[\p{L}\p{N}_])+|[ \t\r\n\f]+|[\s\S]/giu;
+
+const ENTITIES = { amp: "&", lt: "<", gt: ">", quot: '"', apos: "'", nbsp: " " };
+
+const decodeEntities = (text) => text.replace(/&(#\d+|#x[\da-f]+|[a-z]+\d*);/gi, (whole, name) => {
+  if (name[0] !== "#") return ENTITIES[name.toLowerCase()] ?? whole;
+  const code = /^#x/i.test(name) ? parseInt(name.slice(2), 16) : Number(name.slice(1));
+  return code > 0 && code <= 0x10ffff ? String.fromCodePoint(code) : whole;
+});
+
+function tokenKey(raw) {
+  const tag = /^<(\/?)\s*([a-z][\w-]*)([^>]*?)\/?>$/i.exec(raw);
+  if (!tag) return /^[ \t\r\n\f]+$/.test(raw) ? " " : decodeEntities(raw);
+  const attributes = [...tag[3].matchAll(/([^\s=/]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g)]
+    .map(([, name, double, single, bare]) => ` ${name.toLowerCase()}=${decodeEntities(double ?? single ?? bare ?? "")}`);
+  return `<${tag[1]}${tag[2].toLowerCase()}${attributes.join("")}>`;
+}
+
+const tokensOf = (html) => (html.match(TOKEN) ?? []).map((raw) => ({ raw, key: tokenKey(raw) }));
+
+/**
+ * Three-way merge of a block's inline HTML: the reader's and the file's changes to the same base
+ * text. Changes to different places, with at least one unchanged word, character or tag (not
+ * just a space) between them, both go in; two changes to the same or neighbouring places, unless
+ * identical, make it a conflict (null). The caller still validates the result like any edit.
+ */
+export function mergeText(base, mine, theirs) {
+  const [b, m, t] = [base, mine, theirs].map(tokensOf);
+  if (b.length + m.length + t.length > 6000) return null; // long enough that a conflict is the better answer
+  const keys = (tokens) => tokens.map((token) => token.key);
+  const toMine = new Map(commonRun(keys(b), keys(m)));
+  const toTheirs = new Map(commonRun(keys(b), keys(t)));
+  const same = (x, y) => x.length === y.length && x.every((token, index) => token.key === y[index].key);
+  const output = [];
+  let [i, j, k] = [0, 0, 0]; // the next token of each version not written yet
+  // Tokens both sides kept (spaces aside) anchor the merge; between two anchors, at most one side
+  // changed anything.
+  for (let at = 0; at <= b.length; at++) {
+    const end = at === b.length;
+    if (!end && !(b[at].key !== " " && toMine.has(at) && toTheirs.has(at))) continue;
+    const [nextMine, nextTheirs] = end ? [m.length, t.length] : [toMine.get(at), toTheirs.get(at)];
+    const [was, ours, their] = [b.slice(i, at), m.slice(j, nextMine), t.slice(k, nextTheirs)];
+    if (same(ours, was)) output.push(...their);
+    else if (same(their, was) || same(ours, their)) output.push(...ours);
+    else return null;
+    if (!end) output.push(m[nextMine]);
+    [i, j, k] = [at + 1, nextMine + 1, nextTheirs + 1];
+  }
+  return output.map((token) => token.raw).join("");
+}
+
+export function commonPrefix(a, b) {
+  let length = 0;
+  while (length < a.length && length < b.length && a[length] === b[length]) length++;
+  return length;
+}
+
+export function commonSuffix(a, b) {
+  let length = 0;
+  while (length < a.length && length < b.length && a[a.length - 1 - length] === b[b.length - 1 - length]) length++;
+  return length;
+}

package/browser/editor/page/notices.mjs

@@ -0,0 +1,142 @@
+import { Z } from "../../shared/layers.mjs";
+import { PANEL_STYLE, onPanels, panelGone, panelRoom, panelShown } from "./panel.mjs";
+import { addStyle, button, element, mount } from "./ui.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+import { preference } from "../../shared/preferences.mjs";
+import { routine } from "./quiet.mjs";
+
+// What the editor tells the reader: a short notice at the bottom (a toast, as the workbench shows
+// its own), and a panel for what needs more room (texts to copy). There is no toolbar: the page
+// saves by itself, undo and redo are Ctrl+Z / Ctrl+Y, exporting is the workbench's. In a workbench
+// the notice is the workbench's toast (the session's `notice`, relay()); on its own the page shows
+// one that looks the same.
+//
+// A note shows for a few seconds, an error a little longer (and until the reader goes on editing,
+// messageKind), a prompt for 15 seconds or until it is replaced. A hint is a note that says what the
+// pointer resting there says too (hints/: why a click landed on what cannot be edited).
+//
+// No notice covers a bottom panel (panel.mjs: the conflicts', the lost texts'): while one stands, the
+// toast stands 8px above it (ABOVE), on the page alone and in a workbench, which is told the room the
+// panels take (relayRoom), for its own toasts too.
+//
+// Both toasts are as wide as their words, at most 640px and the window less 32px, in the middle of the
+// window, their words wrapping past that: left: 0 and right: 0 with margins that share what is left,
+// so that the box has the whole window to be as wide as.
+
+const STYLE = `
+  .ge-toast { position: fixed; left: 0; right: 0; bottom: 24px; z-index: ${Z.toast}; display: flex; align-items: center; gap: 10px; box-sizing: border-box; width: fit-content; max-width: min(640px, calc(100vw - 32px)); margin: 0 auto; padding: 8px 14px; border-radius: 8px; background: var(--ge-toast-bg); color: #f0efed; box-shadow: var(--ge-shadow); font: 14px/1.45 var(--doc-sans-font, var(--doc-font, system-ui, sans-serif)); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .18s, transform .18s; }
+  .ge-toast[data-show] { opacity: 1; transform: none; }
+  .ge-toast[data-tone="error"]::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #ff6b6b; }
+`;
+
+const HOLD = { note: 3000, hint: 3000, error: 6000, prompt: 15000 };
+const ABOVE = 8; // px between a bottom panel and the toast over it
+const embedded = window.parent !== window && !new URLSearchParams(location.search).has("solo"); // ?solo: a page of its own in a frame (session.mjs SOLO)
+
+let message = null; // { kind } while a notice shows
+let timer = 0;
+let toast = null;
+let relay = null; // (notice: { text, tone, hold, room }) => void: the workbench shows it
+let relayRoom = null; // (room) => void: the room the bottom panels take, told the workbench
+let toldRoom = 0; // what it was told last
+let waiting = null; // said in a workbench before the session was there
+
+// The page's own toast, made when first needed.
+function node() {
+  if (!toast) {
+    addStyle(STYLE);
+    toast = mount(element("div", { class: "ge-toast", role: "status", "aria-live": "polite" }));
+  }
+  return toast;
+}
+
+/**
+ * Tell the reader `text` ("note", "hint", "error" or "prompt"), in the UI's language: a text the
+ * server sent (its messages are written in Chinese) is looked up too; one already put in it stays as
+ * it is. With 减少通知 on, a routine notice (quiet.mjs: what was just done, how to go on; a prompt's
+ * too, a drag's) is not shown, nor a hint (the pointer resting there says it); an error always is.
+ */
+export function say(said, kind = "note", hold = HOLD[kind] ?? HOLD.note) {
+  const text = t(said);
+  if (kind !== "error" && preference("quietNotices") && (kind === "hint" || routine(text))) return;
+  clearTimeout(timer);
+  message = { kind: kind === "hint" ? "note" : kind };
+  const tone = kind === "error" ? "error" : "info";
+  const room = panelRoom();
+  timer = setTimeout(settle, hold);
+  if (embedded) {
+    toldRoom = room;
+    if (relay) relay({ text, tone, hold, room });
+    else waiting = { text, tone, hold, room };
+    return;
+  }
+  const shown = node();
+  shown.textContent = text;
+  shown.dataset.tone = tone;
+  shown.style.bottom = room ? `${room + ABOVE}px` : "";
+  shown.dataset.show = "";
+}
+
+// The room the bottom panels take changed (one came, grew, shrank, was hidden or went): the toast
+// stands above them again, or the workbench is told.
+function panelsChanged() {
+  const room = panelRoom();
+  if (embedded) {
+    if (room !== toldRoom) relayRoom?.(room);
+    toldRoom = room;
+  } else if (toast) toast.style.bottom = room ? `${room + ABOVE}px` : "";
+}
+onPanels(panelsChanged);
+
+/** The notice goes. */
+export function settle() {
+  clearTimeout(timer);
+  if (!message) return;
+  message = null;
+  if (embedded) relay?.({ text: "" });
+  else toast?.removeAttribute("data-show");
+}
+
+/** The kind of the notice shown now ("note", "error" or "prompt"), or null. */
+export const messageKind = () => message?.kind ?? null;
+
+/** In a workbench: the session that shows notices there (null: none), and that hears the room the bottom panels take (`sendRoom`). */
+export function relayTo(send, sendRoom = null) {
+  relay = send;
+  relayRoom = sendRoom;
+  toldRoom = panelRoom();
+  relayRoom?.(toldRoom);
+  if (relay && waiting && message) relay({ ...waiting, room: toldRoom });
+  waiting = null;
+}
+
+/** The page's own toast, if there is one (the editor's UI moves it into an open dialog). */
+export const noticeNode = () => toast;
+
+// ---------- the panel ----------
+
+let panel = null;
+
+export function closePanel() {
+  if (!panel) return;
+  panel.remove();
+  panelGone(panel);
+  panel = null;
+}
+
+export function showPanel(title) {
+  closePanel();
+  addStyle(PANEL_STYLE);
+  panel = mount(element("div", { class: "ge-panel", role: "region", "aria-label": title },
+    element("div", { class: "ge-panel-head" }, element("span", { text: title }), button(t("关闭"), closePanel, { "data-quiet": "" }))));
+  panelShown(panel);
+}
+
+export function panelItem(...children) {
+  const item = element("div", { class: "ge-panel-item" }, ...children);
+  panel.append(item);
+  return item;
+}
+
+/** The open panel, if any. */
+export const panelNode = () => panel;

package/browser/editor/page/offered.mjs

@@ -0,0 +1,32 @@
+import { TYPE_COMPONENT, blocksHidden } from "../components/registry.mjs";
+
+// What the menus that make a block offer of the reader's 设置 › 组件列表 (docs/workbench.md): the one place
+// that hears what is hidden, gallery.json's as the page's map holds it (`hidden`), then as its event
+// stream says it (`doc-settings-changed`), which costs the page nothing. A block type goes with its
+// component. "/", 在下方新建 (both slash-menu/ typeItems) and the handle's grid (block-menu/) read it; no
+// other path to a type does: its Markdown shortcut, a paste, the format bar's turn into, what stands on
+// the page, what 组成分区 or a conversion reaches. A package says its own `state`, which its rows go by
+// (`menuVariants`, components/installed/page.mjs): its rows are in no block type's list.
+
+let hidden = new Set(); // the names of the components hidden
+
+const isHidden = (type) => hidden.has(TYPE_COMPONENT[type]);
+
+/** Hide what `names`, gallery.json's `hidden` as it is, says of the blocks. */
+export const hideBlocks = (names) => {
+  hidden = new Set(blocksHidden(names));
+};
+
+/**
+ * `types` less those hidden. `own`, the type a block is, stays: it is marked there, and a block of a
+ * hidden type is one like any other. A list left with nothing keeps what it had: it is all a place
+ * takes, and hiding a block never stops an existing one from growing.
+ */
+export function offered(types, own = null) {
+  const kept = types.filter((type) => type === own || !isHidden(type));
+  return kept.length > 0 ? kept : types;
+}
+
+/** What a block can be turned into (`turn`, as convert.mjs gives it, or null), as its menu offers it. */
+export const offeredTurn = (turn) => turn && { ...turn, types: offered(turn.types, turn.current) };
+

package/browser/editor/page/outline/folds.mjs

@@ -0,0 +1,53 @@
+// What is folded in the outline, kept for each report (localStorage, so the page the workbench shows
+// again after an Agent's write, which is a new page, folds what the reader folded): a node's key (a
+// heading's block id, a tab's area and tab), the reports folded last kept and the oldest let go. The
+// headings folded on the page (fold/) are kept the same way under a key of their own (`key`).
+
+import { KEYS } from "../../../shared/renamed-storage.mjs";
+
+export const FOLDS_KEY = KEYS.outlineFolds;
+const KEEP = 100; // reports
+
+function read(storage, key) {
+  try {
+    const value = JSON.parse(storage.get(key) ?? "null");
+    if (value && typeof value === "object" && value.folds && typeof value.folds === "object") return value;
+  } catch {}
+  return { folds: {} };
+}
+
+/** The keys folded in report `slug` (`storage`: { get, set }, page/storage.mjs), kept under `key`. */
+export function foldsOf(storage, slug, key = FOLDS_KEY) {
+  const keys = read(storage, key).folds[slug];
+  return new Set(Array.isArray(keys) ? keys.filter((key) => typeof key === "string") : []);
+}
+
+/**
+ * Keep `folded` for report `slug`: only the keys the page still has (`present`), the report the one
+ * folded last; none folded forgets the report. At most KEEP reports, the oldest going first.
+ */
+export function keepFolds(storage, slug, folded, present = null, key = FOLDS_KEY) {
+  const value = read(storage, key);
+  const keys = [...folded].filter((each) => !present || present.has(each));
+  delete value.folds[slug]; // put back last: the report folded last
+  if (keys.length) value.folds[slug] = keys;
+  const slugs = Object.keys(value.folds);
+  for (const old of slugs.slice(0, Math.max(0, slugs.length - KEEP))) delete value.folds[old];
+  storage.set(key, JSON.stringify(value));
+}
+
+/**
+ * A fold carried to the key its node has now (`moves`: [[before, after]], a node's key last read and
+ * now): a heading with no block id is keyed by its text (read.mjs), which changes as it is typed in
+ * and when a save gives it its id. Returns whether any fold moved (to be kept again).
+ */
+export function carryFolds(folded, moves) {
+  let moved = false;
+  for (const [before, after] of moves) {
+    if (before === after || !folded.has(before) || folded.has(after)) continue;
+    folded.delete(before);
+    folded.add(after);
+    moved = true;
+  }
+  return moved;
+}