@heycys/gallery 0.1.0 → 0.1.2

package/browser/editor/page/clipboard/import/markdown.mjs

@@ -1,5 +1,6 @@
+import { CELL_ALIGN_CLASSES } from "../../../../shared/components/table.mjs";
 import { languageFromFence } from "./languages.mjs";
-import { decodeEntities, parseInlineMarkdown, unescapeMarkdown } from "./inline.mjs";
+import { decodeEntities, parseCellMarkdown, parseInlineMarkdown, unescapeMarkdown } from "./inline.mjs";
 import { spec } from "./rich.mjs";
 
 // Markdown and plain text as block specs (notion-lite editor/input/clipboard/parse.js). Notion
@@ -52,8 +53,9 @@ import { spec } from "./rich.mjs";
 //               which holds paragraphs alone, noted; GitHub's alerts (> [!NOTE], [!TIP],
 //               [!IMPORTANT], [!WARNING], [!CAUTION]) callouts
 //   pictures    a paragraph's pictures blocks of their own, the text around them paragraphs; an
-//               item's blocks it holds; elsewhere (a heading, a cell, a disclosure's title) a
-//               picture of the web a link, any other its alt text, noted
+//               item's blocks it holds; a table cell's its own, amid its words (单元格里的图片: the
+//               import makes each a file of the page's, transfer/import.mjs); elsewhere (a heading,
+//               a disclosure's title) a picture of the web a link, any other its alt text, noted
 //   HTML        <details><summary> … </details> a toggle, its blocks read as Markdown; an HTML block
 //               of pictures alone (<p align="center"><img …></p>, a link around them) its picture
 //               blocks, of an <hr> a divider, of line breaks or empty tags nothing; any other HTML
@@ -71,6 +73,18 @@ import { spec } from "./rich.mjs";
 // `firstLine`): `notes` [{ line, kind, text }]; what the import tries or looks for afterwards is
 // returned with its line too: the formulas (`formulas`, KaTeX draws them or not) and the links to
 // addresses that are no web ones (`links`: a file beside the document, a place in it).
+//
+// Yuque's Markdown (`yuque`: its toolbar's 复制为 Markdown, which yuque.mjs reads so; never the
+// import's) is that, and what Yuque writes besides:
+//   :::info … :::  its 提示 (info, tips, success, warning, danger, color1–5; up to a line of ::: alone),
+//               a spec { type: "report_callout", props: { alert } } of the blocks between
+//   HTML        every HTML block a spec { type: "html", props: { html } } (yuque.mjs reads it as the
+//               paste reads HTML: a picture's alt is no caption, Yuque's being a file's name)
+//   tables      a row of more cells than its header's (Yuque writes a | in a cell as it is) its cells
+//               past the header's last one that one's, joined by |; the delimiter row's alignments
+//               each cell's (props.looks: doc-align-left / center / right)
+//   code        a ```mermaid fence code, never a flow
+//   inline      inline.mjs's: $ … $ with spaces inside, <font style> colors
 
 // A callout's first line: an emoji first is its icon, then its text.
 const EMOJI = /^(\p{Extended_Pictographic}(?:[\u{FE0F}\u{200D}\u{1F3FB}-\u{1F3FF}]|\p{Extended_Pictographic})*)\s*/u;
@@ -81,14 +95,23 @@ function callout(head, children, inline = parseInlineMarkdown) {
   return spec("callout", [], match ? { icon: match[1] } : {}, blocks.length ? blocks : [spec("text")]);
 }
 
-/** A table spec of rows of rich text (columns c0, c1, …). */
-export function tableSpec(rows, header) {
+/** A table spec of rows of rich text (columns c0, c1, …); `looks`, each column's look of its cells (a class, or none); `lines`: each row's line in a document (what the import notes of its pictures is at it). */
+export function tableSpec(rows, header, looks = [], lines = null) {
   const width = Math.max(1, ...rows.map((row) => row.length));
   const columns = Array.from({ length: width }, (_, i) => `c${i}`);
+  const looked = Object.fromEntries(columns.map((column, i) => [column, looks[i]]).filter(([, look]) => look));
   return spec("table", [], { table_block_column_order: columns, table_block_column_format: {}, table_block_column_header: header, table_block_row_header: false },
-    rows.map((row) => spec("table_row", [], { cells: Object.fromEntries(row.map((cell, i) => [columns[i], cell])) })));
+    rows.map((row, index) => spec("table_row", [], { cells: Object.fromEntries(row.map((cell, i) => [columns[i], cell])), ...(Object.keys(looked).length ? { looks: looked } : {}), ...(lines ? { line: lines[index] } : {}) })));
 }
 
+// A delimiter row's cell's alignment (:--, :-:, --:) as a cell's look (the table's classes: left,
+// center, right), or null.
+const [LEFT, CENTER, RIGHT] = CELL_ALIGN_CLASSES;
+const alignOf = (cell) => {
+  const text = cell.trim();
+  return text.startsWith(":") && text.endsWith(":") ? CENTER : text.startsWith(":") ? LEFT : text.endsWith(":") ? RIGHT : null;
+};
+
 const indentOf = (raw) => raw.match(/^[ \t]*/)[0].replace(/\t/g, "    ").length;
 const dedent = (lines, n) => lines.map((line) => line.replace(new RegExp(`^[ \\t]{0,${n}}`), ""));
 
