@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/components/dialog/page.mjs

@@ -0,0 +1,219 @@
+import { can, firstHost, newHost } from "../../page/core.mjs";
+import { caretAt, editable } from "../../page/caret.mjs";
+import { padCaret } from "../../page/pads.mjs";
+import { addStyle } from "../../page/ui.mjs";
+import { DIALOG } from "../kit.mjs";
+import { linkAround } from "../../page/links/index.mjs";
+import { DIALOG_TRIGGER, dialogContent, entryOf } from "./index.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 详情卡片 on the page. The format bar makes the selected text the entry of a new detail card (a
+// link to it, as the kit writes one in text): the card goes at the end of the report and opens, a
+// heading of that text first in it and the caret in the empty paragraph under it. One undo step
+// takes both away again, and redo brings the card back open; a new card whose link was removed is
+// not saved (core.mjs nodeOf), and a card of the file stays in it, with nothing left to open it.
+//
+// However a card closes (Esc, a press outside it, the workbench's bars) nothing stands where it was:
+// what stood over its text goes, and a caret left in it comes out at its entry. What lands in a card
+// no one sees (an undo step, a word 搜索文档 found) opens it (show). A page shown again has the
+// cards it had, the same one on top (kept, reopen).
+
+// While the page is edited the page's gutters are the room the handle takes beside a block
+// (--ge-edge-room, handle/). The card keeps its width and its text the page's (dialog.css): at a
+// window narrower than it, what is left of those gutters stands outside the card, where a press
+// closes it.
+const STYLE = `
+  :root[data-ge-editing] { --doc-dialog-edge: calc(var(--ge-edge-room) - var(--doc-dialog-side)); }
+  @media screen {
+    /* Where the page keeps room for the outline (margin.mjs), a card stands on the column, its text on the page's: the column and the room at each side of its text, as far left. */
+    :root[data-ge-margin] .doc-dialog {
+      width: calc(var(--ge-margin-column) + 2 * var(--doc-dialog-side));
+      margin-left: calc(max(var(--ge-margin-side), calc((100% - var(--ge-outline-room, 0px) - var(--ge-margin-column)) / 2)) - var(--doc-dialog-side));
+      margin-right: 0;
+    }
+  }
+`;
+
+/**
+ * A new detail card (dialog.doc-dialog) with this id, the kit's markup: a content region (a box)
+ * holding a heading of `title` (text), the size a detail card's opens with, and an empty paragraph.
+ */
+export function newDialog(doc, id, title = "") {
+  const dialog = doc.createElement("dialog");
+  dialog.className = "doc-dialog";
+  dialog.id = id;
+  for (const [name, value] of [["data-ge-new", ""], ["data-ge-type", "dialog"], ["data-ge-unit-kind", "dialog"]]) dialog.setAttribute(name, value);
+  const panel = doc.createElement("div");
+  panel.className = "doc-dialog-panel";
+  const content = doc.createElement("div");
+  content.className = "doc-dialog-content";
+  for (const [name, value] of [["data-ge-box", ""], ["data-ge-box-kind", "dialog"], ["data-ge-pure", ""]]) content.setAttribute(name, value);
+  const heading = newHost(doc, "heading3");
+  heading.textContent = title;
+  content.append(heading, newHost(doc, "paragraph"));
+  panel.append(content);
+  dialog.append(panel);
+  return dialog;
+}
+
+/** An id no element of the page has yet, for a new detail card: dialog-1, dialog-2… */
+export function freshDialogId(doc) {
+  let number = 1;
+  while (doc.getElementById(`dialog-${number}`)) number++;
+  return `dialog-${number}`;
+}
+
+/** A link opening a detail card, as the kit writes it in text. */
+export function dialogLink(doc, id) {
+  const link = doc.createElement("a");
+  link.className = DIALOG_TRIGGER;
+  link.setAttribute("href", `#${id}`);
+  return link;
+}
+
+// A card opened as the kit opens one, which goes back to `opener` once it closes.
+function openCard(card, opener) {
+  if (globalThis.DocDialogs?.open) globalThis.DocDialogs.open(card, opener);
+  else card.showModal?.();
+}
+
+/**
+ * The detail cards open now, in the order they opened (the last one on top: a card opened from a
+ * link in another), followed as their `open` attribute comes and goes; each `listener` of them
+ * hears of that, and of the kit's page lock (the root's doc-dialog-open, dialogs.js) changing.
+ */
+function followCards() {
+  const listeners = new Set();
+  const told = () => listeners.forEach((listener) => listener());
+  let order = [...document.querySelectorAll(DIALOG.open)];
+  new MutationObserver((records) => {
+    for (const { target } of records) {
+      if (!(target instanceof HTMLDialogElement) || !target.matches(DIALOG.match)) continue;
+      order = order.filter((card) => card !== target);
+      if (target.open) order.push(target);
+    }
+    told();
+  }).observe(document.documentElement, { subtree: true, attributes: true, attributeFilter: ["open"] });
+  new MutationObserver(told).observe(document.documentElement, { attributes: true, attributeFilter: ["class"] });
+  return {
+    listen: (listener) => listeners.add(listener),
+    /** The cards open, the one on top last (one the page put back open, unheard, after those heard). */
+    open() {
+      const now = [...document.querySelectorAll(DIALOG.open)];
+      order = order.filter((card) => now.includes(card));
+      return [...order, ...now.filter((card) => !order.includes(card))];
+    },
+  };
+}
+
+/**
+ * Detail cards, with what the editor gives it: struct (a structural undo step), say, limitText,
+ * selectionContext (the selection inside one text block), hideFormatBar, closeTools (what opens over
+ * the page), blocks (the block tools) and isEditing.
+ */
+export function create({ struct, say, limitText, selectionContext, hideFormatBar, closeTools, blocks, isEditing }) {
+  addStyle(STYLE);
+  const cards = followCards();
+
+  // A card closed: it leaves nothing behind. The caret goes to its entry, outside it, when that is in
+  // what shows now (the page, or the card on top); else to the first text of the card on top, or
+  // nowhere. The focus went back as the card closed, which put it at the start of the block that
+  // takes it.
+  function closed(card) {
+    closeTools();
+    if (blocks().picked.some((block) => card.contains(block))) blocks().clear();
+    const top = cards.open().at(-1);
+    const entry = entryOf(card);
+    const host = entry && (!top || top.contains(entry)) ? editable(entry) : null;
+    if (host) {
+      host.focus({ preventScroll: true });
+      padCaret(entry, "after");
+    } else if (top) caretAt(firstHost(dialogContent(top)), "start");
+    else if (card.contains(getSelection().anchorNode)) getSelection().removeAllRanges();
+  }
+  // Heard after the kit's, which gives the focus back (`close` does not bubble: on its way down).
+  document.addEventListener("close", (event) => {
+    if (isEditing() && event.target.matches?.(DIALOG.match)) closed(event.target);
+  }, true);
+
+  // The card on top closes as a press on its backdrop closes it (the kit's dialogs.js); one under it
+  // stays. Returns whether one was open.
+  function closeTop() {
+    const card = cards.open().at(-1);
+    if (!card) return false;
+    if (globalThis.DocDialogs?.close) globalThis.DocDialogs.close(card, "outside");
+    else card.close();
+    return true;
+  }
+  // The browser's own Esc takes together the cards opened with no key or press between them, as a
+  // page shown again opens them; what the page's Esc takes first it has prevented by now.
+  document.addEventListener("keydown", (event) => {
+    if (event.key !== "Escape" || event.defaultPrevented || event.isComposing || cards.open().length < 2) return;
+    event.preventDefault();
+    closeTop();
+  });
+
+  // The format bar's card button (`fromSelection`): the selected text opens a new detail card.
+  function fromSelection() {
+    const context = selectionContext();
+    if (!context) return say(t("先选中点开详情卡片的文字。"));
+    const { host, range } = context;
+    if (!can(host, "links")) return say(limitText(host, "links"));
+    if (linkAround(host, range) || range.cloneContents().querySelector("a")) return say(t("选中的文字里已经有链接，先移除链接（Ctrl+K）再做详情卡片的入口。"));
+    const title = range.toString().replace(/\s+/g, " ").trim();
+    const main = document.querySelector("main[data-ge-box]");
+    if (!title || !main) return say(title ? t("这里不能新建详情卡片。") : t("先选中点开详情卡片的文字。"));
+    const id = freshDialogId(document);
+    const dialog = newDialog(document, id, title);
+    hideFormatBar();
+    struct([main], [host], () => {
+      const link = dialogLink(document, id);
+      link.append(range.extractContents());
+      range.insertNode(link);
+      main.append(dialog);
+      return { touched: [host], focus: dialogContent(dialog).lastElementChild };
+    });
+    openCard(dialog);
+    caretAt(dialogContent(dialog).lastElementChild, "start");
+    say(t("已新建详情卡片：标题取自选中的文字，接着写卡片里的内容 · Esc 关闭 · Ctrl+Z 撤销"));
+  }
+
+  // Esc in what stands in an open card is the card's (it closes it, as for a reader): no block selected.
+  const escape = ({ host }) => Boolean(host.closest("dialog[open]"));
+
+  return {
+    fromSelection,
+    keys: { around: { escape } },
+    modalOps: {
+      /** The cards open, the one on top last; `listen(listener)`: told when that may have changed. */
+      open: () => cards.open(),
+      listen: cards.listen,
+      closeTop,
+      /**
+       * The card holding `node` shown, for what lands in it: closed, it opens over the others; put back
+       * open by an undo step, as no modal, it opens as one. Returns its content region, or null for a
+       * node in no card.
+       */
+      show(node) {
+        const card = (node?.nodeType === 1 ? node : node?.parentElement)?.closest(DIALOG.match);
+        if (!card) return null;
+        if (!card.matches(":modal")) {
+          card.removeAttribute("open");
+          openCard(card, entryOf(card) ?? undefined);
+        }
+        return dialogContent(card);
+      },
+      /** The cards open, for a page shown again: their ids, the one on top last, and how far each is scrolled. */
+      kept: () => cards.open().map((card) => ({ id: card.id, top: dialogContent(card)?.scrollTop ?? 0 })),
+      /** The cards of `kept` the page still has, open again. */
+      reopen(kept) {
+        for (const { id, top } of kept) {
+          const card = document.getElementById(id);
+          if (!card?.matches(DIALOG.match)) continue;
+          openCard(card, entryOf(card) ?? undefined);
+          dialogContent(card).scrollTop = top;
+        }
+      },
+    },
+  };
+}

