inline-elements/index.html at main · TCOTC/inline-elements · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Summary Inline Elements</title>
  <style>body{margin:8px;font-size:var(--b3-font-size-editor)}#controlPanel{position:fixed;inset-inline-start:10px;inset-block-start:10px;display:flex;align-items:center;gap:8px;max-width:calc(100vw - 20px);overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding:4px 0;scrollbar-width:thin;transform:scaleY(-1)}#controlPanel>*{transform:scaleY(-1)}select{width:auto;min-width:75px;height:30px;flex-shrink:0;outline:none;border:1px solid var(--b3-theme-on-surface);border-radius:var(--b3-border-radius);padding:4px 26px 4px 8px;line-height:20px;color:var(--b3-theme-on-background);background:var(--b3-select-background);background-color:var(--b3-theme-background);transition:border 120ms 0ms cubic-bezier(0, 0, 0.2, 1),background-color .2s cubic-bezier(0, 0, 0.2, 1) 0ms;font-size:14px;appearance:none;overflow:hidden !important;cursor:pointer}select:hover,select:focus{border-color:var(--b3-theme-on-background);background-color:var(--b3-theme-surface)}#refreshList{width:30px;height:30px;outline:none;border:1px solid var(--b3-theme-on-surface);border-radius:var(--b3-border-radius);color:var(--b3-theme-on-background);background-color:var(--b3-theme-background);display:flex;align-items:center;justify-content:center;transition:all .2s ease;cursor:pointer;flex-shrink:0}#refreshList svg{width:16px;height:16px;fill:currentColor}#refreshList:hover{border-color:var(--b3-theme-on-background);background-color:var(--b3-theme-surface)}#refreshList:active{transform:scaleY(-1) scale(0.95)}#contentList{padding-top:32px;padding-inline-start:24px}#contentList li{padding:4px;color:var(--b3-theme-on-background);overflow-wrap:break-word}#contentList li a{color:var(--b3-theme-on-background);text-decoration:none}#message{padding:10px;text-align:center;color:var(--b3-theme-on-surface-light)}#errorMessage{justify-self:center;font-size:1.25em;font-weight:bold;color:var(--b3-theme-error)}.exportMode #controlPanel{display:none}.exportMode #contentList{padding-top:0}</style>
  <link id="themeDefaultStyle" rel="stylesheet" type="text/css" href="">
  <link id="themeStyle" rel="stylesheet" type="text/css" href="">
  <style id="siyuanStyle"></style>
  <script>document.addEventListener('DOMContentLoaded', function() {!function(){const e=document.createElement("link").relList;if(!(e&&e.supports&&e.supports("modulepreload"))){for(const e of document.querySelectorAll('link[rel="modulepreload"]'))t(e);new MutationObserver(e=>{for(const n of e)if("childList"===n.type)for(const e of n.addedNodes)"LINK"===e.tagName&&"modulepreload"===e.rel&&t(e)}).observe(document,{childList:!0,subtree:!0})}function t(e){if(e.ep)return;e.ep=!0;const t=function(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),"use-credentials"===e.crossOrigin?t.credentials="include":"anonymous"===e.crossOrigin?t.credentials="omit":t.credentials="same-origin",t}(e);fetch(e.href,t)}}();const e={zh_CN:{"text-mark":"标记","text-strong":"粗体","text-tag":"标签","text-em":"斜体","text-u":"下划线","text-s":"删除线","text-inline-memo":"备注","text-a":"超链接","text-block-ref":"块引用","text-code":"行级代码","text-inline-math":"行级公式","text-sup":"上标","text-sub":"下标","text-kbd":"键盘","embedBlocks-true":"包含嵌入块中的元素","embedBlocks-false":"排除嵌入块中的元素",refreshList:"刷新列表",loadingMessage:"正在解析文档，请稍候...",noResultsMessage:"无查询结果",errorMessage:"异常：无法获取到必要的挂件元素，挂件加载失败"},zh_CHT:{"text-mark":"標記","text-strong":"粗體","text-tag":"標籤","text-em":"斜體","text-u":"下劃線","text-s":"刪除線","text-inline-memo":"備註","text-a":"超連結","text-block-ref":"塊引用","text-code":"行級代碼","text-inline-math":"行級公式","text-sup":"上標","text-sub":"下標","text-kbd":"鍵盤","embedBlocks-true":"包含嵌入塊中的元素","embedBlocks-false":"排除嵌入塊中的元素",refreshList:"刷新列表",loadingMessage:"正在解析文檔，請稍候...",noResultsMessage:"無查詢結果",errorMessage:"異常：無法獲取到必要的掛件元素，掛件加載失敗"},en_US:{"text-mark":"Mark","text-strong":"Bold","text-tag":"Tag","text-em":"Italic","text-u":"Underline","text-s":"Strikethrough","text-inline-memo":"Memo","text-a":"Hyperlink","text-block-ref":"Block Ref","text-code":"Inline Code","text-inline-math":"Inline Math","text-sup":"Superscript","text-sub":"Subscript","text-kbd":"Keyboard","embedBlocks-true":"Include Embed Blocks Elements","embedBlocks-false":"Exclude Embed Blocks Elements",refreshList:"Refresh List",loadingMessage:"Parsing document, please wait...",noResultsMessage:"No results found",errorMessage:"Error: Failed to get necessary widget elements, widget loading failed"}};!async function(){const t="custom-inline-elements-widget-",n=["mark","strong","tag","em","u","s","inline-memo","a","block-ref","code","inline-math","sup","sub","kbd"],o=["false","true"];let r=n[0],s=!1,i=!1,l=null,a=window.frameElement?.closest("[data-node-id], [id]")||null;a&&(l=a?.getAttribute("data-node-id")||null,l||(l=a?.getAttribute("id")||null,i=!0));const c=!!l&&/^[0-9]{14}-[a-z0-9]{7}$/.test(l),d=a?.closest("html");let u=d?.getAttribute("lang")||"en_US";e[u]||(u="en_US"),document.documentElement.lang=u;const m=document.getElementById("filterType"),f=document.getElementById("embedBlocks"),p=document.getElementById("refreshList"),h=document.getElementById("contentList");if(!(a&&c&&d&&m&&f&&p&&h))return void(document.body.innerHTML=`<div id="errorMessage">${e[u].errorMessage}</div>`);let y=!1,g=!!a?.closest(".export-img"),b=!!a?.closest("#preview");(g||b)&&(y=!0),await N();let E=!1,x=!1;const k=a.getAttribute(`${t}filter-type`);k&&n.includes(k)?r=k:(E=!0,setTimeout(()=>{E&&!y&&S(l,{"filter-type":r})},1e3));const T=a.getAttribute(`${t}embed-blocks`);if(T?s="true"===T:(x=!0,setTimeout(()=>{x&&S(l,{"embed-blocks":s?"true":"false"})},1e3)),y){document.body.classList.add("exportMode"),await w();const e=document.documentElement.getBoundingClientRect().height;document.documentElement.style.overflow="hidden";const t=a.querySelector("iframe");t.style.border="none",t.style.height=g?e-5+"px":`${e+4}px`}else{const t=n.map(t=>{const n=document.createElement("option");return n.value=t,n.textContent=e[u]["text-"+t],n});m.append(...t),m.value=r;const i=o.map(t=>{const n=document.createElement("option");return n.value=t,n.textContent=e[u]["embedBlocks-"+t],n});f.append(...i),f.value=s?"true":"false",p.title=e[u].refreshList,"inline-memo"===r&&s&&(s=!1,f.value="false",S(l,{"embed-blocks":s?"true":"false"})),m.addEventListener("change",function(){E&&(E=!1),r=m.value,S(l,{"filter-type":r}),"inline-memo"===r&&(s=!1,f.value="false",S(l,{"embed-blocks":s?"true":"false"})),w()}),f.addEventListener("change",function(){x&&(x=!1),"inline-memo"===r?(s=!1,f.value="false"):(s="true"===f.value,S(l,{"embed-blocks":s?"true":"false"})),w()}),p.addEventListener("click",function(){w()}),w()}async function w(){h.innerHTML="",await N();let t,n=null;if(!a?.closest(".protyle-wysiwyg__embed")){const e=a?.closest(".protyle-content");e&&(n=e.querySelector(".protyle-top .protyle-title")?.getAttribute("data-node-id")||null)}if(!n){n=(await async function(e){try{const t=await fetch("/api/query/sql",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({stmt:e})}),n=await t.json();if(0===n.code)return n.data;throw new Error(n.msg)}catch(t){throw t}}(`SELECT root_id FROM blocks WHERE id = '${l}' LIMIT 1`))[0].root_id}const o=setTimeout(()=>{h.innerHTML=`<div id="message">${e[u].loadingMessage}</div>`},400);try{if(!n)throw new Error("Document ID not found");if(s){t=(await async function(e){try{const t=await fetch("/api/export/preview",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:e})});return await t.json()}catch(t){throw t}}(n)).data.html}else{t=(await async function(e){try{const t=await fetch("/api/block/getBlockDOM",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:e})});return await t.json()}catch(t){throw t}}(n)).data.dom}clearTimeout(o),t.length>1e5&&(h.innerHTML=`<div id="message">${e[u].loadingMessage}</div>`)}catch(E){throw clearTimeout(o),E}const c=(new DOMParser).parseFromString(t,"text/html"),d=[];let m=null,f=null,p=0;let g;const b=()=>{g=c.createTreeWalker(c.body,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){if("SPAN"===e.tagName){const t=e.getAttribute("data-type");if(t&&t.split(" ").includes(r))return NodeFilter.FILTER_ACCEPT}return NodeFilter.FILTER_SKIP}})};if(s)switch(r){case"tag":g=c.createTreeWalker(c.body,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){if("EM"===e.tagName){const t=C(e.textContent);if(t&&t.startsWith("#")&&t.endsWith("#")&&t.length>2)return NodeFilter.FILTER_ACCEPT}return NodeFilter.FILTER_SKIP}});break;case"a":g=L("3.3.5")>=0?c.createTreeWalker(c.body,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){if("A"===e.tagName){const t=e.getAttribute("data-type");if(t&&t.split(" ").includes(r))return NodeFilter.FILTER_ACCEPT}return NodeFilter.FILTER_SKIP}}):c.createTreeWalker(c.body,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){return"A"!==e.tagName||e.href.startsWith("siyuan://")?NodeFilter.FILTER_SKIP:NodeFilter.FILTER_ACCEPT}});break;case"block-ref":g=L("3.3.5")>=0?c.createTreeWalker(c.body,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){if("A"===e.tagName){const t=e.getAttribute("data-type");if(t&&t.split(" ").includes(r))return NodeFilter.FILTER_ACCEPT}return NodeFilter.FILTER_SKIP}}):c.createTreeWalker(c.body,NodeFilter.SHOW_ELEMENT,{acceptNode:function(e){return"A"===e.tagName&&e.href.startsWith("siyuan://")?NodeFilter.FILTER_ACCEPT:NodeFilter.FILTER_SKIP}});break;default:b()}else b();(async()=>{let t,n=0;for(;(t=g.nextNode())&&!(p>=1e4);){let e=C(t.textContent);if(s&&"tag"===r&&e.startsWith("#")&&e.endsWith("#")&&(e=C(e.slice(1,-1))),!e)continue;const o=s?t.closest("[id]"):t.closest("[data-node-id]");if(!o)continue;const i=s?o.id:o.getAttribute("data-node-id");if(!i)continue;null!==m&&null!==f&&f.parentElement===t.parentElement&&f.nextSibling===t?m.text+=e:(m&&d.push(m),m={text:e,blockId:i}),f=t,p++,n++,n>=50&&(n=0,await new Promise(e=>{window.requestIdleCallback?window.requestIdleCallback(()=>e(void 0)):setTimeout(e,0)}))}m&&d.push(m),function(t){if(h.innerHTML="",0===t.length){if(!y){const t=document.createElement("div");return t.id="message",t.textContent=e[u].noResultsMessage,void h.appendChild(t)}a.style.display="none"}const n=document.createDocumentFragment();for(const e of t)if(i){const t=document.createElement("li");t.textContent=e.text,n.appendChild(t)}else if(y){const t=document.createElement("li");t.textContent=e.text,n.appendChild(t)}else{const t=document.createElement("a");t.textContent=e.text,t.href=`siyuan://blocks/${e.blockId}`;const o=document.createElement("li");o.appendChild(t),n.appendChild(o)}h.appendChild(n)}(d)})()}async function N(){const e=[];for(const d of document.documentElement.attributes)e.push(d.name);const t=[];for(const m of d.attributes)document.documentElement.setAttribute(m.name,m.value),t.push(m.name);for(const d of e)t.includes(d)||document.documentElement.removeAttribute(d);const n=[];for(const d of document.body.attributes)n.push(d.name);const o=d.querySelector("body"),r=[];if(o)for(const d of o.attributes)document.body.setAttribute(d.name,d.value),r.push(d.name);for(const d of n)r.includes(d)||document.body.removeAttribute(d);y&&document.body.classList.add("exportMode");const s=document.head.querySelector("#themeDefaultStyle"),i=d.querySelector("#themeDefaultStyle");if(i){let e=i.getAttribute("href");if(e){e.startsWith("/")||(e="/"+e);const t=document.createElement("link");await new Promise(n=>{t.rel="stylesheet",t.type="text/css",t.href=b?e:"../.."+e,t.onload=()=>n(),t.onerror=()=>n(),s?s.parentNode?.insertBefore(t,s):document.head.appendChild(t)}),s?.remove(),t.id="themeDefaultStyle"}}else s&&(s.href="");const l=document.head.querySelector("#themeStyle"),a=d.querySelector("#themeStyle");if(a){let e=a.getAttribute("href");if(e){e.startsWith("/")||(e="/"+e);const t=document.createElement("link");await new Promise(n=>{t.rel="stylesheet",t.type="text/css",t.href=b?e:"../.."+e,t.onload=()=>n(),t.onerror=()=>n(),l?l.parentNode?.insertBefore(t,l):document.head.appendChild(t)}),l?.remove(),t.id="themeStyle"}}else l&&(l.href="");const c=document.head.querySelector("#siyuanStyle"),u=d.querySelector("#siyuanStyle");if(c&&u){let e=u.textContent;e&&(c.textContent=e)}else c&&(c.textContent="")}async function S(e,n){if(window.parent.siyuan.isPublish)return;if(!e)return;const o={};for(const[s,i]of Object.entries(n))o[`${t}${s}`]=i;try{const t=await fetch("/api/attr/setBlockAttrs",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({id:e,attrs:o})});if(!t.ok)throw new Error(`HTTP error! status: ${t.status}`);return await t.json()}catch(r){throw r}}function C(e){return e?e.replace(/^[\s\u200B-\u200D\uFEFF\u2060]+|[\s\u200B-\u200D\uFEFF\u2060]+$/g,""):""}function L(e){const t=window.parent.siyuan.config?.system?.kernelVersion;if(!t)return 0;const n=t.split(".").map(Number),o=e.split(".").map(Number),r=Math.max(n.length,o.length);for(let s=0;s<r;s++){const e=s<n.length?n[s]:0,t=s<o.length?o[s]:0;if(e>t)return 1;if(e<t)return-1}return 0}}();});</script>
