podo-ui 1.0.0 → 1.0.2

package/dist/react/atom/editor.js

@@ -368,12 +368,104 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [onChange, addToHistory]);
+    // 이미지를 커서 위치에 삽입하는 함수
+    const insertImageAtCursor = useCallback((src, alt = '') => {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        const range = selection.getRangeAt(0);
+        const img = document.createElement('img');
+        img.src = src;
+        img.alt = alt;
+        img.style.maxWidth = '100%';
+        range.deleteContents();
+        range.insertNode(img);
+        // 커서를 이미지 다음으로 이동
+        const newRange = document.createRange();
+        newRange.setStartAfter(img);
+        newRange.collapse(true);
+        selection.removeAllRanges();
+        selection.addRange(newRange);
+        handleInput();
+    }, []);
+    // 드래그 앤 드롭 이벤트 핸들러
+    const handleDragOver = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+    }, []);
+    const handleDrop = useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        const files = e.dataTransfer?.files;
+        if (!files || files.length === 0)
+            return;
+        // 이미지 파일만 처리
+        for (let i = 0; i < files.length; i++) {
+            const file = files[i];
+            if (file.type.startsWith('image/')) {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    const dataUrl = event.target?.result;
+                    if (dataUrl) {
+                        // 드롭 위치에 커서 설정
+                        if (editorRef.current) {
+                            editorRef.current.focus();
+                        }
+                        insertImageAtCursor(dataUrl, file.name || 'dropped-image');
+                    }
+                };
+                reader.readAsDataURL(file);
+            }
+        }
+    }, [insertImageAtCursor]);
     // 붙여넣기 이벤트 핸들러 - 지원하지 않는 스타일 제거
     const handlePaste = useCallback((e) => {
-        e.preventDefault();
         const clipboardData = e.clipboardData;
         if (!clipboardData)
             return;
+        // 클립보드에서 이미지 파일 확인
+        const items = clipboardData.items;
+        if (items) {
+            for (let i = 0; i < items.length; i++) {
+                const item = items[i];
+                if (item.type.startsWith('image/')) {
+                    e.preventDefault();
+                    const file = item.getAsFile();
+                    if (file) {
+                        const reader = new FileReader();
+                        reader.onload = (event) => {
+                            const dataUrl = event.target?.result;
+                            if (dataUrl) {
+                                insertImageAtCursor(dataUrl, file.name || 'pasted-image');
+                            }
+                        };
+                        reader.readAsDataURL(file);
+                    }
+                    return;
+                }
+            }
+        }
+        // 파일로 붙여넣은 경우 (드래그 앤 드롭 등)
+        const files = clipboardData.files;
+        if (files && files.length > 0) {
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+                if (file.type.startsWith('image/')) {
+                    e.preventDefault();
+                    const reader = new FileReader();
+                    reader.onload = (event) => {
+                        const dataUrl = event.target?.result;
+                        if (dataUrl) {
+                            insertImageAtCursor(dataUrl, file.name || 'pasted-image');
+                        }
+                    };
+                    reader.readAsDataURL(file);
+                    return;
+                }
+            }
+        }
+        // HTML/텍스트 붙여넣기 처리
+        e.preventDefault();
         // HTML 데이터 가져오기
         const html = clipboardData.getData('text/html');
         const text = clipboardData.getData('text/plain');
@@ -2963,7 +3055,7 @@ const Editor = ({ value = '', width = '100%', height = '400px', minHeight, maxHe
                         minHeight: height === 'contents' ? 'auto' : 0,
                         height: height === 'contents' && savedEditorHeight ? `${savedEditorHeight}px` : undefined,
                         resize: 'none'
-                    }, placeholder: placeholder })) : (_jsx("div", { ref: editorRef, id: editorID, className: styles.editorContent, contentEditable: true, onInput: handleInput, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd, onPaste: handlePaste, onClick: handleEditorClick, onContextMenu: handleEditorContextMenu, onKeyUp: () => {
+                    }, placeholder: placeholder })) : (_jsx("div", { ref: editorRef, id: editorID, className: styles.editorContent, contentEditable: true, onInput: handleInput, onCompositionStart: handleCompositionStart, onCompositionEnd: handleCompositionEnd, onPaste: handlePaste, onDragOver: handleDragOver, onDrop: handleDrop, onClick: handleEditorClick, onContextMenu: handleEditorContextMenu, onKeyUp: () => {
                         detectCurrentParagraphStyle();
                         detectCurrentAlign();
                     }, onKeyDown: handleKeyDown, style: {

package/dist/svelte/atom/Avatar.svelte

@@ -40,7 +40,8 @@
     class: className = '',
     alt = 'Avatar',
     onclick,
-  }: Props = $props();
+    ...rest
+  }: Props & Record<string, unknown> = $props();
 
   let wrapperClasses = $derived(
     [styles.wrapper, activityRing && styles.activityRing, className]
@@ -75,6 +76,7 @@
   onkeydown={onclick ? (e) => e.key === 'Enter' && onclick() : undefined}
   role={onclick ? 'button' : undefined}
   tabindex={onclick ? 0 : undefined}
+  {...rest}
 >
   <div
     class={avatarClasses}

package/dist/svelte/atom/Avatar.svelte.d.ts

@@ -25,6 +25,7 @@ interface Props {
     /** Click handler */
     onclick?: () => void;
 }
-declare const Avatar: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const Avatar: import("svelte").Component<$$ComponentProps, {}, "">;
 type Avatar = ReturnType<typeof Avatar>;
 export default Avatar;

package/dist/svelte/atom/Chip.svelte

@@ -32,7 +32,8 @@
     icon,
     ondelete,
     class: className = '',
-  }: Props = $props();
+    ...rest
+  }: Props & Record<string, unknown> = $props();
 
   let chipClasses = $derived(
     [
@@ -48,7 +49,7 @@
   );
 </script>
 
-<div class={chipClasses}>
+<div class={chipClasses} {...rest}>
   {#if icon}
     <i class="icon {icon}"></i>
   {/if}

package/dist/svelte/atom/Chip.svelte.d.ts

@@ -19,6 +19,7 @@ interface Props {
     /** Additional class name */
     class?: string;
 }
-declare const Chip: import("svelte").Component<Props, {}, "">;
+type $$ComponentProps = Props & Record<string, unknown>;
+declare const Chip: import("svelte").Component<$$ComponentProps, {}, "">;
 type Chip = ReturnType<typeof Chip>;
 export default Chip;