@heycys/gallery 0.0.0-stage → 0.1.1

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

@@ -0,0 +1,194 @@
+import { svg } from "../icons.mjs";
+import { FLOW, FLOW_DIRECTION, HELD_TAGS } from "../../../shared/components/list.mjs";
+import { t } from "../../../shared/i18n/index.mjs";
+
+// 符号列表, 编号列表 and 待办事项: ul, ol and ul.doc-todo, whose items are text blocks (a to-do's
+// checked item carries data-checked; its box is the kit's, drawn where a bullet would be). An item may hold
+// blocks after its text (notion-lite's children of a list item: lists, and any other block, a
+// paragraph, an image, a code block…: <li>text<p>…</p><ul>…</ul></li>): it is then also a box (kind
+// "nest") whose units are those blocks.
+// The markers by depth are the kit's (src/render/kit/styles/flow.css), so nothing but the nesting tells levels apart.
+// A flowchart (流程图, ol.doc-flow) is a list for the kit, and one of the kinds a whole list turns
+// into (LIST_TYPES, listType), but no list for the editor: its steps are nodes, no items
+// (components/flowchart/, which also turns a list into one and back).
+// page.mjs: indenting and outdenting items, Enter and Backspace in them, a list turned into the
+// other kind; file.mjs: an item holding lists in report.html.
+//
+// Where the engines reach it (src/editor/page/ unless named): core.mjs (an item's own text comes
+// before the blocks it holds: nestedBlocks, textEnd, ownHTML, setOwnHTML, parentItem, holderItem, previousLine, splitting
+// and merging items, the save's nested lists), typing/ (Tab, Ctrl+Enter, Enter, Backspace, Delete: `keys`, page.mjs),
+// convert.mjs (a block turned into an item, a list into the other kind or into paragraphs, "- ",
+// "1. "), drag/drop.mjs (a drop goes by indentation), drag/ (a block dropped under an item),
+// caret.mjs (an item's own lines), history.mjs (lists set side by side join: its page object's tidy),
+// clipboard/own/ (copying lists and items: `clipboard`), src/transfer/markdown.mjs (a page exported: `read`), commit.mjs (an item's box for its
+// lists), ../source/ (finding items and what they hold: trailingBlocks, nest; retagUnit, itemIndent,
+// cutLines).
+// Its look: the kit's styles/flow.css, todo.css and flowchart.css (src/render/kit/).
+// A numbered list's first number (start, from 1) and whether it counts on from the numbered list
+// before it (data-continue): what the reader sets by clicking a number (page.mjs), saved as attributes.
+export const START = "start";
+export const CONTINUE = "data-continue";
+export const validStart = (value) => typeof value === "string" && /^[1-9]\d{0,8}$/.test(value);
+// A to-do list (Notion's to-do: a box before each item, checked or not) is a ul of this class, a
+// checked item one with this attribute: a class switch of the list, an attribute of the item.
+export const TODO = "doc-todo";
+export const CHECKED = "data-checked";
+// A flowchart is an ol of its class (components/flowchart/); its layout fixed, an attribute of the
+// list (and of a step): row or column, none while the kit chooses.
+export { FLOW, FLOW_DIRECTION };
+export const DIRECTIONS = ["row", "column"];
+export const validDirection = (value) => DIRECTIONS.includes(value);
+
+/** The kinds of list, in menu order: a whole list turns into any other of them. */
+export const LIST_TYPES = ["bullets", "numbers", "todo", "flowchart"];
+
+/** The type a list shows as: "numbers", "flowchart", "todo" or "bullets". */
+export const listType = (list) => (list.localName === "ol" ? (list.classList.contains(FLOW) ? "flowchart" : "numbers") : list.classList.contains(TODO) ? "todo" : "bullets");
+
+/**
+ * The type of a list made in an item (an item indented under another, items dropped under one, a new
+ * item right below one holding blocks): `type`, a flowchart's being a numbered list there (a flowchart's
+ * steps are no items, so none is ever made so; a flowchart in a node or an item is the reader's to
+ * make, turning a list into 步骤流程图, never one Tab or Enter makes).
+ */
+export const heldListType = (type) => (type === "flowchart" ? "numbers" : type);
+
+// The tags of the blocks a list item may hold after its text: the shared description's, which the kit reads too.
+export { HELD_TAGS };
+
+// What an item says it holds: its items (子项) where the blocks it holds are lists of items alone (a
+// flowchart's steps are no items), its content (内容) where any is another block (a paragraph, an
+// image, a task board).
+const holdsItems = (blocks) => blocks.every((block) => (block.localName === "ul" || block.localName === "ol") && !block.classList.contains(FLOW));
+
+/** Why an item holding `blocks` (the page's nestedBlocks) does not go by itself, in the words of what it holds. */
+export const holdsSays = (blocks) => (holdsItems(blocks)
+  ? t("这一项下面还有子项；要连同子项一起删除，点左侧的手柄后按 Delete。")
+  : t("这一项下面还有内容；要连同这些内容一起删除，点左侧的手柄后按 Delete。"));
+
+/** Why an item holding `blocks` does not join the line above it, so. */
+export const mergeSays = (blocks) => (holdsItems(blocks) ? t("这一项下面还有子项，不能并入上一项。") : t("这一项下面还有内容，不能并入上一项。"));
+
+/**
+ * What a page export writes of a list: its first number and its items, each with whether it is
+ * checked and `written()`, the text of its line and the blocks it holds, which are asked as each is
+ * written, a text naming the files it shows. By default an item's own text (not the blocks it holds,
+ * written below), its pictures kept: one holding a picture is no text block of the editor's, but
+ * its content all the same.
+ */
+export const readList = (list, how, written = (item) => ({ text: how.own(item), held: how.nestedBlocks(item) })) => ({
+  start: Number(list.getAttribute(START)) || 1,
+  items: how.unitsOf(list).map((item) => ({ checked: item.hasAttribute(CHECKED), written: () => written(item) })),
+});
+
+// How a list is copied: the blocks it holds checked as any box's. A list a selection goes through
+// is its items, each carrying its list's kind (an item of a list in an item keeps its own).
+const check = (block, { container }) => container(block);
+function across(unit, { walk }) {
+  if (unit.localName !== "ul" && unit.localName !== "ol") return undefined;
+  const list = listType(unit);
+  return walk(unit).map((block) => (block.type === "item" ? { list, ...block } : block));
+}
+const CLIPBOARDS = {
+  bullets: { kind: "bullet", read: readList, check, across },
+  numbers: {
+    kind: "number", read: readList, check, across,
+    // Its first number (a document's list that goes on after a block).
+    build({ block, box, inner }) {
+      const list = box();
+      list.append(...inner(block.blocks));
+      if (validStart(block.start)) list.setAttribute(START, block.start);
+      return list;
+    },
+  },
+  todo: { kind: "todo", read: readList, check, across },
+};
+
+// An li as a text block, in a list or a step written the short way: copied with what it holds after
+// its text, and in part with what of that a selection reaches.
+export function describeItem(node, { isHost, nestedBlocks, describe, serializeInner }) {
+  if (node.localName !== "li" || !isHost(node)) return undefined;
+  const lists = nestedBlocks(node).map(describe);
+  return lists.every(Boolean) ? { type: "item", html: serializeInner(node), ...(node.hasAttribute(CHECKED) ? { checked: true } : {}), lists } : null;
+}
+export const itemPiece = (host, html, { walk, groupItems }) => (host.localName === "li" ? { type: "item", html, ...(host.hasAttribute(CHECKED) ? { checked: true } : {}), lists: groupItems(walk(host)) } : undefined);
+
+export default {
+  name: "list",
+  listed: () => t("列表"), hideable: false,
+  units: {
+    list: {
+      name: t("列表"), match: [{ rank: 150, tag: ["ul", "ol"] }],
+      attributes: { [START]: validStart, [CONTINUE]: (value) => value === "" },
+      toggles: [TODO], // 符号列表 and 待办事项 turn into each other by a class
+      emptyIsNothing: true,
+      canHaveChildren: true, // a block right after it goes under its last item (page.mjs keys.around)
+      clipboard: { of: (unit) => CLIPBOARDS[listType(unit)] },
+    },
+    // An item's color (颜色 in the block menu, notion-lite's): its text and its marker, or a
+    // background behind it, its marker and the items it holds.
+    // Outside a list, which a file may leave it, a page export has its words.
+    item: { name: t("列表项"), match: [{ rank: 160, tag: "li" }], fixed: true, emptyIsNothing: true, colors: ["text", "background"], attributes: { [CHECKED]: (value) => value === "" }, clipboard: { kind: "words" } },
+  },
+  boxes: {
+    list: { role: "list", name: t("列表") },
+    nest: { role: "nest", find: (unit) => unit.localName === "li" ? unit : null, selectAll: { content: t("这一项下面的全部内容") } }, // a list item holds blocks after its text
+  },
+  types: {
+    item: {
+      tag: "li", kind: "item", empty: true, placeholder: false, // its marker says what it is
+      // Copied with what it holds after its text (its lists, a paragraph, an image…) as `lists`; run
+      // of its own: a bulleted list, unless it carries its list's kind (`list`). A flowchart takes one
+      // from the clipboard, each made a node (a flowchart copied before its steps were nodes).
+      clipboard: {
+        html: "item", run: "bullets", pastedIn: "flowchart",
+        holds: (block) => block.lists ?? [],
+        describe: describeItem,
+        piece: itemPiece,
+        across: (unit, { walk }) => (unit.localName === "li" ? walk(unit) : undefined), // its own text comes before the start: what it holds
+        check: (block, { string, valid }) => string(block.html) && (block.checked === undefined || block.checked === true) && (block.list === undefined || LIST_TYPES.includes(block.list))
+          && (block.lists ?? []).every((list) => valid(list, "nest")),
+        build({ block, host, inline, one }) {
+          const item = host();
+          if (block.checked) item.setAttribute(CHECKED, "");
+          item.append(...inline(block.html));
+          for (const list of block.lists ?? []) item.append(one(list));
+          return item;
+        },
+        text: (block, lines) => [block.html, ...(block.lists ?? []).flatMap((each) => lines([each]))],
+      },
+    },
+    bullets: {
+      turn: 7, menu: ["basic", 7],
+      tag: "ul", kind: "list", box: "list", leaf: "item", wraps: true, resettable: true, container: `ul:not(.${TODO})`, clipboard: CLIPBOARDS.bullets,
+      label: t("符号列表"),
+      icon: svg('<circle cx="4.75" cy="6.5" r="1.2" fill="currentColor" stroke="none"/><circle cx="4.75" cy="13.5" r="1.2" fill="currentColor" stroke="none"/><path d="M8.5 6.5h8M8.5 13.5h8"/>'),
+      hint: "-", markdown: [{ match: /^[-*+－•·][ \u00a0\u3000]$/ }], words: "符号列表 项目符号 无序列表 列表 fuhao liebiao wuxu fhlb lb bullet list ul",
+      glance: { row: 3, name: "符号列表", write: "`<ul>`", rule: "Text and lists" },
+    },
+    numbers: {
+      turn: 8, menu: ["basic", 8],
+      tag: "ol", kind: "list", box: "list", leaf: "item", wraps: true, resettable: true, container: `ol:not(.${FLOW})`, clipboard: CLIPBOARDS.numbers,
+      // A numbered list made on the page carries its first number (1 too: a list right after another
+      // with a start of its own, list/page.mjs) and whether it counts on.
+      extras: (element) => ({
+        ...(validStart(element.getAttribute(START)) ? { start: element.getAttribute(START) } : {}),
+        ...(element.hasAttribute(CONTINUE) ? { continue: true } : {}),
+      }),
+      label: t("编号列表"),
+      icon: svg('<path d="M3.6 4.35 4.9 3.6v4.15" stroke-width="1.1"/><path d="M3.55 12.4a1.25 1.25 0 0 1 2.4.35c0 .75-.6 1.2-2.45 2.75h2.6" stroke-width="1.1"/><path d="M8.75 6h7.75M8.75 13.75h7.75"/>'),
+      // "3. " begins the list at 3, "0. " at its first number.
+      hint: "1.", markdown: [{ match: /^(\d{1,9})[.．。)）][ \u00a0\u3000]$/, props: ([, number]) => (Number(number) > 0 ? { number: Number(number) } : {}) }], words: "编号列表 有序列表 列表 bianhao youxu liebiao bhlb lb numbered number list ol",
+      glance: { row: 3, name: "编号列表", write: "`<ol>` (`start`, `data-continue`)", rule: "Text and lists" },
+    },
+    todo: {
+      turn: 9, menu: ["basic", 9],
+      tag: "ul", className: TODO, kind: "list", box: "list", leaf: "item", wraps: true, resettable: true, container: `ul.${TODO}`, clipboard: CLIPBOARDS.todo,
+      label: t("待办事项"),
+      icon: svg('<rect x="3.5" y="4.75" width="4.25" height="4.25" rx="1"/><rect x="3.5" y="11" width="4.25" height="4.25" rx="1"/><path d="M10.5 6.875h6M10.5 13.125h6"/>'),
+      // Notion's: "[] ", "[ ] ", and "[x] " checked.
+      hint: "[]", markdown: [{ match: /^\[[xX]\][ \u00a0\u3000]$/, props: () => ({ checked: true }) }, { match: /^(\[ ?\]|【 ?】)[ \u00a0\u3000]$/ }], words: "待办事项 待办 清单 任务 勾选 复选框 daiban qingdan renwu dbsx db todo to-do checkbox checklist task",
+      glance: { row: 4, name: "待办事项", write: "`<ul><li><input type=\"checkbox\" checked> …`", after: "`ul.doc-todo`", rule: "Text and lists" },
+    },
+  },
+};

