@heycys/gallery 0.0.0-stage → 0.1.0

package/browser/editor/components/media/write.mjs

@@ -0,0 +1,7 @@
+import { MEDIA_CLASS } from "../../../shared/components/index.mjs";
+
+// What the four media blocks' writers (each component's file.mjs, the server's: source/) share when
+// a new block is written into report.html.
+
+/** A media block `id` left empty (the page editor's placeholder): an empty figure, shown to no reader. */
+export const emptyFigure = (id, w) => `<figure class="${MEDIA_CLASS[id]}"${w.id}></figure>`;

package/browser/editor/components/pages.mjs

@@ -0,0 +1,46 @@
+import { create as bookmark } from "./bookmark/page.mjs";
+import { create as callout } from "./callout/page.mjs";
+import { create as code } from "./code/page.mjs";
+import { create as columns } from "./columns/page.mjs";
+import { create as details } from "./details/page.mjs";
+import { create as dialog } from "./dialog/page.mjs";
+import { create as embed } from "./embed/page.mjs";
+import { create as figure } from "./figure/page.mjs";
+import { create as file } from "./file/page.mjs";
+import { create as flowchart } from "./flowchart/page.mjs";
+import { create as nodeAdder } from "./flowchart/add.mjs";
+import { create as icon } from "./icon/page.mjs";
+import { create as image } from "./image/page.mjs";
+import { create as installed } from "./installed/page.mjs";
+import { create as list } from "./list/page.mjs";
+import { create as math } from "./math/page.mjs";
+import { create as media } from "./media/page.mjs";
+import { create as paragraph } from "./paragraph/page.mjs";
+import { create as section } from "./section/page.mjs";
+import { create as sheets } from "./sheets/page.mjs";
+import { create as sheetPills } from "./sheets/pills.mjs";
+import { create as table } from "./table/page.mjs";
+
+// The components' page modules (src/editor/components/<name>/page.mjs), the browser's counterpart of
+// registry.mjs: the one place that imports them to make them, so that src/editor/page/editor.mjs
+// names none. Only the page loads this file, the server never (registry.mjs is what both load).
+//
+// The order is the order they are made in, and it counts: each one's styles go into the page and its
+// listeners onto the document as it is made, and media comes before the four blocks made of its
+// parts (block(id)). It is also the order they are asked in where every one is: the columns tidy
+// before the lists (`tidy`), an image takes a pasted file before a file block does (`acceptsFile`).
+const PAGES = { columns, code, list, flowchart, nodeAdder, details, dialog, callout, paragraph, section, icon, sheets, sheetPills, figure, media, image, file, bookmark, embed, math, table, installed };
+
+/**
+ * Every component's page object, by its component's name (and the flowchart's "+", nodeAdder, and a
+ * Sheet's tabs as pills, sheetPills, modules of their own: flowchart/add.mjs, sheets/pills.mjs): each page module's create(ctx), all with the one `ctx` the
+ * editor builds, plus `ctx.pages`: these page objects, as they are made. What one component needs of
+ * another it reads from there when it uses it, never by an import; a page object made later is there
+ * by then.
+ */
+export function createPages(ctx) {
+  const pages = {};
+  const given = { ...ctx, pages };
+  for (const [name, create] of Object.entries(PAGES)) pages[name] = create(given);
+  return pages;
+}

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

