@heycys/gallery 0.0.0-stage → 0.1.1

package/browser/editor/page/tooltip.mjs

@@ -0,0 +1,98 @@
+import { Z } from "../../shared/layers.mjs";
+import { placeBox } from "./placement.mjs";
+import { addStyle, element, mount } from "./ui.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+
+// The editor's one tooltip (as Notion's): dark, small, above the control it explains (below with
+// placement "bottom"), shown 150ms after the pointer rests on it, with a second, dimmer line for a
+// shortcut (shortcut() writes one as Notion does: Ctrl+⇧+S, ⌘⇧S on a Mac). The format bar's buttons,
+// its color swatches (the color's name), the block types of the menus, the handle, the section's
+// bar and the icon picker use it. A thing with no node of its own (a list's number, drawn by
+// ::before) gets one by its rectangle: tooltipAt. The hint that says why a block cannot be edited
+// (hints/) is the same bubble, by the pointer.
+
+const STYLE = `
+  .ge-tip, .ge-hint { position: fixed; left: 0; top: 0; width: max-content; max-width: 300px; padding: 5px 8px; border-radius: 6px; background: var(--ge-tip-bg); color: var(--ge-tip-tx); box-shadow: var(--ge-tip-shadow); font: 400 12px/1.4 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; overflow-wrap: break-word; white-space: pre-line; pointer-events: none; }
+  .ge-tip { z-index: ${Z.tooltip}; animation: ge-tip-in 50ms ease-out; }
+  .ge-hint { z-index: ${Z.hint}; max-width: 320px; }
+  .ge-tip small { display: block; color: var(--ge-tip-tx2); font-size: 12px; }
+  @keyframes ge-tip-in { from { opacity: 0; } }
+`;
+
+const DELAY = 150;
+const GAP = 6;
+const MAC = /Mac|iPhone|iPad/.test(globalThis.navigator?.platform ?? "");
+const KEYS = MAC ? { mod: "⌘", shift: "⇧", alt: "⌥", enter: "↩" } : { mod: "Ctrl", shift: "⇧", alt: "Alt", enter: "Enter" };
+let shown = null; // { node, tip }
+let timer = 0;
+
+const style = () => addStyle(STYLE);
+
+/** The bubble's look (the tooltip's and the hint's), put in the page. */
+export const bubbleLook = style;
+
+/** Shortcuts as the tooltip shows them: "mod+shift+s" is Ctrl+⇧+S (⌘⇧S on a Mac); several are alternatives. */
+export function shortcut(...combos) {
+  const text = combos.map((combo) => combo.split("+").map((key) => KEYS[key] ?? key.toUpperCase()).join("+")).join(t(" 或 "));
+  return MAC ? text.replaceAll("+", "") : text;
+}
+
+function hide() {
+  clearTimeout(timer);
+  timer = 0;
+  shown?.tip.remove();
+  shown = null;
+}
+
+// `placement`: "top" (above, below where there is no room), "bottom" (the other way round), "left" or
+// "right" (beside it); `align`: "center" or "start" (the control's left or top edge); `gap`: px from
+// it; `beside`: it only adds to the control and never stands over it, so none where there is no room.
+function show(node, text, hint, { placement = "top", align = "center", gap = GAP, beside = false } = {}) {
+  hide();
+  if (!node.isConnected) return;
+  const tip = mount(element("div", { class: "ge-tip", role: "tooltip" }, text, ...(hint ? [element("small", { text: hint })] : [])));
+  const box = node.getBoundingClientRect();
+  const { left, top } = placeBox(box, { width: tip.offsetWidth, height: tip.offsetHeight }, { placement, align, gap });
+  if (beside && left < box.right && left + tip.offsetWidth > box.left) return void tip.remove();
+  tip.style.transform = `translate(${Math.round(left)}px, ${Math.round(top)}px)`;
+  shown = { node, tip };
+}
+
+/**
+ * `node` shows `text` (and `hint`, a shortcut, on a line of its own) while the pointer rests on it.
+ * `text` may be a function, read each time (a label that changes with the state; none when it gives
+ * nothing: an outline row's title only when it is cut short).
+ */
+export function tooltip(node, text, hint = null, how = undefined) {
+  style();
+  node.addEventListener("pointerenter", () => {
+    clearTimeout(timer);
+    timer = setTimeout(() => {
+      const label = typeof text === "function" ? text() : text;
+      if (label) show(node, label, typeof hint === "function" ? hint() : hint, how);
+    }, DELAY);
+  });
+  node.addEventListener("pointerleave", () => { if (!shown || shown.node === node) hide(); else clearTimeout(timer); });
+  node.addEventListener("pointerdown", hide);
+  return node;
+}
+
+/**
+ * `text` (and `hint`) over the rectangle `rect` (client coordinates) once the pointer has rested
+ * there for a moment; whatever was showing or waiting goes. `hideTooltip` takes it away.
+ */
+export function tooltipAt(rect, text, hint = null) {
+  style();
+  hide();
+  const anchor = { isConnected: true, getBoundingClientRect: () => rect };
+  timer = setTimeout(() => show(anchor, text, hint), DELAY);
+}
+
+/** `text` over `rect` at once, for a caller with a delay of its own (the icon picker's: it waits while the keys move). */
+export function showTooltipAt(rect, text, how = undefined) {
+  style();
+  show({ isConnected: true, getBoundingClientRect: () => rect }, text, null, how);
+}
+
+/** Take any tooltip away (a menu closing, the page scrolling). */
+export const hideTooltip = hide;

