@heycys/gallery 0.1.2 → 0.2.1

package/THIRD-PARTY-NOTICES.md

@@ -1,6 +1,6 @@
 # Third-party notices
 
-@heycys/gallery 0.1.2 carries the following code and data of others, bundled into dist/ and web/, built into kit/, or as files in vendor/ and browser/.
+@heycys/gallery 0.2.1 carries the following code and data of others, bundled into dist/ and web/, built into kit/, or as files in vendor/ and browser/.
 
 ## @asamuzakjp/css-color 5.1.11
 
@@ -3254,7 +3254,7 @@ SOFTWARE.
 
 ## Lucide icons
 
-A few line icons are Lucide's (https://lucide.dev), as lucide-react 1.67.0 has them: the workbench's sidebar toggle, search, 新建 and settings gear, the 写作偏好 book, and the icon of a page with none (the workbench, the editor, the kit's page block, the browser tab).
+A few line icons are Lucide's (https://lucide.dev), as lucide-react 1.67.0 has them: the workbench's sidebar toggle, search, 新建 and settings gear, the 写作偏好 book, the icon of a page with none (the workbench, the editor, the kit's page block, the browser tab), and the default home page's house.
 
 ```
 ISC License

package/browser/editor/components/align.mjs

@@ -0,0 +1,58 @@
+// A block's alignment, and a text block's indent (对齐与缩进, the block menu's: Feishu's 缩进和对齐 ›;
+// components that say `toggles: ALIGN_TOGGLES`, a paragraph and a heading; a table, whose frame is placed
+// on the page the same way, says `toggles: ALIGN_PLACES`). Class switches the file keeps and the
+// kit draws (src/render/kit/styles/flow.css, table.css): centred or right-aligned (doc-align-center,
+// doc-align-right; left is neither, the kit's own), and for a text block moved in by levels of two body
+// characters (doc-indent-1 … doc-indent-8). The page editor's block menu sets them (page/align.mjs), Enter carries them
+// to the block it makes (core.mjs newBlock), and Backspace at a block's start takes them off one at a
+// time before it joins or deletes (typing/: the alignment first, then a level of indent, Feishu's
+// order).
+
+import { TEXT_ALIGN_CLASSES } from "../../shared/components/paragraph.mjs";
+
+/** The alignments a text block may have, by name: none is left (the kit's own). */
+export const ALIGNS = { center: "doc-align-center", right: "doc-align-right" };
+
+/** The indents' classes, level 1 first (the kit's: src/shared/components/paragraph.mjs). */
+export const INDENTS = TEXT_ALIGN_CLASSES.filter((name) => name.startsWith("doc-indent-"));
+
+/** The deepest indent. */
+export const INDENT_MOST = INDENTS.length;
+
+/** The classes of a text block's alignment and indent: its component's `toggles`. */
+export const ALIGN_TOGGLES = TEXT_ALIGN_CLASSES;
+
+/** The classes of a block's alignment alone (a table's frame: its component's `toggles`), the same two. */
+export const ALIGN_PLACES = Object.values(ALIGNS);
+
+/** The elements that take a text block's alignment and indent (a paragraph, a heading; a cell's alignment is its own classes'). */
+export const TEXT_BLOCKS = "p, h1, h2, h3, h4";
+
+/** A block's alignment: "left", "center" or "right". */
+export const alignOf = (element) => Object.keys(ALIGNS).find((name) => element.classList.contains(ALIGNS[name])) ?? "left";
+
+/** A block's indent: 0 to INDENT_MOST. */
+export const indentOf = (element) => INDENTS.findIndex((name) => element.classList.contains(name)) + 1;
+
+/** The look (class switches) that gives a block the alignment `name` ("left": none). */
+export const alignLook = (name) => ({ classes: Object.fromEntries(Object.entries(ALIGNS).map(([each, cls]) => [cls, each === name])) });
+
+/** The look that gives a block the indent `level` (0: none). */
+export const indentLook = (level) => ({ classes: Object.fromEntries(INDENTS.map((cls, index) => [cls, index + 1 === level])) });
+
+/**
+ * The alignment and indent of text block `from` (a paragraph or a heading) given to `to`, a paragraph
+ * made from it (Enter's split: core.mjs newBlock, the half after the caret or the empty line before it,
+ * as a word processor's new line keeps its paragraph's). Returns `to`.
+ */
+export function carry(from, to) {
+  if (!from?.matches?.(TEXT_BLOCKS)) return to;
+  for (const name of ALIGN_TOGGLES) if (from.classList.contains(name)) to.classList.add(name);
+  return to;
+}
+
+/** Whether a block takes an alignment (its kind's toggles hold it; `toggles`: TOGGLES of its kind). */
+export const aligns = (toggles) => Boolean(toggles?.includes(ALIGNS.center));
+
+/** Whether a block takes an indent too, as a text block does (a table's alignment has none). */
+export const indents = (toggles) => Boolean(toggles?.includes(INDENTS[0]));

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

@@ -67,7 +67,7 @@ export default {
   components: ["doc-code"],
   placeholders: { title: t("请输入代码块名称") }, // Feishu's
   hosts: {
-    code: { name: t("代码块"), caps: CODE_CAPS, opensBefore: true, textFilters: false, closed: true, inner: (element) => escapeText(codeText(element)) }, // plain text, its lines kept
+    code: { name: t("代码块"), caps: CODE_CAPS, opensBefore: false, textFilters: false, closed: true, inner: (element) => escapeText(codeText(element)) }, // Enter stays inside its code, including at the start
     codeTitle: { name: t("代码块标题"), caps: CODE_CAPS, parts: [["code", "title"]] }, // one line; empty, the kit shows 代码块
   },
   types: {

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

@@ -37,7 +37,7 @@ const STYLE = `
   ${gestureLock("data-ge-embed-resize=\"right\"", { cursor: "nwse-resize" })}
   ${gestureLock("data-ge-embed-resize=\"left\"", { cursor: "nesw-resize" })}
   .ge-layer > .ge-embed-corner { pointer-events: auto; }
-  /* A corner handle: a plain gray bar bent round the frame's corner, no border (as the image's sides). */
+  /* A corner handle: a plain gray bar bent round the frame's corner, no border. */
   .ge-embed-corner { width: 20px; height: 20px; cursor: nwse-resize; }
   .ge-embed-corner[data-side="left"] { cursor: nesw-resize; }
   .ge-embed-corner::after { content: ""; position: absolute; bottom: 5px; width: 9px; height: 9px; border: 0 solid light-dark(rgb(55 53 47 / 35%), rgb(255 255 255 / 38%)); border-bottom-width: 3px; transition: border-color 120ms ease; }

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

@@ -58,9 +58,9 @@ export function create({ pages, fileUrl }) {
     onEmbed: (url) => fetchInto(figure, url),
   });
 
-  async function uploadInto(figure, file) {
+  async function uploadInto(figure, file, options = {}) {
     if (file.size > MAX_BYTES) return say(t("文件太大（最多 {0}）。", sizeLimit("file")), "error");
-    return media.attempt(figure, t("正在上传 {0}…", file.name), t("无法上传这个文件"), async () => place(figure, await media.uploadFile(file)));
+    return media.attempt(figure, t("正在上传 {0}…", file.name), t("无法上传这个文件"), async () => place(figure, await media.uploadFile(file), options));
   }
 
   const fetchInto = (figure, url) => media.attempt(figure, t("正在下载…"), t("无法下载这个文件"), async () => place(figure, await media.uploadUrl(url)));
@@ -69,13 +69,13 @@ export function create({ pages, fileUrl }) {
   // with its caption), never the same element, so that undo brings back what stood there (a
   // placeholder never written, a block as it was) and the file loses the new one. One undo step; the
   // block selected.
-  function place(figure, answer) {
+  function place(figure, answer, { pasted = false } = {}) {
     if (!figure.isConnected) return;
     const doc = figure.ownerDocument;
     const replacing = Boolean(linkOf(figure));
     const next = newFile(doc);
     next.replaceChildren(...fileParts(doc, answer, fileUrl(answer.path), captionOf(figure)?.innerHTML ?? ""));
-    media.place(figure, next, { replacing });
+    media.place(figure, next, { replacing, pasted });
     if (replacing) say(t("已替换文件 · Ctrl+Z 撤销"));
   }
 

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

@@ -1,4 +1,5 @@
 import { headingIcon } from "../icons.mjs";
+import { ALIGN_TOGGLES } from "../align.mjs";
 import { t } from "../../../shared/i18n/index.mjs";
 
 // 标题 1–4: headings h1–h4 (the fourth is body-sized, set apart by its weight; an author's h5 or h6 is
@@ -10,7 +11,7 @@ import { t } from "../../../shared/i18n/index.mjs";
 // heading into a paragraph), clipboard/own/ and src/transfer/markdown.mjs (written by its level: `clipboard`).
 // Folding its section: page/fold/ (the triangle right of its words, what is hidden, the section going with
 // it wherever blocks are taken away whole) and page.mjs (Ctrl/⌘+Enter in its words).
-// Its color (颜色 in the block menu): class switches, colors.mjs.
+// Its color (颜色 in the block menu): class switches, colors.mjs; its alignment and indent (对齐与缩进), align.mjs.
 // Its look: the kit's styles/flow.css (src/render/kit/).
 // How a heading of a level is written out: # … #### by level.
 const writtenAs = (level) => ({ kind: "heading", level });
@@ -23,7 +24,7 @@ export default {
     heading: {
       name: t("标题"),
       match: [{ rank: 190, tag: ["h1", "h2", "h3", "h4", "h5", "h6"] }],
-      colors: ["text", "background"],
+      colors: ["text", "background"], toggles: ALIGN_TOGGLES,
       emptyIsNothing: true, fromWords: true,
       clipboard: { of: (unit) => writtenAs(Math.min(4, Number(unit.localName.slice(1)) || 2)) }, // h5 and h6, which no type stands for, as heading 4
     },
@@ -31,22 +32,22 @@ export default {
   types: {
     heading1: {
       turn: 3, menu: ["basic", 3],
-      tag: "h1", kind: "heading", leaf: "heading1", text: true, empty: true, placeholder: t("标题 1"), clipboard: writtenAs(1),
+      tag: "h1", kind: "heading", leaf: "heading1", text: true, empty: true, emptyToText: true, placeholder: t("标题 1"), clipboard: writtenAs(1),
       label: t("标题 1"), icon: headingIcon(1), hint: "#", markdown: [{ match: /^(#|＃)[ \u00a0\u3000]$/ }], words: "标题1 一级标题 大标题 biaoti1 yiji bt1 bt heading1 h1 title",
     },
     heading2: {
       turn: 4, menu: ["basic", 4],
-      tag: "h2", kind: "heading", leaf: "heading2", text: true, empty: true, placeholder: t("标题 2"), clipboard: writtenAs(2),
+      tag: "h2", kind: "heading", leaf: "heading2", text: true, empty: true, emptyToText: true, placeholder: t("标题 2"), clipboard: writtenAs(2),
       label: t("标题 2"), icon: headingIcon(2), hint: "##", markdown: [{ match: /^(##|＃＃)[ \u00a0\u3000]$/ }], words: "标题2 二级标题 biaoti2 erji bt2 bt heading2 h2",
     },
     heading3: {
       turn: 5, menu: ["basic", 5],
-      tag: "h3", kind: "heading", leaf: "heading3", text: true, empty: true, placeholder: t("标题 3"), clipboard: writtenAs(3),
+      tag: "h3", kind: "heading", leaf: "heading3", text: true, empty: true, emptyToText: true, placeholder: t("标题 3"), clipboard: writtenAs(3),
       label: t("标题 3"), icon: headingIcon(3), hint: "###", markdown: [{ match: /^(###|＃＃＃)[ \u00a0\u3000]$/ }], words: "标题3 三级标题 小标题 biaoti3 sanji bt3 bt heading3 h3",
     },
     heading4: {
       turn: 6, menu: ["basic", 6],
-      tag: "h4", kind: "heading", leaf: "heading4", text: true, empty: true, placeholder: t("标题 4"), clipboard: writtenAs(4),
+      tag: "h4", kind: "heading", leaf: "heading4", text: true, empty: true, emptyToText: true, placeholder: t("标题 4"), clipboard: writtenAs(4),
       label: t("标题 4"), icon: headingIcon(4), hint: "####", markdown: [{ match: /^(####|＃＃＃＃)[ \u00a0\u3000]$/ }], words: "标题4 四级标题 biaoti4 siji bt4 bt heading4 h4",
     },
   },

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

@@ -43,9 +43,9 @@ const STYLE = `
   [data-ge-editing] main ${STEP}[data-ge-number-hover]:not(:has(> .${ICON}))::before { box-shadow: inset 0 0 0 20px light-dark(rgb(55 53 47 / 8%), rgb(255 255 255 / 8%)); }
   .ge-add-icon { position: fixed; left: 0; top: 0; z-index: ${Z.affordance}; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; border-radius: 6px;
     color: var(--ge-tx3); font: 14px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
-    white-space: nowrap; cursor: pointer; user-select: none; opacity: 0; transition: opacity .1s ease-in, background .1s ease-in; }
+    white-space: nowrap; cursor: pointer; user-select: none; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .1s ease-in, background .1s ease-in; }
   .ge-add-icon svg { display: block; flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
-  .ge-add-icon[data-shown] { opacity: 1; }
+  .ge-add-icon[data-shown] { opacity: 1; visibility: visible; pointer-events: auto; }
   .ge-add-icon:hover { background: light-dark(rgb(55 53 47 / 6%), rgb(255 255 255 / 6%)); }
 `;
 
@@ -187,21 +187,23 @@ export function create({ struct, say, isEditing, openMediaPicker, assetUrl, impo
   const add = element("div", { class: "ge-add-icon", role: "button", tabindex: "0", html: t("{0}添加图标", FACE_ICON) });
   add.addEventListener("mousedown", (event) => event.preventDefault());
   add.addEventListener("click", async () => {
+    if (!shown || !isEditing() || iconOf()) return;
     await loadEmojiData();
+    if (!shown || !isEditing() || iconOf()) return;
     setIcon(randomEmoji(), t("已添加页面图标"));
   });
   let shown = false;
   function showAdd() {
     const title = titleOf();
     const header = title?.parentElement;
-    if (!title || !header) return hideAdd();
+    if (!isEditing() || !title || !header || iconOf()) return hideAdd();
     if (!add.isConnected) mount(add);
     const first = header.firstElementChild.getBoundingClientRect();
     const range = document.createRange();
     range.selectNodeContents(title);
     const text = range.getClientRects()[0] ?? title.getBoundingClientRect();
     add.style.transform = `translate(${Math.round(text.left - 8)}px, ${Math.round(first.top - 28 - 6)}px)`;
-    if (!shown) requestAnimationFrame(() => add.setAttribute("data-shown", ""));
+    if (!shown) requestAnimationFrame(() => { if (shown) add.setAttribute("data-shown", ""); });
     shown = true;
   }
   function hideAdd() {

package/browser/editor/components/icons.mjs

@@ -18,8 +18,8 @@ const LEVELS = {
 export const FORMULA_ICON = svg('<path d="M1.6 11.6 5.5 16.25 9.5 3.75h8.75"/><path d="m10.6 7.9 6.6 8.35M17.2 7.9l-6.6 8.35"/>');
 
 /** A link (two rings of a chain): the "/" menu's 链接, 链接视图, an empty link's chip, one drawing. */
-/** A page (as the workbench's tree draws one with no icon: Lucide's file-text, FinHarness's 文档, here in 20 units): the "/" menu's 页面, a page block left empty, a page with no icon in a search's rows. */
-export const PAGE_ICON = svg('<path d="M5 18.33a1.67 1.67 0 0 1-1.67-1.66V3.33a1.67 1.67 0 0 1 1.67-1.66h6.67a2 2 0 0 1 1.42.58l2.99 2.99a2 2 0 0 1 .59 1.43v10a1.67 1.67 0 0 1-1.67 1.66z"/><path d="M11.67 1.67v4.16c0 .46.37.84.83.84h4.17"/><path d="M8.33 7.5H6.67M13.33 10.83H6.67M13.33 14.17H6.67"/>');
+/** A page (the workbench's plain Lucide file outline, here in 20 units): the "/" menu's 页面, a page block left empty, a page with no icon in a search's rows. */
+export const PAGE_ICON = svg('<path d="M5 18.33a1.67 1.67 0 0 1-1.67-1.66V3.33a1.67 1.67 0 0 1 1.67-1.66h6.67a2 2 0 0 1 1.42.58l2.99 2.99a2 2 0 0 1 .59 1.43v10a1.67 1.67 0 0 1-1.67 1.66z"/><path d="M11.67 1.67v4.16c0 .46.37.84.83.84h4.17"/>');
 
 /** A section (分区): blocks gathered between brackets, the block menu's 组成新分区 and the section's line in 设置 › 组件列表. */
 export const SECTION_ICON = svg('<path d="M6 3.75h-.75a2 2 0 0 0-2 2v8.5a2 2 0 0 0 2 2H6M14 3.75h.75a2 2 0 0 1 2 2v8.5a2 2 0 0 1-2 2H14"/><path d="M7.25 7.75h5.5M7.25 12.25h5.5"/>');
@@ -32,6 +32,9 @@ export const SECTION_ICON = svg('<path d="M6 3.75h-.75a2 2 0 0 0-2 2v8.5a2 2 0 0
  */
 export const BLOCK_ICON = svg('<rect x="3.25" y="3.25" width="13.5" height="13.5" rx="2.5"/><path d="M6.75 7h3.5M6.75 10h6.5M6.75 13h4.5"/>');
 
+/** 设置: a ring with eight short rays, the board's card menu and a custom block's handle menu. */
+export const SETTINGS_ICON = svg('<circle cx="10" cy="10" r="2.25"/><path d="M10 3.25v1.5M10 15.25v1.5M3.25 10h1.5M15.25 10h1.5M5.2 5.2l1.06 1.06M13.74 13.74l1.06 1.06M5.2 14.8l1.06-1.06M13.74 6.26l1.06-1.06"/>');
+
 /** A detail card (详情卡片): a card with two lines of text. */
 export const DIALOG_ICON = svg('<rect x="3.25" y="3.75" width="13.5" height="12.5" rx="2.5"/><path d="M6.5 8h7M6.5 11.5h4.5"/>');
 export const LINK_ICON = svg('<g transform="rotate(45 10 10)"><path d="M7 8.5V6a3 3 0 0 1 6 0v2.5M7 11.5V14a3 3 0 0 0 6 0v-2.5M10 7.5v5"/></g>'); // two U's and the line between them, turned 45°

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

@@ -36,6 +36,8 @@ export default {
       name: t("图片"),
       match: [{ rank: 45, tag: "figure", class: "doc-image" }],
       boxed: true,
+      // Selected alone with its picture, its corner grips and toolbar show it: no selection fill (selection/index.mjs).
+      unfilled: ":scope > img",
       toggles: ALIGN,
       sizes: { [SPAN]: SPAN_SIZE },
     },