@@ -0,0 +1,43 @@
+import { svg } from "../icons.mjs";
+import { PARAGRAPH, classOf } from "../kit.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 文本 and 小字: the plain text blocks. A paragraph is the editor's default block: Enter makes one,
+// an emptied list item or quote paragraph becomes one, a click below the last block starts one.
+// 小字 is the kit's .doc-note. Being the
+// default, a paragraph is the engines' own: core.mjs (newHost, splitBlock), insert/
+// (paragraphBefore, newParagraph, clickBlank), convert.mjs (typeOf tells 小字 from text), clipboard/own/
+// (a text block's description is the engine's own, and a block that says no kind is written as a paragraph).
+// Its color (颜色 in the block menu): class switches, colors.mjs.
+// Its look: the kit's styles/flow.css (src/render/kit/).
+/** The class of small text's end part (the page editor's Tab), a span at the line's right end (the kit's styles/flow.css). */
+export const TAB = classOf(PARAGRAPH.tail);
+
+/** Small text: a p of the kit's .doc-note. The one place that knows it. */
+export const isNote = (element) => element.localName === "p" && element.classList.contains("doc-note");
+
+/** Whether a span is small text's end part (what the Tab key makes). */
+export const isNoteTab = (node) => node.localName === "span" && node.classList.contains(TAB) && Boolean(node.parentElement && isNote(node.parentElement));
+
+export default {
+  name: "paragraph",
+  listed: () => t("文本"), hideable: false,
+  units: {
+    paragraph: { name: t("文本"), match: [{ rank: 180, tag: "p" }], colors: ["text", "background"], emptyIsNothing: true, fromWords: true },
+  },
+  types: {
+    paragraph: {
+      turn: 1, menu: ["basic", 1],
+      tag: "p", kind: "paragraph", leaf: "paragraph", text: true, empty: true,
+      label: t("文本"), icon: svg('<path d="M4.75 5.5V4.25h10.5V5.5M10 4.25v11.5M8.25 15.75h3.5"/>'), words: "文本 正文 段落 wenben zhengwen duanluo wb zw dl text paragraph p",
+      glance: { row: 2, name: "文本", write: "`<p>`", rule: "Text and lists" },
+    },
+    note: { // 小字: a brief label, unit or scope note
+      turn: 2, menu: ["basic", 2],
+      tag: "p", className: "doc-note", kind: "paragraph", leaf: "note", text: true, empty: true,
+      corner: "paragraph", // seldom picked: the gray corner of 文本's cell (type-grid.mjs), so 文本 and the headings fill one line
+      label: t("小字"), icon: svg('<path d="M6.25 8.5v-.9h7.5v.9M10 7.6v8.15M8.75 15.75h2.5"/>'), words: "小字 注释 说明 备注 标注 xiaozi zhushi shuoming beizhu xz zs sm note small caption",
+      glance: { row: 11, name: "小字", write: "`<p class=\"doc-note\">`, `span.doc-tab` at its right", rule: "Kit blocks" },
+    },
+  },
+};

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

@@ -0,0 +1,52 @@
+import { select } from "../../page/caret.mjs";
+import { padCaret } from "../../page/pads.mjs";
+import { TAB, isNote } from "./index.mjs";
+
+// 小字's Tab (small text: isNote): what follows the caret stands at the line's right end, a
+// span.doc-tab the kit floats there (styles/flow.css), as a line of scope on the left and unit
+// on the right; Tab before one puts the words up to it into it too. Shift+Tab, or Tab with the
+// caret in that end part, puts its words back after the words before it.
+
+/** Tab (`back`: Shift+Tab) in small text `host`. Returns whether it changed (the caller records it). */
+function noteTab(host, back) {
+  const selection = getSelection();
+  if (!selection.rangeCount || !host.contains(selection.anchorNode)) return false;
+  const tab = host.querySelector(`:scope > span.${TAB}`);
+  const range = selection.getRangeAt(0);
+  if (back || tab?.contains(range.startContainer)) {
+    if (!tab) return false;
+    // Its words back where it stood, the caret where they begin.
+    const mark = document.createTextNode("");
+    tab.before(mark);
+    tab.replaceWith(...tab.childNodes);
+    const caret = document.createRange();
+    caret.setStartAfter(mark);
+    mark.remove();
+    select(caret);
+    return true;
+  }
+  // The words from the caret to the end part (or the line's end) go to the right.
+  const rest = document.createRange();
+  rest.setStart(range.startContainer, range.startOffset);
+  if (tab) rest.setEndBefore(tab);
+  else rest.setEnd(host, host.childNodes.length);
+  const words = rest.extractContents();
+  const span = tab ?? Object.assign(document.createElement("span"), { className: TAB });
+  span.prepend(words);
+  if (!tab) host.append(span);
+  padCaret(span, "start");
+  return true;
+}
+
+/** Small text's keys (`keys`), with what the editor gives it: recordText (one step of typing). */
+export function create({ recordText }) {
+  return {
+    keys: {
+      tab({ host }, back) {
+        if (!isNote(host)) return false;
+        if (noteTab(host, back)) recordText(host);
+        return true;
+      },
+    },
+  };
+}

package/browser/editor/components/placeholder-bar.mjs

@@ -0,0 +1,17 @@
+// The gray bar of a media block left empty (图片, 文件, 网页书签, 嵌入): its markup and its class, spelled
+// once, from the class of the block it stands in ("doc-image" has "ge-image-empty"). Its look is
+// placeholder.mjs's, one for all of them; each component's index.mjs says its icon and its words. Code that
+// finds a bar names its class with barClass too, never by writing .ge-image-empty and the like out.
+
+/** The class of the bar in a block of class `block`. */
+export const barClass = (block) => `${block.replace("doc-", "ge-")}-empty`;
+
+/** The bar as markup: `icon` (an svg) and `words`. */
+export const barMarkup = (block, icon, words) => `<div class="${barClass(block)}" data-doc-dev role="button">${icon}<span>${words}</span></div>`;
+
+/** A bar of this markup made in `doc`. */
+export function barElement(doc, markup) {
+  const holder = doc.createElement("template");
+  holder.innerHTML = markup;
+  return holder.content.firstElementChild;
+}

