orz-mdhtml 0.1.0 → 0.1.2

package/README.md

@@ -36,17 +36,16 @@ as the single source of truth; Save/Export re-serialize the whole document.
 
 ## Install / generate
 
-Requires Node 18+. Until this package is published to npm, use it from a clone:
+Requires Node 18+. No install needed — run it with `npx`:
 
 ```bash
-git clone https://github.com/wangyu16/orz-mdhtml.git
-cd orz-mdhtml
-npm install
-npm run bundle                       # build dist/orzmd.browser.js (the in-browser renderer)
-npm run gen -- path/to/doc.md        # → path/to/doc.md.html
+npx orz-mdhtml path/to/doc.md     # → path/to/doc.md.html
 open path/to/doc.md.html
 ```
 
+Or install the CLI globally (`npm i -g orz-mdhtml`), then `orz-mdhtml doc.md`.
+To hack on it, clone the repo and use `npm run gen -- doc.md`.
+
 ### CLI options
 
 ```
@@ -54,11 +53,15 @@ orz-mdhtml <input.md> [options]
 
   -o, --out <file>   output path (default: <input>.md.html)
   --theme <name>     default theme id (default: light-academic-1)
-  --inline           embed the renderer bundle in the file (default; offline-capable renderer)
-  --cdn              reference the renderer from jsDelivr (needs orz-mdhtml-browser published)
+  --cdn              reference the renderer from jsDelivr (default; small files)
+  --inline           embed the renderer bundle (larger file, no renderer fetch)
   --title <text>     document <title> (default: input filename)
 ```
 
+By default (`--cdn`), the renderer is fetched from jsDelivr on first open and
+cached, so generated files are small (~tens of KB). Use `--inline` to embed the
+renderer (~750 KB) when you want the file to carry its own renderer.
+
 Themes: `light-academic-1/2`, `light-neat-1/2`, `light-playful-1/2`,
 `beige-decent-1/2`, `dark-elegant-1/2`. (Readers can switch live in the editor.)
 
@@ -104,7 +107,7 @@ whole-table/blockquote copy fix.
 - [x] Document-first UI: read / edit, iframe preview, incremental live updates
 - [x] Theme picker, reader font size, export, scroll-sync toggle
 - [x] copy-as-markdown via orz-markdown core
-- [ ] Publish `orz-mdhtml` (the CLI) and `orz-mdhtml-browser` (CDN bundle) to npm
+- [x] Publish `orz-mdhtml` (the CLI) and `orz-mdhtml-browser` (CDN bundle) to npm
 - [ ] Optional fully-offline build (inline themes + editor libs)
 - [ ] Mermaid/KaTeX live re-render parity in the editor
 

package/assets/app.js

@@ -63,11 +63,18 @@
       + '<article class="markdown-body" id="orz-doc"></article>'
       + '<script src="' + f.hljsJs + '"><\/script>'
       + '<script src="' + f.mermaidJs + '"><\/script>'
+      + '<script src="' + f.smilesJs + '"><\/script>'
       + '<script>try{mermaid.initialize({startOnLoad:false})}catch(e){}<\/script>'
       + '<script>' + guard(CFG.runtime) + '<\/script>'
       + '<script>window.__orzEnhance=function(){'
       + 'try{if(window.hljs){document.querySelectorAll("#orz-doc pre code:not(.hljs)").forEach(function(b){window.hljs.highlightElement(b)})}}catch(e){}'
       + 'try{if(window.mermaid){window.mermaid.run({querySelector:"#orz-doc .mermaid:not([data-processed])"})}}catch(e){}'
+      // SMILES: draw each canvas once (tracked via a JS prop so morphdom keeps
+      // the drawn canvas across edits — DOM attributes stay identical).
+      + 'try{if(window.SmilesDrawer){document.querySelectorAll("#orz-doc canvas[data-smiles]").forEach(function(c){if(c.__orzSmilesDone)return;var s=c.getAttribute("data-smiles");if(!s)return;c.__orzSmilesDone=true;var dr=new window.SmilesDrawer.Drawer({width:c.width,height:c.height});window.SmilesDrawer.parse(s,function(t){try{dr.draw(t,c,window.__orzSmilesTheme||"light",false)}catch(e){}},function(){})})}}catch(e){}'
+      // Tabs init runs in the runtime on load (empty #orz-doc); re-run now that
+      // content is injected, and after each incremental update. Idempotent.
+      + 'try{if(window.OrzMarkdownRuntime&&window.OrzMarkdownRuntime.initTabs){window.OrzMarkdownRuntime.initTabs(document)}}catch(e){}'
       + '};<\/script></body></html>';
   }
 
