ScrapBubble@0.2.0
code:sh
code:script.js
import{html as d}from"../htm@3.0.4%2Fpreact/script.js";import{useState as Ze,useMemo as ae,useCallback as et}from"../preact@10.5.13/hooks.js";var ee="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.13.3/katex.min.js",te=!1,re=()=>new Promise(async(e,t)=>{if(document.querySelector(script[src="${ee}"])){te||await oe(),e();return}let r=document.createElement("script");r.addEventListener("load",async()=>{await oe(),te=!0,e()}),r.addEventListener("error",o=>t(o)),r.src=ee,document.head.appendChild(r)}),oe=()=>new Promise(e=>{let t=setInterval(()=>{!window.katex||(clearInterval(t),e())},500)});import{useState as ne,useRef as Ye,useEffect as Je}from"../preact@10.5.13/hooks.js";var D=e=>{let t=Ye(null),r,o=ne(e),s,n=ne(void 0);return Je(()=>{(async()=>{await re();try{katex.render(r,t.current),n(void 0)}catch(c){c instanceof katex.ParseError&&n(c.message)}})()},r,t),{ref:t,formula:r,error:s,setFormula:o}};import{parse as tt}from"../scrapbox-parser@7.1.0/script.js";var C=e=>e.toLowerCase().replaceAll(" ","_").replace(//?#\{}^|<>/g,t=>encodeURIComponent(t));var se=({lines:e,project:t,titleLc:r,noIndent:o})=>{let s=ae(()=>{let l=e.map(p=>typeof p=="string"?p:p.text).join(` );return tt(l,{hasTitle:!1})},[e]),n=ae(()=>e.flatMap(l=>typeof l=="string"?[]:[l.id]),[e]),c=0;return d${s.flatMap(l=>{switch(l.type){case"title":return[];case"codeBlock":{let p=c;return c+=l.content.split(`
).length+1,[d<${rt}
block="${l}"
project="${t}" titleLc="${r}"
noIndent="${o}"
ids="${n.slice(p,c)}" />]}case"table":{let p=c;return c+=l.cells.length+1,[d<${ot}
block="${l}"
project="${t}" titleLc="${r}"
noIndent="${o}"
ids="${n.slice(p,c)}" />]}case"line":return c++,[d<${B}
indent="${l.indent}"
noIndent="${o}">
${l.nodes.length>0?l.nodes.map(p=>d<${H} node="${p}" project="${t}" />):d<br />}
<//>]}})}},B=({index:e,indent:t,noIndent:r,children:o})=>d`<div class="line"
data-id="L${e}"
data-indent="${t}"
style="margin-left: ${r?"":${1*t}em};"
${o}</div>,rt=({block:{fileName:e,content:t,indent:r},project:o,titleLc:s,ids:n})=>{let[c,l]=Ze(""),p=et(()=>{navigator.clipboard.writeText(t),l("Copied"),setTimeout(()=>l(""),1e3)},[t]);return d
<${B} index="${n0}" indent="${r}"> <span class="code-block">
<span class="code-block-start">
${e.includes(".")?d<a href="/api/code/${o}/${s}/${e}" target="_blank">${e}</a>:e}
</span>
<span class="copy" title="Copy" onClick="${p}">${c}</span>
</span>
<//>
${t.split(`
).map((f,a)=>d<${B} index="${na+1}" indent="${r}"> <code class="code-block">
${f}
</code>
<//>`)}
},ot=({block:{fileName:e,cells:t,indent:r},project:o,titleLc:s,ids:n})=>d
<${B} index="${n0}" indent="${r}"> <span class="table-block">
<span class="table-block-start">
<a href="/api/table/${o}/${s}/${e}.csv" target="_blank">${e}</a>
</span>
</span>
<//>
${t.map((c,l)=>d`
<${B} index="${nl+1}" indent="${r}"> <span class="table-block table-block-row">
${c.map((p,f)=>d`<span class="cell col-${f}">
</span>`)}
</span>
<//>
`)}
,H=({node:e,project:t})=>{switch(e.type){case"code":return d<${nt} node="${e}" />;case"formula":return d<${at} node="${e}" />;case"commmandLine":return d<${st} node="${e}" />;case"helpfeel":return d<${ct} node="${e}" />;case"quote":return d<${lt} node="${e}" project="${t}" />;case"strong":return d<${it} node="${e}" project="${t}" />;case"decoration":return d<${pt} node="${e}" project="${t}" />;case"plain":case"blank":return d<${ut} node="${e}" />;case"hashTag":return d<${ft} node="${e}" project="${t}" />;case"link":return d<${mt} node="${e}" project="${t}" />;case"googleMap":return d<${dt} node="${e}" />;case"icon":return d<${ce} node="${e}" project="${t}" />;case"strongIcon":return d<${ce} node="${e}" project="${t}" strong />;case"image":return d<${le} node="${e}" />;case"strongImage":return d<${le} node="${e}" strong />}},nt=({node:{text:e}})=>d<code class="code">${e}</code>,at=({node:{formula:e}})=>{let{ref:t,error:r,setFormula:o}=D("");return o(e),d
<span class="formula${r?" error":""}">
${r?d<code>${e}</code>:d<span class="katex-display" ref="${t}"/>}
</span>},st=({node:{text:e,symbol:t}})=>d<code class="cli">
<span class="prefix">${t}</span>
${" "}
<span class="command">${e}</span>
</code>,ct=({node:{text:e}})=>d<code class="helpfeel">
<span class="prefix">?</span>
${" "}
<span class="entry">${e}</span>
</code>,lt=({node:{nodes:e},project:t})=>d
<blockquote class="quote">
${e.map(r=>d<${H} node="${r}" project="${t}" />)}
</blockquote>
,it=({node:{nodes:e},project:t})=>d
<strong>
${e.map(r=>d<${H} node="${r}" project="${t}" />)}
</strong>
,pt=({node:{decos:e,nodes:t},project:r})=>d
<span class="${e.map(o=>deco-${o}).join(" ")}">
${t.map(o=>d<${H} node="${o}" project="${r}" />)}
</span>
,dt=({node:{place:e,latitude:t,longitude:r,zoom:o}})=>d
<span class="pointing-device-map">
rel="noopner noreferrer"
target="_blank">
<img class="google-map"
src="/api/google-map/static-map?center=${t}%2C${r}&markers=${e}&zoom=${o}&_csrf=${window._csrf}" />
</a>
</span>
,ut=({node:{text:e}})=>d${e},ce=({node:{pathType:e,path:t},strong:r,project:o})=>{let s=e==="relative"?o:t.match(/\/([\w\-]+)/)[1],n=e==="relative"?t:t.match(/\/[\w\-]+\/(.+)$/)[1],c=C(n);return d
<a href="/${s}/${c}"
rel="${s===scrapbox.Project.name?"route":"noopener noreferrer"}"
target="${s===scrapbox.Project.name?"":"_blank"}">
<img class="${r?"icon strong-icon":"icon"}"
alt="${n}"
src="/api/pages/${s}/${c}/icon">${n}</img>
</a>
},le=({node:{link:e,src:t},strong:r})=>{let o=e||(/https:\/\/gyazo\.com\/[^\/]+\/thumb\/1000/.test(t)?t.slice(0,-"/thumb/1000".length):t);return d
<a class="${e?"link":""}" href="${o}" rel="noopner noreferrer" target="_blank">
<img class="${r?"image strong-image":"image"}" src="${t}" />
</a>
},ft=({node:{href:e},project:t})=>d
<a href="/${t}/${C(e)}"
class="page-link"
type="hashTag"
rel="${t===scrapbox.Project.name?"route":"noopener noreferrer"}"
target="${t===scrapbox.Project.name?"":"_blank"}">
</a>
,mt=({node:{pathType:e,href:t,content:r},project:o})=>{switch(e){case"root":{let[n,c,l,p]=t.match(/\/([\w\-]+)\/([^#]*)(.*)/)??["","","",""];return d
<a class="page-link"
type="link" href="/${c}/${C(l)}${p}"
rel="${c===scrapbox.Project.name?"route":"noopener noreferrer"}"
target="${c===scrapbox.Project.name?"":"_blank"}">
${t}
</a>}case"relative":{let[n,c,l]=t.match(/^([^#]*)(.*)/)??["","",""];return d
<a class="page-link"
type="link" href="/${o}/${C(c)}${l}"
rel="${o===scrapbox.Project.name?"route":"noopener noreferrer"}"
target="${o===scrapbox.Project.name?"":"_blank"}">
${t}
</a>}case"absolute":let s=new URL(t);switch(s.hostname){case"www.youtube.com":return d<iframe
type="text/html"
allowfullscreen='' />;case"vimeo.com":return d<iframe
type="text/html"
allowfullscreen='' />;default:break}return/\.(?:mp3|ogg|wav)/.test(t)??r===""?d<audio preload='none' src="${t}" controls />:d<a class="link" href="${t}" rel="noopener noreferrer" target="_blank">
${r||t}
</a>}},ie=
a {
background-color: transparent;
text-decoration: none;
cursor: pointer;
}
img {
display: inline-block;
max-width: 100%;
max-height: 100px;
}
code {
font-family: var(--code-text-font, Menlo, Monaco, Consolas, "Courier New", monospace);
font-size: 90%;
background-color: var(--code-bg, rgba(0,0,0,0.04));
padding: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
blockquote {
background-color: var(--quote-bg-color, rgba(0,0,0,0.05));
display: block;
padding-left: 4px;
margin: 0px;
}
strong {
font-weight: bold;
}
iframe {
display: inline-block;
margin: 3px 0;
vertical-align: middle;
max-width: 100%;
width: 640px;
height: 360px;
border: 0;
}
audio {
display: inline-block;
vertical-align: middle;
white-space: initial;
max-width: 100%;
}
.formula {
margin: auto 6px;
}
.formula.error code {color:#fd7373; }
.katex-display {
display: inline-block !important;
margin: 0 !important;
text-align: inherit !important;
}
.error .katex-display {
display: none;
}
.cli {
border-radius: 4px;
}
.cli .prefix {
}
.helpfeel {
border-radius: 4px;
padding: 3px !important;
}
.helpfeel .prefix {
}
.helpfeel .entry {
}
.code-block {
display: block;
line-height: 1.7em;
background-color: var(--code-bg, rgba(0,0,0,0.04));
}
.code-block-start {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: .9em;
padding: 1px 2px;
}
.code-block-start a {
text-decoration: underline;
}
code.code-block,
.table-block.table-block-row {
padding-left: 1.0em;
}
.copy {
font-family: 'FontAwesome';
cursor: pointer;
}
.table-block {
white-space: nowrap;
}
.table-block-start {
padding: 1px 2px;
font-size: .9em;
}
.table-block-start a {
text-decoration: underline;
}
.cell {
margin: 0;
padding: 0 2px 0 8px;
box-sizing: content-box;
display: inline-block;
white-space: pre;
}
.cell:nth-child(2n+1) {
background-color: rgba(0,0,0,0.04);
}
.cell:nth-child(2n) {
background-color: rgba(0,0,0,0.06);
}
.strong-image {
max-height: 100%;
}
.icon {
height: 11px;
vertical-align: middle;
}
.strong-icon {
height: calc(11px * 1.2);
}
.deco-\\/ {font-style: italic;}
.deco-\\*-1 {font-weight: bold;}
.deco-\\*-2 {font-weight: bold; font-size: 1.20em;}
.deco-\\*-3 {font-weight: bold; font-size: 1.44em;}
.deco-\\*-4 {font-weight: bold; font-size: 1.73em;}
.deco-\\*-5 {font-weight: bold; font-size: 2.07em;}
.deco-\\*-6 {font-weight: bold; font-size: 2.49em;}
.deco-\\*-7 {font-weight: bold; font-size: 3.00em;}
.deco-\\*-8 {font-weight: bold; font-size: 3.58em;}
.deco-\\*-9 {font-weight: bold; font-size: 4.30em;}
.deco-\\*-10 {font-weight: bold; font-size: 5.16em;}
.deco-\\- {text-decoration: line-through;}
.deco-_ {text-decoration: underline;}
.page-link {color: var(--page-link-color, #5e8af7);} .page-link:hover {color: var(--page-link-hover-color, #2d67f5);} .empty-page-link {color: :var(--empty-page-link-color, #fd7373);} .empty-page-link:hover {color: :var(--empty-page-link-hover-color, #fd7373);} .link {
text-decoration: underline;
}
.link:hover {color: var(--page-link-color-hover-color, #2d67f5);} .link img {
padding-bottom: 3px;
border-style: none none solid;
border-width: 1.5px;
}
.permalink {
background-color: var(--line-permalink-color, rgba(234,218,74,0.75));
}
;import{html as U}from"../htm@3.0.4%2Fpreact/script.js";import{useState as pe,useCallback as ht}from"../preact@10.5.13/hooks.js";function de(e,t){let[r,o]=pe(0),[s,n]=pe(!1);if(e!=="vertical"&&e!=="horizontal")throw Error('direction must be "vertical" or "horizontal".');return ht(({target:l})=>{s||(window.requestAnimationFrame(()=>{o(p=>t?(e==="vertical"?l.scrollTop=p:l.scrollLeft=p,p):e==="vertical"?l.scrollTop:l.scrollLeft),n(!1)}),n(!0))},[s,t])}import{html as R}from"../htm@3.0.4%2Fpreact/script.js";var x,bt,A,ue,fe,_t,me={},he=[],gt=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;function T(e,t){for(var r in t)e[r]=t[r];return e}function be(e){var t=e.parentNode;t&&t.removeChild(e)}function E(e,t,r){var o,s,n,c=arguments,l={};for(n in t)n=="key"?o=t[n]:n=="ref"?s=t[n]:l[n]=t[n];if(arguments.length>3)for(r=[r],n=3;n<arguments.length;n++)r.push(c[n]);if(r!=null&&(l.children=r),typeof e=="function"&&e.defaultProps!=null)for(n in e.defaultProps)l[n]===void 0&&(l[n]=e.defaultProps[n]);return W(e,l,o,s,null)}function W(e,t,r,o,s){var n={type:e,props:t,key:r,ref:o,__k:null,__:null,__b:0,__e:null,__d:void 0,__c:null,__h:null,constructor:void 0,__v:s??++x.__v};return x.vnode!=null&&x.vnode(n),n}function M(e){return e.children}function q(e,t){this.props=e,this.context=t}function I(e,t){if(t==null)return e.__?I(e.__,e.__.__k.indexOf(e)+1):null;for(var r;t<e.__k.length;t++)if((r=e.__k[t])!=null&&r.__e!=null)return r.__e;return typeof e.type=="function"?I(e):null}function _e(e){var t,r;if((e=e.__)!=null&&e.__c!=null){for(e.__e=e.__c.base=null,t=0;t<e.__k.length;t++)if((r=e.__k[t])!=null&&r.__e!=null){e.__e=e.__c.base=r.__e;break}return _e(e)}}function ge(e){(!e.__d&&(e.__d=!0)&&A.push(e)&&!O.__r++||fe!==x.debounceRendering)&&((fe=x.debounceRendering)||ue)(O)}function O(){for(var e;O.__r=A.length;)e=A.sort(function(t,r){return t.__v.__b-r.__v.__b}),A=[],e.some(function(t){var r,o,s,n,c,l;t.__d&&(c=(n=(r=t).__v).__e,(l=r.__P)&&(o=[],(s=T({},n)).__v=n.__v+1,Ce(l,n,s,r.__n,l.ownerSVGElement!==void 0,n.__h!=null?[c]:null,o,c??I(n),n.__h),xt(o,n),n.__e!=c&&_e(n)))})}function $e(e,t,r,o,s,n,c,l,p,f){var a,$,u,i,m,h,g,_=o&&o.__k||he,b=_.length;for(r.__k=[],a=0;a<t.length;a++)if((i=r.__k[a]=(i=t[a])==null||typeof i=="boolean"?null:typeof i=="string"||typeof i=="number"||typeof i=="bigint"?W(null,i,null,null,i):Array.isArray(i)?W(M,{children:i},null,null,null):i.__b>0?W(i.type,i.props,i.key,null,i.__v):i)!=null){if(i.__=r,i.__b=r.__b+1,(u=_[a])===null||u&&i.key==u.key&&i.type===u.type)_[a]=void 0;else for($=0;$<b;$++){if((u=_[$])&&i.key==u.key&&i.type===u.type){_[$]=void 0;break}u=null}Ce(e,i,u=u||me,s,n,c,l,p,f),m=i.__e,($=i.ref)&&u.ref!=$&&(g||(g=[]),u.ref&&g.push(u.ref,null,i),g.push($,i.__c||m,i)),m!=null?(h==null&&(h=m),typeof i.type=="function"&&i.__k!=null&&i.__k===u.__k?i.__d=p=xe(i,p,e):p=ve(e,i,u,_,m,p),f||r.type!=="option"?typeof r.type=="function"&&(r.__d=p):e.value=""):p&&u.__e==p&&p.parentNode!=e&&(p=I(u))}for(r.__e=h,a=b;a--;)_[a]!=null&&(typeof r.type=="function"&&_[a].__e!=null&&_[a].__e==r.__d&&(r.__d=I(o,a+1)),Se(_[a],_[a]));if(g)for(a=0;a<g.length;a++)je(g[a],g[++a],g[++a])}function xe(e,t,r){var o,s;for(o=0;o<e.__k.length;o++)(s=e.__k[o])&&(s.__=e,t=typeof s.type=="function"?xe(s,t,r):ve(r,s,s,e.__k,s.__e,t));return t}function ve(e,t,r,o,s,n){var c,l,p;if(t.__d!==void 0)c=t.__d,t.__d=void 0;else if(r==null||s!=n||s.parentNode==null)e:if(n==null||n.parentNode!==e)e.appendChild(s),c=null;else{for(l=n,p=0;(l=l.nextSibling)&&p<o.length;p+=2)if(l==s)break e;e.insertBefore(s,n),c=n}return c!==void 0?c:s.nextSibling}function $t(e,t,r,o,s){var n;for(n in r)n==="children"||n==="key"||n in t||K(e,n,null,r[n],o);for(n in t)s&&typeof t[n]!="function"||n==="children"||n==="key"||n==="value"||n==="checked"||r[n]===t[n]||K(e,n,t[n],r[n],o)}function ke(e,t,r){t[0]==="-"?e.setProperty(t,r):e[t]=r==null?"":typeof r!="number"||gt.test(t)?r:r+"px"}function K(e,t,r,o,s){var n;e:if(t==="style")if(typeof r=="string")e.style.cssText=r;else{if(typeof o=="string"&&(e.style.cssText=o=""),o)for(t in o)r&&t in r||ke(e.style,t,"");if(r)for(t in r)o&&r[t]===o[t]||ke(e.style,t,r[t])}else if(t[0]==="o"&&t[1]==="n")n=t!==(t=t.replace(/Capture$/,"")),t=t.toLowerCase()in e?t.toLowerCase().slice(2):t.slice(2),e.l||(e.l={}),e.l[t+n]=r,r?o||e.addEventListener(t,n?we:ye,n):e.removeEventListener(t,n?we:ye,n);else if(t!=="dangerouslySetInnerHTML"){if(s)t=t.replace(/xlink[H:h]/,"h").replace(/sName$/,"s");else if(t!=="href"&&t!=="list"&&t!=="form"&&t!=="tabIndex"&&t!=="download"&&t in e)try{e[t]=r??"";break e}catch(c){}typeof r=="function"||(r!=null&&(r!==!1||t[0]==="a"&&t[1]==="r")?e.setAttribute(t,r):e.removeAttribute(t))}}function ye(e){this.l[e.type+!1](x.event?x.event(e):e)}function we(e){this.l[e.type+!0](x.event?x.event(e):e)}function Ce(e,t,r,o,s,n,c,l,p){var f,a,$,u,i,m,h,g,_,b,S,y=t.type;if(t.constructor!==void 0)return null;r.__h!=null&&(p=r.__h,l=t.__e=r.__e,t.__h=null,n=[l]),(f=x.__b)&&f(t);try{e:if(typeof y=="function"){if(g=t.props,_=(f=y.contextType)&&o[f.__c],b=f?_?_.props.value:f.__:o,r.__c?h=(a=t.__c=r.__c).__=a.__E:("prototype"in y&&y.prototype.render?t.__c=a=new y(g,b):(t.__c=a=new q(g,b),a.constructor=y,a.render=kt),_&&_.sub(a),a.props=g,a.state||(a.state={}),a.context=b,a.__n=o,$=a.__d=!0,a.__h=[]),a.__s==null&&(a.__s=a.state),y.getDerivedStateFromProps!=null&&(a.__s==a.state&&(a.__s=T({},a.__s)),T(a.__s,y.getDerivedStateFromProps(g,a.__s))),u=a.props,i=a.state,$)y.getDerivedStateFromProps==null&&a.componentWillMount!=null&&a.componentWillMount(),a.componentDidMount!=null&&a.__h.push(a.componentDidMount);else{if(y.getDerivedStateFromProps==null&&g!==u&&a.componentWillReceiveProps!=null&&a.componentWillReceiveProps(g,b),!a.__e&&a.shouldComponentUpdate!=null&&a.shouldComponentUpdate(g,a.__s,b)===!1||t.__v===r.__v){a.props=g,a.state=a.__s,t.__v!==r.__v&&(a.__d=!1),a.__v=t,t.__e=r.__e,t.__k=r.__k,t.__k.forEach(function(k){k&&(k.__=t)}),a.__h.length&&c.push(a);break e}a.componentWillUpdate!=null&&a.componentWillUpdate(g,a.__s,b),a.componentDidUpdate!=null&&a.__h.push(function(){a.componentDidUpdate(u,i,m)})}a.context=b,a.props=g,a.state=a.__s,(f=x.__r)&&f(t),a.__d=!1,a.__v=t,a.__P=e,f=a.render(a.props,a.state,a.context),a.state=a.__s,a.getChildContext!=null&&(o=T(T({},o),a.getChildContext())),$||a.getSnapshotBeforeUpdate==null||(m=a.getSnapshotBeforeUpdate(u,i)),S=f!=null&&f.type===M&&f.key==null?f.props.children:f,$e(e,Array.isArray(S)?S:[S],t,r,o,s,n,c,l,p),a.base=t.__e,t.__h=null,a.__h.length&&c.push(a),h&&(a.__E=a.__=null),a.__e=!1}else n==null&&t.__v===r.__v?(t.__k=r.__k,t.__e=r.__e):t.__e=vt(r.__e,t,r,o,s,n,c,p);(f=x.diffed)&&f(t)}catch(k){t.__v=null,(p||n!=null)&&(t.__e=l,t.__h=!!p,n[n.indexOf(l)]=null),x.__e(k,t,r)}}function xt(e,t){x.__c&&x.__c(t,e),e.some(function(r){try{e=r.__h,r.__h=[],e.some(function(o){o.call(r)})}catch(o){x.__e(o,r.__v)}})}function vt(e,t,r,o,s,n,c,l){var p,f,a,$,u=r.props,i=t.props,m=t.type,h=0;if(m==="svg"&&(s=!0),n!=null){for(;h<n.length;h++)if((p=n[h])&&(p===e||(m?p.localName==m:p.nodeType==3))){e=p,n[h]=null;break}}if(e==null){if(m===null)return document.createTextNode(i);e=s?document.createElementNS("http://www.w3.org/2000/svg",m):document.createElement(m,i.is&&i),n=null,l=!1}if(m===null)u===i||l&&e.data===i||(e.data=i);else{if(n=n&&he.slice.call(e.childNodes),f=(u=r.props||me).dangerouslySetInnerHTML,a=i.dangerouslySetInnerHTML,!l){if(n!=null)for(u={},$=0;$<e.attributes.length;$++)u[e.attributes[$].name]=e.attributes[$].value;(a||f)&&(a&&(f&&a.__html==f.__html||a.__html===e.innerHTML)||(e.innerHTML=a&&a.__html||""))}if($t(e,i,u,s,l),a)t.__k=[];else if(h=t.props.children,$e(e,Array.isArray(h)?h:[h],t,r,o,s&&m!=="foreignObject",n,c,e.firstChild,l),n!=null)for(h=n.length;h--;)n[h]!=null&&be(n[h]);l||("value"in i&&(h=i.value)!==void 0&&(h!==e.value||m==="progress"&&!h)&&K(e,"value",h,u.value,!1),"checked"in i&&(h=i.checked)!==void 0&&h!==e.checked&&K(e,"checked",h,u.checked,!1))}return e}function je(e,t,r){try{typeof e=="function"?e(t):e.current=t}catch(o){x.__e(o,r)}}function Se(e,t,r){var o,s,n;if(x.unmount&&x.unmount(e),(o=e.ref)&&(o.current&&o.current!==e.__e||je(o,null,t)),r||typeof e.type=="function"||(r=(s=e.__e)!=null),e.__e=e.__d=void 0,(o=e.__c)!=null){if(o.componentWillUnmount)try{o.componentWillUnmount()}catch(c){x.__e(c,t)}o.base=o.__P=null}if(o=e.__k)for(n=0;n<o.length;n++)o[n]&&Se(o[n],t,r);s!=null&&be(s)}function kt(e,t,r){return this.constructor(e,r)}x={__e:function(e,t){for(var r,o,s;t=t.__;)if((r=t.__c)&&!r.__)try{if((o=r.constructor)&&o.getDerivedStateFromError!=null&&(r.setState(o.getDerivedStateFromError(e)),s=r.__d),r.componentDidCatch!=null&&(r.componentDidCatch(e),s=r.__d),s)return r.__E=r}catch(n){e=n}throw e},__v:0},bt=function(e){return e!=null&&e.constructor===void 0},q.prototype.setState=function(e,t){var r;r=this.__s!=null&&this.__s!==this.state?this.__s:this.__s=T({},this.state),typeof e=="function"&&(e=e(T({},r),this.props)),e&&T(r,e),e!=null&&this.__v&&(t&&this.__h.push(t),ge(this))},q.prototype.forceUpdate=function(e){this.__v&&(this.__e=!0,e&&this.__h.push(e),ge(this))},q.prototype.render=M,A=[],ue=typeof Promise=="function"?Promise.prototype.then.bind(Promise.resolve()):setTimeout,O.__r=0,_t=0;var yt=1,Le="wc-";function wt(){let e=Math.random().toString(36).slice(2);return${Le}${e}-${yt++}}var Pe=${Le}text,Te=!1,Ct=typeof window!="undefined"&&!!window.customElements;function N(e,t,r){if(Array.isArray(e)){let o=e.map((s,n)=>N(s,t,wc-slot-${n}));return r?E(M,{key:r},o):o}if(typeof e!="object")return Te||(Te=!0,Ct&&window.customElements.define(Pe,class extends HTMLElement{})),E(Pe,{key:r,slot:t},e);if(St(e)){let{type:o}=e;if(typeof o=="string")return{...e,props:{...e.props,slot:t},key:e.key??r};if(typeof o=="symbol"){let f=o;if(f.description==="react.fragment")return{...e,props:{...e.props,children:N(e.props.children,t)},key:e.key??r};throw new Error("Could not handle node of type "+String(f))}let{props:{children:s,...n},key:c}=e,l=Ee.get(o);if(l)return E(l,{...n,key:c??r,slot:t},s);let p=jt(o);return Ee.set(o,p),E(p,{...n,key:c??r,slot:t},s)}return null}var Ee=new WeakMap;function jt(e){return Lt(e)?class extends e{render(){let t=super.render();return E(M,{children:N(t,this.props.slot)})}}:({slot:t,...r})=>{let o=e(r);return E(M,{children:N(o,t)})}}function St(e){return e!=null&&e.type!==void 0}function Lt(e){return!!e.prototype&&!!e.prototype.isReactComponent}function Pt(e,t){if(!t||t.length===0)return e.children;let r=e,o=[];for(let s of t){let n=r[s];o.push(N(n,s,slot-${s}))}return o.push(e.children),o}var Me=Symbol("slot");function*Tt(e,t){for(let r=e;r<t;r++)yield r}function Et(e,t){let r=e[0],o=[];for(let s of Tt(0,t.length)){let n=t[s];if(typeof n!="object")r+=Fe(String(n));else{let c=n[Me];c&&c!=="children"?(r+=<slot name="${Fe(c)}"></slot>,o.push(c)):r+="<slot></slot>"}r+=e[s+1]}return[r,o]}function Mt(e){switch(e){case"&":return"&";case"<":return"<";case">":return">";case'"':return""";case"'":return"'";default:return e}}function Fe(e){return e.replace(/[&<>"']/g,Mt)}function F(e,...t){let r=wt(),o=!1,s=document.createDocumentFragment(),[n,c]=Et(e,t);return Object.assign(l=>{if(!o){o=!0;let f=document.createElement("div");f.insertAdjacentHTML("afterbegin",n),s.append(...f.childNodes);class a extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(s.cloneNode(!0))}}window.customElements.define(r,a)}let p=Pt(l,c);return E(r,{},p)},{elementName:r})}function z(e){return{[Me]:e||""}}import"../preact@10.5.13/hooks.js";var X=
:host {
display: inline-block;
position: absolute;
cursor: default;
}
,Ft=F
<style>
${X}
:host {
top: 0;
left: 0;
}
::slotted(*) {
border-right: 1px solid var(--status-bar-border-color, #a9aaaf); border-bottom: 1px solid var(--status-bar-border-color, #a9aaaf); }
::slotted(*:last-of-type) {
border-bottom-right-radius: 3px;
}
</style>
${z()}
,zt=F
<style>
${X}
:host {
top: 0;
right: 0;
}
::slotted(*) {
border-left: 1px solid var(--status-bar-border-color, #a9aaaf); border-bottom: 1px solid var(--status-bar-border-color, #a9aaaf); }
::slotted(*:first-of-type) {
border-bottom-left-radius: 3px;
}
</style>
${z()}
,Bt=F
<style>
${X}
:host {
bottom: 0;
right: 0;
}
::slotted(*) {
border-left: 1px solid var(--status-bar-border-color, #a9aaaf); border-top: 1px solid var(--status-bar-border-color, #a9aaaf); }
::slotted(*:first-of-type) {
border-top-left-radius: 3px;
}
</style>
${z()}
,At=F
<style>
${X}
:host {
bottom: 0;
left: 0;
}
::slotted(*) {
border-right: 1px solid var(--status-bar-border-color, #a9aaaf); border-top: 1px solid var(--status-bar-border-color, #a9aaaf); }
::slotted(*:last-of-type) {
border-top-right-radius: 3px;
}
</style>
${z()}
,G=({orientation:e,children:t})=>{if(!t||t.length===0)return R;switch(e){case"top-left":return R<${Ft}>${t}<//>;case"top-right":return R<${zt}>${t}<//>;case"bottom-right":return R<${Bt}>${t}<//>;case"bottom-left":return R<${At}>${t}<//>;default:throw Error(${e} is an invalid value)}};var ze=({project:e,titleLc:t,lines:r,loading:o,hasChild:s,style:n,theme:c,onPointerEnterCapture:l,onPointerLeaveCapture:p,onClick:f})=>{let a=de("vertical",s);return(r.length>0||o)&&U<div class="text-bubble"
data-theme="${c}"
onPointerEnterCapture="${l}"
onPointerLeaveCapture="${p}"
onClick="${f}"
onScroll="${a}"
style="${n}" >
<${G} orientation="${r.length>0?"top-right":"top-left"}">
${o&&U<span>${r.length>0?"Updating...":"Loading..."}</span>}
${e!==scrapbox.Project.name&&U`
<${Nt} project="${e}" titleLc="${t}" />
`}
<//>
${r.length>0&&U`
<${se} lines="${r}" project="${e}" titleLc="${t}" />
`}
</div>},Be=
.text-bubble {
padding: 5px 0px 5px 5px;
font-size: 11px;
line-height: 1.42857;
user-select: text;
position: absolute;
max-height: 80vh;
overflow-y: auto;
border-radius: 4px;
--text-bubble-border-color: hsl(221, 15%, 25%);
border: 1px solid var(--text-bubble-border-color, #f2f2f3); --status-bar-border-color: var(--text-bubble-border-color, #f2f2f3); box-shadow: 0 6px 12px rgba(0,0,0,0.175);
z-index: 9000;
}
.text-bubble.no-scroll {
overflow-y: hidden;
}
--text-bubble-border-color: hsl(0, 0%, 39%);
}
--text-bubble-border-color: hsl(0, 0%, 89%);
}
--text-bubble-border-color: hsl(53, 8%, 58%);
}
--text-bubble-border-color: hsl(203, 42%, 17%);
}
--text-bubble-border-color: hsl(227, 68%, 62%);
}
--text-bubble-border-color: hsl(267, 39%, 60%);
}
--text-bubble-border-color: hsl(136, 29%, 50%);
}
--text-bubble-border-color: hsl(43, 71%, 51%);
}
--text-bubble-border-color: hsl(4, 58%, 56%);
}
--text-bubble-border-color: hsl(72, 64%, 57%);
}
--text-bubble-border-color: hsl(331, 21%, 26%);
}
--text-bubble-border-color: hsl(176, 29%, 67%);
}
${ie}
,It=F
<style>
::slotted(a) {
text-decoration: none;
}
</style>
${z()}
;function Nt({project:e,titleLc:t}){return U<${It}>
<a href="/${e}/${t}"
target="_blank"
rel="noopener noreferrer"
/${e}
</a>
<//>}import{html as J}from"../htm@3.0.4%2Fpreact/script.js";import{useRef as Rt,useCallback as Ut}from"../preact@10.5.13/hooks.js";var Ae=({loading:e,hasChild:t,children:r,...o})=>{let s=Rt(null),n=Ut(c=>{t||(c.preventDefault(),c.stopPropagation(),s.current.scrollLeft+=c.deltaY<0?-120:120)},[]);return(r.length>0||e)&&J
<div class="card-bubble" ...${o}>
<ul ref="${s}" onWheel="${n}">
${r.map(c=>J<li>${c}</li>)}
</ul>
${e&&J`
<${G} orientation="${r.length>0?"top-left":"bottom-left"}">
<span>${r.length>0?"Updating...":"Loading..."}</span>
<//>
`}
</div>},Ie=
.card-bubble {
background-color: var(--page-bg, #FFF); box-shadow: 0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);
position: absolute;
max-width: 80vw;
box-sizing: content-box;
z-index: 9000;
font-size: 11px;
line-height: 1.42857;
}
.card-bubble > ul {
display: flex;
padding: 0px;
margin: 0px;
list-style: none;
overflow-x: auto;
overflow-y: visible;
}
.card-bubble > ul > li {
display: block;
position: relative;
float: none;
margin: 5px;
box-sizing: border-box;
box-shadow: var(--card-box-shadow, 0 2px 0 rgba(0,0,0,0.12));
border-radius: 2px;
width: 120px;
height: 120px;
}
;import{html as v}from"../htm@3.0.4%2Fpreact/script.js";import{useMemo as Dt}from"../preact@10.5.13/hooks.js";import{parse as Ht}from"../scrapbox-parser@7.1.0/script.js";var Ne=({project:e,title:t,descriptions:r,thumbnail:o,theme:s,onPointerEnterCapture:n,onPointerLeaveCapture:c})=>{let l=Dt(()=>o?[]:Ht(r.join(
),{hasTitle:!1}),[r,o]);return v
<a class="related-page-card page-link" type="link"
data-theme="${s}"
onPointerEnterCapture="${n}"
onPointerLeaveCapture="${c}"
href="/${e}/${C(t)}"
rel="${e===scrapbox.Project.name?"route":"noopner noreferrer"}"
target="${e!==scrapbox.Project.name?"_blank":""}">
<div class="hover" />
<div class="content">
<div class="header">
<div class="title">${t}</div>
</div>
${o?v<div class="thumbnail"><img src="${o}"/></div>:v`<div class="description">
${l.flatMap((p,f)=>p.type==="line"?[v`<p key="${f}">
${p.nodes.map(a=>v<${Re} node="${a}" project="${e}" />)}
</>`]:[])}
</div>`}
</div>
</a>
},Re=({node:e,project:t})=>{switch(e.type){case"code":return v<code>${e.text}</code>;case"formula":return v<${Wt} node="${e}" />;case"commmandLine":return v<code>${e.symbol} ${e.text}</code>;case"helpfeel":return v<code>? ${e.text}</code>;case"quote":case"strong":case"decoration":return e.nodes.map(r=>v<${Re} node="${r}" project="${t}" />);case"googleMap":case"image":case"strongImage":return v;case"icon":case"strongIcon":return v<${qt} node="${e}" project="${t}" />;case"hashTag":return v<${Ot} node="${e}" project="${t}" />;case"link":return v<${Kt} node="${e}" project="${t}" />;case"plain":case"blank":return v${e.text}}},Wt=({node:{formula:e}})=>{let{ref:t,error:r,setFormula:o}=D("");return o(e),v
<span class="formula${r?" error":""}">
${!r&&v<span class="katex-display" ref="${t}"/>}
</span>},qt=({node:{pathType:e,path:t},project:r})=>{let o=e==="relative"?r:t.match(/\/([\w\-]+)/)[1],s=e==="relative"?t:t.match(/\/[\w\-]+\/(.+)$/)[1];return v<img class="icon" src="/api/pages/${o}/${C(s)}/icon" />},Ot=({node:{href:e},project:t})=>v<span class="page-link">#${e}</span>,Kt=({node:{pathType:e,href:t,content:r},project:o})=>e!=="absolute"?v<span class="page-link">${t}</span>:v<span class="link">${r||t}</span>,Ue=
--card-title-bg: hsl(0, 0%, 39%);
}
--card-title-bg: hsl(0, 0%, 89%);
}
--card-title-bg: hsl(53, 8%, 58%);
}
--card-title-bg: hsl(203, 42%, 17%);
}
--card-title-bg: hsl(227, 68%, 62%);
}
--card-title-bg: hsl(267, 39%, 60%);
}
--card-title-bg: hsl(136, 29%, 50%);
}
--card-title-bg: hsl(43, 71%, 51%);
}
--card-title-bg: hsl(4, 58%, 56%);
}
--card-title-bg: hsl(72, 64%, 57%);
}
--card-title-bg: hsl(331, 21%, 26%);
}
--card-title-bg: hsl(176, 29%, 67%);
}
.related-page-card {
display: block;
position: relative;
height: inherit;
width: inherit;
overflow: hidden;
text-overflow: ellipsis;
font-family: "Roboto",Helvetica,Arial,"Hiragino Sans",sans-serif;
background-color: var(--card-bg, #fff); color: var(--card-title-color, #555); word-break: break-word;
text-decoration: none;
}
.related-page-card:hover {
box-shadow: var(--card-box-hover-shadow, 0 2px 0 rgba(0,0,0,0.23));
}
.related-page-card:focus {
outline: 0;
box-shadow: 0 0px 0px 3px rgba(102,175,233,0.6);
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s
}
.related-page-card.hover {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: var(--card-hover-bg, rgba(0,0,0,0.05));
mix-blend-mode: multiply;
z-index: 1;
transition: background-color .1s
}
.related-page-card:hover .hover{
opacity: 1;
}
.related-page-card:active .hover{
opacity: 1;
background-color: var(--card-active-bg, rgba(0,0,0,0.1))
}
.related-page-card .content {
height: calc(100% - 5px);
width: inherit;
display: flex;
flex-direction: column;
overflow: hidden;
}
.related-page-card .content .header {
width: 100%;
text-overflow: ellipsis;
border-top: var(--card-title-bg, #f2f2f3) solid 10px; padding: 8px 10px;
}
.related-page-card .content .header .title {
font-size: 11px; /* 14 * 0.8 */
line-height: 16px; /* 20 * 0.8 */
font-weight: bold;
max-height: 48px; /* 60 * 0.8 */
margin: 0;
overflow: hidden;
display: block;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.related-page-card .content .description {
line-height: 16px; /* 20 * 0.8 */
padding: 8px 10px 0;
font-size: 10px; /* 12 * 0.8 */
white-space: pre-line;
column-count: 1;
column-gap: 2em;
column-width: 10em;
height: inherit;
color: var(--card-description-color, gray);
flex-shrink: 16;
overflow: hidden;
}
.related-page-card .content .thumbnail {
display: block;
width: 100%;
margin: 0 auto;
padding: 0 5px;
}
.related-page-card .content .description p {
margin: 0;
display: block;
}
.related-page-card .content .description code {
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
font-size: 90%;
background-color: var(--code-bg, rgba(0,0,0,0.04));
padding: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
.related-page-card .content .description .icon {
height: 9px; /* 11 * 0.8 */
vertical-align: middle;
}
.related-page-card .content .description .page-link {
background-color: transparent;
text-decoration: none;
cursor: pointer;
}
;import{html as Y,Fragment as Yt,render as Jt}from"../htm@3.0.4%2Fpreact/script.js";import{useState as Zt,useCallback as Ge}from"../preact@10.5.13/hooks.js";import{useState as De,useMemo as He,useCallback as V}from"../preact@10.5.13/hooks.js";function We({expired:e=6e4,whiteList:t=[]}={}){let[r,o]=De({}),[s,n]=De([]),c=He(()=>[...new Set([scrapbox.Project.name,...t])],[t]),l=V(async(u,i)=>{let m=qe(u,i),h=new Date().getTime()/1e3,g=!0;if(o(b=>(g=(b[m]?.checked??0)+e<h,b[m]={project:u,titleLc:i,loading:!!g,lines:b[m]?.lines??[],linked:b[m]?.linked??[],checked:h},{...b})),!g)return;let _;try{_=await Xt(u,i)}catch(b){console.error(b)}finally{o(b=>(b[m]={project:u,titleLc:i,loading:!1,lines:_?.lines??b[m]?.lines??[],linked:_?.linked??b[m]?.linked??[],checked:b[m]?.checked??h},{...b}))}},[e]),p=V(async(u,i)=>{if(!!c.includes(u))for(let m of c)await l(m,i)},[l,c]),f=V((u,i,m,h)=>{!c.includes(i)||n(g=>{let _=c.map(b=>qe(b,m));return[...g.slice(0,u),{ids:_,position:h}]})},[c]),a=V(u=>n(i=>[...i.slice(0,u)]),[]);return{cards:He(()=>{let u=[{project:scrapbox.Project.name,titleLc:C(scrapbox.Page.title??"")}];return s.flatMap(({ids:i,position:m})=>{let h=i.flatMap(k=>r[k]?[r[k]]:[]),{project:g,titleLc:_,lines:b}=h.find(k=>k.lines.length>0)??h[0],S=h.flatMap(({project:k,linked:L})=>L.map(j=>({...j,project:k}))),y={project:g,titleLc:_,position:m,lines:_===u[0].titleLc?[]:b,linked:S.flatMap(({project:k,title:L,...j})=>u.some(w=>w.project===k&&w.titleLc===C(L))?[]:[{project:k,title:L,...j}]),loading:h.every(({loading:k})=>k)};return u.push({project:g,titleLc:_}),y.lines.length>0||y.linked.length>0?[y]:[]})},[r,s]),cache:p,show:f,hide:a}}function qe(e,t){return/${e}/${t}}async function Xt(e,t){let r=await fetch(/api/pages/${e}/${t});if(!r.ok)return{};let o=await r.json();if(!o.lines)return{};let{lines:s,links:n,relatedPages:{links1hop:c}}=o,l=n.map(f=>C(f)),p=c.flatMap(({title:f,descriptions:a,image:$})=>l.includes(C(f))?[]:[{title:f,descriptions:a,image:$}]);return{lines:s.slice(1),linked:p}}import{useEffect as Gt}from"../preact@10.5.13/hooks.js";function Q(e,t,r,o){Gt(()=>(e.addEventListener(t,r,o),()=>e.removeEventListener(t,r,o)),[e,r,o,t])}import{useState as Vt,useCallback as Oe}from"../preact@10.5.13/hooks.js";var Z="default-light";function Ke(){let[e,t]=Vt({}),r=Oe(s=>{e[s]||s!==scrapbox.Project.name&&(async()=>{t(n=>(n[s]=Z,{...n}));try{let n=await fetch(/api/projects/${s}),{theme:c}=await n.json();t(l=>(l[s]=c??Z,{...l}))}catch(n){}})()},[e]);return{getTheme:Oe(s=>s===scrapbox.Project.name?document.documentElement.dataset.projectTheme:e[s]??Z,[e]),loadTheme:r}}import{useEffect as Qt}from"../preact@10.5.13/hooks.js";var Xe=(e,t,r)=>Qt(()=>{let o=new MutationObserver(s=>{o.disconnect(),t(s);for(let n of e)n.current&&o.observe(n.current,r)});for(let s of e)s.current&&o.observe(s.current,r);return()=>o.disconnect()},[]);var Ve="scrap-bubble",er=({delay:e=500,expired:t=6e4,whiteList:r=[]}={})=>{let{cards:o,cache:s,show:n,hide:c}=We({expired:t,whiteList:r}),[l,p]=Zt(null),{getTheme:f,loadTheme:a}=Ke(),$=Ge((m,h)=>{if(!h.matches("a.page-link, .line-title .text"))return;let[g,_,b]=h.classList.contains("page-link")?h.href.match(/\/([\w\-]+)\/([^#]*)/)??["","",""]:["",scrapbox.Project.name,scrapbox.Page.title];if(_==="")return;let S=C(decodeURIComponent(b));a(_),s(_,S),p(y=>(clearTimeout(y),setTimeout(()=>{let{top:k,right:L,left:j,bottom:w}=h.getBoundingClientRect(),P=document.getElementById("editor").getBoundingClientRect(),Qe=(j-P.left)/P.width>.5;n(m,_,S,{top:Math.round(w-P.top),bottom:Math.round(P.bottom-k),...Qe?{right:Math.round(P.right-L)}:{left:Math.round(j-P.left)}})},e)))},[s,n,a]),u=Ge(({target:m})=>{!m.matches("a.page-link, .line-title .text")||p(h=>(clearTimeout(h),null))},[]),i=document.getElementById("editor");return Q(i,"pointerenter",({target:m})=>$(0,m),{capture:!0}),Q(i,"pointerleave",u,{capture:!0}),Q(document,"click",({target:m})=>{m.dataset.userscriptName!==Ve&&c(0)},{capture:!0}),Xe([{current:document.getElementsByClassName("page-wrapper")[0]}],([{target:m}])=>{m.classList.contains("enter")||c(0)},{attributes:!0,attributeFilter:["class"]}),Y
<style>
* {box-sizing: border-box;}
${Be}
${Ie}
${Ue}
</style>
${o.map(({project:m,titleLc:h,lines:g,position:{top:_,left:b,bottom:S,right:y},linked:k,loading:L},j)=>Y`<${Yt} key="/${m}/${h}/">
<${ze}
project="${m}" titleLc="${h}"
theme="${f(m)}"
style="top: ${_}px; ${b?left: ${b}:right: ${y}}px;"
lines="${g}"
loading="${L}"
onPointerEnterCapture="${({target:w})=>$(j+1,w)}"
onPointerLeaveCapture="${u}"
onClick="${()=>c(j+1)}"
hasChild="${o.length>j+1}" />
<${Ae}
loading="${L}"
style="bottom: ${S}px; ${b?left: ${b}:right: ${y}}px;"
onClickCapture="${({target:w})=>w.tagName!=="A"&&c(j+1)}"
hasChild="${o.length>j+1}">
${k.map(w=>Y`
<${Ne}
key="/${w.project}/${w.title}"
project="${w.project}" title="${w.title}"
theme="${f(w.project)}"
descriptions="${w.descriptions}" thumbnail="${w.image}"
onPointerEnterCapture="${({target:P})=>$(j+1,P)}"
onPointerLeaveCapture="${u}" />
`)}
<//>
<//>`)}
};function lo({delay:e=500,expired:t=6e4,whiteList:r=[]}={}){let o=document.createElement("div");o.dataset.userscriptName=Ve,document.getElementById("editor").append(o),o.attachShadow({mode:"open"}),Jt(Y<${er} delay="${e}" expired="${t}" whiteList="${r}"/>`,o.shadowRoot)}export{er as App,lo as mount};