@designbasekorea/ui-wc 0.5.3 → 0.5.6

package/dist/esm/components/db-markdown-editor.js

@@ -1 +1,458 @@
-import{createDbIcon as t}from"./db-icons.js";const e="designbase-wc-markdown-editor";class DbMarkdownEditor extends HTMLElement{constructor(){super(...arguments),this.built=!1,this.internalValue="",this.currentMode="preview",this.isFocused=!1,this.wordCount=0,this.lineCount=0,this.lastSaved=null,this.isSaving=!1,this.handleKeyDown=t=>{if(this.getBool("disabled")||this.getBool("readonly"))return;const{ctrlKey:e,shiftKey:i,key:s}=t;e&&"b"===s?(t.preventDefault(),this.insertText("**","**","**")):e&&"i"===s?(t.preventDefault(),this.insertText("*","*","*")):e&&"k"===s?(t.preventDefault(),this.insertText("[","](",")")):e&&"`"===s?(t.preventDefault(),this.insertText("`","`","`")):e&&i&&"S"===s?(t.preventDefault(),this.insertText("~~","~~","~~")):"Tab"===s&&(t.preventDefault(),this.insertText("    ","",""))}}static get observedAttributes(){return["size","variant","mode","theme","value","placeholder","min-height","max-height","auto-height","readonly","disabled","show-toolbar","show-status","show-word-count","show-line-count","auto-save","auto-save-interval","file-upload"]}connectedCallback(){this.built||(this.built=!0,this.build()),this.syncFromAttributes(),this.renderMode(),this.updateCounts(),this.updateStatus(),this.setupAutoSave()}disconnectedCallback(){this.autoSaveTimer&&window.clearInterval(this.autoSaveTimer)}attributeChangedCallback(t){if(this.built){if("value"===t&&this.textareaEl)return this.internalValue=this.getAttribute("value")||"",this.textareaEl.value=this.internalValue,this.updatePreview(),this.updateCodeView(),void this.updateCounts();if("mode"===t)return this.currentMode=this.getAttribute("mode")||"preview",void this.renderMode();"auto-save"!==t&&"auto-save-interval"!==t||this.setupAutoSave(),this.updateRootClasses()}}get value(){return this.internalValue}set value(t){this.internalValue=t,this.setAttribute("value",t),this.textareaEl&&(this.textareaEl.value=t),this.updatePreview(),this.updateCodeView(),this.updateCounts()}getBool(t,e=!1){if(!this.hasAttribute(t))return e;const i=this.getAttribute(t);return""===i||"true"===i}syncFromAttributes(){if(this.internalValue=this.getAttribute("value")||"",this.currentMode=this.getAttribute("mode")||"preview",this.textareaEl){this.textareaEl.value=this.internalValue,this.textareaEl.placeholder=this.getAttribute("placeholder")||"마크다운을 입력하세요...",this.textareaEl.readOnly=this.getBool("readonly"),this.textareaEl.disabled=this.getBool("disabled");const t=Number(this.getAttribute("min-height")||200),e=Number(this.getAttribute("max-height")||600),i=this.getBool("auto-height");this.textareaEl.style.minHeight=i?"auto":`${t}px`,this.textareaEl.style.maxHeight=i?"none":`${e}px`}this.updateRootClasses(),this.updatePreview(),this.updateCodeView()}updateRootClasses(){const t=this.getAttribute("size")||"m",i=this.getAttribute("variant")||"default",s=this.getAttribute("theme")||"light";this.className=[e,`${e}--size-${t}`,`${e}--variant-${i}`,`${e}--mode-${this.currentMode}`,`${e}--theme-${s}`,this.isFocused&&`${e}--focused`,this.getBool("disabled")&&`${e}--disabled`,this.getBool("readonly")&&`${e}--readonly`].filter(Boolean).join(" ")}markdownToHtml(t){return t.replace(/^### (.*$)/gim,"<h3>$1</h3>").replace(/^## (.*$)/gim,"<h2>$1</h2>").replace(/^# (.*$)/gim,"<h1>$1</h1>").replace(/\*\*(.*)\*\*/gim,"<strong>$1</strong>").replace(/\*(.*)\*/gim,"<em>$1</em>").replace(/~~(.*)~~/gim,"<del>$1</del>").replace(/`(.*)`/gim,"<code>$1</code>").replace(/\[([^\]]+)\]\(([^)]+)\)/gim,'<a href="$2">$1</a>').replace(/!\[([^\]]*)\]\(([^)]+)\)/gim,'<img alt="$1" src="$2" />').replace(/^> (.*$)/gim,"<blockquote>$1</blockquote>").replace(/^- (.*$)/gim,"<ul><li>$1</li></ul>").replace(/^(\d+)\. (.*$)/gim,"<ol><li>$2</li></ol>").replace(/\n/gim,"<br />")}updatePreview(){this.previewEl&&(this.previewEl.innerHTML=this.markdownToHtml(this.internalValue))}updateCodeView(){if(this.codeViewEl){const t=this.codeViewEl.querySelector("code");t&&(t.textContent=this.internalValue)}}updateCounts(){this.wordCount=this.internalValue.trim()?this.internalValue.trim().split(/\s+/).length:0,this.lineCount=this.internalValue?this.internalValue.split("\n").length:0,this.wordCountEl&&(this.wordCountEl.textContent=`단어: ${this.wordCount}`),this.lineCountEl&&(this.lineCountEl.textContent=`라인: ${this.lineCount}`)}updateStatus(){if(!this.statusEl)return;const t=this.getBool("show-status",!0);this.statusEl.hidden=!t,this.wordCountEl&&(this.wordCountEl.hidden=!this.getBool("show-word-count",!0)),this.lineCountEl&&(this.lineCountEl.hidden=!this.getBool("show-line-count",!0)),this.lastSavedEl&&(this.lastSavedEl.hidden=!this.lastSaved,this.lastSaved&&(this.lastSavedEl.textContent=`저장됨: ${this.lastSaved.toLocaleTimeString()}`)),this.savingEl&&(this.savingEl.hidden=!this.isSaving)}emitChange(){this.dispatchEvent(new CustomEvent("db-change",{detail:{value:this.internalValue},bubbles:!0,composed:!0}))}insertText(t,e="",i=""){if(!this.textareaEl||this.getBool("disabled")||this.getBool("readonly"))return;const{selectionStart:s,selectionEnd:a}=this.textareaEl,l=this.internalValue.substring(s,a),n=e+(l||t)+i,o=this.internalValue.substring(0,s)+n+this.internalValue.substring(a);this.internalValue=o,this.textareaEl.value=o,this.emitChange(),this.updatePreview(),this.updateCodeView(),this.updateCounts();const r=s+e.length+(l?l.length:t.length);window.setTimeout(()=>{this.textareaEl&&(this.textareaEl.setSelectionRange(r,r),this.textareaEl.focus())},0)}getDefaultToolbarActions(){return[{id:"bold",label:"B",tooltip:"굵게 (Ctrl+B)",shortcut:"Ctrl+B",action:()=>this.insertText("**","**","**")},{id:"italic",label:"I",tooltip:"기울임 (Ctrl+I)",shortcut:"Ctrl+I",action:()=>this.insertText("*","*","*")},{id:"strikethrough",label:"S",tooltip:"취소선 (Ctrl+Shift+S)",shortcut:"Ctrl+Shift+S",action:()=>this.insertText("~~","~~","~~")},{id:"separator1",label:"|",separator:!0,action:()=>{}},{id:"heading1",label:"H1",tooltip:"제목 1",action:()=>this.insertText("# ","","")},{id:"heading2",label:"H2",tooltip:"제목 2",action:()=>this.insertText("## ","","")},{id:"heading3",label:"H3",tooltip:"제목 3",action:()=>this.insertText("### ","","")},{id:"separator2",label:"|",separator:!0,action:()=>{}},{id:"link",label:"",icon:"share-alt",tooltip:"링크 (Ctrl+K)",shortcut:"Ctrl+K",action:()=>this.insertText("[","](",")")},{id:"image",label:"",icon:"video",tooltip:"이미지",action:()=>this.insertText("![","](",")")},{id:"code",label:"",icon:"code",tooltip:"인라인 코드 (Ctrl+`)",shortcut:"Ctrl+`",action:()=>this.insertText("`","`","`")},{id:"codeBlock",label:"```",tooltip:"코드 블록",action:()=>this.insertText("\n```\n","","\n```\n")},{id:"separator3",label:"|",separator:!0,action:()=>{}},{id:"list",label:"•",tooltip:"순서 없는 목록",action:()=>this.insertText("- ","","")},{id:"orderedList",label:"1.",tooltip:"순서 있는 목록",action:()=>this.insertText("1. ","","")},{id:"quote",label:'"',tooltip:"인용구",action:()=>this.insertText("> ","","")},{id:"separator4",label:"|",separator:!0,action:()=>{}},{id:"table",label:"⊞",tooltip:"테이블",action:()=>this.insertText("\n| 헤더1 | 헤더2 | 헤더3 |\n|-------|-------|-------|\n| 셀1   | 셀2   | 셀3   |\n","","")},{id:"horizontalRule",label:"—",tooltip:"수평선",action:()=>this.insertText("\n---\n","","")}]}renderToolbar(){if(!this.toolbarEl)return;const i=this.getBool("show-toolbar",!0);this.toolbarEl.hidden=!i,this.toolbarEl.replaceChildren();const s=document.createElement("div");s.className=`${e}__mode-buttons`;[{mode:"edit",icon:"write",title:"편집 모드"},{mode:"preview",icon:"show",title:"미리보기 모드"},{mode:"split",icon:"hide",title:"분할 모드"},{mode:"code",icon:"code",title:"코드 보기"}].forEach(({mode:i,icon:a,title:l})=>{const n=document.createElement("button");n.type="button",n.className=`${e}__mode-button${this.currentMode===i?` ${e}__mode-button--active`:""}`,n.title=l,n.append(t(a,16)),n.addEventListener("click",()=>{this.currentMode=i,this.updateRootClasses(),this.renderMode(),this.renderToolbar()}),s.append(n)}),this.toolbarEl.append(s);const a=document.createElement("div");if(a.className=`${e}__toolbar-separator`,this.toolbarEl.append(a),"code"!==this.currentMode&&(this.getDefaultToolbarActions().forEach(i=>{const s=document.createElement("button");if(s.type="button",s.className=`${e}__toolbar-item`,s.disabled=this.getBool("disabled"),i.tooltip&&(s.title=i.tooltip),i.icon)s.append(t(i.icon,16));else if("bold"===i.id){const t=document.createElement("strong");t.textContent=i.label,s.append(t)}else if("italic"===i.id){const t=document.createElement("em");t.textContent=i.label,s.append(t)}else if("strikethrough"===i.id){const t=document.createElement("span");t.style.textDecoration="line-through",t.textContent=i.label,s.append(t)}else s.textContent=i.label;if(i.shortcut){const t=document.createElement("span");t.className=`${e}__toolbar-shortcut`,t.textContent=i.shortcut,s.append(t)}s.addEventListener("click",i.action),this.toolbarEl?.append(s)}),this.getBool("file-upload"))){const i=document.createElement("label");i.className=`${e}__file-upload`;const s=document.createElement("input");s.type="file",s.accept="image/*",s.hidden=!0,s.addEventListener("change",async()=>{const t=s.files?.[0];if(!t)return;const e=new CustomEvent("db-file-upload",{detail:{file:t},bubbles:!0,composed:!0,cancelable:!0});if(this.dispatchEvent(e),!e.defaultPrevented){const e=URL.createObjectURL(t);this.insertText(`![${t.name}](${e})`)}s.value=""}),i.append(s,t("upload",16)),this.toolbarEl.append(i)}}renderMode(){if(!this.editPanelEl||!this.previewPanelEl||!this.codePanelEl)return;const t="edit"===this.currentMode||"split"===this.currentMode,e="preview"===this.currentMode||"split"===this.currentMode,i="code"===this.currentMode;this.editPanelEl.hidden=!t,this.previewPanelEl.hidden=!e,this.codePanelEl.hidden=!i,this.updateRootClasses(),this.renderToolbar()}setupAutoSave(){if(this.autoSaveTimer&&window.clearInterval(this.autoSaveTimer),!this.getBool("auto-save"))return;const t=Number(this.getAttribute("auto-save-interval")||3e4);this.autoSaveTimer=window.setInterval(()=>{const t=this.getAttribute("value")||"";this.internalValue&&this.internalValue!==t&&(this.isSaving=!0,this.updateStatus(),this.dispatchEvent(new CustomEvent("db-save",{detail:{value:this.internalValue},bubbles:!0,composed:!0})),this.isSaving=!1,this.lastSaved=new Date,this.updateStatus())},t)}build(){this.toolbarEl=document.createElement("div"),this.toolbarEl.className=`${e}__toolbar`,this.contentEl=document.createElement("div"),this.contentEl.className=`${e}__content`,this.editPanelEl=document.createElement("div"),this.editPanelEl.className=`${e}__edit-panel`,this.textareaEl=document.createElement("textarea"),this.textareaEl.className=`${e}__textarea`,this.textareaEl.addEventListener("input",()=>{this.internalValue=this.textareaEl?.value||"",this.emitChange(),this.updatePreview(),this.updateCodeView(),this.updateCounts()}),this.textareaEl.addEventListener("focus",()=>{this.isFocused=!0,this.updateRootClasses(),this.dispatchEvent(new CustomEvent("db-focus",{bubbles:!0,composed:!0}))}),this.textareaEl.addEventListener("blur",()=>{this.isFocused=!1,this.updateRootClasses(),this.dispatchEvent(new CustomEvent("db-blur",{bubbles:!0,composed:!0}))}),this.textareaEl.addEventListener("keydown",this.handleKeyDown),this.editPanelEl.append(this.textareaEl),this.previewPanelEl=document.createElement("div"),this.previewPanelEl.className=`${e}__preview-panel`,this.previewEl=document.createElement("div"),this.previewEl.className=`${e}__preview`,this.previewPanelEl.append(this.previewEl),this.codePanelEl=document.createElement("div"),this.codePanelEl.className=`${e}__code-panel`,this.codeViewEl=document.createElement("pre"),this.codeViewEl.className=`${e}__code-view`;const t=document.createElement("code");this.codeViewEl.append(t),this.codePanelEl.append(this.codeViewEl),this.contentEl.append(this.editPanelEl,this.previewPanelEl,this.codePanelEl),this.statusEl=document.createElement("div"),this.statusEl.className=`${e}__status`,this.wordCountEl=document.createElement("span"),this.wordCountEl.className=`${e}__word-count`,this.lineCountEl=document.createElement("span"),this.lineCountEl.className=`${e}__line-count`,this.lastSavedEl=document.createElement("span"),this.lastSavedEl.className=`${e}__last-saved`,this.savingEl=document.createElement("span"),this.savingEl.className=`${e}__saving`,this.savingEl.textContent="저장 중...",this.statusEl.append(this.wordCountEl,this.lineCountEl,this.lastSavedEl,this.savingEl),this.append(this.toolbarEl,this.contentEl,this.statusEl)}}customElements.get("db-markdown-editor")||customElements.define("db-markdown-editor",DbMarkdownEditor);export{DbMarkdownEditor};
+import { createDbIcon } from './db-icons.js';
+
+const CLASS = 'designbase-wc-markdown-editor';
+class DbMarkdownEditor extends HTMLElement {
+    constructor() {
+        super(...arguments);
+        this.built = false;
+        this.internalValue = '';
+        this.currentMode = 'preview';
+        this.isFocused = false;
+        this.wordCount = 0;
+        this.lineCount = 0;
+        this.lastSaved = null;
+        this.isSaving = false;
+        this.handleKeyDown = (event) => {
+            if (this.getBool('disabled') || this.getBool('readonly'))
+                return;
+            const { ctrlKey, shiftKey, key } = event;
+            if (ctrlKey && key === 'b') {
+                event.preventDefault();
+                this.insertText('**', '**', '**');
+            }
+            else if (ctrlKey && key === 'i') {
+                event.preventDefault();
+                this.insertText('*', '*', '*');
+            }
+            else if (ctrlKey && key === 'k') {
+                event.preventDefault();
+                this.insertText('[', '](', ')');
+            }
+            else if (ctrlKey && key === '`') {
+                event.preventDefault();
+                this.insertText('`', '`', '`');
+            }
+            else if (ctrlKey && shiftKey && key === 'S') {
+                event.preventDefault();
+                this.insertText('~~', '~~', '~~');
+            }
+            else if (key === 'Tab') {
+                event.preventDefault();
+                this.insertText('    ', '', '');
+            }
+        };
+    }
+    static get observedAttributes() {
+        return [
+            'size',
+            'variant',
+            'mode',
+            'theme',
+            'value',
+            'placeholder',
+            'min-height',
+            'max-height',
+            'auto-height',
+            'readonly',
+            'disabled',
+            'show-toolbar',
+            'show-status',
+            'show-word-count',
+            'show-line-count',
+            'auto-save',
+            'auto-save-interval',
+            'file-upload',
+        ];
+    }
+    connectedCallback() {
+        if (!this.built) {
+            this.built = true;
+            this.build();
+        }
+        this.syncFromAttributes();
+        this.renderMode();
+        this.updateCounts();
+        this.updateStatus();
+        this.setupAutoSave();
+    }
+    disconnectedCallback() {
+        if (this.autoSaveTimer)
+            window.clearInterval(this.autoSaveTimer);
+    }
+    attributeChangedCallback(name) {
+        if (!this.built)
+            return;
+        if (name === 'value' && this.textareaEl) {
+            this.internalValue = this.getAttribute('value') || '';
+            this.textareaEl.value = this.internalValue;
+            this.updatePreview();
+            this.updateCodeView();
+            this.updateCounts();
+            return;
+        }
+        if (name === 'mode') {
+            this.currentMode = this.getAttribute('mode') || 'preview';
+            this.renderMode();
+            return;
+        }
+        if (name === 'auto-save' || name === 'auto-save-interval') {
+            this.setupAutoSave();
+        }
+        this.updateRootClasses();
+    }
+    get value() {
+        return this.internalValue;
+    }
+    set value(next) {
+        this.internalValue = next;
+        this.setAttribute('value', next);
+        if (this.textareaEl)
+            this.textareaEl.value = next;
+        this.updatePreview();
+        this.updateCodeView();
+        this.updateCounts();
+    }
+    getBool(name, fallback = false) {
+        if (!this.hasAttribute(name))
+            return fallback;
+        const value = this.getAttribute(name);
+        return value === '' || value === 'true';
+    }
+    syncFromAttributes() {
+        this.internalValue = this.getAttribute('value') || '';
+        this.currentMode = this.getAttribute('mode') || 'preview';
+        if (this.textareaEl) {
+            this.textareaEl.value = this.internalValue;
+            this.textareaEl.placeholder = this.getAttribute('placeholder') || '마크다운을 입력하세요...';
+            this.textareaEl.readOnly = this.getBool('readonly');
+            this.textareaEl.disabled = this.getBool('disabled');
+            const minHeight = Number(this.getAttribute('min-height') || 200);
+            const maxHeight = Number(this.getAttribute('max-height') || 600);
+            const autoHeight = this.getBool('auto-height');
+            this.textareaEl.style.minHeight = autoHeight ? 'auto' : `${minHeight}px`;
+            this.textareaEl.style.maxHeight = autoHeight ? 'none' : `${maxHeight}px`;
+        }
+        this.updateRootClasses();
+        this.updatePreview();
+        this.updateCodeView();
+    }
+    updateRootClasses() {
+        const size = this.getAttribute('size') || 'm';
+        const variant = this.getAttribute('variant') || 'default';
+        const theme = this.getAttribute('theme') || 'light';
+        this.className = [
+            CLASS,
+            `${CLASS}--size-${size}`,
+            `${CLASS}--variant-${variant}`,
+            `${CLASS}--mode-${this.currentMode}`,
+            `${CLASS}--theme-${theme}`,
+            this.isFocused && `${CLASS}--focused`,
+            this.getBool('disabled') && `${CLASS}--disabled`,
+            this.getBool('readonly') && `${CLASS}--readonly`,
+        ]
+            .filter(Boolean)
+            .join(' ');
+    }
+    markdownToHtml(markdown) {
+        return markdown
+            .replace(/^### (.*$)/gim, '<h3>$1</h3>')
+            .replace(/^## (.*$)/gim, '<h2>$1</h2>')
+            .replace(/^# (.*$)/gim, '<h1>$1</h1>')
+            .replace(/\*\*(.*)\*\*/gim, '<strong>$1</strong>')
+            .replace(/\*(.*)\*/gim, '<em>$1</em>')
+            .replace(/~~(.*)~~/gim, '<del>$1</del>')
+            .replace(/`(.*)`/gim, '<code>$1</code>')
+            .replace(/\[([^\]]+)\]\(([^)]+)\)/gim, '<a href="$2">$1</a>')
+            .replace(/!\[([^\]]*)\]\(([^)]+)\)/gim, '<img alt="$1" src="$2" />')
+            .replace(/^> (.*$)/gim, '<blockquote>$1</blockquote>')
+            .replace(/^- (.*$)/gim, '<ul><li>$1</li></ul>')
+            .replace(/^(\d+)\. (.*$)/gim, '<ol><li>$2</li></ol>')
+            .replace(/\n/gim, '<br />');
+    }
+    updatePreview() {
+        if (this.previewEl) {
+            this.previewEl.innerHTML = this.markdownToHtml(this.internalValue);
+        }
+    }
+    updateCodeView() {
+        if (this.codeViewEl) {
+            const code = this.codeViewEl.querySelector('code');
+            if (code)
+                code.textContent = this.internalValue;
+        }
+    }
+    updateCounts() {
+        this.wordCount = this.internalValue.trim() ? this.internalValue.trim().split(/\s+/).length : 0;
+        this.lineCount = this.internalValue ? this.internalValue.split('\n').length : 0;
+        if (this.wordCountEl)
+            this.wordCountEl.textContent = `단어: ${this.wordCount}`;
+        if (this.lineCountEl)
+            this.lineCountEl.textContent = `라인: ${this.lineCount}`;
+    }
+    updateStatus() {
+        if (!this.statusEl)
+            return;
+        const showStatus = this.getBool('show-status', true);
+        this.statusEl.hidden = !showStatus;
+        if (this.wordCountEl)
+            this.wordCountEl.hidden = !this.getBool('show-word-count', true);
+        if (this.lineCountEl)
+            this.lineCountEl.hidden = !this.getBool('show-line-count', true);
+        if (this.lastSavedEl) {
+            this.lastSavedEl.hidden = !this.lastSaved;
+            if (this.lastSaved)
+                this.lastSavedEl.textContent = `저장됨: ${this.lastSaved.toLocaleTimeString()}`;
+        }
+        if (this.savingEl)
+            this.savingEl.hidden = !this.isSaving;
+    }
+    emitChange() {
+        this.dispatchEvent(new CustomEvent('db-change', {
+            detail: { value: this.internalValue },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    insertText(text, before = '', after = '') {
+        if (!this.textareaEl || this.getBool('disabled') || this.getBool('readonly'))
+            return;
+        const { selectionStart, selectionEnd } = this.textareaEl;
+        const selectedText = this.internalValue.substring(selectionStart, selectionEnd);
+        const newText = before + (selectedText || text) + after;
+        const newValue = this.internalValue.substring(0, selectionStart) + newText + this.internalValue.substring(selectionEnd);
+        this.internalValue = newValue;
+        this.textareaEl.value = newValue;
+        this.emitChange();
+        this.updatePreview();
+        this.updateCodeView();
+        this.updateCounts();
+        const newCursorPos = selectionStart + before.length + (selectedText ? selectedText.length : text.length);
+        window.setTimeout(() => {
+            if (!this.textareaEl)
+                return;
+            this.textareaEl.setSelectionRange(newCursorPos, newCursorPos);
+            this.textareaEl.focus();
+        }, 0);
+    }
+    getDefaultToolbarActions() {
+        return [
+            { id: 'bold', label: 'B', tooltip: '굵게 (Ctrl+B)', shortcut: 'Ctrl+B', action: () => this.insertText('**', '**', '**') },
+            { id: 'italic', label: 'I', tooltip: '기울임 (Ctrl+I)', shortcut: 'Ctrl+I', action: () => this.insertText('*', '*', '*') },
+            { id: 'strikethrough', label: 'S', tooltip: '취소선 (Ctrl+Shift+S)', shortcut: 'Ctrl+Shift+S', action: () => this.insertText('~~', '~~', '~~') },
+            { id: 'separator1', label: '|', separator: true, action: () => { } },
+            { id: 'heading1', label: 'H1', tooltip: '제목 1', action: () => this.insertText('# ', '', '') },
+            { id: 'heading2', label: 'H2', tooltip: '제목 2', action: () => this.insertText('## ', '', '') },
+            { id: 'heading3', label: 'H3', tooltip: '제목 3', action: () => this.insertText('### ', '', '') },
+            { id: 'separator2', label: '|', separator: true, action: () => { } },
+            { id: 'link', label: '', icon: 'share-alt', tooltip: '링크 (Ctrl+K)', shortcut: 'Ctrl+K', action: () => this.insertText('[', '](', ')') },
+            { id: 'image', label: '', icon: 'video', tooltip: '이미지', action: () => this.insertText('![', '](', ')') },
+            { id: 'code', label: '', icon: 'code', tooltip: '인라인 코드 (Ctrl+`)', shortcut: 'Ctrl+`', action: () => this.insertText('`', '`', '`') },
+            { id: 'codeBlock', label: '```', tooltip: '코드 블록', action: () => this.insertText('\n```\n', '', '\n```\n') },
+            { id: 'separator3', label: '|', separator: true, action: () => { } },
+            { id: 'list', label: '•', tooltip: '순서 없는 목록', action: () => this.insertText('- ', '', '') },
+            { id: 'orderedList', label: '1.', tooltip: '순서 있는 목록', action: () => this.insertText('1. ', '', '') },
+            { id: 'quote', label: '"', tooltip: '인용구', action: () => this.insertText('> ', '', '') },
+            { id: 'separator4', label: '|', separator: true, action: () => { } },
+            {
+                id: 'table',
+                label: '⊞',
+                tooltip: '테이블',
+                action: () => this.insertText('\n| 헤더1 | 헤더2 | 헤더3 |\n|-------|-------|-------|\n| 셀1   | 셀2   | 셀3   |\n', '', ''),
+            },
+            { id: 'horizontalRule', label: '—', tooltip: '수평선', action: () => this.insertText('\n---\n', '', '') },
+        ];
+    }
+    renderToolbar() {
+        if (!this.toolbarEl)
+            return;
+        const showToolbar = this.getBool('show-toolbar', true);
+        this.toolbarEl.hidden = !showToolbar;
+        this.toolbarEl.replaceChildren();
+        const modeButtons = document.createElement('div');
+        modeButtons.className = `${CLASS}__mode-buttons`;
+        const modes = [
+            { mode: 'edit', icon: 'write', title: '편집 모드' },
+            { mode: 'preview', icon: 'show', title: '미리보기 모드' },
+            { mode: 'split', icon: 'hide', title: '분할 모드' },
+            { mode: 'code', icon: 'code', title: '코드 보기' },
+        ];
+        modes.forEach(({ mode, icon, title }) => {
+            const button = document.createElement('button');
+            button.type = 'button';
+            button.className = `${CLASS}__mode-button${this.currentMode === mode ? ` ${CLASS}__mode-button--active` : ''}`;
+            button.title = title;
+            button.append(createDbIcon(icon, 16));
+            button.addEventListener('click', () => {
+                this.currentMode = mode;
+                this.updateRootClasses();
+                this.renderMode();
+                this.renderToolbar();
+            });
+            modeButtons.append(button);
+        });
+        this.toolbarEl.append(modeButtons);
+        const separator = document.createElement('div');
+        separator.className = `${CLASS}__toolbar-separator`;
+        this.toolbarEl.append(separator);
+        if (this.currentMode !== 'code') {
+            this.getDefaultToolbarActions().forEach((item) => {
+                const button = document.createElement('button');
+                button.type = 'button';
+                button.className = `${CLASS}__toolbar-item`;
+                button.disabled = this.getBool('disabled');
+                if (item.tooltip)
+                    button.title = item.tooltip;
+                if (item.icon) {
+                    button.append(createDbIcon(item.icon, 16));
+                }
+                else if (item.id === 'bold') {
+                    const strong = document.createElement('strong');
+                    strong.textContent = item.label;
+                    button.append(strong);
+                }
+                else if (item.id === 'italic') {
+                    const em = document.createElement('em');
+                    em.textContent = item.label;
+                    button.append(em);
+                }
+                else if (item.id === 'strikethrough') {
+                    const span = document.createElement('span');
+                    span.style.textDecoration = 'line-through';
+                    span.textContent = item.label;
+                    button.append(span);
+                }
+                else {
+                    button.textContent = item.label;
+                }
+                if (item.shortcut) {
+                    const shortcut = document.createElement('span');
+                    shortcut.className = `${CLASS}__toolbar-shortcut`;
+                    shortcut.textContent = item.shortcut;
+                    button.append(shortcut);
+                }
+                button.addEventListener('click', item.action);
+                this.toolbarEl?.append(button);
+            });
+            if (this.getBool('file-upload')) {
+                const label = document.createElement('label');
+                label.className = `${CLASS}__file-upload`;
+                const input = document.createElement('input');
+                input.type = 'file';
+                input.accept = 'image/*';
+                input.hidden = true;
+                input.addEventListener('change', async () => {
+                    const file = input.files?.[0];
+                    if (!file)
+                        return;
+                    const event = new CustomEvent('db-file-upload', {
+                        detail: { file },
+                        bubbles: true,
+                        composed: true,
+                        cancelable: true,
+                    });
+                    this.dispatchEvent(event);
+                    if (!event.defaultPrevented) {
+                        const url = URL.createObjectURL(file);
+                        this.insertText(`![${file.name}](${url})`);
+                    }
+                    input.value = '';
+                });
+                label.append(input, createDbIcon('upload', 16));
+                this.toolbarEl.append(label);
+            }
+        }
+    }
+    renderMode() {
+        if (!this.editPanelEl || !this.previewPanelEl || !this.codePanelEl)
+            return;
+        const showEdit = this.currentMode === 'edit' || this.currentMode === 'split';
+        const showPreview = this.currentMode === 'preview' || this.currentMode === 'split';
+        const showCode = this.currentMode === 'code';
+        this.editPanelEl.hidden = !showEdit;
+        this.previewPanelEl.hidden = !showPreview;
+        this.codePanelEl.hidden = !showCode;
+        this.updateRootClasses();
+        this.renderToolbar();
+    }
+    setupAutoSave() {
+        if (this.autoSaveTimer)
+            window.clearInterval(this.autoSaveTimer);
+        if (!this.getBool('auto-save'))
+            return;
+        const interval = Number(this.getAttribute('auto-save-interval') || 30000);
+        this.autoSaveTimer = window.setInterval(() => {
+            const initial = this.getAttribute('value') || '';
+            if (this.internalValue && this.internalValue !== initial) {
+                this.isSaving = true;
+                this.updateStatus();
+                this.dispatchEvent(new CustomEvent('db-save', {
+                    detail: { value: this.internalValue },
+                    bubbles: true,
+                    composed: true,
+                }));
+                this.isSaving = false;
+                this.lastSaved = new Date();
+                this.updateStatus();
+            }
+        }, interval);
+    }
+    build() {
+        this.toolbarEl = document.createElement('div');
+        this.toolbarEl.className = `${CLASS}__toolbar`;
+        this.contentEl = document.createElement('div');
+        this.contentEl.className = `${CLASS}__content`;
+        this.editPanelEl = document.createElement('div');
+        this.editPanelEl.className = `${CLASS}__edit-panel`;
+        this.textareaEl = document.createElement('textarea');
+        this.textareaEl.className = `${CLASS}__textarea`;
+        this.textareaEl.addEventListener('input', () => {
+            this.internalValue = this.textareaEl?.value || '';
+            this.emitChange();
+            this.updatePreview();
+            this.updateCodeView();
+            this.updateCounts();
+        });
+        this.textareaEl.addEventListener('focus', () => {
+            this.isFocused = true;
+            this.updateRootClasses();
+            this.dispatchEvent(new CustomEvent('db-focus', { bubbles: true, composed: true }));
+        });
+        this.textareaEl.addEventListener('blur', () => {
+            this.isFocused = false;
+            this.updateRootClasses();
+            this.dispatchEvent(new CustomEvent('db-blur', { bubbles: true, composed: true }));
+        });
+        this.textareaEl.addEventListener('keydown', this.handleKeyDown);
+        this.editPanelEl.append(this.textareaEl);
+        this.previewPanelEl = document.createElement('div');
+        this.previewPanelEl.className = `${CLASS}__preview-panel`;
+        this.previewEl = document.createElement('div');
+        this.previewEl.className = `${CLASS}__preview`;
+        this.previewPanelEl.append(this.previewEl);
+        this.codePanelEl = document.createElement('div');
+        this.codePanelEl.className = `${CLASS}__code-panel`;
+        this.codeViewEl = document.createElement('pre');
+        this.codeViewEl.className = `${CLASS}__code-view`;
+        const code = document.createElement('code');
+        this.codeViewEl.append(code);
+        this.codePanelEl.append(this.codeViewEl);
+        this.contentEl.append(this.editPanelEl, this.previewPanelEl, this.codePanelEl);
+        this.statusEl = document.createElement('div');
+        this.statusEl.className = `${CLASS}__status`;
+        this.wordCountEl = document.createElement('span');
+        this.wordCountEl.className = `${CLASS}__word-count`;
+        this.lineCountEl = document.createElement('span');
+        this.lineCountEl.className = `${CLASS}__line-count`;
+        this.lastSavedEl = document.createElement('span');
+        this.lastSavedEl.className = `${CLASS}__last-saved`;
+        this.savingEl = document.createElement('span');
+        this.savingEl.className = `${CLASS}__saving`;
+        this.savingEl.textContent = '저장 중...';
+        this.statusEl.append(this.wordCountEl, this.lineCountEl, this.lastSavedEl, this.savingEl);
+        this.append(this.toolbarEl, this.contentEl, this.statusEl);
+    }
+}
+if (!customElements.get('db-markdown-editor'))
+    customElements.define('db-markdown-editor', DbMarkdownEditor);
+
+export { DbMarkdownEditor };