@designbasekorea/ui-wc 0.5.6 → 0.6.0

package/dist/esm/components/db-code-block.js

@@ -1,304 +1 @@
-import { ensureHighlightReady, highlightCodeSync, formatLanguageLabel } from './highlight-code.js';
-
-const CLASS = 'designbase-wc-code-block';
-class DbCodeBlock extends HTMLElement {
-    constructor() {
-        super(...arguments);
-        this.built = false;
-        this.renderToken = 0;
-        this.internalActiveId = '';
-        this.copied = false;
-        this.editedCodes = {};
-        this.handleSegmentChange = (event) => {
-            const custom = event;
-            const value = custom.detail?.value;
-            if (!value)
-                return;
-            if (!this.hasAttribute('active-id')) {
-                this.internalActiveId = value;
-            }
-            this.dispatchEvent(new CustomEvent('db-active-id-change', {
-                detail: { activeId: value },
-                bubbles: true,
-                composed: true,
-            }));
-            this.render();
-        };
-    }
-    static get observedAttributes() {
-        return [
-            'items',
-            'code',
-            'language',
-            'default-active-id',
-            'active-id',
-            'show-language',
-            'highlight',
-            'theme',
-            'show-copy',
-            'copied-label',
-            'copy-label',
-            'min-height',
-            'max-height',
-            'overflow',
-            'editable',
-        ];
-    }
-    connectedCallback() {
-        this.style.display = 'block';
-        if (!this.built) {
-            this.built = true;
-            this.internalActiveId =
-                this.getAttribute('default-active-id') || this.getResolvedItems()[0]?.id || '';
-        }
-        this.render();
-        void ensureHighlightReady().then(() => {
-            if (this.isConnected && this.built)
-                this.render();
-        });
-        this.addEventListener('db-change', this.handleSegmentChange);
-    }
-    disconnectedCallback() {
-        this.removeEventListener('db-change', this.handleSegmentChange);
-        if (this.copyTimeout)
-            window.clearTimeout(this.copyTimeout);
-    }
-    attributeChangedCallback(name) {
-        if (!this.built)
-            return;
-        if (name === 'active-id') {
-            this.render();
-            return;
-        }
-        if (name === 'items' || name === 'code' || name === 'language') {
-            const items = this.getResolvedItems();
-            if (!items.find((item) => item.id === this.getActiveId())) {
-                this.internalActiveId = items[0]?.id || '';
-            }
-        }
-        this.render();
-    }
-    getBool(name, fallback = true) {
-        if (!this.hasAttribute(name))
-            return fallback;
-        const value = this.getAttribute(name);
-        return value === '' || value === 'true';
-    }
-    getResolvedItems() {
-        const rawItems = this.getAttribute('items');
-        if (rawItems) {
-            try {
-                const parsed = JSON.parse(rawItems);
-                if (Array.isArray(parsed) && parsed.length > 0)
-                    return parsed;
-            }
-            catch {
-                /* ignore */
-            }
-        }
-        const code = this.getAttribute('code');
-        if (code) {
-            const language = this.getAttribute('language') || 'tsx';
-            return [{ id: 'default', label: language, code, language }];
-        }
-        return [];
-    }
-    getActiveId() {
-        return this.getAttribute('active-id') || this.internalActiveId;
-    }
-    getActiveItem() {
-        const items = this.getResolvedItems();
-        return items.find((item) => item.id === this.getActiveId()) || items[0];
-    }
-    toCssSize(value) {
-        if (!value)
-            return undefined;
-        return /^\d+$/.test(value) ? `${value}px` : value;
-    }
-    async handleCopy() {
-        const activeItem = this.getActiveItem();
-        const editable = this.getBool('editable', false);
-        const text = (editable
-            ? (this.editedCodes[activeItem?.id ?? ''] ?? activeItem?.code)
-            : activeItem?.code)?.trim();
-        if (!text)
-            return;
-        try {
-            await navigator.clipboard.writeText(text);
-        }
-        catch {
-            const textarea = document.createElement('textarea');
-            textarea.value = text;
-            textarea.style.position = 'fixed';
-            textarea.style.opacity = '0';
-            document.body.appendChild(textarea);
-            textarea.select();
-            document.execCommand('copy');
-            textarea.remove();
-        }
-        this.copied = true;
-        this.render();
-        if (this.copyTimeout)
-            window.clearTimeout(this.copyTimeout);
-        this.copyTimeout = window.setTimeout(() => {
-            this.copied = false;
-            this.render();
-        }, 1600);
-    }
-    render() {
-        const token = ++this.renderToken;
-        this.renderNow(token);
-    }
-    renderNow(token) {
-        const activeItem = this.getActiveItem();
-        if (!activeItem) {
-            this.replaceChildren();
-            return;
-        }
-        const items = this.getResolvedItems();
-        const hasSegments = items.length > 1;
-        const language = this.getAttribute('language') || 'tsx';
-        const activeLanguage = activeItem.language ?? language;
-        const showLanguage = this.getBool('show-language', true);
-        const highlight = this.getBool('highlight', true);
-        const theme = this.getAttribute('theme') || 'auto';
-        const showCopy = this.getBool('show-copy', true);
-        const copiedLabel = this.getAttribute('copied-label') || '복사됨';
-        const copyLabel = this.getAttribute('copy-label') || '복사';
-        const overflow = this.getAttribute('overflow') || 'scroll-x';
-        const editable = this.getBool('editable', false);
-        const sourceCode = editable
-            ? (this.editedCodes[activeItem.id] ?? activeItem.code)
-            : activeItem.code;
-        const trimmedCode = sourceCode.trim();
-        let highlightedCode = null;
-        if (highlight && sourceCode) {
-            try {
-                highlightedCode = highlightCodeSync(sourceCode, activeLanguage);
-            }
-            catch {
-                highlightedCode = null;
-            }
-        }
-        if (token !== this.renderToken)
-            return;
-        const minHeight = this.toCssSize(this.getAttribute('min-height'));
-        const maxHeight = this.toCssSize(this.getAttribute('max-height'));
-        if (minHeight)
-            this.style.setProperty('--db-code-block-min-height', minHeight);
-        else
-            this.style.removeProperty('--db-code-block-min-height');
-        if (maxHeight)
-            this.style.setProperty('--db-code-block-max-height', maxHeight);
-        else
-            this.style.removeProperty('--db-code-block-max-height');
-        this.className = [
-            CLASS,
-            `${CLASS}--overflow-${overflow}`,
-            theme !== 'auto' && `${CLASS}--theme-${theme}`,
-            editable && `${CLASS}--editable`,
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const toolbar = document.createElement('div');
-        toolbar.className = `${CLASS}__toolbar`;
-        const toolbarLeft = document.createElement('div');
-        toolbarLeft.className = `${CLASS}__toolbar-left`;
-        if (hasSegments) {
-            const segment = document.createElement('db-segment-control');
-            segment.setAttribute('size', 's');
-            segment.setAttribute('options', JSON.stringify(items.map((item) => ({ value: item.id, label: item.label }))));
-            segment.setAttribute('value', this.getActiveId());
-            toolbarLeft.append(segment);
-        }
-        if (showLanguage) {
-            const languageEl = document.createElement('span');
-            languageEl.className = `${CLASS}__language`;
-            languageEl.textContent = formatLanguageLabel(activeLanguage);
-            toolbarLeft.append(languageEl);
-        }
-        toolbar.append(toolbarLeft);
-        if (showCopy) {
-            const copyButton = document.createElement('db-button');
-            copyButton.setAttribute('type', 'button');
-            copyButton.setAttribute('variant', 'tertiary');
-            copyButton.setAttribute('size', 's');
-            copyButton.setAttribute('start-icon', this.copied ? 'done' : 'copy');
-            copyButton.textContent = this.copied ? copiedLabel : copyLabel;
-            copyButton.addEventListener('db-click', () => this.handleCopy());
-            toolbar.append(copyButton);
-        }
-        const body = document.createElement('div');
-        body.className = `${CLASS}__body`;
-        if (hasSegments && activeItem.description) {
-            const caption = document.createElement('p');
-            caption.className = `${CLASS}__caption`;
-            caption.textContent = activeItem.description;
-            body.append(caption);
-        }
-        if (editable) {
-            if (this.editedCodes[activeItem.id] === undefined) {
-                this.editedCodes[activeItem.id] = activeItem.code;
-            }
-            const editor = document.createElement('div');
-            editor.className = `${CLASS}__editor`;
-            const mirrorPre = document.createElement('pre');
-            mirrorPre.className = `${CLASS}__pre ${CLASS}__pre--mirror`;
-            mirrorPre.setAttribute('aria-hidden', 'true');
-            const mirrorCode = document.createElement('code');
-            mirrorCode.className = `${CLASS}__code language-${activeLanguage}`;
-            if (highlightedCode) {
-                mirrorCode.innerHTML = highlightedCode;
-            }
-            else {
-                mirrorCode.textContent = sourceCode;
-            }
-            mirrorPre.append(mirrorCode);
-            const textarea = document.createElement('textarea');
-            textarea.className = `${CLASS}__textarea`;
-            textarea.value = sourceCode;
-            textarea.spellcheck = false;
-            textarea.setAttribute('autocapitalize', 'off');
-            textarea.setAttribute('autocorrect', 'off');
-            textarea.setAttribute('aria-label', `${formatLanguageLabel(activeLanguage)} 코드 편집`);
-            textarea.addEventListener('input', () => {
-                this.editedCodes[activeItem.id] = textarea.value;
-                const nextHighlight = highlight && textarea.value
-                    ? highlightCodeSync(textarea.value, activeLanguage)
-                    : null;
-                if (nextHighlight) {
-                    mirrorCode.innerHTML = nextHighlight;
-                }
-                else {
-                    mirrorCode.textContent = textarea.value;
-                }
-                this.dispatchEvent(new CustomEvent('db-code-change', {
-                    detail: { code: textarea.value, itemId: activeItem.id },
-                    bubbles: true,
-                    composed: true,
-                }));
-            });
-            editor.append(mirrorPre, textarea);
-            body.append(editor);
-        }
-        else {
-            const pre = document.createElement('pre');
-            pre.className = `${CLASS}__pre`;
-            const code = document.createElement('code');
-            code.className = `${CLASS}__code language-${activeLanguage}`;
-            if (highlightedCode) {
-                code.innerHTML = highlightedCode;
-            }
-            else {
-                code.textContent = trimmedCode;
-            }
-            pre.append(code);
-            body.append(pre);
-        }
-        this.replaceChildren(toolbar, body);
-    }
-}
-if (!customElements.get('db-code-block'))
-    customElements.define('db-code-block', DbCodeBlock);
-
-export { DbCodeBlock };
+import{ensureHighlightReady as e,highlightCodeSync as t,formatLanguageLabel as i}from"./highlight-code.js";const s="designbase-wc-code-block";class DbCodeBlock extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.renderToken=0,this.internalActiveId="",this.copied=!1,this.editedCodes={},this.handleSegmentChange=e=>{const t=e,i=t.detail?.value;i&&(this.hasAttribute("active-id")||(this.internalActiveId=i),this.dispatchEvent(new CustomEvent("db-active-id-change",{detail:{activeId:i},bubbles:!0,composed:!0})),this.render())}}static get observedAttributes(){return["items","code","language","default-active-id","active-id","show-language","highlight","theme","show-copy","copied-label","copy-label","min-height","max-height","overflow","editable"]}connectedCallback(){this.style.display="block",this.built||(this.built=!0,this.internalActiveId=this.getAttribute("default-active-id")||this.getResolvedItems()[0]?.id||""),this.render(),e().then(()=>{this.isConnected&&this.built&&this.render()}),this.addEventListener("db-change",this.handleSegmentChange)}disconnectedCallback(){this.removeEventListener("db-change",this.handleSegmentChange),this.copyTimeout&&window.clearTimeout(this.copyTimeout)}attributeChangedCallback(e){if(this.built)if("active-id"!==e){if("items"===e||"code"===e||"language"===e){const e=this.getResolvedItems();e.find(e=>e.id===this.getActiveId())||(this.internalActiveId=e[0]?.id||"")}this.render()}else this.render()}getBool(e,t=!0){if(!this.hasAttribute(e))return t;const i=this.getAttribute(e);return""===i||"true"===i}getResolvedItems(){const e=this.getAttribute("items");if(e)try{const t=JSON.parse(e);if(Array.isArray(t)&&t.length>0)return t}catch{}const t=this.getAttribute("code");if(t){const e=this.getAttribute("language")||"tsx";return[{id:"default",label:e,code:t,language:e}]}return[]}getActiveId(){return this.getAttribute("active-id")||this.internalActiveId}getActiveItem(){const e=this.getResolvedItems();return e.find(e=>e.id===this.getActiveId())||e[0]}toCssSize(e){if(e)return/^\d+$/.test(e)?`${e}px`:e}async handleCopy(){const e=this.getActiveItem(),t=this.getBool("editable",!1),i=(t?this.editedCodes[e?.id??""]??e?.code:e?.code)?.trim();if(i){try{await navigator.clipboard.writeText(i)}catch{const e=document.createElement("textarea");e.value=i,e.style.position="fixed",e.style.opacity="0",document.body.appendChild(e),e.select(),document.execCommand("copy"),e.remove()}this.copied=!0,this.render(),this.copyTimeout&&window.clearTimeout(this.copyTimeout),this.copyTimeout=window.setTimeout(()=>{this.copied=!1,this.render()},1600)}}render(){const e=++this.renderToken;this.renderNow(e)}renderNow(e){const o=this.getActiveItem();if(!o)return void this.replaceChildren();const n=this.getResolvedItems(),d=n.length>1,c=this.getAttribute("language")||"tsx",a=o.language??c,r=this.getBool("show-language",!0),l=this.getBool("highlight",!0),h=this.getAttribute("theme")||"auto",u=this.getBool("show-copy",!0),m=this.getAttribute("copied-label")||"복사됨",b=this.getAttribute("copy-label")||"복사",g=this.getAttribute("overflow")||"scroll-x",p=this.getBool("editable",!1),v=p?this.editedCodes[o.id]??o.code:o.code,A=v.trim();let y=null;if(l&&v)try{y=t(v,a)}catch{y=null}if(e!==this.renderToken)return;const f=this.toCssSize(this.getAttribute("min-height")),C=this.toCssSize(this.getAttribute("max-height"));f?this.style.setProperty("--db-code-block-min-height",f):this.style.removeProperty("--db-code-block-min-height"),C?this.style.setProperty("--db-code-block-max-height",C):this.style.removeProperty("--db-code-block-max-height"),this.className=[s,`${s}--overflow-${g}`,"auto"!==h&&`${s}--theme-${h}`,p&&`${s}--editable`].filter(Boolean).join(" ");const E=document.createElement("div");E.className=`${s}__toolbar`;const _=document.createElement("div");if(_.className=`${s}__toolbar-left`,d){const e=document.createElement("db-segment-control");e.setAttribute("size","s"),e.setAttribute("options",JSON.stringify(n.map(e=>({value:e.id,label:e.label})))),e.setAttribute("value",this.getActiveId()),_.append(e)}if(r){const e=document.createElement("span");e.className=`${s}__language`,e.textContent=i(a),_.append(e)}if(E.append(_),u){const e=document.createElement("db-button");e.setAttribute("type","button"),e.setAttribute("variant","tertiary"),e.setAttribute("size","s"),e.setAttribute("start-icon",this.copied?"done":"copy"),e.textContent=this.copied?m:b,e.addEventListener("db-click",()=>this.handleCopy()),E.append(e)}const x=document.createElement("div");if(x.className=`${s}__body`,d&&o.description){const e=document.createElement("p");e.className=`${s}__caption`,e.textContent=o.description,x.append(e)}if(p){void 0===this.editedCodes[o.id]&&(this.editedCodes[o.id]=o.code);const e=document.createElement("div");e.className=`${s}__editor`;const n=document.createElement("pre");n.className=`${s}__pre ${s}__pre--mirror`,n.setAttribute("aria-hidden","true");const d=document.createElement("code");d.className=`${s}__code language-${a}`,y?d.innerHTML=y:d.textContent=v,n.append(d);const c=document.createElement("textarea");c.className=`${s}__textarea`,c.value=v,c.spellcheck=!1,c.setAttribute("autocapitalize","off"),c.setAttribute("autocorrect","off"),c.setAttribute("aria-label",`${i(a)} 코드 편집`),c.addEventListener("input",()=>{this.editedCodes[o.id]=c.value;const e=l&&c.value?t(c.value,a):null;e?d.innerHTML=e:d.textContent=c.value,this.dispatchEvent(new CustomEvent("db-code-change",{detail:{code:c.value,itemId:o.id},bubbles:!0,composed:!0}))}),e.append(n,c),x.append(e)}else{const e=document.createElement("pre");e.className=`${s}__pre`;const t=document.createElement("code");t.className=`${s}__code language-${a}`,y?t.innerHTML=y:t.textContent=A,e.append(t),x.append(e)}this.replaceChildren(E,x)}}customElements.get("db-code-block")||customElements.define("db-code-block",DbCodeBlock);export{DbCodeBlock};