@@ -167,6 +190,8 @@ function parseLines(lines, doc = null, base = 0) {
   const lineOf = (i) => (doc ? doc.firstLine + base + i : 0);
   // Inline text: Notion's rules for a paste; a document's rules, its pictures links or words (textOnly), for a document.
   const inline = (text, i) => (doc ? textOnly(docInline(doc, text, lineOf(i)), lineOf(i), doc) : parseInlineMarkdown(text));
+  // A table's cell, which holds pictures (单元格里的图片): a document's rules or a paste's, its pictures kept.
+  const cellInline = (text, i) => (doc ? docInline(doc, text, lineOf(i)) : parseCellMarkdown(text));
   // A list item: Notion's rules for a paste (a page export's line of no words, "&nbsp;", none); a
   // document's, its pictures blocks it holds (before the blocks indented under it).
   const item = (type, text, i, props = {}) => {
@@ -196,6 +221,18 @@ function parseLines(lines, doc = null, base = 0) {
         const language = m[2] ? languageFromFence(m[2]) ?? m[2][0].toUpperCase() + m[2].slice(1) : undefined;
         block = spec("code", code ? [[code]] : [], language ? { language } : {});
       }
+    } else if (doc?.yuque && (m = YUQUE_ALERT.exec(line))) {
+      // Yuque's 提示: its blocks up to a line of ::: alone (one opened in it closing first).
+      const start = i;
+      const body = [];
+      for (let depth = 1, at = i + 1; at < lines.length; at++) {
+        const each = lines[at].trim();
+        depth += YUQUE_ALERT.test(each) ? 1 : each === ":::" ? -1 : 0;
+        i = at;
+        if (depth === 0) break;
+        body.push(lines[at]);
+      }
+      block = spec("report_callout", [], { alert: m[1].toLowerCase() }, parseLines(dedent(body, indent), doc, base + start + 1));
     } else if ((math = displayMathStart(line))) {
       if (math.single) {
         block = spec("equation", mathTitle([math.rest.slice(0, -math.close.length)], math.unescape));
@@ -312,7 +349,8 @@ function parseLines(lines, doc = null, base = 0) {
       }
       const written = dedent(body, indent).join("\n").trim();
       const bare = written.replace(/<!--[\s\S]*?-->/g, "").replace(PICTURE_TAGS, "").trim();
-      if (!bare && /<img\s/i.test(written)) blocks = paragraphBlocks(docInline(doc, written.replace(/\s+/g, " "), lineOf(start)), lineOf(start)); // pictures alone (<p align="center"><img …></p>): picture blocks
+      if (doc.yuque) block = spec("html", [], { html: written, line: lineOf(start) }); // read as the paste reads HTML (yuque.mjs)
+      else if (!bare && /<img\s/i.test(written)) blocks = paragraphBlocks(docInline(doc, written.replace(/\s+/g, " "), lineOf(start)), lineOf(start)); // pictures alone (<p align="center"><img …></p>): picture blocks
       else if (!bare && /<hr\b/i.test(written)) block = spec("divider");
       else if (!bare) continue; // line breaks or empty tags alone: a viewer's spacing
       else block = spec("html", [], { html: written, line: lineOf(start) });
@@ -342,9 +380,13 @@ function parseLines(lines, doc = null, base = 0) {
       // GFM's table: its header row, its delimiter row, then its rows.
       // Each row's cells read at its line (what they leave out noted there).
       const rows = [[tableCells(lines[i], true), i]];
+      const delimiter = tableCells(lines[i + 1], true);
       for (i += 2; i < lines.length && lines[i].trim() && (/^\s*\|/.test(lines[i]) || !startsBlock(lines[i].trim())); i++) rows.push([tableCells(lines[i], true), i]);
       i--;
-      block = tableSpec(rows.map(([row, at]) => row.map((cell) => inline(cell, at))), true);
+      // Yuque's: a | it wrote as it is joins the cells past the header's last one to that one; its alignments its cells'.
+      const width = rows[0][0].length;
+      const fitted = doc.yuque ? rows.map(([row, at]) => [row.length > width ? [...row.slice(0, width - 1), row.slice(width - 1).join("|")] : row, at]) : rows;
+      block = tableSpec(fitted.map(([row, at]) => row.map((cell) => cellInline(cell, at))), true, doc.yuque ? delimiter.map(alignOf) : [], fitted.map(([, at]) => lineOf(at)));
     } else if (/^\|.*\|$/.test(line)) {
       const rows = [];
       let header = false;
@@ -354,7 +396,7 @@ function parseLines(lines, doc = null, base = 0) {
           if (rows.length === 1) header = true;
           continue;
         }
-        rows.push(cells.map((cell) => (doc ? inline(cell, i) : parseInlineMarkdown(cell))));
+        rows.push(cells.map((cell) => cellInline(cell, i)));
       }
       i--;
       block = tableSpec(rows, header);
@@ -409,6 +451,8 @@ const DROPPED_HTML = new Set(["script", "style", "textarea"]);
 // The tags an HTML block of pictures alone is made of (a README's <p align="center"><img …></p>).
 const PICTURE_TAGS = /<\/?(?:p|div|a|center|picture|source|span|br|img|hr)(?=[\s/>])[^>]*>/gi;
 const ALERTS = { note: "ℹ️", tip: "💡", important: "❗", warning: "⚠️", caution: "🚨" };
+// Yuque's 提示 opened (its Markdown's): ::: and its kind, alone on its line.
+const YUQUE_ALERT = /^:::[ \t]*([A-Za-z][\w-]*)[ \t]*$/;
 const LINK_DEFINITION = /^\[([^\]^][^\]]*)\]:\s*(<[^>]*>|\S+)(?:\s+("[^"]*"|'[^']*'|\([^)]*\)))?\s*$/;
 const FOOTNOTE_DEFINITION = /^\[\^([^\]\s]+)\]:\s?(.*)$/;
 // East Asian wide characters (CJK, kana, Hangul, their punctuation and full-width forms): a line
@@ -583,7 +627,7 @@ function documentCode(name, meta, code, line, doc) {
   const braces = /^\{([^}]*)\}/.exec(meta.trim());
   const fence = name || /\.([\w+#-]+)/.exec(braces?.[1] ?? "")?.[1] || "";
   const title = /(?:^|[\s{])title=(?:"([^"]*)"|'([^']*)'|([^\s}]+))/.exec(meta);
-  if (fence.toLowerCase() === "mermaid") {
+  if (fence.toLowerCase() === "mermaid" && !doc.yuque) {
     const steps = flowSteps(code);
     if (steps) return spec("flow", [], { steps, line });
     doc.notes.push({ line, kind: "mermaid", text: "a mermaid diagram that is not one chain of steps is kept as its code" });
@@ -729,11 +773,12 @@ function takeDefinitions(lines, doc) {
  * title }] (in order), notes: [{ line, kind, text }], formulas: [{ tex, line, display }] (each
  * formula read, for the import to try), links: [{ href, line }] (each link to an address that is no
  * web one: a file beside it, a place in it) }. `firstLine`: the number of its first line in its file
- * (after a front matter the import took off).
+ * (after a front matter the import took off). `yuque`: Yuque's Markdown, read with what Yuque
+ * writes besides (this file's header; a paste's, yuque.mjs).
  */
-export function readMarkdownDocument(text, { firstLine = 1 } = {}) {
+export function readMarkdownDocument(text, { firstLine = 1, yuque = false } = {}) {
   const lines = text.replace(/\r\n?/g, "\n").split("\n");
-  const doc = { firstLine, refs: new Map(), definitions: new Map(), order: [], notes: [], formulas: [], links: [], at: firstLine };
+  const doc = { firstLine, yuque, refs: new Map(), definitions: new Map(), order: [], notes: [], formulas: [], links: [], at: firstLine };
   doc.footnote = (label) => {
     const definition = doc.definitions.get(label.toLowerCase());
     if (!definition) {

package/browser/editor/page/clipboard/import/read.mjs

@@ -4,6 +4,7 @@ import { mathifyRichText, mathifySpecs } from "./math.mjs";
 import { fromMarkdown } from "./markdown.mjs";
 import { parseInlineMarkdown } from "./inline.mjs";
 import { vscodeLanguage } from "./languages.mjs";
+import { readYuque } from "./yuque.mjs";
 import { addressOf } from "../../links/address.mjs";
 
 // What a paste from another program is (Notion 860313 clipboardActions' external content, notion-lite
@@ -20,7 +21,8 @@ import { addressOf } from "../../links/address.mjs";
 //     (\[ … \]) → a formula block.
 // Besides Notion's: formulas AI answers copy (math.mjs, markdown.mjs, inline.mjs) and colors
 // (feishu-lite: html.mjs `colors`; nearest for Word, Google Docs and Notion, whose styles are meant,
-// as Feishu's 129153 · P; else only the page's own).
+// as Feishu's 129153 · P; else only the page's own); and first of all Yuque's (yuque.mjs): its
+// document's nodes (text/ne-inode, its HTML's <ne-clipboard>, text/lake) or its toolbar's Markdown.
 
 const OFFICE = /schemas-microsoft-com:office|xmlns:m="http:\/\/schemas\.microsoft\.com\/office\/2004\/12\/omml"/;
 const WORDPRESS = /<!-- wp:/;
@@ -92,6 +94,9 @@ function sameAddress(one, other) {
  * text } (notion-lite readClipboard, after the editor's own formats).
  */
 export function readExternal(data, options = {}) {
+  // Yuque's (yuque.mjs): its document's structure, which its HTML says only in part, or its Markdown.
+  const yuque = readYuque(data, options);
+  if (yuque) return yuque;
   const external = externalContent(data, options);
   const { text, html } = external;
   const convert = { colors: external.colors };

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 ?? "");