package/browser/editor/components/list/join.mjs

@@ -0,0 +1,68 @@
+import { placeBefore } from "../../page/core.mjs";
+import { FLOW_DIRECTION, START, listType } from "./index.mjs";
+
+// Lists that a change sets side by side become one (notion-lite's numbers: consecutive numbered
+// items are one run, counted from 1, view/frame/children.js; two bullet lists side by side are one
+// list as well): the block between two lists deleted, cut, moved away, merged into the line above
+// or turned into an item of one of them. Around a structural step (history.mjs struct, given
+// tidyLists by editor.mjs): listsAround(parents) before it names the lists the step may set side
+// by side, so the step records them, and the pairs side by side already, which stay as they are
+// (a file may hold two lists written apart); joinSideBySide after it puts the second list of each
+// new pair at the end of the first. A list with a start of its own (a number set, 开始新列表, a list begun by "5. ") stays a
+// list of its own, as notion-lite's run with a start index; so does a flowchart laid out otherwise
+// than the one before it (data-direction: its author's layout of the whole, none or another).
+
+const isList = (node) => node?.localName === "ul" || node?.localName === "ol";
+// A list the page may take apart: a box nothing refers to, made on the page or holding only blocks.
+const free = (list) => list.hasAttribute("data-ge-box") && !list.hasAttribute("data-ge-keep") && (list.hasAttribute("data-ge-new") || list.hasAttribute("data-ge-pure"));
+const listsIn = (flow) => [...flow.children].filter(isList);
+// The block after a list, past the editor's own nodes (data-doc-dev).
+const after = (node) => {
+  let next = node.nextElementSibling;
+  while (next?.hasAttribute("data-doc-dev")) next = next.nextElementSibling;
+  return next;
+};
+
+/** The lists right in the flows a step changes, and the pairs of them side by side before it. */
+export function listsAround(parents) {
+  const flows = [...new Set(parents.filter((node) => node?.nodeType === 1))];
+  const lists = flows.flatMap(listsIn);
+  return { flows, lists, before: new Map(lists.filter((list) => isList(after(list))).map((list) => [list, after(list)])) };
+}
+
+/** Whether a list takes the one after it in: of its type, both free, the second with no start of its own (two flowcharts: laid out alike). */
+export const joins = (list, next) => listType(list) === listType(next) && free(list) && free(next) && !next.hasAttribute(START)
+  && (listType(list) !== "flowchart" || list.getAttribute(FLOW_DIRECTION) === next.getAttribute(FLOW_DIRECTION));
+
+/**
+ * Join the lists a step set side by side (listsAround before it), but those the step made (`created`:
+ * an item's lists set out after it as it turns into text, the items after it split off from them:
+ * notion-lite keeps the first under the text, the second a run of its own). Returns the lists that
+ * took others in, each with the nodes it held before them: [list, nodes].
+ */
+export function joinSideBySide({ flows, before }, created = []) {
+  const made = new Set(created);
+  const grown = new Map();
+  for (const flow of flows) {
+    if (!flow.isConnected) continue;
+    for (let list = flow.firstElementChild; list; list = list.nextElementSibling) {
+      for (let next = after(list); isList(list) && isList(next) && before.get(list) !== next && !made.has(list) && !made.has(next) && joins(list, next); next = after(list)) {
+        if (!grown.has(list)) grown.set(list, [...list.childNodes]);
+        placeBefore(list, [...next.children].filter((child) => child.localName === "li"), null);
+        next.remove();
+      }
+    }
+  }
+  return [...grown];
+}
+
+/**
+ * What a structural step (history.mjs) does around lists, as a tidier: the lists of the flows it
+ * changes are recorded with it, and the lists it set side by side are joined after it (but those
+ * the step made: `created`). A list the step brought there (one pasted or moved) is recorded by what
+ * it took in (`grown`).
+ */
+export function tidyLists(parents) {
+  const around = listsAround(parents);
+  return { parents: around.lists, settle: ({ created }) => ({ grown: joinSideBySide(around, created) }) };
+}

