podo-ui 0.7.0 → 0.7.2

package/dist/react/atom/editor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../react/atom/editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,IAAI,GACJ,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,0GAWT,WAAW,4CAovIb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"editor.d.ts","sourceRoot":"","sources":["../../../react/atom/editor.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,CAAC,EAAE,MAAM,KAAK,CAAC;AAGxB,MAAM,MAAM,WAAW,GACnB,WAAW,GACX,WAAW,GACX,YAAY,GACZ,OAAO,GACP,OAAO,GACP,MAAM,GACN,OAAO,GACP,MAAM,GACN,OAAO,GACP,SAAS,GACT,IAAI,GACJ,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,WAAW;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,SAAS,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC/B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,WAAW,EAAE,CAAC;CACzB;AAED,QAAA,MAAM,MAAM,0GAWT,WAAW,4CAi0Ib,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/react/atom/editor.js

@@ -47,7 +47,8 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
     const [editYoutubeWidth, setEditYoutubeWidth] = useState('100%'); // 편집 중인 유튜브 크기
     const [editYoutubeAlign, setEditYoutubeAlign] = useState('center'); // 편집 중인 유튜브 정렬
     const [isCodeView, setIsCodeView] = useState(false); // 코드보기 모드
-    const [codeContent, setCodeContent] = useState(''); // 코드보기 내용
+    const [codeContent, setCodeContent] = useState(''); // 코드보기 내용 (포맷팅된 버전)
+    const [originalHtml, setOriginalHtml] = useState(''); // 원본 HTML (포맷팅 없음)
     const [savedEditorHeight, setSavedEditorHeight] = useState(null); // 위지윅 에디터 높이 저장
     // Undo/Redo 히스토리 관리
     const [history, setHistory] = useState([value]);
@@ -380,12 +381,11 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
             // 임시 div를 만들어서 HTML 파싱
             const tempDiv = document.createElement('div');
             tempDiv.innerHTML = html;
-            // 지원하는 태그와 스타일 정의
+            // 지원하는 태그 정의
             const allowedTags = ['P', 'BR', 'STRONG', 'B', 'EM', 'I', 'U', 'S', 'STRIKE', 'DEL',
                 'H1', 'H2', 'H3', 'H4', 'H5', 'H6', 'BLOCKQUOTE', 'PRE',
                 'UL', 'OL', 'LI', 'A', 'IMG', 'SPAN', 'DIV', 'HR',
                 'TABLE', 'THEAD', 'TBODY', 'TFOOT', 'TR', 'TH', 'TD'];
-            const allowedStyles = ['color', 'background-color', 'text-align'];
             // 모든 요소를 순회하면서 정리
             const cleanElement = (element) => {
                 const tagName = element.tagName;
@@ -439,28 +439,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                 if (tagName === 'TH') {
                     newElement.style.fontWeight = 'bold';
                 }
-                // 스타일 복원 (허용된 것만)
-                if (element instanceof HTMLElement && element.style) {
-                    // 테이블 셀의 경우 배경색과 정렬만 허용
-                    if (tagName === 'TD' || tagName === 'TH') {
-                        const cellAllowedStyles = ['background-color', 'text-align'];
-                        cellAllowedStyles.forEach(styleName => {
-                            const value = element.style.getPropertyValue(styleName);
-                            if (value) {
-                                newElement.style.setProperty(styleName, value);
-                            }
-                        });
-                    }
-                    else {
-                        // 일반 요소는 허용된 스타일만
-                        allowedStyles.forEach(styleName => {
-                            const value = element.style.getPropertyValue(styleName);
-                            if (value) {
-                                newElement.style.setProperty(styleName, value);
-                            }
-                        });
-                    }
-                }
+                // 붙여넣기된 요소의 style 속성은 모두 제거 (위 테이블 기본 스타일만 유지)
                 // 자식 요소 처리
                 Array.from(element.childNodes).forEach(child => {
                     if (child.nodeType === Node.ELEMENT_NODE) {
@@ -593,8 +572,9 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
             setSavedEditorHeight(null); // 저장된 높이 초기화
             // 다음 렌더링 사이클에서 에디터 내용 업데이트
             setTimeout(() => {
-                if (editorRef.current && codeContent !== undefined) {
-                    editorRef.current.innerHTML = codeContent;
+                if (editorRef.current && originalHtml !== undefined) {
+                    // 원본 HTML을 사용 (포맷팅되지 않은 버전)
+                    editorRef.current.innerHTML = originalHtml;
                     handleInput();
                 }
             }, 0);
@@ -611,48 +591,140 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                     const currentHeight = editorRef.current.scrollHeight;
                     setSavedEditorHeight(currentHeight);
                 }
-                // 현재 HTML을 포맷팅
+                // 원본 HTML 저장 (포맷팅 없음)
                 const html = editorRef.current.innerHTML;
+                setOriginalHtml(html);
+                // 표시용으로 포맷팅된 HTML 생성
                 const formattedHtml = formatHtml(html);
                 setCodeContent(formattedHtml);
                 setIsCodeView(true);
             }
         }
     };
-    // HTML 포맷팅 함수
+    // HTML 포맷팅 함수 (beautify)
     const formatHtml = (html) => {
-        // 기본적인 HTML 포맷팅
-        const formatted = html
-            .replace(/></g, '>\n<') // 태그 사이에 줄바꿈 추가
-            .replace(/(<div|<p|<h[1-6]|<ul|<ol|<li|<blockquote)/gi, '\n$1') // 블록 요소 앞에 줄바꿈
-            .replace(/(<\/div>|<\/p>|<\/h[1-6]>|<\/ul>|<\/ol>|<\/li>|<\/blockquote>)/gi, '$1\n'); // 블록 요소 뒤에 줄바꿈
-        // 들여쓰기 추가
-        const lines = formatted.split('\n');
+        let formatted = '';
         let indentLevel = 0;
-        const indentedLines = lines.map(line => {
-            const trimmed = line.trim();
-            if (!trimmed)
-                return '';
-            // 닫는 태그인 경우 들여쓰기 레벨 감소
-            if (trimmed.startsWith('</')) {
-                indentLevel = Math.max(0, indentLevel - 1);
-                const indented = '  '.repeat(indentLevel) + trimmed;
-                return indented;
-            }
-            // 자체 닫는 태그가 아닌 여는 태그인 경우
-            const indented = '  '.repeat(indentLevel) + trimmed;
-            if (trimmed.startsWith('<') && !trimmed.startsWith('<!') &&
-                !trimmed.endsWith('/>') && trimmed.includes('>') &&
-                !trimmed.includes('</')) {
-                indentLevel++;
-            }
-            return indented;
-        });
-        return indentedLines.filter(line => line !== '').join('\n');
+        const indentSize = 2;
+        // 블록 레벨 요소 정의
+        const blockElements = [
+            'div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6',
+            'ul', 'ol', 'li', 'blockquote', 'pre', 'table',
+            'thead', 'tbody', 'tr', 'td', 'th', 'section',
+            'article', 'header', 'footer', 'nav', 'aside', 'main'
+        ];
+        // 인라인 요소 정의
+        const inlineElements = ['span', 'a', 'strong', 'b', 'em', 'i', 'u', 'code', 'small', 'sub', 'sup', 'mark'];
+        // HTML을 토큰으로 분리
+        const tokens = [];
+        let current = '';
+        let inTag = false;
+        for (let i = 0; i < html.length; i++) {
+            const char = html[i];
+            if (char === '<') {
+                if (current.trim()) {
+                    tokens.push(current);
+                }
+                current = char;
+                inTag = true;
+            }
+            else if (char === '>' && inTag) {
+                current += char;
+                tokens.push(current);
+                current = '';
+                inTag = false;
+            }
+            else {
+                current += char;
+            }
+        }
+        if (current.trim()) {
+            tokens.push(current);
+        }
+        // 토큰을 순회하며 포맷팅
+        for (let i = 0; i < tokens.length; i++) {
+            const token = tokens[i];
+            const trimmedToken = token.trim();
+            if (!trimmedToken)
+                continue;
+            const prevToken = i > 0 ? tokens[i - 1]?.trim() : '';
+            // 태그인 경우
+            if (trimmedToken.startsWith('<')) {
+                // 닫는 태그
+                if (trimmedToken.startsWith('</')) {
+                    const tagName = trimmedToken.match(/<\/(\w+)/)?.[1]?.toLowerCase();
+                    if (tagName && blockElements.includes(tagName)) {
+                        indentLevel = Math.max(0, indentLevel - 1);
+                        formatted += '\n' + ' '.repeat(indentLevel * indentSize) + trimmedToken;
+                    }
+                    else {
+                        formatted += trimmedToken;
+                    }
+                }
+                // 자체 닫는 태그 (self-closing)
+                else if (trimmedToken.endsWith('/>')) {
+                    const tagName = trimmedToken.match(/<(\w+)/)?.[1]?.toLowerCase();
+                    if (tagName && blockElements.includes(tagName)) {
+                        formatted += '\n' + ' '.repeat(indentLevel * indentSize) + trimmedToken;
+                    }
+                    else {
+                        formatted += trimmedToken;
+                    }
+                }
+                // 여는 태그
+                else {
+                    const tagName = trimmedToken.match(/<(\w+)/)?.[1]?.toLowerCase();
+                    // br 태그 특별 처리: 줄바꿈 후 다음 요소는 현재 레벨 유지
+                    if (tagName === 'br') {
+                        formatted += trimmedToken;
+                    }
+                    else if (tagName && blockElements.includes(tagName)) {
+                        formatted += '\n' + ' '.repeat(indentLevel * indentSize) + trimmedToken;
+                        // 여는 태그와 닫는 태그가 같은 줄에 있지 않으면 들여쓰기 증가
+                        const nextToken = tokens[i + 1];
+                        const closingTag = `</${tagName}>`;
+                        if (!nextToken || !nextToken.includes(closingTag)) {
+                            indentLevel++;
+                        }
+                    }
+                    else {
+                        // 인라인 요소
+                        // br 태그 직후인 경우 줄바꿈과 들여쓰기 추가
+                        if (prevToken === '<br>' || prevToken === '<br/>') {
+                            formatted += '\n' + ' '.repeat(indentLevel * indentSize) + trimmedToken;
+                        }
+                        else {
+                            formatted += trimmedToken;
+                        }
+                    }
+                }
+            }
+            // 텍스트 노드
+            else {
+                const nextToken = tokens[i + 1];
+                // br 태그 직후인 경우, 이미 줄바꿈과 들여쓰기가 추가되어 있음
+                if (prevToken === '<br>' || prevToken === '<br/>') {
+                    formatted += trimmedToken;
+                }
+                // 이전이나 다음 토큰이 인라인 요소면 공백 없이 추가
+                else if (prevToken && inlineElements.some(tag => prevToken.includes(`<${tag}`)) ||
+                    nextToken && inlineElements.some(tag => nextToken.includes(`</${tag}`))) {
+                    formatted += trimmedToken;
+                }
+                else {
+                    formatted += trimmedToken;
+                }
+            }
+        }
+        // 앞뒤 공백 제거 및 연속된 빈 줄 정리
+        return formatted.trim().replace(/\n\s*\n\s*\n/g, '\n\n');
     };
     // 코드 에디터 내용 변경 처리
     const handleCodeChange = (e) => {
-        setCodeContent(e.target.value);
+        const newContent = e.target.value;
+        setCodeContent(newContent);
+        // 사용자가 코드를 수정하면 원본 HTML도 업데이트
+        setOriginalHtml(newContent);
     };
     const applyParagraphStyle = (value) => {
         // 빈 값이면 본문으로 설정

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "podo-ui",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "type": "module",
   "author": "hada0127 <work@tarucy.net>",
   "license": "MIT",