package/browser/editor/page/type-grid.mjs

@@ -0,0 +1,83 @@
+import { BLOCK_TYPES, TYPE_INFO } from "../components/registry.mjs";
+import { pageOfType } from "./page-objects.mjs";
+import { tooltip } from "./tooltip.mjs";
+import { addStyle, element } from "./ui.mjs";
+import { t } from "../../shared/i18n/index.mjs";
+
+// The types a block can be turned into, as icons side by side (as Feishu's block menu), the block's
+// own type marked: the top of the block menu (block-menu/) and the format bar's "turn into"
+// (format-bar/). The buttons are the format bar's (32×28px, 4px apart; the current one marked as
+// a pressed tool of the bar is, its icon's lines in the bar's blue, --ge-accent, and no fill of its
+// own, so the pointer's gray fills it as any other), so both read alike. Each icon names its type, and its Markdown shortcut, in a tooltip.
+// A type that says `corner` has no cell of its own but the gray corner of that type's (a split
+// button): 小字's of 文本's, so 文本 and the headings fill one line. The corner shows only with the
+// pointer (or the keys) on the cell, or, blue, when the block is of that type. It is a click target
+// only, not in the arrow keys' path. A type that says `preload` has what it needs loaded as soon as
+// the grid offers it, and a block with text waits for it to be turned into that type (preloading).
+
+const CELL = 32; // a button's width (28px high)
+const GAP = 4;
+const SIDE = 6; // the grid's padding left and right
+const CORNER = 13; // the 小字 corner's legs: its right angle rounded off by the cell's own corner,
+// its other two corners a little (2.5px back from each tip along both sides).
+const TRIANGLE = "M13 2.5L13 13L2.5 13Q0 13 1.77 11.23L11.23 1.77Q13 0 13 2.5Z";
+
+const STYLE = `
+  .ge-types { display: grid; grid-template-columns: repeat(var(--ge-types-columns, 6), ${CELL}px); gap: ${GAP}px; padding: 8px ${SIDE}px 4px; }
+  .ge-type { display: flex; align-items: center; justify-content: center; width: ${CELL}px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--ge-ico); cursor: pointer; transition: background 20ms ease-in; }
+  .ge-type:hover, .ge-type[data-active] { background: var(--ge-hover); }
+  .ge-type:active { background: var(--ge-press); }
+  .ge-type[aria-current="true"] { color: var(--ge-accent); }
+  .ge-type-pair { position: relative; border-radius: 6px; overflow: hidden; }
+  .ge-type-corner { position: absolute; right: 0; bottom: 0; width: ${CORNER}px; height: ${CORNER}px; padding: 0; border: 0; background: transparent; cursor: pointer; }
+  .ge-type-corner::before { content: ""; position: absolute; inset: 0; background: light-dark(rgb(55 53 47 / 12%), rgb(255 255 255 / 13%)); clip-path: path("${TRIANGLE}"); opacity: 0; transition: background 20ms ease-in, opacity 120ms ease-out; }
+  .ge-type-pair:is(:hover, :has(.ge-type[data-active]), :has(.ge-type-corner[aria-current="true"])) .ge-type-corner::before { opacity: 1; }
+  .ge-type-corner:hover::before { background: light-dark(rgb(55 53 47 / 30%), rgb(255 255 255 / 28%)); }
+  .ge-type-corner[aria-current="true"]::before { background: var(--ge-accent); }
+  .ge-type svg { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
+`;
+
+/** What `type` still waits for on the page (`preload`, its page object's): the promise of its coming, or null when nothing. */
+export function preloading(type) {
+  return BLOCK_TYPES[type].preload ? pageOfType(type)?.preload(type) ?? null : null;
+}
+
+/** How wide a grid of `columns` is, its padding included (the block menu is as wide as its grid). */
+export const gridWidth = (columns) => columns * CELL + (columns - 1) * GAP + 2 * SIDE;
+
+/** The block menu's grid: types on a line; the menu as wide as it. A card of a few actions (a table's
+ * row or column menu) is as wide as the block menu. */
+export const MENU_COLUMNS = 5;
+export const MENU_WIDTH = gridWidth(MENU_COLUMNS);
+
+/**
+ * A grid of `types` (block type names), `current` marked; choosing one calls `choose(type)`.
+ * `columns`: how many fit on a line. Its cells, in order, are its `.ge-type` buttons.
+ */
+export function typeGrid(types, current, choose, { columns = 6 } = {}) {
+  addStyle(STYLE);
+  for (const type of types) preloading(type);
+  const grid = element("div", { class: "ge-types", role: "group", "aria-label": t("转换为") });
+  grid.style.setProperty("--ge-types-columns", String(columns));
+  const button = (type, className, html = "") => {
+    const { label, hint } = TYPE_INFO[type];
+    const node = element("button", { type: "button", class: className, "aria-label": label, "aria-current": String(type === current), html });
+    node.addEventListener("mousedown", (event) => event.preventDefault()); // the caret stays until the block turns
+    node.addEventListener("click", () => choose(type));
+    // "---" and "```" turn a block on their own; the others take a space after them.
+    tooltip(node, type === current ? t("{0}（当前）", label) : label, hint ? t("Markdown：{0}", `${hint}${/^(---|```)$/.test(hint) ? "" : t(" 空格")}`) : null);
+    return node;
+  };
+  const corners = new Map(types.filter((type) => types.includes(BLOCK_TYPES[type].corner)).map((type) => [BLOCK_TYPES[type].corner, type]));
+  const cornered = new Set(corners.values());
+  for (const type of types) {
+    if (cornered.has(type)) continue;
+    const cell = button(type, "ge-type", TYPE_INFO[type].icon);
+    if (corners.has(type)) {
+      const pair = element("div", { class: "ge-type-pair" });
+      pair.append(cell, button(corners.get(type), "ge-type-corner"));
+      grid.append(pair);
+    } else grid.append(cell);
+  }
+  return grid;
+}

package/browser/editor/page/typing/code-edges.mjs

@@ -0,0 +1,274 @@
+import { isPad, padCaret } from "../pads.mjs";
+import { ZWSP, blank } from "../../../shared/inline-spacing.mjs";
+import { editable, pointRange, select } from "../caret.mjs";
+import { ENTRIES } from "../../components/registry.mjs";
+
+// Inline code's edges (as Feishu's): each of its edges has two caret stops, outside it, where what
+// is typed is plain text, and inside it, where it is code (its padding sets them apart). ←/→ step
+// through both, and across a space between two pieces of code stop outside each; a press lands on
+// the side of the edge it was made on at once (codePress); and the caret types on the side it
+// shows on. The browser alone keeps neither the stop after the code (what is typed there goes into
+// the code) nor the one inside at its start (typed there it goes before the code), so those hold
+// the caret in a pad (pads.mjs). Code blocks are text blocks of their own (components/code/) and
+// have none of this. A component's entry in the text (`entry`: a chip as padded as code) has the
+// same stops, and Backspace at the stop after it (Delete at the one before it) takes the whole
+// entry away (takeEntry, on the key's keydown through beforeDelete and on its beforeinput where an
+// input method's keydown says 229; it says what the page says of that, editor.mjs records the step).
+// A Backspace that takes the last character between inline code or an entry and the caret after it
+// leaves the caret outside it, at the stop after it (deletingBack, deletedBack): the browser puts it
+// in at the end (an entry's: left of its icon), its end and the text after it one place to it.
+
+const EDGED = ["code", ...ENTRIES.map(({ at }) => at)].join(", ");
+const isEdged = (node) => node?.nodeType === 1 && node.matches(EDGED);
+const entryOf = (node) => (node?.nodeType === 1 ? ENTRIES.find(({ at }) => node.matches(at)) : undefined);
+
+// A text node with more than a pad's space in it.
+const real = (node) => node.nodeType === 3 && !blank(node);
+const textOf = (range) => range.toString().replaceAll(ZWSP, "");
+
+// The node right before or after a caret at (node, offset) outside code, pads and empty text
+// skipped; null when there is text in between.
+function besides(node, offset, after) {
+  let from;
+  if (node.nodeType === 3) {
+    const rest = after ? node.data.slice(offset) : node.data.slice(0, offset);
+    if (rest.replaceAll(ZWSP, "") !== "") return null;
+    from = after ? node.nextSibling : node.previousSibling;
+  } else from = after ? node.childNodes[offset] : node.childNodes[offset - 1];
+  while (from && from.nodeType === 3 && !real(from)) from = after ? from.nextSibling : from.previousSibling;
+  return from ?? null;
+}
+
+/**
+ * Where a collapsed caret stands at an edge of inline code: { code, side: "start" | "end", inside,
+ * padded }, or null away from any edge.
+ */
+function edgeAt(host, node, offset) {
+  const element = node.nodeType === 1 ? node : node.parentElement;
+  const code = element.closest(EDGED);
+  const padded = isPad(node);
+  if (code && host.contains(code) && code !== host) {
+    const range = host.ownerDocument.createRange();
+    range.selectNodeContents(code);
+    range.setEnd(node, offset);
+    if (textOf(range) === "") return { code, side: "start", inside: true, padded };
+    range.selectNodeContents(code);
+    range.setStart(node, offset);
+    if (textOf(range) === "") return { code, side: "end", inside: true, padded };
+    return null;
+  }
+  const before = besides(node, offset, false);
+  if (isEdged(before) && host.contains(before)) return { code: before, side: "end", inside: false, padded };
+  const after = besides(node, offset, true);
+  if (isEdged(after) && host.contains(after)) return { code: after, side: "start", inside: false, padded };
+  return null;
+}
+
+const caretAtEdge = (host) => {
+  const selection = getSelection();
+  if (!selection.rangeCount || !selection.isCollapsed || !host.contains(selection.anchorNode)) return null;
+  return edgeAt(host, selection.anchorNode, selection.anchorOffset);
+};
+
+// The stops: inside at the end is where the browser keeps the caret anyway; the other three may
+// need a pad.
+function insideEnd(code) {
+  const texts = [];
+  const walker = code.ownerDocument.createTreeWalker(code, NodeFilter.SHOW_TEXT);
+  for (let node; (node = walker.nextNode());) if (real(node)) texts.push(node);
+  const last = texts.at(-1);
+  if (!last) return padCaret(code, "start");
+  const caret = code.ownerDocument.createRange();
+  caret.setStart(last, last.data.length);
+  caret.collapse(true);
+  select(caret);
+}
+function outsideBefore(code) {
+  const before = code.previousSibling;
+  if (before?.nodeType === 3 && real(before)) {
+    const caret = code.ownerDocument.createRange();
+    caret.setStart(before, before.data.length);
+    caret.collapse(true);
+    return select(caret);
+  }
+  padCaret(code, "before"); // nothing to hold the caret before the code: typed there it would go in
+}
+
+// A caret one character from an edge, on the side the arrow (`right`) moves towards it: the stop on
+// this side of the edge it lands on (the browser would put it on the other side), or null.
+function nearEdge(host, node, offset, right) {
+  const chars = (text) => [...text.replaceAll(ZWSP, "")].length;
+  const element = node.nodeType === 1 ? node : node.parentElement;
+  const code = element.closest(EDGED);
+  if (code && host.contains(code) && code !== host) {
+    const range = host.ownerDocument.createRange();
+    range.selectNodeContents(code);
+    if (right) range.setStart(node, offset);
+    else range.setEnd(node, offset);
+    if (chars(range.toString()) !== 1) return null;
+    return right ? () => insideEnd(code) : () => padCaret(code, "start");
+  }
+  if (node.nodeType !== 3) return null;
+  let next = right ? node.nextSibling : node.previousSibling;
+  while (next && next.nodeType === 3 && !real(next)) next = right ? next.nextSibling : next.previousSibling;
+  if (!isEdged(next) || chars(right ? node.data.slice(offset) : node.data.slice(0, offset)) !== 1) return null;
+  return right ? () => outsideBefore(next) : () => padCaret(next, "after");
+}
+
+/**
+ * ←/→ at an edge of inline code: the stop outside it, or inside it; and one character from an
+ * edge, the stop on this side of it. Returns true when handled.
+ */
+export function codeArrow(host, key) {
+  if (key !== "ArrowLeft" && key !== "ArrowRight") return false;
+  const selection = getSelection();
+  if (!selection.rangeCount || !selection.isCollapsed || !host.contains(selection.anchorNode)) return false;
+  const right = key === "ArrowRight";
+  const edge = edgeAt(host, selection.anchorNode, selection.anchorOffset);
+  if (edge) {
+    const { code, side, inside } = edge;
+    if (right && side === "end" && inside) padCaret(code, "after");
+    else if (right && side === "start" && !inside) padCaret(code, "start");
+    else if (!right && side === "end" && !inside) insideEnd(code);
+    else if (!right && side === "start" && inside) outsideBefore(code);
+    // Moving away from this edge, the caret may come one character from another: the space between
+    // two pieces of code, ← from before the second stops after the first, not inside it.
+    if (side === "end" ? right === inside : right !== inside) return true;
+  }
+  const move = nearEdge(host, selection.anchorNode, selection.anchorOffset, right);
+  if (!move) return false;
+  move();
+  return true;
+}
+
+/**
+ * A caret that shows on one side of an edge but would type on the other goes into a pad on the
+ * side it shows on (after a move, typing or the browser's own placement): after the code, and
+ * inside at its start. (selectionchange)
+ */
+export function settleCodeEdge(host) {
+  const edge = host && caretAtEdge(host);
+  if (!edge || edge.padded) return;
+  if (edge.side === "end" && !edge.inside) padCaret(edge.code, "after");
+  else if (edge.side === "start" && edge.inside) padCaret(edge.code, "start");
+  else if (edge.side === "start" && !edge.inside && !(edge.code.previousSibling && real(edge.code.previousSibling))) padCaret(edge.code, "before");
+}
+
+// The stop on the side of an edge a press or click at `x` was made on: outside past the code's box
+// (its margin, or the space beside it), inside within it.
+function stopAt(edge, x) {
+  const rects = [...edge.code.getClientRects()];
+  if (rects.length === 0) return false;
+  if (edge.side === "end") {
+    if (x >= rects.at(-1).right) padCaret(edge.code, "after");
+    else insideEnd(edge.code);
+  } else if (x <= rects[0].left) outsideBefore(edge.code);
+  else padCaret(edge.code, "start");
+  return true;
+}
+
+/** A click (`x`) that put the caret at an edge of inline code: the stop on the side it was made on. */
+export function codeClick(host, x) {
+  const edge = caretAtEdge(host);
+  if (edge) stopAt(edge, x);
+}
+
+/**
+ * A mouse press at an edge of inline code (beside it, on its margin or a space next to it): the
+ * caret goes to the stop on that side at once. The browser would put it inside the code first (its
+ * end and the text after it are one place to it) and it would jump out on release, a flash. Returns
+ * the caret's range when it placed it (the caller cancels the press and follows the drag), else null.
+ */
+export function codePress(host, x, y) {
+  const at = pointRange(x, y);
+  if (!at || editable(at.startContainer) !== host) return null;
+  const edge = edgeAt(host, at.startContainer, at.startOffset);
+  if (!edge) return null;
+  host.focus({ preventScroll: true });
+  if (!stopAt(edge, x)) return null;
+  const selection = getSelection();
+  return selection.rangeCount ? selection.getRangeAt(0).cloneRange() : null;
+}
+
+/**
+ * Backspace (`back`) at the stop after a component's entry, or Delete at the one before it: the whole
+ * entry goes, as a chip of the text does, the caret where it stood, and what the page says of that is
+ * returned; nothing otherwise. The keydown's (beforeDelete) and the beforeinput's, for a key whose
+ * keydown the editor passed by (an input method's, keyCode 229: editor.mjs). The pads beside it go
+ * with it, before the text either side of it is joined, so that no zero-width space is left in that
+ * text (a pad an undo step put back is part of the text beside it by then).
+ */
+export function takeEntry(host, back) {
+  const selection = getSelection();
+  if (!selection.rangeCount || !selection.isCollapsed) return;
+  const outside = caretAtEdge(host);
+  const entry = outside && !outside.inside ? entryOf(outside.code) : undefined;
+  if (!entry || (back ? outside.side !== "end" : outside.side !== "start")) return;
+  const { code } = outside;
+  for (const [next, trim] of [["previousSibling", new RegExp(`${ZWSP}+$`)], ["nextSibling", new RegExp(`^${ZWSP}+`)]]) {
+    for (let node = code[next]; node?.nodeType === 3; node = code[next]) {
+      node.data = node.data.replace(trim, "");
+      if (node.data !== "") break;
+      node.remove();
+    }
+  }
+  const caret = host.ownerDocument.createRange();
+  caret.setStartBefore(code);
+  caret.collapse(true);
+  code.remove();
+  host.normalize();
+  select(caret);
+  return entry.removed;
+}
+
+/**
+ * Backspace or Delete with the caret in a pad at an edge: the pad goes first, the caret where the
+ * key then takes the character beside it, as it would without the pad (keydown, before the browser
+ * deletes or the editor merges blocks). At the stop beside a component's entry the whole entry goes
+ * (takeEntry), and what the page says of that is returned; nothing otherwise.
+ */
+export function beforeDelete(host, key) {
+  const back = key === "Backspace";
+  const removed = takeEntry(host, back);
+  if (removed) return removed;
+  const selection = getSelection();
+  if (!selection.rangeCount || !selection.isCollapsed) return;
+  const pad = selection.anchorNode;
+  if (!isPad(pad) || !host.contains(pad)) return;
+  const edge = caretAtEdge(host);
+  if (!edge) return;
+  const { code, side } = edge;
+  pad.remove();
+  if (side === "end" && back) {
+    insideEnd(code);
+    return;
+  }
+  const caret = host.ownerDocument.createRange();
+  if (side === "end") caret.setStartAfter(code); // Delete after the code: what follows it
+  else if (back) caret.setStartBefore(code); // Backspace at its start: what precedes it
+  else caret.selectNodeContents(code); // Delete at its start: its first character
+  caret.collapse(true);
+  select(caret);
+}
+
+// The host whose caret a deletion backward found in text outside any inline code or entry (no pad),
+// for the input after it (deletedBack).
+let backFrom = null;
+
+/** A deletion backward about to happen (its beforeinput): where the caret stands, for deletedBack. */
+export function deletingBack(host) {
+  const selection = getSelection();
+  const node = selection.rangeCount && selection.isCollapsed ? selection.anchorNode : null;
+  backFrom = node?.nodeType === 3 && !isPad(node) && !node.parentElement.closest(EDGED) ? host : null;
+}
+
+/**
+ * The deletion done (its input): a caret it took from the text after inline code or an entry into
+ * it, at its end, goes back out to the stop after it, where the reader deleting back stays.
+ */
+export function deletedBack(host) {
+  const was = backFrom === host;
+  backFrom = null;
+  const edge = was && caretAtEdge(host);
+  if (edge && edge.inside && edge.side === "end") padCaret(edge.code, "after");
+}