@heycys/gallery 0.1.1 → 0.1.2

package/browser/editor/page/clipboard/import/to-blocks.mjs

@@ -1,10 +1,10 @@
 import { escapeMarkup, escapeText } from "../../../../shared/escape.mjs";
 import { knownLanguage, languageId } from "../../../../shared/code-languages.mjs";
 import { iconKind, validIcon } from "../../../../shared/emoji/icon-value.mjs";
-import { BLOCK_TYPES, TOGGLES, accepts, clipboardOf } from "../../../components/registry.mjs";
+import { BLOCK_TYPES, COLOR_DEFAULTS, TOGGLES, accepts, clipboardOf } from "../../../components/registry.mjs";
 import { validDirection, validStart } from "../../../components/list/index.mjs";
 import { MAX_COLUMNS, MIN_COLUMNS } from "../../../components/columns/index.mjs";
-import { MAX_TABLE_CELLS } from "../../../components/table/index.mjs";
+import { MAX_TABLE_CELLS, validLook, validTable } from "../../../components/table/index.mjs";
 import { imageSource, kindOfBlock, webPage } from "../own/rules.mjs";
 import { NOTION_COLOR_NAMES } from "./colors.mjs";
 import { plainOf } from "./rich.mjs";
@@ -27,10 +27,14 @@ import { t } from "../../../../shared/i18n/index.mjs";
 //   other blocks after it; callout → highlight with its emoji (💡 without); toggle → disclosure;
 //   code → code (its language where the kit knows it, else 自动识别, or the name a whole document's
 //   fence gives it, `fence`; its `title`); equation → formula block;
-//   table → table (its header row and column); image → image (an address of the web or data:);
+//   table → table (its header row and column; besides Notion's, yuque.mjs's merged cells, a row's
+//   `spans` naming the cells it has, else each cell in a column of its own, and the cells' looks: their
+//   alignment); image → image (an address of the web or data:);
 //   embed → embed (an address of the web); file → a link; column_list → columns (two or more, else
 //   their blocks); tab → tabs area; divider → divider; the kit's own flowchart (report_flow, besides
-//   Notion's: html.mjs) → a flowchart of nodes (stepOf), where a box takes none its nodes' blocks.
+//   Notion's: html.mjs) → a flowchart of nodes (stepOf), where a box takes none its nodes' blocks;
+//   report_callout (besides Notion's: Yuque's 提示, yuque.mjs and markdown.mjs) → the page's callout
+//   (提示块) of its blocks, its color a background.
 // Two of a whole Markdown document's, which the import makes (src/transfer/import.mjs; never a
 // paste): section → a section of its blocks; html (an HTML block kept as written) → a paragraph of
 // its `marker` alone, which the import writes the HTML in place of (fillReport).
