finch-markdown-editor 0.1.3 → 0.1.7

package/dist/index.js

@@ -4,6 +4,7 @@ import { mkdir, readFile, realpath, rm, stat, writeFile } from "node:fs/promises
 import { watch } from "node:fs";
 import { spawn } from "node:child_process";
 import path from "node:path";
+import { fileURLToPath } from "node:url";
 import os from "node:os";
 var PASTE_IMAGE_EXT = {
   "image/png": "png",
@@ -291,46 +292,9 @@ async function restoreDocument(ctx, panel) {
     return false;
   }
 }
-var bmmdBinPromise;
-async function ensureBmmdBin(ctx, onInstalling) {
-  if (!bmmdBinPromise) {
-    bmmdBinPromise = (async () => {
-      const installDir = path.join(ctx.storagePath, "bmmd");
-      const binPath = path.join(installDir, "node_modules", "bmmd", "bin", "bmmd.mjs");
-      try {
-        await stat(binPath);
-        return binPath;
-      } catch {
-      }
-      onInstalling?.();
-      await mkdir(installDir, { recursive: true });
-      await new Promise((resolve, reject) => {
-        const child = spawn("npm", [
-          "install",
-          "--no-save",
-          "--no-audit",
-          "--no-fund",
-          "--silent",
-          "--prefix",
-          installDir,
-          "bmmd@latest"
-        ], { stdio: "ignore" });
-        child.on("error", reject);
-        child.on("close", (code) => code === 0 ? resolve() : reject(new Error(`npm install bmmd exited with code ${code}`)));
-      });
-      await stat(binPath);
-      return binPath;
-    })();
-  }
-  try {
-    return await bmmdBinPromise;
-  } catch (error) {
-    bmmdBinPromise = void 0;
-    throw error;
-  }
-}
-async function runBmmd(ctx, args, input, onInstalling) {
-  const binPath = await ensureBmmdBin(ctx, onInstalling);
+var BMMD_BIN_PATH = fileURLToPath(new URL("./bmmd/bin/bmmd.mjs", import.meta.url));
+async function runBmmd(args, input) {
+  const binPath = BMMD_BIN_PATH;
   return new Promise((resolve, reject) => {
     const child = spawn(process.execPath, [binPath, ...args], { stdio: ["pipe", "pipe", "pipe"] });
     let output = "";
@@ -363,11 +327,11 @@ function substituteFinchFileImagesForBm(markdown) {
   });
   return { markdown: substituted, urls };
 }
-async function renderWithBm(ctx, markdown, markdownStyle, customCss, onInstalling) {
+async function renderWithBm(markdown, markdownStyle, customCss) {
   const args = ["render", "--platform", "wechat", "--markdown-style", markdownStyle || "kami"];
   if (customCss && customCss.trim()) args.push("--custom-css", customCss);
   const prepared = substituteFinchFileImagesForBm(markdown);
-  let html = await runBmmd(ctx, args, prepared.markdown, onInstalling);
+  let html = await runBmmd(args, prepared.markdown);
   for (const [placeholder, originalUrl] of prepared.urls) html = html.split(placeholder).join(originalUrl);
   return html;
 }
@@ -603,10 +567,7 @@ async function handleMessage(ctx, panel, raw) {
     }
     case "renderBm": {
       try {
-        const html = await renderWithBm(ctx, String(message.markdown ?? ""), String(message.markdownStyle ?? "kami"), message.customCss, () => {
-          panel.postMessage({ type: "status", message: "\u9996\u6B21\u6E32\u67D3\uFF1A\u6B63\u5728\u672C\u673A\u5B89\u88C5 bmmd \u6E32\u67D3\u5F15\u64CE\uFF08\u7EA6\u51E0\u79D2\uFF0C\u4EC5\u4E00\u6B21\uFF09\u2026" }).catch(() => {
-          });
-        });
+        const html = await renderWithBm(String(message.markdown ?? ""), String(message.markdownStyle ?? "kami"), message.customCss);
         await panel.postMessage({ type: "bmRendered", html, requestId: message.requestId });
       } catch (error) {
         await panel.postMessage({ type: "error", message: `bm.md rendering failed: ${error instanceof Error ? error.message : String(error)}` });
@@ -742,6 +703,9 @@ function activate(ctx) {
     },
     feather: {
       svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.086 18.412A2 2 0 0 1 12.67 19H5v-7.672a2 2 0 0 1 .586-1.414L11.75 3.75a6 6 0 1 1 8.49 8.49z"/><path d="M16 8 2 22"/><path d="M17.488 15H9"/></svg>'
+    },
+    "swatch-book": {
+      svg: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 17a4 4 0 0 1-8 0V5a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2Z"/><path d="M16.7 13H19a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H7"/><path d="M 7 17h.01"/><path d="m11 8 2.3-2.3a2.4 2.4 0 0 1 3.404.004L18.6 7.6a2.4 2.4 0 0 1 .026 3.434L9.9 19.8"/></svg>'
     }
   }));
   ctx.subscriptions.push(ctx.ui.onDidOpenPanel((panel) => {

package/dist/panel.html

@@ -77,6 +77,7 @@ body{margin:0;background:var(--bg);color:var(--text);font:13px var(--finch-font-
 .home-hint{margin:0;padding:22px 0;text-align:center;font-size:12.5px;color:var(--muted)}
 .home-hint[hidden],.home-recent[hidden]{display:none}
 .status{font-size:12px;color:var(--muted);padding:5px 10px;text-align:center;border-top:1px solid var(--border);background:var(--bg)}
+.status a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;cursor:pointer}
 .status.error{color:#c54232}
 .status:empty{padding:0;border-top:0}
 .popup{position:fixed;z-index:20;display:flex;align-items:center;gap:6px;background:var(--card);border:1px solid var(--border);border-radius:9px;box-shadow:0 8px 22px rgba(0,0,0,.22);padding:5px;transform-origin:center bottom;animation:popup-in .18s cubic-bezier(.2,.8,.2,1)}
@@ -115,14 +116,14 @@ body{margin:0;background:var(--bg);color:var(--text);font:13px var(--finch-font-
 .actions[hidden]{display:none}
 .actions button{position:relative;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border:0;border-radius:7px;background:transparent;color:var(--text);font:inherit;cursor:pointer;white-space:nowrap}
 .actions button:hover:not(:disabled){background:var(--bg)}
-.actions button[title]::after{content:attr(title);position:absolute;left:50%;bottom:calc(100% + 8px);z-index:20;padding:6px 8px;border:1px solid var(--border);border-radius:7px;background:linear-gradient(135deg,color-mix(in srgb,var(--card) 96%,#fff),var(--bg));box-shadow:0 5px 16px rgba(0,0,0,.2);color:var(--text);font-size:12px;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,3px);transition:opacity .16s ease,transform .16s ease}
-.actions button[title]:hover::after{opacity:1;transform:translate(-50%,0)}
+.actions button[data-tooltip]::after{content:attr(data-tooltip);position:absolute;left:50%;bottom:calc(100% + 8px);z-index:20;padding:6px 8px;border:1px solid var(--border);border-radius:7px;background:linear-gradient(135deg,color-mix(in srgb,var(--card) 96%,#fff),var(--bg));box-shadow:0 5px 16px rgba(0,0,0,.2);color:var(--text);font-size:12px;line-height:1;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,3px);transition:opacity .16s ease,transform .16s ease}
+.actions button[data-tooltip]:hover::after{opacity:1;transform:translate(-50%,0)}
 /* Center tooltips over ordinary buttons; at either end of the floating bar,
    grow them inward instead of letting a long label escape the panel. */
-.actions button:first-child[title]::after{left:0;transform:translateY(3px)}
-.actions button:first-child[title]:hover::after{transform:translateY(0)}
-.actions button:last-child[title]::after{left:auto;right:0;transform:translateY(3px)}
-.actions button:last-child[title]:hover::after{transform:translateY(0)}
+.actions button:first-child[data-tooltip]::after{left:0;transform:translateY(3px)}
+.actions button:first-child[data-tooltip]:hover::after{transform:translateY(0)}
+.actions button:last-child[data-tooltip]::after{left:auto;right:0;transform:translateY(3px)}
+.actions button:last-child[data-tooltip]:hover::after{transform:translateY(0)}
 .actions button:disabled{opacity:.45;cursor:default}
 .actions .sep{width:1px;height:18px;background:var(--border);margin:0 3px}
 .actions svg{width:16px;height:16px;flex:none}
@@ -175,24 +176,24 @@ body{margin:0;background:var(--bg);color:var(--text);font:13px var(--finch-font-
       <div class="preview-shell">
         <iframe id="article" sandbox="allow-same-origin" data-i18n-title="meta.title" title="Article Preview"></iframe>
         <div id="actions" class="actions" hidden>
-          <button id="actCopyWx" type="button" data-i18n-title="actions.copyToWx" title="Copy for WeChat">
+          <button id="actCopyWx" type="button" data-i18n-tooltip="actions.copyToWx" aria-label="Copy for WeChat">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="round"><path stroke-linecap="round" d="M7 7h.009m5.982 0H13m4.991 7.5H18m-4 0h.009"/><path d="M10 16c0 2.761 2.686 5 6 5c.907 0 1.767-.168 2.538-.468c.189-.073.393-.1.592-.063L22 21l-.652-2.03a1.13 1.13 0 0 1 .11-.89A4.3 4.3 0 0 0 22 16c0-2.761-2.686-5-6-5s-6 2.239-6 5Z"/><path d="M17.873 11.249Q18 10.639 18 10c0-3.866-3.582-7-8-7s-8 3.134-8 7c0 1.112.297 2.164.824 3.098c.147.26.196.567.108.853L2 17l3.914-.76c.208-.041.422-.013.617.07a9 9 0 0 0 3.589.69"/></svg>
           </button>
           <span class="sep" data-collapsible></span>
-          <button id="actCopyImg" type="button" data-i18n-title="actions.copyImg" title="Copy image" data-collapsible>
+          <button id="actCopyImg" type="button" data-i18n-tooltip="actions.copyImg" aria-label="Copy image" data-collapsible>
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
           </button>
-          <button id="actSaveImg" type="button" data-i18n-title="actions.exportImg" title="Export image (download)" data-collapsible>
+          <button id="actSaveImg" type="button" data-i18n-tooltip="actions.exportImg" aria-label="Export image (download)" data-collapsible>
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.3 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v6.3"/><path d="m2 16 5-5c.928-.893 2.072-.893 3 0l3 3"/><path d="m14 14 1-1c.928-.893 2.072-.893 3 0"/><path d="M19 16v6"/><path d="m22 19-3 3-3-3"/><circle cx="9" cy="9" r="2"/></svg>
           </button>
-          <button id="actSavePdf" type="button" data-i18n-title="actions.exportPdf" title="Export PDF" data-collapsible>
+          <button id="actSavePdf" type="button" data-i18n-tooltip="actions.exportPdf" aria-label="Export PDF" data-collapsible>
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M12 18v-6"/><path d="m9 15 3 3 3-3"/></svg>
           </button>
           <span class="sep" data-collapsible></span>
-          <button id="actAiStyle" type="button" data-i18n-title="actions.aiStyle" title="Ask AI to design layout" data-collapsible>
+          <button id="actAiStyle" type="button" data-i18n-tooltip="actions.aiStyle" aria-label="Ask AI to design layout" data-collapsible>
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21.64 3.64-1.28-1.28a1.21 1.21 0 0 0-1.72 0L2.36 18.64a1.21 1.21 0 0 0 0 1.72l1.28 1.28a1.2 1.2 0 0 0 1.72 0L21.64 5.36a1.2 1.2 0 0 0 0-1.72"/><path d="m14 7 3 3"/><path d="M5 6v4"/><path d="M19 14v4"/><path d="M10 2v2"/><path d="M7 8H3"/><path d="M21 16h-4"/><path d="M11 3H9"/></svg>
           </button>
-          <button id="actToggle" type="button" class="act-toggle" data-i18n-title="actions.toggle" title="Expand/collapse">
+          <button id="actToggle" type="button" class="act-toggle" data-i18n-tooltip="actions.toggle" aria-label="Expand/collapse">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
           </button>
         </div>
@@ -358,7 +359,8 @@ body{margin:0;background:var(--bg);color:var(--text);font:13px var(--finch-font-
       'status.focusOn': '专注已开启：非当前行半透明。',
       'status.focusOff': '专注已关闭。',
       'status.saveFailedNoReturn': '保存失败，未返回首页。',
-      'status.rendererAbout': '渲染器：本机 bmmd CLI（bm.md，AGPL-3.0）。',
+      'status.rendererAboutPrefix': '渲染器：本机 bmmd CLI（',
+      'status.rendererAboutSuffix': '，LGPL-3.0）。',
       'status.appliedStyleSlot': '已应用「{label}」。',
       'status.needCustomStyleFirst': '请先应用一个自定义/AI 设计的风格，再保存到槽位。',
       'status.savedToSlot': '已保存到槽位 {slot}：{label}',
@@ -496,7 +498,8 @@ body{margin:0;background:var(--bg);color:var(--text);font:13px var(--finch-font-
       'status.focusOn': 'Focus mode is on — inactive lines are dimmed.',
       'status.focusOff': 'Focus mode is off.',
       'status.saveFailedNoReturn': 'Save failed — staying on this document.',
-      'status.rendererAbout': 'Renderer: local bmmd CLI (bm.md, AGPL-3.0).',
+      'status.rendererAboutPrefix': 'Renderer: local bmmd CLI (',
+      'status.rendererAboutSuffix': ', LGPL-3.0).',
       'status.appliedStyleSlot': 'Applied \u201c{label}\u201d.',
       'status.needCustomStyleFirst': 'Apply a custom/AI-designed style first before saving it to a slot.',
       'status.savedToSlot': 'Saved to slot {slot}: {label}',
@@ -530,6 +533,17 @@ body{margin:0;background:var(--bg);color:var(--text);font:13px var(--finch-font-
     Array.prototype.forEach.call(scope.querySelectorAll('[data-i18n-title]'), function (el) {
       el.title = t(el.getAttribute('data-i18n-title'));
     });
+    // The floating preview action bar (WeChat copy/export buttons) renders
+    // its own styled tooltip bubble in CSS from `data-tooltip` (see
+    // `.actions button[data-tooltip]::after`). Those buttons must NOT also
+    // carry a native `title` attribute, or hovering shows both the custom
+    // bubble and the browser's plain OS tooltip at once. `aria-label` keeps
+    // them accessible without reintroducing a `title`.
+    Array.prototype.forEach.call(scope.querySelectorAll('[data-i18n-tooltip]'), function (el) {
+      var text = t(el.getAttribute('data-i18n-tooltip'));
+      el.setAttribute('data-tooltip', text);
+      el.setAttribute('aria-label', text);
+    });
     Array.prototype.forEach.call(scope.querySelectorAll('[data-i18n-aria]'), function (el) {
       el.setAttribute('aria-label', t(el.getAttribute('data-i18n-aria')));
     });
@@ -638,6 +652,26 @@ body{margin:0;background:var(--bg);color:var(--text);font:13px var(--finch-font-
     }, 5000);
   }
 
+  function showRendererAbout() {
+    if (statusHideTimer) { clearTimeout(statusHideTimer); statusHideTimer = 0; }
+    statusEl.replaceChildren(document.createTextNode(t('status.rendererAboutPrefix')));
+    var link = document.createElement('a');
+    link.href = 'https://bm.md/';
+    link.textContent = 'bm.md';
+    link.title = 'https://bm.md/';
+    link.addEventListener('click', function (event) {
+      event.preventDefault();
+      if (api && api.postMessage) api.postMessage({ type: 'openLink', url: 'https://bm.md/' });
+    });
+    statusEl.append(link, document.createTextNode(t('status.rendererAboutSuffix')));
+    statusEl.className = 'status';
+    statusHideTimer = setTimeout(function () {
+      statusHideTimer = 0;
+      statusEl.textContent = '';
+      statusEl.className = 'status';
+    }, 5000);
+  }
+
   function hasDocument() { return !!markdown || !!sourcePath; }
 
   if (emptyNew) emptyNew.addEventListener('click', async function () {
@@ -907,11 +941,11 @@ body{margin:0;background:var(--bg);color:var(--text);font:13px var(--finch-font-
         checked: annotationsEnabled, disabled: !hasDoc,
       },
       {
-        // Label stays "预览" no matter which mode is active — the icon
-        // (toggle-left/right) plus `checked` already communicate on/off;
-        // flipping the word itself between "预览"/"编辑" read as ambiguous
-        // ("is this the mode I'm in, or the one I'm switching to?").
-        id: 'mode', icon: mode === 'edit' ? 'toggle-left' : 'toggle-right',
+        // Label stays "预览" no matter which mode is active — the swatch
+        // icon plus `checked` already communicate on/off; flipping the word
+        // itself between "预览"/"编辑" read as ambiguous ("is this the mode
+        // I'm in, or the one I'm switching to?").
+        id: 'mode', icon: 'ext:markdown-editor-icons/swatch-book',
         label: t('toolbar.mode.label'), tooltip: hasDoc ? (mode === 'edit' ? t('toolbar.mode.tooltipToPreview') : t('toolbar.mode.tooltipToEdit')) : t('toolbar.needDoc'),
         checked: mode === 'preview', disabled: !hasDoc,
       },
@@ -2329,7 +2363,7 @@ body{margin:0;background:var(--bg);color:var(--text);font:13px var(--finch-font-
     if (itemId === 'comfort:read') { setComfortWriting(false); return; }
     if (itemId === 'comfort:write') { setComfortWriting(true); return; }
     if (itemId === 'focus') { toggleFocusMode(); return; }
-    if (itemId === 'about') { setStatus(t('status.rendererAbout')); return; }
+    if (itemId === 'about') { showRendererAbout(); return; }
     // These two must be checked before the generic 'style:' fallback below,
     // since both also start with the literal prefix "style:".
     if (itemId && itemId.indexOf('style:slot-use:') === 0) { applyStyleSlot(+itemId.slice('style:slot-use:'.length)); return; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "finch-markdown-editor",
-  "version": "0.1.3",
+  "version": "0.1.7",
   "description": "A Markdown editor and WeChat Official Account style preview, with selection-based AI edits and AI-generated custom styles.",
   "author": {
     "name": "PuterJam",
@@ -27,7 +27,7 @@
     "annotation"
   ],
   "scripts": {
-    "build": "esbuild src/index.ts --bundle --platform=node --format=esm --target=node20 --outfile=dist/index.js && esbuild src/codemirror.ts --bundle --platform=browser --format=iife --target=chrome120 --minify --outfile=dist/codemirror.js && cp src/panel.html dist/panel.html",
+    "build": "esbuild src/index.ts --bundle --platform=node --format=esm --target=node20 --outfile=dist/index.js && esbuild src/codemirror.ts --bundle --platform=browser --format=iife --target=chrome120 --minify --outfile=dist/codemirror.js && node -e \"const fs=require('node:fs');fs.copyFileSync('src/panel.html','dist/panel.html');fs.rmSync('dist/bmmd',{recursive:true,force:true});fs.mkdirSync('dist/bmmd',{recursive:true});fs.cpSync('node_modules/bmmd/bin','dist/bmmd/bin',{recursive:true});fs.copyFileSync('node_modules/bmmd/LICENSE','dist/bmmd/LICENSE')\"",
     "typecheck": "tsc --noEmit",
     "prepublishOnly": "npm run typecheck && npm run build && npx @finchtoys/minitools doctor ."
   },
@@ -176,13 +176,14 @@
     },
     "permissions": {
       "filesystem": "readwrite",
-      "network": false,
+      "network": true,
       "shell": true
     }
   },
   "devDependencies": {
     "@finchtoys/minitool-api": "^0.3.5",
     "@types/node": "^26.1.0",
+    "bmmd": "0.3.0",
     "esbuild": "^0.28.1",
     "typescript": "^6.0.3"
   },