19 lines
4.1 KiB
JavaScript
19 lines
4.1 KiB
JavaScript
|
import{html as t,raw as n,css as r,Component as s,nextTick as d}from"wkit";import{colorHtml as p,colorJs as h,colorCss as g,colorMd as b}from"./colorful.js";import"../../base/icon.js";import"../../modal/layer.js";function i(o){return o.trim().replace(/</g,"<").replace(/>/g,">").replace(/&/g,"&")}class m extends s{static props={code:{type:String,default:"",attribute:!1,observer(e){this.setCode(e)}},lang:""};static styles=[r`:host{display:flex;border-radius:3px}.container{display:flex;flex-direction:column;position:relative;width:100%;margin:10px 0;padding-bottom:6px;border-radius:3px;background:#f7f8fb;color:var(--color-dark-1);box-shadow:0 1px 5px rgba(0,0,0,.1)}.container .title{flex-shrink:0;display:flex;justify-content:space-between;align-items:center;width:100%;height:32px;padding:0 12px;line-height:1;font-size:14px;user-select:none}.container .title section{display:flex;align-items:center}.container .title i{display:block;width:12px;height:12px;margin-right:6px;border-radius:50%;background:var(--color-red-1)}.container .title i:nth-child(2){background:var(--color-orange-1)}.container .title i:nth-child(3){background:var(--color-green-1)}.container .title .act{--wc-icon-size: 18px;margin:0 6px;color:var(--color-grey-2);cursor:pointer}.container .title .act:hover{color:var(--color-grey-3)}`,r`.code-block{display:flex;flex-direction:column;overflow:hidden;overflow-y:auto;line-height:20px;font-size:14px;color:var(--color-dark-1);cursor:text;counter-reset:code}.code-block>code{display:block;position:relative;min-height:20px;padding:0 8px 0 45px;font-family:Menlo,Monaco,Consolas,"Courier New",monospace;white-space:pre-wrap;word-break:break-word}.code-block>code::before{position:absolute;left:0;width:40px;height:100%;padding-right:5px;text-align:right;color:var(--color-grey-1);content:counter(code);counter-increment:code}.code-block>code .t-tag,.code-block>code .t-keyword,.code-block>code .t-const{color:var(--color-red-2)}.code-block>code .t-attr,.code-block>code .t-fn,.code-block>code .t-var{color:var(--color-blue-2)}.code-block>code .t-str{color:var(--color-green-2)}.code-block>code .t-comment{color:var(--color-grey-2)}.code-block>code .t-type{font-weight:bold;color:var(--color-orange-1)}.code-block>code .t-num,.code-block>code .t-buildin{color:#a46ad3}.code-block>code .t-link{text-decoration:underline;color:var(--color-grey-2)}.code-block>code .t-buildin,.code-block>code .t-keyword,.code-block>code .t-type,.code-block>code .t-link,.code-block>code .t-comment{font-style:italic}`];#e=[];setCode(e,l){let a=this.lang,c=!1;switch(a){case"js":case"javascript":case"ts":case"typescript":e=h(e);break;case"html":case"xml":e=p(e);break;case"css":case"scss":case"less":c=!0,e=g(e);break;case"md":case"markdown":e=b(e);break}c===!1&&(e=e.replace(/<(\/?)(?!c)(\w+)([^>]*?)>/g,"<$1$2$3>").replace(/<!(doctype)([^>]*?)>/gi,"<$1$2>").replace(/<\?([^\?>]*?)\?>/g,"<?$1?>").replace(/<\!\-\-([^>]*?)\-\->/g,"<!--$1-->")),this.#e=e.split(`
|
||
|
|
`)}copyCode(){if(navigator.clipboard)navigator.clipboard.writeText(this.code);else{let e=document.createElement("textarea");e.style.position="fixed",e.style.left="-2000px",e.value=this.code,this.root.appendChild(e),e.select(),document.execCommand("copy"),e.remove()}layer.toast("\u590D\u5236\u5230\u7C98\u8D34\u677F\u6210\u529F","success")}mounted(){var e=this.innerHTML||this.textContent;e=e.trim().replace(/^[\r\n]|\s{2,}$/g,""),e.startsWith("<xmp>")&&e.endsWith("</xmp>")?e=e.slice(6,-7):this.firstElementChild?.tagName==="TEXTAREA"?e=this.firstElementChild.value.trim():e.startsWith("<pre>")&&e.endsWith("</pre>")?e=i(e.slice(6,-7)):e=i(e),this.textContent="",e&&d(l=>{this.code=e})}render(){return t`
|
||
|
|
<main class="container">
|
||
|
|
<header class="title">
|
||
|
|
<section><i></i><i></i><i></i></section>
|
||
|
|
<section>${this.lang}</section>
|
||
|
|
<wc-icon
|
||
|
|
title="复制"
|
||
|
|
class="act"
|
||
|
|
name="doc"
|
||
|
|
@click=${this.copyCode}
|
||
|
|
></wc-icon>
|
||
|
|
</header>
|
||
|
|
<footer class="code-block">
|
||
|
|
${this.#e.map(e=>t`<code>${n(e)}</code>`)}
|
||
|
|
</footer>
|
||
|
|
</main>
|
||
|
|
`}}m.reg("code");
|