@@ -48,13 +52,19 @@ const colorClass = (value) => {
 };
 const SAFE_LINK = /^(https?:|mailto:|tel:|#)/i;
 
-/** Rich text as inline HTML of the format bar's marks. */
-export function richHtml(title) {
+/**
+ * Rich text as inline HTML of the format bar's marks. `pictures` (a table's cell, which holds them:
+ * 单元格里的图片): a picture piece (inline.mjs's, html.mjs's in a cell) an <img> of its address, alt and
+ * width as written, which the paste makes a picture of the document's folder (page/table/pictures.mjs);
+ * else, a picture a reader left in text, its alt.
+ */
+export function richHtml(title, { pictures = false } = {}) {
   return (title ?? []).map(([text, annotations = []]) => {
     const has = (name) => annotations.some((a) => a[0] === name);
     const formula = annotations.find((a) => a[0] === "e");
-    const picture = annotations.find((a) => a[0] === "img"); // one a reader left in text: its alt
-    let html = formula ? `<span class="doc-math-inline">\\(${escapeText(formula[1])}\\)</span>` : escapeText(picture ? picture[2] ?? "" : text).replace(/\n/g, "<br>");
+    const picture = annotations.find((a) => a[0] === "img");
+    const img = picture && pictures ? `<img src="${escapeMarkup(picture[1])}" alt="${escapeMarkup(picture[2] ?? "")}"${/^\d+$/.test(picture[4] ?? "") ? ` width="${picture[4]}"` : ""}>` : "";
+    let html = formula ? `<span class="doc-math-inline">\\(${escapeText(formula[1])}\\)</span>` : img ? img.repeat([...text].length || 1) : escapeText(picture ? picture[2] ?? "" : text).replace(/\n/g, "<br>");
     if (!formula && has("c")) html = `<code>${html}</code>`;
     if (has("sup")) html = `<sup>${html}</sup>`;
     if (has("sub")) html = `<sub>${html}</sub>`;
@@ -239,6 +249,15 @@ function blockOf(s, options) {
       const icon = s.props?.icon && !/^(\/|[a-z]+:)/i.test(s.props.icon) && validIcon(s.props.icon) ? s.props.icon : "💡";
       return [{ type: "highlight", blocks: [{ type: "icon", icon }, ...(blocks.length ? blocks : [{ type: "paragraph", html: "" }])] }];
     }
+    case "report_callout": {
+      // Besides Notion's (yuque.mjs: Yuque's 提示): the page's callout of its blocks, none inside another
+      // (as a highlight block's), its color a background (one of the nine, Notion's name; the callout's
+      // own default, its blue, no class).
+      const made = BLOCK_TYPES.callout;
+      const blocks = children(made?.box).flatMap((block) => (made?.nests === false && BLOCK_TYPES[block.type] === made ? heldBy(block) : [block]));
+      const name = typeof s.props?.color === "string" && s.props.color !== COLOR_DEFAULTS[made?.kind]?.background ? colorClass(`${s.props.color}_background`) : null;
+      return [{ type: "callout", blocks: blocks.length ? blocks : [{ type: "paragraph", html: "" }], ...(name ? { color: name } : {}) }];
+    }
     case "toggle": return [{ type: "details", html: richHtml(s.title), blocks: children(BLOCK_TYPES.details?.box) }];
     case "section": {
       const blocks = children(BLOCK_TYPES.section?.box);
@@ -254,10 +273,23 @@ function blockOf(s, options) {
     case "table": {
       const order = (s.props?.table_block_column_order ?? []).slice(0, MAX_TABLE_CELLS);
       // As many rows as the table may have cells for (the server writes no more).
-      const rows = (s.children ?? []).slice(0, Math.floor(MAX_TABLE_CELLS / Math.max(1, order.length))).map((row) => order.map((column) => richHtml(row.props?.cells?.[column] ?? [])));
-      if (!rows.length || !order.length) return [];
-      // From elsewhere: 一键优化 as it comes in (own/blocks.mjs).
-      return [{ type: "table", rows, outside: true, ...(s.props.table_block_column_header ? { header: true } : {}), ...(s.props.table_block_row_header ? { column: true } : {}) }];
+      const specs = (s.children ?? []).slice(0, Math.floor(MAX_TABLE_CELLS / Math.max(1, order.length)));
+      if (!specs.length || !order.length) return [];
+      const flags = { outside: true, ...(s.props.table_block_column_header ? { header: true } : {}), ...(s.props.table_block_row_header ? { column: true } : {}) };
+      // Besides Notion's (yuque.mjs): merged cells, a row's `spans` naming the cells it has, and the cells' looks.
+      const merged = specs.some((row) => row.props?.spans);
+      const columnsOf = (row) => (merged ? order.filter((column) => Array.isArray(row.props?.spans?.[column])) : order);
+      const rows = specs.map((row) => columnsOf(row).map((column) => richHtml(row.props?.cells?.[column] ?? [], { pictures: true })));
+      const lookOf = (row, column) => {
+        const look = row.props?.looks?.[column];
+        return typeof look === "string" && validLook(look) ? look : "";
+      };
+      const looks = specs.map((row) => columnsOf(row).map((column) => lookOf(row, column)));
+      const looked = looks.some((row) => row.some(Boolean)) ? { looks } : {};
+      const table = { type: "table", rows, ...(merged ? { spans: specs.map((row) => columnsOf(row).map((column) => row.props.spans[column])) } : {}), ...looked, ...flags };
+      if (!merged || validTable(table, () => true)) return [table];
+      // Spans that tile no table (cut short, or said wrong): each cell in its own column, as Notion spreads them.
+      return [{ type: "table", rows: specs.map((row) => order.map((column) => richHtml(row.props?.cells?.[column] ?? [], { pictures: true }))), ...flags }];
     }
     case "image": {
       const src = writtenAddress(s.props?.source ?? "");