package/browser/editor/components/divider/index.mjs

@@ -0,0 +1,48 @@
+import { svg } from "../icons.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 分割线: an <hr>, a block like any other (a line above a section is one at its top). Made only
+// from an empty block ("---", the "/" menu, the block menu), followed by an empty paragraph to write
+// in; turned into another type it becomes an empty block of that type. A press on its line selects it.
+//
+// Where the engines reach it (src/editor/page/ unless named): convert.mjs (`create`; turned into
+// another type: `turnsEmpty`), markdown/ ("---": `markdown`), handle/ (a press on its line selects it:
+// lineAt), geometry.mjs (its band ±12px: extentOf), core.mjs (its frame's corners), clipboard/own/ (`clipboard`),
+// ../source/ (a void element), src/transfer/ (a line of Markdown).
+// Its look: the kit's styles/flow.css (src/render/kit/).
+
+/** A new divider line. */
+export function newDivider(doc) {
+  const rule = doc.createElement("hr");
+  for (const [name, value] of [["data-ge-new", ""], ["data-ge-type", "divider"], ["data-ge-unit-kind", "rule"], ["data-ge-frame", ""], ["data-ge-round", "text"]]) rule.setAttribute(name, value);
+  return rule;
+}
+
+export default {
+  name: "divider",
+  listed: () => t("分割线"),
+  units: {
+    rule: { name: t("分割线"), match: [{ rank: 230, tag: "hr" }], boxed: true, turnsEmpty: true },
+  },
+  types: {
+    divider: {
+      menu: ["basic", 15], fresh: 1, // no type a block turns into: made by "/" or 在下方新建
+      tag: "hr", kind: "rule", bare: true,
+      clipboard: {
+        kind: "hr",
+        describe: (node) => (node.localName === "hr" ? { type: "divider" } : undefined),
+        check: () => true,
+        build: ({ doc }) => newDivider(doc),
+        text: () => [],
+      },
+      // It replaces an empty block; the empty paragraph after it is where the caret goes.
+      create({ doc, put, paragraph }) {
+        put(newDivider(doc));
+        return put(paragraph());
+      },
+      label: t("分割线"), icon: svg('<path d="M3 10h14"/><path d="M5.5 6h9M5.5 14h9" stroke-opacity=".35"/>'),
+      hint: "---", markdown: [{ match: /^---$/, alone: true }], words: "分割线 分隔线 横线 fengexian fgx hr divider line rule",
+      glance: { row: 5, name: "分割线", write: "`<hr>` first in a section", rule: "The page" },
+    },
+  },
+};

