@designbasekorea/ui-wc 0.5.6 → 0.6.0

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

@@ -1,458 +1 @@
-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 };
+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};