// ==UserScript== // @name notion-kroki // @namespace https://github.com/zuisong/notion-kroki // @grant none // @version 1.1.4 // @license MIT // @match *://www.notion.so/* // @match *://*.notion.site/* // @match *://*.super.site/* // @supportURL https://github.com/zuisong/notion-kroki/issues // @run-at document-idle // @author zuisong // @description Render notion code block as graph by kroki // @downloadURL none // ==/UserScript== // src/common/utils.ts function _xpath(xpath, node) { const xresult = document.evaluate( xpath, node, null, XPathResult.ANY_TYPE, null ); const xnodes = []; let xres; while (true) { xres = xresult.iterateNext(); if (xres) { xnodes.push(xres); } else { break; } } return xnodes; } function _debug(...data) { if (localStorage.getItem("debug")) { console.log(...data); } } function debounce(callback, ms) { let timer; return function(...t) { clearTimeout(timer); timer = setTimeout(() => { clearTimeout(timer); callback(t); }, ms); }; } // http-import:https://unpkg.com/fflate@0.7.3/esm/browser.js var u8 = Uint8Array; var u16 = Uint16Array; var u32 = Uint32Array; var fleb = new u8([0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 2, 2, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 5, 5, 5, 5, 0, 0, 0, 0]); var fdeb = new u8([0, 0, 0, 0, 1, 1, 2, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 7, 8, 8, 9, 9, 10, 10, 11, 11, 12, 12, 13, 13, 0, 0]); var clim = new u8([16, 17, 18, 0, 8, 7, 9, 6, 10, 5, 11, 4, 12, 3, 13, 2, 14, 1, 15]); var freb = function(eb, start) { var b = new u16(31); for (var i = 0; i < 31; ++i) { b[i] = start += 1 << eb[i - 1]; } var r = new u32(b[30]); for (var i = 1; i < 30; ++i) { for (var j = b[i]; j < b[i + 1]; ++j) { r[j] = j - b[i] << 5 | i; } } return [b, r]; }; var _a = freb(fleb, 2); var fl = _a[0]; var revfl = _a[1]; fl[28] = 258, revfl[258] = 28; var _b = freb(fdeb, 0); var fd = _b[0]; var revfd = _b[1]; var rev = new u16(32768); for (i = 0; i < 32768; ++i) { x = (i & 43690) >>> 1 | (i & 21845) << 1; x = (x & 52428) >>> 2 | (x & 13107) << 2; x = (x & 61680) >>> 4 | (x & 3855) << 4; rev[i] = ((x & 65280) >>> 8 | (x & 255) << 8) >>> 1; } var x; var i; var hMap = function(cd, mb, r) { var s = cd.length; var i = 0; var l = new u16(mb); for (; i < s; ++i) { if (cd[i]) ++l[cd[i] - 1]; } var le = new u16(mb); for (i = 0; i < mb; ++i) { le[i] = le[i - 1] + l[i - 1] << 1; } var co; if (r) { co = new u16(1 << mb); var rvb = 15 - mb; for (i = 0; i < s; ++i) { if (cd[i]) { var sv = i << 4 | cd[i]; var r_1 = mb - cd[i]; var v = le[cd[i] - 1]++ << r_1; for (var m = v | (1 << r_1) - 1; v <= m; ++v) { co[rev[v] >>> rvb] = sv; } } } } else { co = new u16(s); for (i = 0; i < s; ++i) { if (cd[i]) { co[i] = rev[le[cd[i] - 1]++] >>> 15 - cd[i]; } } } return co; }; var flt = new u8(288); for (i = 0; i < 144; ++i) flt[i] = 8; var i; for (i = 144; i < 256; ++i) flt[i] = 9; var i; for (i = 256; i < 280; ++i) flt[i] = 7; var i; for (i = 280; i < 288; ++i) flt[i] = 8; var i; var fdt = new u8(32); for (i = 0; i < 32; ++i) fdt[i] = 5; var i; var flm = /* @__PURE__ */ hMap(flt, 9, 0); var fdm = /* @__PURE__ */ hMap(fdt, 5, 0); var shft = function(p) { return (p + 7) / 8 | 0; }; var slc = function(v, s, e) { if (s == null || s < 0) s = 0; if (e == null || e > v.length) e = v.length; var n = new (v.BYTES_PER_ELEMENT == 2 ? u16 : v.BYTES_PER_ELEMENT == 4 ? u32 : u8)(e - s); n.set(v.subarray(s, e)); return n; }; var wbits = function(d, p, v) { v <<= p & 7; var o = p / 8 | 0; d[o] |= v; d[o + 1] |= v >>> 8; }; var wbits16 = function(d, p, v) { v <<= p & 7; var o = p / 8 | 0; d[o] |= v; d[o + 1] |= v >>> 8; d[o + 2] |= v >>> 16; }; var hTree = function(d, mb) { var t = []; for (var i = 0; i < d.length; ++i) { if (d[i]) t.push({ s: i, f: d[i] }); } var s = t.length; var t2 = t.slice(); if (!s) return [et, 0]; if (s == 1) { var v = new u8(t[0].s + 1); v[t[0].s] = 1; return [v, 1]; } t.sort(function(a, b) { return a.f - b.f; }); t.push({ s: -1, f: 25001 }); var l = t[0], r = t[1], i0 = 0, i1 = 1, i2 = 2; t[0] = { s: -1, f: l.f + r.f, l, r }; while (i1 != s - 1) { l = t[t[i0].f < t[i2].f ? i0++ : i2++]; r = t[i0 != i1 && t[i0].f < t[i2].f ? i0++ : i2++]; t[i1++] = { s: -1, f: l.f + r.f, l, r }; } var maxSym = t2[0].s; for (var i = 1; i < s; ++i) { if (t2[i].s > maxSym) maxSym = t2[i].s; } var tr = new u16(maxSym + 1); var mbt = ln(t[i1 - 1], tr, 0); if (mbt > mb) { var i = 0, dt = 0; var lft = mbt - mb, cst = 1 << lft; t2.sort(function(a, b) { return tr[b.s] - tr[a.s] || a.f - b.f; }); for (; i < s; ++i) { var i2_1 = t2[i].s; if (tr[i2_1] > mb) { dt += cst - (1 << mbt - tr[i2_1]); tr[i2_1] = mb; } else break; } dt >>>= lft; while (dt > 0) { var i2_2 = t2[i].s; if (tr[i2_2] < mb) dt -= 1 << mb - tr[i2_2]++ - 1; else ++i; } for (; i >= 0 && dt; --i) { var i2_3 = t2[i].s; if (tr[i2_3] == mb) { --tr[i2_3]; ++dt; } } mbt = mb; } return [new u8(tr), mbt]; }; var ln = function(n, l, d) { return n.s == -1 ? Math.max(ln(n.l, l, d + 1), ln(n.r, l, d + 1)) : l[n.s] = d; }; var lc = function(c) { var s = c.length; while (s && !c[--s]) ; var cl = new u16(++s); var cli = 0, cln = c[0], cls = 1; var w = function(v) { cl[cli++] = v; }; for (var i = 1; i <= s; ++i) { if (c[i] == cln && i != s) ++cls; else { if (!cln && cls > 2) { for (; cls > 138; cls -= 138) w(32754); if (cls > 2) { w(cls > 10 ? cls - 11 << 5 | 28690 : cls - 3 << 5 | 12305); cls = 0; } } else if (cls > 3) { w(cln), --cls; for (; cls > 6; cls -= 6) w(8304); if (cls > 2) w(cls - 3 << 5 | 8208), cls = 0; } while (cls--) w(cln); cls = 1; cln = c[i]; } } return [cl.subarray(0, cli), s]; }; var clen = function(cf, cl) { var l = 0; for (var i = 0; i < cl.length; ++i) l += cf[i] * cl[i]; return l; }; var wfblk = function(out, pos, dat) { var s = dat.length; var o = shft(pos + 2); out[o] = s & 255; out[o + 1] = s >>> 8; out[o + 2] = out[o] ^ 255; out[o + 3] = out[o + 1] ^ 255; for (var i = 0; i < s; ++i) out[o + i + 4] = dat[i]; return (o + 4 + s) * 8; }; var wblk = function(dat, out, final, syms, lf, df, eb, li, bs, bl, p) { wbits(out, p++, final); ++lf[256]; var _a2 = hTree(lf, 15), dlt = _a2[0], mlb = _a2[1]; var _b2 = hTree(df, 15), ddt = _b2[0], mdb = _b2[1]; var _c = lc(dlt), lclt = _c[0], nlc = _c[1]; var _d = lc(ddt), lcdt = _d[0], ndc = _d[1]; var lcfreq = new u16(19); for (var i = 0; i < lclt.length; ++i) lcfreq[lclt[i] & 31]++; for (var i = 0; i < lcdt.length; ++i) lcfreq[lcdt[i] & 31]++; var _e = hTree(lcfreq, 7), lct = _e[0], mlcb = _e[1]; var nlcc = 19; for (; nlcc > 4 && !lct[clim[nlcc - 1]]; --nlcc) ; var flen = bl + 5 << 3; var ftlen = clen(lf, flt) + clen(df, fdt) + eb; var dtlen = clen(lf, dlt) + clen(df, ddt) + eb + 14 + 3 * nlcc + clen(lcfreq, lct) + (2 * lcfreq[16] + 3 * lcfreq[17] + 7 * lcfreq[18]); if (flen <= ftlen && flen <= dtlen) return wfblk(out, p, dat.subarray(bs, bs + bl)); var lm, ll, dm, dl; wbits(out, p, 1 + (dtlen < ftlen)), p += 2; if (dtlen < ftlen) { lm = hMap(dlt, mlb, 0), ll = dlt, dm = hMap(ddt, mdb, 0), dl = ddt; var llm = hMap(lct, mlcb, 0); wbits(out, p, nlc - 257); wbits(out, p + 5, ndc - 1); wbits(out, p + 10, nlcc - 4); p += 14; for (var i = 0; i < nlcc; ++i) wbits(out, p + 3 * i, lct[clim[i]]); p += 3 * nlcc; var lcts = [lclt, lcdt]; for (var it = 0; it < 2; ++it) { var clct = lcts[it]; for (var i = 0; i < clct.length; ++i) { var len = clct[i] & 31; wbits(out, p, llm[len]), p += lct[len]; if (len > 15) wbits(out, p, clct[i] >>> 5 & 127), p += clct[i] >>> 12; } } } else { lm = flm, ll = flt, dm = fdm, dl = fdt; } for (var i = 0; i < li; ++i) { if (syms[i] > 255) { var len = syms[i] >>> 18 & 31; wbits16(out, p, lm[len + 257]), p += ll[len + 257]; if (len > 7) wbits(out, p, syms[i] >>> 23 & 31), p += fleb[len]; var dst = syms[i] & 31; wbits16(out, p, dm[dst]), p += dl[dst]; if (dst > 3) wbits16(out, p, syms[i] >>> 5 & 8191), p += fdeb[dst]; } else { wbits16(out, p, lm[syms[i]]), p += ll[syms[i]]; } } wbits16(out, p, lm[256]); return p + ll[256]; }; var deo = /* @__PURE__ */ new u32([65540, 131080, 131088, 131104, 262176, 1048704, 1048832, 2114560, 2117632]); var et = /* @__PURE__ */ new u8(0); var dflt = function(dat, lvl, plvl, pre, post, lst) { var s = dat.length; var o = new u8(pre + s + 5 * (1 + Math.ceil(s / 7e3)) + post); var w = o.subarray(pre, o.length - post); var pos = 0; if (!lvl || s < 8) { for (var i = 0; i <= s; i += 65535) { var e = i + 65535; if (e >= s) { w[pos >> 3] = lst; } pos = wfblk(w, pos + 1, dat.subarray(i, e)); } } else { var opt = deo[lvl - 1]; var n = opt >>> 13, c = opt & 8191; var msk_1 = (1 << plvl) - 1; var prev = new u16(32768), head = new u16(msk_1 + 1); var bs1_1 = Math.ceil(plvl / 3), bs2_1 = 2 * bs1_1; var hsh = function(i2) { return (dat[i2] ^ dat[i2 + 1] << bs1_1 ^ dat[i2 + 2] << bs2_1) & msk_1; }; var syms = new u32(25e3); var lf = new u16(288), df = new u16(32); var lc_1 = 0, eb = 0, i = 0, li = 0, wi = 0, bs = 0; for (; i < s; ++i) { var hv = hsh(i); var imod = i & 32767, pimod = head[hv]; prev[imod] = pimod; head[hv] = imod; if (wi <= i) { var rem = s - i; if ((lc_1 > 7e3 || li > 24576) && rem > 423) { pos = wblk(dat, w, 0, syms, lf, df, eb, li, bs, i - bs, pos); li = lc_1 = eb = 0, bs = i; for (var j = 0; j < 286; ++j) lf[j] = 0; for (var j = 0; j < 30; ++j) df[j] = 0; } var l = 2, d = 0, ch_1 = c, dif = imod - pimod & 32767; if (rem > 2 && hv == hsh(i - dif)) { var maxn = Math.min(n, rem) - 1; var maxd = Math.min(32767, i); var ml = Math.min(258, rem); while (dif <= maxd && --ch_1 && imod != pimod) { if (dat[i + l] == dat[i + l - dif]) { var nl = 0; for (; nl < ml && dat[i + nl] == dat[i + nl - dif]; ++nl) ; if (nl > l) { l = nl, d = dif; if (nl > maxn) break; var mmd = Math.min(dif, nl - 2); var md = 0; for (var j = 0; j < mmd; ++j) { var ti = i - dif + j + 32768 & 32767; var pti = prev[ti]; var cd = ti - pti + 32768 & 32767; if (cd > md) md = cd, pimod = ti; } } } imod = pimod, pimod = prev[imod]; dif += imod - pimod + 32768 & 32767; } } if (d) { syms[li++] = 268435456 | revfl[l] << 18 | revfd[d]; var lin = revfl[l] & 31, din = revfd[d] & 31; eb += fleb[lin] + fdeb[din]; ++lf[257 + lin]; ++df[din]; wi = i + l; ++lc_1; } else { syms[li++] = dat[i]; ++lf[dat[i]]; } } } pos = wblk(dat, w, lst, syms, lf, df, eb, li, bs, i - bs, pos); if (!lst && pos & 7) pos = wfblk(w, pos + 1, et); } return slc(o, 0, pre + shft(pos) + post); }; var adler = function() { var a = 1, b = 0; return { p: function(d) { var n = a, m = b; var l = d.length | 0; for (var i = 0; i != l; ) { var e = Math.min(i + 2655, l); for (; i < e; ++i) m += n += d[i]; n = (n & 65535) + 15 * (n >> 16), m = (m & 65535) + 15 * (m >> 16); } a = n, b = m; }, d: function() { a %= 65521, b %= 65521; return (a & 255) << 24 | a >>> 8 << 16 | (b & 255) << 8 | b >>> 8; } }; }; var dopt = function(dat, opt, pre, post, st) { return dflt(dat, opt.level == null ? 6 : opt.level, opt.mem == null ? Math.ceil(Math.max(8, Math.min(13, Math.log(dat.length))) * 1.5) : 12 + opt.mem, pre, post, !st); }; var wbytes = function(d, b, v) { for (; v; ++b) d[b] = v, v >>>= 8; }; var zlh = function(c, o) { var lv = o.level, fl2 = lv == 0 ? 0 : lv < 6 ? 1 : lv == 9 ? 3 : 2; c[0] = 120, c[1] = fl2 << 6 | (fl2 ? 32 - 2 * fl2 : 1); }; function zlibSync(data, opts) { if (!opts) opts = {}; var a = adler(); a.p(data); var d = dopt(data, opts, 2, 4); return zlh(d, opts), wbytes(d, d.length - 4, a.d()), d; } var td = typeof TextDecoder != "undefined" && /* @__PURE__ */ new TextDecoder(); var tds = 0; try { td.decode(et, { stream: true }); tds = 1; } catch (e) { } // src/main.ts var defaultConfig = { serverPath: "//kroki.io/" }; function b64encode(str) { return btoa(str); } function main(element = null) { var _a2, _b2, _c, _d, _e, _f, _g, _h; const blocks = _xpath( "//*[starts-with(text(),'//kroki ')]", element != null ? element : document.body ); for (const codeDiv of blocks) { if (!codeDiv) continue; if ((_a2 = codeDiv.textContent) == null ? void 0 : _a2.startsWith("//kroki")) { const lines = codeDiv.textContent.split("\n"); const type = lines[0].replace("//kroki", "").trim(); if (!(type == null ? void 0 : type.trim())) continue; const data = lines.filter((_value, index) => index != 0).join("\n"); if (!(data == null ? void 0 : data.trim())) continue; const svgUrl = plant(data, type, defaultConfig); const div = document.createElement("div", void 0); div.style.cssText = "display: flex; flex-direction: row; place-content: center;"; div.setAttribute("notion-kroki", "true"); div.innerHTML = ``; const preCreatedNode = (_c = (_b2 = codeDiv.parentElement) == null ? void 0 : _b2.parentElement) == null ? void 0 : _c.querySelector("div[notion-kroki]"); if (preCreatedNode) { const preSvgUrl = (_d = preCreatedNode.firstElementChild) == null ? void 0 : _d.getAttribute( "data" ); _debug(`preSvgUrl:${preSvgUrl}`); _debug(`svgUrl:${svgUrl}`); if (preSvgUrl == svgUrl) { continue; } else { (_f = (_e = codeDiv.parentElement) == null ? void 0 : _e.parentElement) == null ? void 0 : _f.removeChild( preCreatedNode ); } } (_h = (_g = codeDiv.parentElement) == null ? void 0 : _g.parentElement) == null ? void 0 : _h.appendChild(div); } } } function textEncode(str) { return new TextEncoder().encode(str); } function plant(content, type, config) { content = content.trim(); _debug(`kroki render type: ${type}`); _debug(`kroki render content: ${content}`); const urlPrefix = `${(config == null ? void 0 : config.serverPath) + type}/svg/`; const data = textEncode(content); const compressed = decode(zlibSync(data, { level: 9 })); const result = b64encode(compressed).replace(/\+/g, "-").replace(/\//g, "_"); const svgUrl = urlPrefix + result; return svgUrl; } main(); new MutationObserver(check).observe(document, { childList: true, subtree: true }); function check(mutations, _observer) { _debug("mutations", mutations); mutations.forEach((mutation) => { debounce(() => main(), 1e3)(mutation.target); }); } function decode(dat) { let r = ""; for (let i = 0; i < dat.length; i += 16384) { r += String.fromCharCode(...dat.subarray(i, i + 16384)); } return r; }