package/browser/editor/components/placeholder.mjs

@@ -0,0 +1,128 @@
+import { MEDIA_BLOCKS, MEDIA_CLASS } from "../../shared/components/index.mjs";
+import { MENTION_PAGE } from "../../shared/components/mention.mjs";
+import { FORMULA_ICON, LINK_ICON, PAGE_ICON } from "./icons.mjs";
+import { BLOCK_TYPES } from "./registry.mjs";
+import { TEX_LOGO } from "./math/tex-logo.mjs";
+import { barClass } from "./placeholder-bar.mjs";
+import { inLanguage, t } from "../../shared/i18n/index.mjs";
+
+// What a block or an inline atom left empty shows while the page is edited, to be filled later
+// (docs/editor.md, "Empty blocks"); the file has the empty block, which no reader sees:
+//
+//   - 图片, 文件, 网页书签 and 嵌入 hold a gray bar (Notion's media placeholder, 605415: each
+//     media type's `bar`), a 公式块 is one itself (an empty .doc-math-block, its TeX mark and
+//     words drawn before and after it; notion-lite blocks/equation). One look for all five, whatever
+//     the block is once filled: the media gap above and below, the bar 12px in (36px at its end), its
+//     icon 25px wide and 12px before its words, 14px gray words, corners of 10px, tinted under the
+//     pointer; what the editor draws over it (a selected block's fill, overlay-layer.mjs) 6px past
+//     it, its corners 16px.
+//   - An inline formula, link or page block left empty (data-ge-empty "formula", "link" or "page":
+//     \(\), an empty <a class="doc-link-mention">, with data-doc-page for a page block) is a gray chip in the text, its icon and its name inside it
+//     (Notion's empty formula, 177540: √x 新公式), so that the browser keeps a caret beside it and
+//     deletes it as it does a formula; tinted blue while its box or card is open, red while a
+//     formula there does not read (√x 无效的公式). A formula left so, its TeX in the file as typed,
+//     is the same gray chip with those words, and a formula block left so its gray bar.
+//
+// All of it is there from the first paint, not once the editor has started: the server serves the
+// page so (showEmpty, in the page's own markup) and this look in its head (EMPTY_STYLE: service.mjs
+// preview), and the editor makes the same markup for what becomes empty on the page. Their words are
+// the UI's language's: the server, which does not know it (the reader's browser keeps it), serves
+// them in Chinese, and the page's first script (emptyWordsScript, in its head) says them again in
+// English before the page shows when its root says the UI is English (data-ge-language, src/shared/
+// i18n languageScript); the look's words (a formula block's) are in both, the root choosing.
+
+/** The media blocks' bars (the `bar` of each one's type), by the class of their figure: each its markup, its words in the language t() says them in. */
+export const MEDIA_BARS = Object.defineProperties({}, Object.fromEntries(MEDIA_BLOCKS.filter((id) => BLOCK_TYPES[id]).map((id) => [MEDIA_CLASS[id], { enumerable: true, get: () => BLOCK_TYPES[id].bar() }])));
+const EMPTY_MEDIA = new RegExp(`<figure class="(${Object.keys(MEDIA_BARS).join("|")})"([^>]*)>\\s*</figure>`, "g");
+
+// What a formula, link or page block left empty holds, and a formula being edited that does not read: its icon and its words.
+const CHIPS = { formula: [FORMULA_ICON, () => t("新公式")], link: [LINK_ICON, () => t("链接")], page: [PAGE_ICON, () => t("页面")], invalid: [FORMULA_ICON, () => t("无效的公式")] };
+
+/** The markup inside a chip of `kind` ("formula", "link", "page"; "invalid"): its icon and its name. */
+export const chipHtml = (kind) => `${CHIPS[kind][0]}<span>${CHIPS[kind][1]()}</span>`;
+
+/** Mark `chip` (an inline formula or link) as left empty, of `kind` ("formula", "link" or "page"). */
+export function markEmpty(chip, kind) {
+  chip.setAttribute("data-ge-empty", kind);
+  chip.innerHTML = chipHtml(kind);
+}
+
+/**
+ * The page as served for editing (service.mjs preview) with what is empty as the editor shows it:
+ * an empty media figure holds its bar, an empty formula block nothing (its look is :empty's), an empty
+ * inline formula or link its chip; their words in Chinese (emptyWordsScript says them in English).
+ */
+export function showEmpty(html) {
+  return inLanguage("zh", () => html
+    .replace(EMPTY_MEDIA, (_, name, rest) => `<figure class="${name}"${rest}>${MEDIA_BARS[name]}</figure>`)
+    .replace(/(<div class="doc-math-block"[^>]*>)\s*\\\[\s*\\\]\s*(<\/div>)/g, "$1$2")
+    .replace(/<span class="doc-math-inline"([^>]*)>\s*\\\(\s*\\\)\s*<\/span>/g, (_, rest) => `<span class="doc-math-inline"${rest} data-ge-empty="formula">${chipHtml("formula")}</span>`)
+    .replace(/<a class="doc-link-mention"([^>]*)><\/a>/g, (_, rest) => {
+      const kind = rest.includes(MENTION_PAGE) ? "page" : "link";
+      return `<a class="doc-link-mention"${rest} data-ge-empty="${kind}">${chipHtml(kind)}</a>`;
+    }));
+}
+
+// The words of what showEmpty serves, [Chinese, English] each.
+const servedWords = () => {
+  const words = () => [
+    ...Object.keys(MEDIA_BARS).map((name) => /<span>([^<]*)<\/span><\/div>$/.exec(MEDIA_BARS[name])?.[1] ?? ""),
+    ...["formula", "link", "page"].map((kind) => CHIPS[kind][1]()),
+  ];
+  const [zh, en] = [inLanguage("zh", words), inLanguage("en", words)];
+  return zh.map((word, index) => [word, en[index]]).filter(([chinese, english]) => chinese && chinese !== english);
+};
+
+/**
+ * The script in the head of a page served for editing (service.mjs preview) that says what showEmpty
+ * served in English, as the page has loaded and before it shows (the kit holds its first paint till
+ * the frame after), when the page's root says the UI is English (data-ge-language): the words of
+ * each empty media block's bar and each empty chip.
+ */
+export function emptyWordsScript() {
+  const spans = [...Object.keys(MEDIA_BARS).map((name) => `.${name} > .${barClass(name)} > span`), "[data-ge-empty] > span"].join(", ");
+  const run = (pairs, spans) => document.addEventListener("DOMContentLoaded", () => {
+    if (document.documentElement.getAttribute("data-ge-language") !== "en") return;
+    const english = new Map(pairs);
+    for (const span of document.querySelectorAll(spans)) if (english.has(span.textContent)) span.textContent = english.get(span.textContent);
+  }, { once: true });
+  const json = (value) => JSON.stringify(value).replace(/</g, "\\u003c"); // in a <script>: never a tag
+  return `document.currentScript.remove(); (${run})(${json(servedWords())}, ${json(spans)});`;
+}
+
+// A gray bar's rules: `block`, the block holding it (its gap and what is drawn over it); `bar`, the
+// bar (the block itself for a formula); `icon`, its icon (an svg, or the bar's ::before).
+const barStyle = ({ block, bar, icon }) => `
+  ${block} { width: 100%; margin-block: var(--doc-media-gap); --doc-box-radius: 10px; --doc-box-reach: 6px; }
+  ${bar} { box-sizing: border-box; display: flex; align-items: center; width: 100%; padding: 12px 36px 12px 12px; border-radius: 10px; text-align: start;
+    background: var(--ge-field); color: var(--ge-tx2); font-size: 14px; line-height: 1.5; cursor: pointer; user-select: none; transition: background 20ms ease-in; }
+  ${bar}:hover { background: var(--ge-hover); }
+  ${icon} { flex: none; width: 25px; height: 25px; margin-inline-end: 12px; }`;
+
+// A formula block left empty: served empty, or its chip empty on the page (components/math/page.mjs).
+const TEX = '.doc-math-block:is(:empty, [data-ge-kind="tex"]:has(> .ge-math-chip:empty))';
+const TEX_INVALID = '.doc-math-block[data-ge-kind="tex"]:has(> .ge-math-chip[data-ge-empty="invalid"]:empty)';
+const TEX_MASK = `url("data:image/svg+xml,${encodeURIComponent(TEX_LOGO)}") center / contain no-repeat`;
+const CHIP = ":is(.doc-math-inline, .doc-link-mention)[data-ge-empty], .doc-math-inline[data-ge-formula-edit=\"invalid\"]";
+
+/** The look of what is empty, in the head of every page the editor edits (service.mjs preview). */
+export const EMPTY_STYLE = `${Object.keys(MEDIA_BARS).map((name) => {
+  const bar = `.${name} > .${barClass(name)}`;
+  // Every bar's icon is one of the editor's line drawings (icons.mjs svg), with no size or color of its own: drawn as its other line icons are.
+  return barStyle({ block: `.${name}:has(> .${barClass(name)})`, bar, icon: `${bar} svg` })
+    + `\n  ${bar} svg { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }`;
+}).join("")}
+  ${barStyle({ block: TEX, bar: TEX, icon: `${TEX}::before` })}
+  ${TEX}::before { content: ""; background: currentColor; -webkit-mask: ${TEX_MASK}; mask: ${TEX_MASK}; }
+  ${TEX}::after { content: ${JSON.stringify(inLanguage("zh", () => t("添加一个 TeX 公式")))}; }
+  :root[data-ge-language="en"] ${TEX}::after { content: ${JSON.stringify(inLanguage("en", () => t("添加一个 TeX 公式")))}; }
+  ${TEX_INVALID}::after { content: ${JSON.stringify(inLanguage("zh", () => t("无效的公式")))}; }
+  :root[data-ge-language="en"] ${TEX_INVALID}::after { content: ${JSON.stringify(inLanguage("en", () => t("无效的公式")))}; }
+  /* One line of inline boxes (not a flex box, whose parts the browser copies as lines of their own). */
+  ${CHIP} { display: inline-block; margin: 0 2px; padding: 1px 7px 1px 6px; border-radius: 4px; vertical-align: top; white-space: nowrap;
+    background: light-dark(#f0efed, #383836); color: var(--ge-tx2); font-size: .9em; line-height: 1.4; text-decoration: none; cursor: pointer; transition: background 20ms ease-in; }
+  :is(${CHIP}) > svg { display: inline-block; width: 1.1em; height: 1.1em; margin-inline-end: 4px; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+  :is(.doc-math-inline, .doc-link-mention)[data-ge-empty]:hover { background: light-dark(#e9e8e6, #403f3d); }
+  :is(.doc-math-inline, .doc-link-mention)[data-ge-empty]:is([data-ge-formula-edit], [data-ge-link-edit]) { background: var(--ge-fill); }
+  .doc-math-inline[data-ge-formula-edit="invalid"] { background: light-dark(#fce9e7, #502c29); color: rgb(235 87 87); }
+`;

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