package/browser/editor/components/list/numbers.mjs

@@ -0,0 +1,107 @@
+import { CONTINUE, START, listType } from "./index.mjs";
+
+// A numbered list's numbers as the kit shows them (src/render/kit/styles/flow.css): from its start
+// (1 without one), an item's value counting on from it; 1., a., i. by depth. A list that continues
+// the numbered list before it in its flow (data-continue, Feishu's 继续之前的编号: other blocks
+// between are skipped) starts at that list's last number + 1, which the editor writes as its start
+// and keeps in step (keepContinuing). Pure functions of the page's lists.
+
+const FORMATS = ["decimal", "lower-alpha", "lower-roman"];
+const isItem = (node) => node?.localName === "li";
+
+/** How deep a list is: 1 for a list standing in a flow, 2 for one an item holds, and so on. */
+export function depthOf(list) {
+  let depth = 1;
+  for (let item = list.parentElement?.closest("li"); item; item = item.parentElement?.closest("li")) depth++;
+  return depth;
+}
+
+/** How a list at its depth writes its numbers: decimal, lower-alpha or lower-roman. */
+export const formatOf = (list) => FORMATS[(depthOf(list) - 1) % 3];
+
+/** The number a numbered list starts at. */
+export function firstNumber(list) {
+  const start = Number.parseInt(list.getAttribute(START) ?? "", 10);
+  return Number.isNaN(start) ? 1 : start;
+}
+
+/** The numbers a numbered list's items show, in order. */
+export function numbersOf(list) {
+  let next = firstNumber(list);
+  return [...list.children].filter(isItem).map((item) => {
+    const value = Number.parseInt(item.getAttribute("value") ?? "", 10);
+    if (!Number.isNaN(value)) next = value;
+    return next++;
+  });
+}
+
+/** The number an item of a numbered list shows. */
+export const numberOf = (item) => numbersOf(item.parentElement)[[...item.parentElement.children].filter(isItem).indexOf(item)];
+
+/** The numbered list before a list in its flow (other blocks between skipped, a 流程图 among them), or null. */
+export function previousList(list) {
+  for (let node = list.previousElementSibling; node; node = node.previousElementSibling) if (node.localName === "ol" && listType(node) === "numbers") return node;
+  return null;
+}
+
+/** The number a list continuing the numbered list before it starts at, or null when there is none. */
+export function continuation(list) {
+  const previous = previousList(list);
+  if (!previous) return null;
+  const numbers = numbersOf(previous);
+  return numbers.length > 0 ? numbers.at(-1) + 1 : firstNumber(previous);
+}
+
+/** A list's start as written for a number: none for 1. */
+export const startFor = (number) => (number === 1 ? null : String(number));
+
+/**
+ * The numbered lists of `root` that continue the one before them, their starts brought in step (in
+ * page order, as each may follow another such list). Returns whether one changed.
+ */
+export function keepContinuing(root) {
+  let changed = false;
+  for (const list of root.querySelectorAll(`ol[${CONTINUE}]`)) {
+    const start = startFor(continuation(list) ?? 1);
+    if (list.getAttribute(START) === start) continue;
+    if (start === null) list.removeAttribute(START);
+    else list.setAttribute(START, start);
+    changed = true;
+  }
+  return changed;
+}
+
+// ---------- numbers written as a depth writes them ----------
+
+const ROMAN = [[1000, "m"], [900, "cm"], [500, "d"], [400, "cd"], [100, "c"], [90, "xc"], [50, "l"], [40, "xl"], [10, "x"], [9, "ix"], [5, "v"], [4, "iv"], [1, "i"]];
+
+/** A number as a format writes it: 3, c (bijective: z, aa), iii (decimal past 3999, as the browser does). */
+export function formatNumber(number, format) {
+  if (format === "lower-alpha" && number > 0) {
+    let text = "";
+    for (let rest = number; rest > 0; rest = Math.floor((rest - 1) / 26)) text = String.fromCharCode(97 + ((rest - 1) % 26)) + text;
+    return text;
+  }
+  if (format === "lower-roman" && number > 0 && number < 4000) {
+    let text = "";
+    let rest = number;
+    for (const [value, letters] of ROMAN) for (; rest >= value; rest -= value) text += letters;
+    return text;
+  }
+  return String(number);
+}
+
+/** A number typed as a format writes it (or in digits), or NaN. */
+export function parseNumber(text, format) {
+  const typed = String(text ?? "").trim().toLowerCase();
+  if (/^\d+$/.test(typed)) return Number(typed);
+  if (format === "lower-alpha" && /^[a-z]+$/.test(typed)) return [...typed].reduce((sum, letter) => sum * 26 + letter.charCodeAt(0) - 96, 0);
+  if (format === "lower-roman" && /^[ivxlcdm]+$/.test(typed)) {
+    const values = { i: 1, v: 5, x: 10, l: 50, c: 100, d: 500, m: 1000 };
+    return [...typed].reduce((sum, letter, index) => {
+      const value = values[letter];
+      return values[typed[index + 1]] > value ? sum - value : sum + value;
+    }, 0);
+  }
+  return Number.NaN;
+}