package/browser/editor/components/embed/icons.mjs

@@ -0,0 +1,11 @@
+import { svg } from "../icons.mjs";
+
+// The embed block's icons: the editor's own line drawings (components/icons.mjs svg), no size or color
+// of their own: the bar, the toolbar and the menus set them.
+
+export const EMBED_ICONS = {
+  // An eye in the four corners of a frame: a page taken in.
+  linkCaptureEye: svg('<path d="M3.5 7V5.5a2 2 0 0 1 2-2H7M13 3.5h1.5a2 2 0 0 1 2 2V7M3.5 13v1.5a2 2 0 0 0 2 2H7M13 16.5h1.5a2 2 0 0 0 2-2V13"/><path d="M6.25 10S7.7 7.5 10 7.5s3.75 2.5 3.75 2.5-1.45 2.5-3.75 2.5S6.25 10 6.25 10z"/><circle cx="10" cy="10" r=".9" fill="currentColor" stroke="none"/>'),
+  // An arrow leaving a corner: the toolbar's 在新标签页中打开 and the menu's 查看原始内容.
+  open: svg('<path d="M5.5 14.5 14.5 5.5"/><path d="M7 5.5h7.5V13"/>'),
+};

package/browser/editor/components/embed/index.mjs

@@ -0,0 +1,123 @@
+import { EMBED_ICONS } from "./icons.mjs";
+import { SPAN, SPAN_SIZE } from "../../../shared/media.mjs";
+import { captionWords, fileOf, mediaReadOnly, newMediaFigure } from "../media/parts.mjs";
+import { barMarkup } from "../placeholder-bar.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 嵌入 (Notion's embed block): the kit's figure.doc-embed, a web page in a sandboxed frame (it stays
+// on the web), or an HTML or PDF file of the report's folder (assets/<file>: an HTML file sandboxed
+// with no origin of its own, a PDF in the browser's viewer), and its caption, a <figcaption> always
+// written (a media block's, components/media/). A card: one block, moved, deleted, captioned as a
+// whole; its height a size (--doc-embed-height). Made from an empty block (the "/" menu: 嵌入): a
+// placeholder until a page is given (one that refuses frames becomes a bookmark, as Notion's) or a
+// file chosen (editor/media-store.mjs, kind "embed"), written once it has one. page.mjs: the
+// menu, the corner handles, the toolbar, the block menu's rows; file.mjs: a new one
+// in report.html.
+//
+// Where the engines reach it (src/editor/page/ unless named): convert.mjs (made from an empty block:
+// `create`), editor.mjs (the menu opens on a new one: page.mjs `onCreated`), clipboard/ (an embed
+// pasted: `clipboard`), src/transfer/markdown.mjs (`read`), ../source/ (its caption: blocks.mjs).
+// Its look: the kit's styles/embed.css (src/render/kit/); its file where the preview shows it and
+// embedded in an export: src/render/embeds.mjs (a PDF shown through a blob: address by the runtime).
+export const EMBED_ICON = EMBED_ICONS.linkCaptureEye;
+export const HEIGHT = "--doc-embed-height";
+/** The frame's height as a size: the least and the most (px) it may be given. */
+export const HEIGHT_SIZE = { min: 96, max: 2000, px: true };
+
+/** The sandbox of a web page's frame (Notion's), and of an HTML file's (no origin of its own). */
+export const WEB_SANDBOX = "allow-scripts allow-popups allow-top-navigation-by-user-activation allow-forms allow-same-origin allow-storage-access-by-user-activation allow-popups-to-escape-sandbox";
+export const FILE_SANDBOX = "allow-scripts allow-popups allow-forms allow-modals";
+
+/**
+ * An embed's placeholder bar, as markup: in a new one, and in one the file keeps empty from the first paint (the server
+ * puts it there: components/placeholder.mjs showEmpty).
+ */
+const placeholder = () => barMarkup("doc-embed", EMBED_ICON, t("嵌入网页，或上传 HTML、PDF 文件")); // its words in the language t() says them in now (placeholder.mjs showEmpty)
+
+export default {
+  name: "embed",
+  listed: () => t("嵌入"),
+  readOnly: [mediaReadOnly("embed")],
+  units: {
+    embed: {
+      name: t("嵌入"),
+      match: [{ rank: 42, tag: "figure", class: "doc-embed" }],
+      boxed: true,
+      sizes: { [HEIGHT]: HEIGHT_SIZE, [SPAN]: SPAN_SIZE },
+    },
+  },
+  types: {
+    embed: {
+      menu: ["advanced", 20], fresh: 5,
+      tag: "figure", className: "doc-embed", kind: "embed", bare: true,
+      create: ({ doc, put }) => put(newEmbed(doc)), // its placeholder stands for the empty block; what it holds is chosen next
+      // Copied as itself, a card. It comes as this from another program: its address, filled once on
+      // the page. Written out its caption is its link's words, and no paragraph of its own.
+      clipboard: {
+        kind: "media",
+        read(unit, { plain }) {
+          const src = unit.querySelector(":scope > iframe")?.getAttribute("src");
+          if (!src) return null;
+          const local = !/^https?:/i.test(src);
+          const name = src.split("/").pop();
+          return { label: plain(unit.querySelector(":scope > figcaption")) || (local ? name : src), src, name, file: local };
+        },
+        check: (block, { webPage }) => webPage(block.src),
+        build: ({ doc, block, pending }) => pending(newEmbed(doc), block.src),
+        text: () => [],
+      },
+      // What a new one is written with (core.mjs nodeOf): its page or file, height and caption; an
+      // empty figure while it has neither (its placeholder, kept: file.mjs).
+      extras: (element) => embedNode(element),
+      part: ".doc-embed",
+      bar: placeholder,
+      label: t("嵌入"), icon: EMBED_ICON,
+      words: "嵌入 网页 网站 iframe html pdf qianru qr embed website page",
+      glance: { row: 17, name: "嵌入", write: "`figure.doc-embed`", rule: "Kit blocks" },
+    },
+  },
+};
+
+/** An embed block's frame, once it shows something. */
+export const frameOf = (figure) => figure.querySelector(":scope > iframe.doc-embed-frame");
+
+// What a new embed is written with: its page (or its file, not where the preview shows it), its
+// height and its caption.
+function embedNode(figure) {
+  const frame = frameOf(figure);
+  const height = figure.style.getPropertyValue(HEIGHT).trim();
+  return {
+    src: fileOf(frame, "src") ?? "",
+    ...(height ? { height } : {}),
+    caption: captionWords(figure),
+  };
+}
+
+/** A new embed (the "/" menu's 嵌入): its placeholder, until a page is given or a file chosen (page.mjs). */
+export const newEmbed = (doc) => newMediaFigure(doc, "embed", placeholder());
+
+/**
+ * Where a web page shows in a frame (Notion's 939438): a YouTube video's player, a Google document's
+ * preview; any other page as it is.
+ */
+export function frameAddress(src) {
+  let url;
+  try {
+    url = new URL(src);
+  } catch {
+    return src;
+  }
+  const host = url.hostname.replace(/^www\.|^m\./, "");
+  if (host === "youtu.be") return `https://www.youtube.com/embed/${url.pathname.slice(1)}`;
+  if (host === "youtube.com") {
+    const video = url.searchParams.get("v");
+    const path = /^\/(shorts|live)\/([\w-]+)/.exec(url.pathname);
+    if (video) return `https://www.youtube.com/embed/${video}`;
+    if (path) return `https://www.youtube.com/embed/${path[2]}`;
+  }
+  if (host === "docs.google.com" && /\/edit$/.test(url.pathname)) {
+    url.pathname = url.pathname.replace(/\/edit$/, "/preview");
+    return url.href;
+  }
+  return url.href;
+}