@@ -0,0 +1,33 @@
+import { svg } from "../icons.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 引用块: a blockquote, a box of paragraphs. A paragraph turned into a quote joins the quote right
+// before or after it; an empty quote paragraph leaves the quote on Enter, as a paragraph, and so
+// does Backspace at the start of its first (`resettable`, typing/leave.mjs).
+//
+// Where the engines reach it (src/editor/page/ unless named): typing/ (Enter, Backspace),
+// convert.mjs (joining and splitting quotes, "> "), clipboard/own/ (`clipboard`), commit.mjs.
+// Its look: the kit's styles/flow.css (src/render/kit/).
+export default {
+  name: "quote",
+  listed: () => t("引用块"),
+  units: {
+    quote: { name: t("引用块"), match: [{ rank: 170, tag: "blockquote" }], removedEmpty: true, emptyIsNothing: true }, // no color: a paragraph turned into a quote is joined to it, its color staying the paragraph's
+  },
+  boxes: {
+    quote: { role: "quote", name: t("引用块"), firstLineActs: true, selectAll: { content: true } }, // its first paragraph shows its handle
+  },
+  types: {
+    quote: {
+      turn: 13, menu: ["basic", 13],
+      tag: "blockquote", kind: "quote", box: "quote", leaf: "paragraph", wraps: true, resettable: true, container: "blockquote", holder: 2,
+      clipboard: {
+        kind: "quote",
+        across: (unit, { walk }) => (unit.localName === "blockquote" ? [{ type: "quote", blocks: walk(unit) }] : undefined), // its paragraphs in a quote
+        check: (block, { container }) => container(block),
+      },
+      label: t("引用块"), icon: svg('<circle cx="6" cy="11.9" r="2.4" fill="currentColor" stroke="none"/><path d="M3.75 11.6c0-3.1 1.35-5.25 4-6.35" stroke-width="1.6"/><circle cx="13.75" cy="11.9" r="2.4" fill="currentColor" stroke="none"/><path d="M11.5 11.6c0-3.1 1.35-5.25 4-6.35" stroke-width="1.6"/>'), hint: ">", markdown: [{ match: /^[>＞》][ \u00a0\u3000]$/ }], words: "引用块 引用 引文 yinyong yinwen yyk yy quote blockquote",
+      glance: { row: 3, name: "引用块", write: "`<blockquote><p>`", rule: "Text and lists" },
+    },
+  },
+};