@@ -91,7 +98,20 @@
 
   function enhance() {
     var w = frame.contentWindow;
-    if (w && typeof w.__orzEnhance === 'function') { try { w.__orzEnhance(); } catch (e) {} }
+    if (!w) return;
+    try { w.__orzSmilesTheme = themeById(currentTheme).scheme === 'dark' ? 'dark' : 'light'; } catch (e) {}
+    if (typeof w.__orzEnhance === 'function') { try { w.__orzEnhance(); } catch (e) {} }
+  }
+
+  // Re-draw SMILES canvases (fresh, cleared) so they pick up the current
+  // light/dark theme; used after a theme switch.
+  function redrawSmiles() {
+    var doc = frameDoc(); if (!doc) return;
+    Array.prototype.forEach.call(doc.querySelectorAll('#orz-doc canvas[data-smiles]'), function (c) {
+      var fresh = c.cloneNode(false); // drops the drawing + the __orzSmilesDone JS prop
+      if (c.parentNode) c.parentNode.replaceChild(fresh, c);
+    });
+    enhance();
   }
   // CDN libs inside the iframe load async — retry enhance a few times.
   function enhanceSoon() { enhance(); setTimeout(enhance, 150); setTimeout(enhance, 600); setTimeout(enhance, 1500); }
@@ -327,6 +347,7 @@
     root.setAttribute('data-chrome', t.scheme);
     if (themeSelect) themeSelect.value = id;
     applyThemeToFrame(t);
+    redrawSmiles(); // pick up the new light/dark SMILES palette
     if (cm) cm.setOption('theme', cmTheme(t.scheme));
     markDirty();
   }
@@ -463,19 +484,30 @@
   }
 
   // ---- version check -------------------------------------------------------
+  // True only when `a` is a strictly newer semver than `b` (so an older
+  // resolved version never shows a bogus "update available").
+  function isNewer(a, b) {
+    var pa = String(a).split('.'), pb = String(b).split('.');
+    for (var i = 0; i < 3; i++) {
+      var x = parseInt(pa[i], 10) || 0, y = parseInt(pb[i], 10) || 0;
+      if (x > y) return true;
+      if (x < y) return false;
+    }
+    return false;
+  }
   function checkVersion() {
     if (!CFG.versionManifest || !CFG.rendererVersion) return;
     try {
       var cached = JSON.parse(localStorage.getItem('orz-mdhtml:vercheck') || 'null');
       if (cached && (Date.now() - cached.t) < 86400000) {
-        if (cached.v && cached.v !== CFG.rendererVersion) showUpdate(cached.v);
+        if (cached.v && isNewer(cached.v, CFG.rendererVersion)) showUpdate(cached.v);
         return;
       }
     } catch (e) {}
     fetch(CFG.versionManifest).then(function (r) { return r.json(); }).then(function (j) {
       var latest = j && j.version;
       try { localStorage.setItem('orz-mdhtml:vercheck', JSON.stringify({ t: Date.now(), v: latest })); } catch (e) {}
-      if (latest && latest !== CFG.rendererVersion) showUpdate(latest);
+      if (latest && isNewer(latest, CFG.rendererVersion)) showUpdate(latest);
     }).catch(function () {});
   }
   function showUpdate(latest) {

package/dist/cli.js

@@ -140,6 +140,7 @@ function main() {
             hljsDarkCss: `${CDN.hl}/styles/atom-one-dark.min.css`,
             hljsJs: `${CDN.hl}/highlight.min.js`,
             mermaidJs: 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js',
+            smilesJs: 'https://cdn.jsdelivr.net/npm/smiles-drawer@1.0.10/dist/smiles-drawer.min.js',
         },
         editorLibs: {
             codemirrorCss: `${CDN.cm}/codemirror.min.css`,