@lumir-company/editor 0.4.8 → 0.4.10

package/README.md

@@ -18,6 +18,7 @@
   - [파일명 커스터마이징](#파일명-커스터마이징)
   - [커스텀 업로더](#2-커스텀-업로더)
 - [동영상 업로드 및 임베딩](#동영상-업로드-및-임베딩)
+  - [업로드 진행률 표시](#업로드-진행률-표시-이미지동영상-공통)
 - [이미지·동영상 업로드 상세 가이드](#이미지동영상-업로드-상세-가이드)
 - [이미지·비디오 삭제](#이미지비디오-삭제)
 - [HTML 미리보기](#html-미리보기)
@@ -457,6 +458,29 @@ const imageUrl = await s3Uploader(imageFile);
 - **지원 형식**: MP4, WebM, OGG
 - **삽입 경로**: 붙여넣기, 드래그 앤 드롭, 슬래시 메뉴("Video"), FloatingMenu 이미지/동영상 버튼
 
+### 업로드 진행률 표시 (이미지·동영상 공통)
+
+S3 업로드 시 `s3Upload.onProgress` 콜백을 지정하면 업로드 진행률(0~100%)을 받을 수 있습니다. 에디터는 내부적으로 이 값을 사용해 업로드 중 툴바에 **"n%"** 를 표시합니다. 동영상처럼 대용량 파일은 브라우저가 `progress` 이벤트를 자주 보내지 않을 수 있어, 내부적으로 **보간 로직**을 적용해 0→100만 보이지 않고 중간 진행률이 부드럽게 갱신되도록 했습니다.
+
+```tsx
+<LumirEditor
+  allowVideoUpload={true}
+  s3Upload={{
+    apiEndpoint: "/api/s3/presigned",
+    env: "production",
+    path: "videos",
+    appendUUID: true,
+    onProgress: (percent) => {
+      console.log(`업로드 진행률: ${percent}%`);
+      // 에디터 기본 UI에 이미 표시되며, 필요 시 자체 프로그레스 바 등에 연동 가능
+    },
+  }}
+/>
+```
+
+- **동작**: S3 PUT 요청 시에만 호출됩니다. Presigned URL 요청 단계에서는 호출되지 않습니다.
+- **표시**: `onProgress`를 넘기면 에디터 툴바에 `n%`가 자동 표시되며, 업로드 완료 시 숨겨집니다.
+
 ### 데이터 내부 동영상 임베딩
 
 동영상 블록은 `initialContent` / `onContentChange`에 포함됩니다. 저장 시 `{ type: "video", props: { url: "..." } }` 형태로 블록이 유지됩니다.
@@ -488,14 +512,34 @@ const imageUrl = await s3Uploader(imageFile);
 
 - **MIME**: `image/jpeg`, `image/png`, `image/gif`, `image/webp`, `image/bmp`
 - **확장자**: `.png`, `.jpg`, `.jpeg`, `.gif`, `.webp`, `.bmp`
-- **용량**: 최대 10MB
+- **용량**: 기본 최대 10MB. `maxImageFileSize`(바이트)로 변경 가능.
 - **제외**: SVG (XSS 방지로 업로드 불가)
 
 **동영상** (`allowVideoUpload={true}`일 때)
 
 - **MIME**: `video/mp4`, `video/webm`, `video/ogg`, `video/quicktime`
 - **확장자**: `.mp4`, `.webm`, `.ogg`, `.mov`
-- **용량**: 최대 100MB
+- **용량**: 기본 최대 100MB. `maxVideoFileSize`(바이트)로 변경 가능.
+
+**업로드 타임아웃**: S3 업로드 시 PUT 요청 타임아웃은 `s3Upload.uploadTimeoutMs`로 설정합니다. 미설정 시 120초(120000ms)가 적용됩니다.
+
+**용량 및 타임아웃 사용자 설정**
+
+이미지·동영상 최대 용량과 S3 PUT 타임아웃을 props로 변경할 수 있습니다. 미설정 시 기본값(이미지 10MB, 동영상 100MB, 타임아웃 120초)이 적용됩니다.
+
+```tsx
+<LumirEditor
+  allowVideoUpload={true}
+  maxImageFileSize={5 * 1024 * 1024}   // 5MB
+  maxVideoFileSize={200 * 1024 * 1024} // 200MB
+  s3Upload={{
+    apiEndpoint: "/api/s3/presigned",
+    env: "production",
+    path: "uploads",
+    uploadTimeoutMs: 180000, // 180초 (대용량 동영상 시 연장)
+  }}
+/>
+```
 
 ### 3. 삽입 경로 (공통)
 
@@ -643,7 +687,7 @@ Undo로 블록을 복원해도 이미 삭제 API를 호출했다면 서버 상
 ### 7. 에러 처리
 
 - **지원하지 않는 형식**: 업로드 시 `LumirEditorError`가 발생할 수 있으며, `onError`로 처리할 수 있습니다.
-- **용량 초과**: 이미지 10MB·동영상 100MB를 넘으면 업로드가 거부됩니다.
+- **용량 초과**: 기본 한도(이미지 10MB·동영상 100MB)를 넘으면 업로드가 거부됩니다. `maxImageFileSize`, `maxVideoFileSize`로 한도를 변경할 수 있습니다.
 - **업로드 실패**: `uploadFile` 또는 S3 업로드에서 예외가 나면 해당 파일만 삽입되지 않고, 콘솔에 경고가 출력됩니다.
 
 ```tsx
@@ -1049,8 +1093,10 @@ app.get("/api/link-preview", async (req, res) => {
 | `editable`        | `boolean`                           | `true`      | 편집 가능 여부             |
 | `placeholder`     | `string`                            | `undefined` | 빈 블록 안내 텍스트        |
 | `linkPreview`     | `{ apiEndpoint: string }`           | `undefined` | 링크 프리뷰 설정           |
-| `theme`           | `"light" \| "dark"`                 | `"light"`   | 테마                       |
-| `className`       | `string`                            | `""`        | CSS 클래스                 |
+| `theme`               | `"light" \| "dark"`                 | `"light"`   | 테마                       |
+| `className`           | `string`                            | `""`        | CSS 클래스                 |
+| `maxImageFileSize`    | `number`                            | `undefined` | 이미지 최대 용량(바이트). 미설정 시 10MB |
+| `maxVideoFileSize`    | `number`                            | `undefined` | 동영상 최대 용량(바이트). 미설정 시 100MB |
 
 ### S3UploaderConfig
 
@@ -1065,6 +1111,11 @@ interface S3UploaderConfig {
   fileNameTransform?: (nameWithoutExt: string, file: File) => string; // 확장자 제외한 이름 변환
   appendUUID?: boolean; // true: 파일명 뒤에 UUID 추가 (확장자 앞에 삽입)
   preserveExtension?: boolean; // false: 확장자를 붙이지 않음 (기본: true)
+
+  // 선택 (업로드 동작)
+  onProgress?: (percent: number) => void; // 업로드 진행률 0~100 콜백 (S3 PUT 시만 호출, 중간 진행률 보간 지원)
+  uploadTimeoutMs?: number; // PUT 타임아웃(ms). 미설정 시 120000(120초). 대용량 동영상 시 연장 권장
+  maxRetries?: number; // PUT 실패 시 재시도 횟수. 기본 2(최대 3회 시도)
 }
 ```
 
@@ -1087,6 +1138,9 @@ interface LumirEditorProps {
     fileNameTransform?: (nameWithoutExt: string, file: File) => string; // 확장자 제외한 이름 변환
     appendUUID?: boolean; // UUID 자동 추가 (확장자 앞)
     preserveExtension?: boolean; // 확장자 자동 붙이기 (기본: true)
+    onProgress?: (percent: number) => void; // 업로드 진행률 0~100 (이미지·동영상 공통, 중간 진행률 보간)
+    uploadTimeoutMs?: number; // PUT 타임아웃(ms). 기본 120000
+    maxRetries?: number; // PUT 재시도 횟수. 기본 2
   };
 
   // === 콜백 ===
@@ -1124,6 +1178,8 @@ interface LumirEditorProps {
   allowVideoUpload?: boolean; // 비디오 업로드 허용 (기본: false)
   allowAudioUpload?: boolean; // 오디오 업로드 허용 (기본: false)
   allowFileUpload?: boolean; // 일반 파일 업로드 허용 (기본: false)
+  maxImageFileSize?: number; // 이미지 최대 파일 크기(바이트). 미설정 시 10MB
+  maxVideoFileSize?: number; // 동영상 최대 파일 크기(바이트). 미설정 시 100MB
 }
 ```
 
@@ -1328,9 +1384,25 @@ const url = await uploader(imageFile);
 
 ## 변경 로그
 
+### v0.4.10
+
+- **동영상·이미지 업로드 진행률 표시**
+  - S3 업로드 시 진행률이 0만 보이다가 100으로 바로 완료되던 문제 개선
+  - `xhr.upload.onprogress`와 **보간 타이머**를 함께 사용해 중간 진행률(0→…→100)이 부드럽게 갱신되도록 변경
+  - 업로드 시작 직후 `onProgress(0)` 호출, 완료 시 `onProgress(100)` 보장
+  - README: `s3Upload.onProgress` 설명 및 업로드 진행률 표시 섹션 추가
+  - README: `S3UploaderConfig`에 `onProgress`, `uploadTimeoutMs`, `maxRetries` 문서화
+
+### v0.4.9
+
+- **업로드 용량·타임아웃 사용자 설정**
+  - `maxImageFileSize`, `maxVideoFileSize` prop 추가 (미설정 시 기본 10MB/100MB)
+  - `isImageFile(file, maxSize?)`, `isVideoFile(file, maxSize?)` 시그니처 확장
+  - README: 용량 및 타임아웃 설정 예시 및 `s3Upload.uploadTimeoutMs` 안내 보강
+
 ### v0.4.8
 
-- Redme update (video & image upload)
+- README update (video & image upload)
 - 버전 배포
 
 ### v0.4.6

package/dist/index.d.mts

@@ -88,6 +88,10 @@ interface LumirEditorProps {
     allowVideoUpload?: boolean;
     allowAudioUpload?: boolean;
     allowFileUpload?: boolean;
+    /** 이미지 최대 파일 크기(바이트). 미설정 시 기본 제한(10MB) 사용 */
+    maxImageFileSize?: number;
+    /** 동영상 최대 파일 크기(바이트). 미설정 시 기본 제한(100MB) 사용 */
+    maxVideoFileSize?: number;
     tables?: {
         splitCells?: boolean;
         cellBackgroundColor?: boolean;
@@ -204,7 +208,7 @@ declare class EditorConfig {
      */
     static getDisabledExtensions(userExtensions?: string[], allowVideo?: boolean, allowAudio?: boolean, allowFile?: boolean): string[];
 }
-declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, s3Upload, tables, heading, defaultStyles, disableExtensions, tabBehavior, trailingBlock, allowVideoUpload, allowAudioUpload, allowFileUpload, linkPreview, editable, theme, formattingToolbar, linkToolbar, sideMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, placeholder, sideMenuAddButton, floatingMenu, floatingMenuPosition, onContentChange, onError, onImageDelete, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
+declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, s3Upload, tables, heading, defaultStyles, disableExtensions, tabBehavior, trailingBlock, allowVideoUpload, allowAudioUpload, allowFileUpload, maxImageFileSize, maxVideoFileSize, linkPreview, editable, theme, formattingToolbar, linkToolbar, sideMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, placeholder, sideMenuAddButton, floatingMenu, floatingMenuPosition, onContentChange, onError, onImageDelete, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: (string | undefined | null | false)[]): string;
 

package/dist/index.d.ts

@@ -88,6 +88,10 @@ interface LumirEditorProps {
     allowVideoUpload?: boolean;
     allowAudioUpload?: boolean;
     allowFileUpload?: boolean;
+    /** 이미지 최대 파일 크기(바이트). 미설정 시 기본 제한(10MB) 사용 */
+    maxImageFileSize?: number;
+    /** 동영상 최대 파일 크기(바이트). 미설정 시 기본 제한(100MB) 사용 */
+    maxVideoFileSize?: number;
     tables?: {
         splitCells?: boolean;
         cellBackgroundColor?: boolean;
@@ -204,7 +208,7 @@ declare class EditorConfig {
      */
     static getDisabledExtensions(userExtensions?: string[], allowVideo?: boolean, allowAudio?: boolean, allowFile?: boolean): string[];
 }
-declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, s3Upload, tables, heading, defaultStyles, disableExtensions, tabBehavior, trailingBlock, allowVideoUpload, allowAudioUpload, allowFileUpload, linkPreview, editable, theme, formattingToolbar, linkToolbar, sideMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, placeholder, sideMenuAddButton, floatingMenu, floatingMenuPosition, onContentChange, onError, onImageDelete, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
+declare function LumirEditor({ initialContent, initialEmptyBlocks, uploadFile, s3Upload, tables, heading, defaultStyles, disableExtensions, tabBehavior, trailingBlock, allowVideoUpload, allowAudioUpload, allowFileUpload, maxImageFileSize, maxVideoFileSize, linkPreview, editable, theme, formattingToolbar, linkToolbar, sideMenu, emojiPicker, filePanel, tableHandles, onSelectionChange, className, placeholder, sideMenuAddButton, floatingMenu, floatingMenuPosition, onContentChange, onError, onImageDelete, }: LumirEditorProps): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: (string | undefined | null | false)[]): string;
 

package/dist/index.js

@@ -188,19 +188,54 @@ var createS3Uploader = (config) => {
             await new Promise((resolve, reject) => {
               const xhr = new XMLHttpRequest();
               xhr.timeout = uploadTimeoutMs;
+              let lastReported = -1;
+              const REPORT_INTERVAL_MS = 100;
+              const simulatedCap = 90;
+              let simulatedPercent = 0;
+              const simId = setInterval(() => {
+                if (simulatedPercent >= simulatedCap) return;
+                simulatedPercent = Math.min(simulatedCap, simulatedPercent + 3);
+                const p = Math.min(100, simulatedPercent);
+                if (p > lastReported) {
+                  lastReported = p;
+                  onProgress(p);
+                }
+              }, REPORT_INTERVAL_MS);
+              const clearSim = () => {
+                clearInterval(simId);
+              };
               xhr.upload.onprogress = (e) => {
                 if (e.lengthComputable) {
-                  onProgress(Math.min(100, Math.round(e.loaded / e.total * 100)));
+                  const p = Math.min(100, Math.round(e.loaded / e.total * 100));
+                  if (p >= simulatedCap) clearSim();
+                  const toReport = Math.max(p, simulatedPercent);
+                  if (toReport > lastReported) {
+                    lastReported = toReport;
+                    onProgress(toReport);
+                  }
                 }
               };
               xhr.onload = () => {
-                if (xhr.status >= 200 && xhr.status < 300) resolve();
-                else reject(new Error(`Failed to upload file: ${xhr.statusText}`));
+                clearSim();
+                if (xhr.status >= 200 && xhr.status < 300) {
+                  if (lastReported < 100) onProgress(100);
+                  resolve();
+                } else {
+                  reject(new Error(`Failed to upload file: ${xhr.statusText}`));
+                }
+              };
+              xhr.onerror = () => {
+                clearSim();
+                reject(new Error("Upload failed"));
+              };
+              xhr.ontimeout = () => {
+                clearSim();
+                reject(new Error("Upload timeout"));
               };
-              xhr.onerror = () => reject(new Error("Upload failed"));
-              xhr.ontimeout = () => reject(new Error("Upload timeout"));
               xhr.open("PUT", validatedPresignedUrl);
               xhr.setRequestHeader("Content-Type", file.type || "application/octet-stream");
+              onProgress(0);
+              lastReported = 0;
               xhr.send(file);
             });
           } else {
@@ -2817,7 +2852,7 @@ var ALLOWED_VIDEO_EXTENSIONS = [
 // src/components/LumirEditor.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var DEBUG_LOG = (loc, msg, data) => {
-  fetch("http://127.0.0.1:7686/ingest/1f8ee1c5-0cf0-4ae7-91ed-5ea7ed17130a", {
+  const p = fetch("http://127.0.0.1:7686/ingest/1f8ee1c5-0cf0-4ae7-91ed-5ea7ed17130a", {
     method: "POST",
     headers: { "Content-Type": "application/json", "X-Debug-Session-Id": "b73262" },
     body: JSON.stringify({
@@ -2827,7 +2862,8 @@ var DEBUG_LOG = (loc, msg, data) => {
       data,
       timestamp: Date.now()
     })
-  }).catch(() => {
+  });
+  if (p && typeof p.catch === "function") p.catch(() => {
   });
 };
 var ContentUtils = class {
@@ -2948,8 +2984,9 @@ var EditorConfig = class {
     return Array.from(set);
   }
 };
-var isImageFile = (file) => {
-  if (file.size === 0 || file.size > MAX_FILE_SIZE) {
+var isImageFile = (file, maxSize) => {
+  const limit = maxSize !== void 0 ? maxSize : MAX_FILE_SIZE;
+  if (file.size === 0 || file.size > limit) {
     return false;
   }
   const fileName = file.name?.toLowerCase() || "";
@@ -2958,8 +2995,9 @@ var isImageFile = (file) => {
   }
   return file.type?.startsWith("image/") || !file.type && /\.(png|jpe?g|gif|webp|bmp)$/i.test(fileName);
 };
-var isVideoFile = (file) => {
-  const sizeOk = file.size > 0 && file.size <= MAX_VIDEO_FILE_SIZE;
+var isVideoFile = (file, maxSize) => {
+  const limit = maxSize !== void 0 ? maxSize : MAX_VIDEO_FILE_SIZE;
+  const sizeOk = file.size > 0 && file.size <= limit;
   const fileName = file.name?.toLowerCase() || "";
   const mimeMatch = ALLOWED_VIDEO_MIME_TYPES.has(file.type);
   const videoPrefix = typeof file.type === "string" && file.type.startsWith("video/");
@@ -3100,6 +3138,8 @@ function LumirEditor({
   allowVideoUpload = false,
   allowAudioUpload = false,
   allowFileUpload = false,
+  maxImageFileSize,
+  maxVideoFileSize,
   // link preview
   linkPreview,
   // view options
@@ -3214,8 +3254,8 @@ function LumirEditor({
       tabBehavior,
       trailingBlock,
       uploadFile: async (file) => {
-        const allowedImage = isImageFile(file);
-        const allowedVideo = allowVideoUpload && isVideoFile(file);
+        const allowedImage = isImageFile(file, maxImageFileSize);
+        const allowedVideo = allowVideoUpload && isVideoFile(file, maxVideoFileSize);
         DEBUG_LOG("uploadFile:step1:entry", "editor uploadFile callback invoked", {
           fileName: file.name,
           fileType: file.type,
@@ -3309,7 +3349,7 @@ function LumirEditor({
         const fileList = event?.clipboardData?.files ?? null;
         const files = fileList ? Array.from(fileList) : [];
         const acceptedFiles = files.filter(
-          (f) => isImageFile(f) || allowVideoUpload && isVideoFile(f)
+          (f) => isImageFile(f, maxImageFileSize) || allowVideoUpload && isVideoFile(f, maxVideoFileSize)
         );
         DEBUG_LOG("paste:step1:files", "paste clipboard files", {
           filesCount: files.length,
@@ -3335,11 +3375,11 @@ function LumirEditor({
                   fileType: file.type
                 });
                 const url = await editor2.uploadFile(file);
-                if (isImageFile(file)) {
+                if (isImageFile(file, maxImageFileSize)) {
                   editor2.pasteHTML(
                     `<img src="${escapeHtml(url)}" alt="image" />`
                   );
-                } else if (isVideoFile(file)) {
+                } else if (isVideoFile(file, maxVideoFileSize)) {
                   const currentBlock = editor2.getTextCursorPosition().block;
                   editor2.insertBlocks(
                     [{ type: "video", props: { url } }],
@@ -3432,8 +3472,8 @@ function LumirEditor({
       e.stopPropagation();
       const items = Array.from(e.dataTransfer.items ?? []);
       const files = items.filter((it) => it.kind === "file").map((it) => it.getAsFile()).filter((f) => !!f);
-      const imageFiles = files.filter(isImageFile);
-      const videoFiles = allowVideoUpload ? files.filter(isVideoFile) : [];
+      const imageFiles = files.filter((f) => isImageFile(f, maxImageFileSize));
+      const videoFiles = allowVideoUpload ? files.filter((f) => isVideoFile(f, maxVideoFileSize)) : [];
       const htmlFiles = files.filter(isHtmlFile);
       DEBUG_LOG("drop:step1:files", "drop received", {
         filesCount: files.length,
@@ -3445,8 +3485,8 @@ function LumirEditor({
           name: files[0].name,
           type: files[0].type,
           size: files[0].size,
-          isImage: isImageFile(files[0]),
-          isVideo: isVideoFile(files[0])
+          isImage: isImageFile(files[0], maxImageFileSize),
+          isVideo: isVideoFile(files[0], maxVideoFileSize)
         } : null
       });
       if (imageFiles.length === 0 && htmlFiles.length === 0 && videoFiles.length === 0)
@@ -3581,8 +3621,8 @@ function LumirEditor({
                 });
                 const blockToInsertAfter = floatingMenuBlockRef.current;
                 if (file && editor.uploadFile && blockToInsertAfter) {
-                  const allowedImage = isImageFile(file);
-                  const allowedVideo = allowVideoUpload && isVideoFile(file);
+                  const allowedImage = isImageFile(file, maxImageFileSize);
+                  const allowedVideo = allowVideoUpload && isVideoFile(file, maxVideoFileSize);
                   DEBUG_LOG("FloatingMenu:step4:fileCheck", "allowed check", {
                     fileName: file.name,
                     allowedImage,