</head>
<body>
  <svg style="display: none;">
    <symbol id="iconRefresh" viewBox="0 0 32 32">
      <path d="M6.662 16.074q0 0.688 0.086 1.345t0.27 1.26q0.135 0.504-0.049 0.989t-0.639 0.694q-0.467 0.221-0.94 0.018t-0.633-0.682q-0.295-0.897-0.424-1.794t-0.129-1.831q0-4.866 3.465-8.343t8.33-3.477h1.143l-1.941-1.941q-0.332-0.332-0.332-0.811t0.332-0.811 0.823-0.332 0.823 0.332l3.956 3.931q0.369 0.369 0.369 0.86t-0.369 0.86l-3.931 3.932q-0.332 0.332-0.836 0.332t-0.836-0.332-0.332-0.836 0.332-0.836l1.892-1.892h-1.094q-3.858 0-6.598 2.746t-2.74 6.616zM25.338 16q0-0.688-0.086-1.345t-0.27-1.284q-0.16-0.504 0.024-0.989t0.639-0.694q0.467-0.221 0.927-0.018t0.621 0.682q0.319 0.897 0.461 1.806t0.141 1.843q0 4.866-3.465 8.343t-8.33 3.477h-1.192l1.941 1.941q0.332 0.332 0.332 0.811t-0.332 0.811-0.823 0.332-0.823-0.332l-3.957-3.931q-0.369-0.369-0.369-0.86t0.369-0.86l3.957-3.956q0.332-0.332 0.823-0.332t0.823 0.332 0.332 0.823-0.332 0.823l-1.941 1.941h1.192q3.858 0 6.598-2.746t2.74-6.616z"></path>
    </symbol>
  </svg>
  <div id="controlPanel">
    <select id="filterType"></select>
    <select id="embedBlocks"></select>
    <button id="refreshList" type="button"><svg width="16" height="16" viewBox="0 0 32 32"><use href="#iconRefresh"></use></svg></button>
  </div>
  <ul id="contentList"></ul>
</body>
</html>