@lumir-company/editor 0.4.8 → 0.4.9

package/README.md

@@ -488,14 +488,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 +663,7 @@ Undo로 블록을 복원해도 이미 삭제 API를 호출했다면 서버 상
 ### 7. 에러 처리
 
 - **지원하지 않는 형식**: 업로드 시 `LumirEditorError`가 발생할 수 있으며, `onError`로 처리할 수 있습니다.
-- **용량 초과**: 이미지 10MB·동영상 100MB를 넘으면 업로드가 거부됩니다.
+- **용량 초과**: 기본 한도(이미지 10MB·동영상 100MB)를 넘으면 업로드가 거부됩니다. `maxImageFileSize`, `maxVideoFileSize`로 한도를 변경할 수 있습니다.
 - **업로드 실패**: `uploadFile` 또는 S3 업로드에서 예외가 나면 해당 파일만 삽입되지 않고, 콘솔에 경고가 출력됩니다.
 
 ```tsx
@@ -1049,8 +1069,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
 
@@ -1124,6 +1146,8 @@ interface LumirEditorProps {
   allowVideoUpload?: boolean; // 비디오 업로드 허용 (기본: false)
   allowAudioUpload?: boolean; // 오디오 업로드 허용 (기본: false)
   allowFileUpload?: boolean; // 일반 파일 업로드 허용 (기본: false)
+  maxImageFileSize?: number; // 이미지 최대 파일 크기(바이트). 미설정 시 10MB
+  maxVideoFileSize?: number; // 동영상 최대 파일 크기(바이트). 미설정 시 100MB
 }
 ```
 
@@ -1328,9 +1352,16 @@ const url = await uploader(imageFile);
 
 ## 변경 로그
 
+### 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

@@ -2817,7 +2817,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 +2827,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 +2949,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 +2960,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 +3103,8 @@ function LumirEditor({
   allowVideoUpload = false,
   allowAudioUpload = false,
   allowFileUpload = false,
+  maxImageFileSize,
+  maxVideoFileSize,
   // link preview
   linkPreview,
   // view options
@@ -3214,8 +3219,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 +3314,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 +3340,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 +3437,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 +3450,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 +3586,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,