@lumir-company/editor 0.4.3 → 0.4.5

package/dist/index.js

@@ -91,7 +91,10 @@ var createS3Uploader = (config) => {
     path,
     fileNameTransform,
     appendUUID,
-    preserveExtension = true
+    preserveExtension = true,
+    onProgress,
+    uploadTimeoutMs = 12e4,
+    maxRetries = 2
   } = config;
   if (!apiEndpoint || apiEndpoint.trim() === "") {
     throw new Error(
@@ -130,6 +133,15 @@ var createS3Uploader = (config) => {
     }
     return `${env}/${path}/${filename}`;
   };
+  const debugLog = (loc, msg, data) => {
+    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({ sessionId: "b73262", location: loc, message: msg, data, timestamp: Date.now() })
+    });
+    if (p && typeof p.catch === "function") p.catch(() => {
+    });
+  };
   return async (file) => {
     try {
       if (!apiEndpoint || apiEndpoint.trim() === "") {
@@ -138,11 +150,26 @@ var createS3Uploader = (config) => {
         );
       }
       const fileName = generateHierarchicalFileName(file);
-      const response = await fetch(
-        `${apiEndpoint}?key=${encodeURIComponent(fileName)}`
-      );
+      const contentType = file.type || "application/octet-stream";
+      const presignedUrlFull = `${apiEndpoint}?key=${encodeURIComponent(fileName)}&contentType=${encodeURIComponent(contentType)}`;
+      const tPresigned = Date.now();
+      debugLog("s3:step1:presignedReq", "fetching presigned URL", {
+        fileName,
+        contentType,
+        apiEndpoint
+      });
+      const response = await fetch(presignedUrlFull);
+      debugLog("s3:step2:presignedRes", "presigned response", {
+        ok: response.ok,
+        status: response.status,
+        elapsedMs: Date.now() - tPresigned
+      });
       if (!response.ok) {
         const errorText = await response.text() || "";
+        debugLog("s3:step2b:presignedErr", "presigned failed", {
+          status: response.status,
+          errorText: errorText.slice(0, 200)
+        });
         throw new Error(
           `Failed to get presigned URL: ${response.statusText}, ${errorText}`
         );
@@ -151,17 +178,64 @@ var createS3Uploader = (config) => {
       const { presignedUrl, publicUrl } = responseData;
       const validatedPresignedUrl = validateS3Url(presignedUrl, "presignedUrl");
       const validatedPublicUrl = validateS3Url(publicUrl, "publicUrl");
-      const uploadResponse = await fetch(validatedPresignedUrl, {
-        method: "PUT",
-        headers: {
-          "Content-Type": file.type || "application/octet-stream"
-        },
-        body: file
-      });
-      if (!uploadResponse.ok) {
-        throw new Error(`Failed to upload file: ${uploadResponse.statusText}`);
+      const tPut = Date.now();
+      debugLog("s3:step3:putReq", "S3 PUT request", { publicUrlLen: validatedPublicUrl?.length });
+      let lastError;
+      const attempts = maxRetries + 1;
+      for (let attempt = 0; attempt < attempts; attempt++) {
+        try {
+          if (onProgress && typeof XMLHttpRequest !== "undefined") {
+            await new Promise((resolve, reject) => {
+              const xhr = new XMLHttpRequest();
+              xhr.timeout = uploadTimeoutMs;
+              xhr.upload.onprogress = (e) => {
+                if (e.lengthComputable) {
+                  onProgress(Math.min(100, Math.round(e.loaded / e.total * 100)));
+                }
+              };
+              xhr.onload = () => {
+                if (xhr.status >= 200 && xhr.status < 300) resolve();
+                else reject(new Error(`Failed to upload file: ${xhr.statusText}`));
+              };
+              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");
+              xhr.send(file);
+            });
+          } else {
+            const controller = new AbortController();
+            const timeoutId = setTimeout(() => controller.abort(), uploadTimeoutMs);
+            const uploadResponse = await fetch(validatedPresignedUrl, {
+              method: "PUT",
+              headers: {
+                "Content-Type": file.type || "application/octet-stream"
+              },
+              body: file,
+              signal: controller.signal
+            });
+            clearTimeout(timeoutId);
+            debugLog("s3:step4:putRes", "S3 PUT response", {
+              ok: uploadResponse.ok,
+              status: uploadResponse.status,
+              putElapsedMs: Date.now() - tPut
+            });
+            if (!uploadResponse.ok) {
+              throw new Error(`Failed to upload file: ${uploadResponse.statusText}`);
+            }
+          }
+          debugLog("s3:step5:return", "returning publicUrl", { urlPrefix: validatedPublicUrl.slice(0, 80) });
+          return validatedPublicUrl;
+        } catch (err) {
+          lastError = err instanceof Error ? err : new Error(String(err));
+          if (attempt < attempts - 1) {
+            debugLog("s3:putRetry", "PUT failed, retrying", { attempt: attempt + 1, attempts });
+          } else {
+            throw lastError;
+          }
+        }
       }
-      return validatedPublicUrl;
+      throw lastError ?? new Error("Upload failed");
     } catch (error) {
       console.error("S3 upload failed:", error);
       throw error;
@@ -2438,15 +2512,14 @@ var LumirEditorError = class _LumirEditorError extends Error {
   }
   /**
    * 잘못된 파일 형식 에러 생성
+   * @param allowVideoUpload true이면 "image and video" 메시지 사용
    */
-  static invalidFileType(fileName) {
-    return new _LumirEditorError(
-      `Invalid file type: ${fileName}. Only image files are allowed.`,
-      {
-        code: "INVALID_FILE_TYPE",
-        context: { fileName }
-      }
-    );
+  static invalidFileType(fileName, allowVideoUpload) {
+    const message = allowVideoUpload === true ? `Invalid file type: ${fileName}. Only image and video files are allowed.` : `Invalid file type: ${fileName}. Only image files are allowed.`;
+    return new _LumirEditorError(message, {
+      code: "INVALID_FILE_TYPE",
+      context: { fileName }
+    });
   }
   /**
    * S3 설정 에러 생성
@@ -2469,10 +2542,38 @@ var LumirEditorError = class _LumirEditorError extends Error {
 
 // src/constants/limits.ts
 var MAX_FILE_SIZE = 10 * 1024 * 1024;
+var MAX_VIDEO_FILE_SIZE = 100 * 1024 * 1024;
 var BLOCKED_EXTENSIONS = [".svg", ".svgz"];
+var ALLOWED_VIDEO_MIME_TYPES = /* @__PURE__ */ new Set([
+  "video/mp4",
+  "video/webm",
+  "video/ogg",
+  "video/quicktime"
+  // .mov
+]);
+var ALLOWED_VIDEO_EXTENSIONS = [
+  ".mp4",
+  ".webm",
+  ".ogg",
+  ".mov"
+];
 
 // src/components/LumirEditor.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
+var DEBUG_LOG = (loc, msg, data) => {
+  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({
+      sessionId: "b73262",
+      location: loc,
+      message: msg,
+      data,
+      timestamp: Date.now()
+    })
+  }).catch(() => {
+  });
+};
 var ContentUtils = class {
   /**
    * JSON 문자열의 유효성을 검증합니다
@@ -2601,6 +2702,25 @@ 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;
+  const fileName = file.name?.toLowerCase() || "";
+  const mimeMatch = ALLOWED_VIDEO_MIME_TYPES.has(file.type);
+  const videoPrefix = typeof file.type === "string" && file.type.startsWith("video/");
+  const extMatch = !file.type && ALLOWED_VIDEO_EXTENSIONS.some((ext) => fileName.endsWith(ext));
+  const result = sizeOk && (mimeMatch || videoPrefix || extMatch);
+  DEBUG_LOG("isVideoFile:check", "result", {
+    fileName: file.name,
+    fileType: file.type,
+    fileSize: file.size,
+    sizeOk,
+    mimeMatch,
+    videoPrefix,
+    extMatch,
+    result
+  });
+  return result;
+};
 var isHtmlFile = (file) => {
   return file.size > 0 && (file.type === "text/html" || file.name?.toLowerCase().endsWith(".html") || file.name?.toLowerCase().endsWith(".htm"));
 };
@@ -2614,15 +2734,17 @@ var escapeHtml = (str) => {
   };
   return str.replace(/[&<>"']/g, (char) => htmlEscapes[char]);
 };
-var extractImageUrls = (blocks) => {
+var extractMediaUrls = (blocks) => {
   const urls = /* @__PURE__ */ new Set();
   const traverse = (blockList) => {
     for (const block of blockList) {
       if (block.type === "image" && block.props?.url) {
         const url = block.props.url;
-        if (typeof url === "string" && url.trim()) {
-          urls.add(url);
-        }
+        if (typeof url === "string" && url.trim()) urls.add(url);
+      }
+      if (block.type === "video" && block.props?.url) {
+        const url = block.props.url;
+        if (typeof url === "string" && url.trim()) urls.add(url);
       }
       if (block.children && Array.isArray(block.children)) {
         traverse(block.children);
@@ -2632,12 +2754,10 @@ var extractImageUrls = (blocks) => {
   traverse(blocks);
   return urls;
 };
-var findDeletedImageUrls = (previousUrls, currentUrls) => {
+var findDeletedMediaUrls = (previousUrls, currentUrls) => {
   const deleted = [];
   previousUrls.forEach((url) => {
-    if (!currentUrls.has(url)) {
-      deleted.push(url);
-    }
+    if (!currentUrls.has(url)) deleted.push(url);
   });
   return deleted;
 };
@@ -2747,7 +2867,11 @@ function LumirEditor({
   onImageDelete
 }) {
   const [isUploading, setIsUploading] = (0, import_react16.useState)(false);
+  const [uploadProgress, setUploadProgress] = (0, import_react16.useState)(null);
   const [errorMessage, setErrorMessage] = (0, import_react16.useState)(null);
+  const floatingMenuFileInputRef = (0, import_react16.useRef)(null);
+  const floatingMenuBlockRef = (0, import_react16.useRef)(null);
+  const floatingMenuUploadStartTimeRef = (0, import_react16.useRef)(0);
   const handleError = (0, import_react16.useCallback)(
     (error) => {
       onError?.(error);
@@ -2778,6 +2902,13 @@ function LumirEditor({
       allowFileUpload
     );
   }, [disableExtensions, allowVideoUpload, allowAudioUpload, allowFileUpload]);
+  (0, import_react16.useEffect)(() => {
+    DEBUG_LOG("LumirEditor:init:disabledExtensions", "snapshot", {
+      allowVideoUpload,
+      hasVideoInDisabled: disabledExtensions.includes("video"),
+      disabledList: disabledExtensions.slice(0, 15)
+    });
+  }, [allowVideoUpload, disabledExtensions]);
   const fileNameTransformRef = (0, import_react16.useRef)(s3Upload?.fileNameTransform);
   (0, import_react16.useEffect)(() => {
     fileNameTransformRef.current = s3Upload?.fileNameTransform;
@@ -2790,6 +2921,12 @@ function LumirEditor({
       path: s3Upload.path,
       appendUUID: s3Upload.appendUUID,
       preserveExtension: s3Upload.preserveExtension,
+      uploadTimeoutMs: s3Upload.uploadTimeoutMs,
+      maxRetries: s3Upload.maxRetries,
+      onProgress: (percent) => {
+        setUploadProgress(percent);
+        s3Upload.onProgress?.(percent);
+      },
       // 최신 콜백을 항상 사용하도록 ref를 통해 접근
       fileNameTransform: (originalName, file) => {
         return fileNameTransformRef.current ? fileNameTransformRef.current(originalName, file) : originalName;
@@ -2800,7 +2937,10 @@ function LumirEditor({
     s3Upload?.env,
     s3Upload?.path,
     s3Upload?.appendUUID,
-    s3Upload?.preserveExtension
+    s3Upload?.preserveExtension,
+    s3Upload?.uploadTimeoutMs,
+    s3Upload?.maxRetries,
+    s3Upload?.onProgress
   ]);
   const editor = (0, import_react17.useCreateBlockNote)(
     {
@@ -2818,18 +2958,44 @@ function LumirEditor({
       tabBehavior,
       trailingBlock,
       uploadFile: async (file) => {
-        if (!isImageFile(file)) {
-          const error = LumirEditorError.invalidFileType(file.name);
+        const allowedImage = isImageFile(file);
+        const allowedVideo = allowVideoUpload && isVideoFile(file);
+        DEBUG_LOG("uploadFile:step1:entry", "editor uploadFile callback invoked", {
+          fileName: file.name,
+          fileType: file.type,
+          fileSize: file.size,
+          allowVideoUpload,
+          allowedImage,
+          allowedVideo
+        });
+        if (!allowedImage && !allowedVideo) {
+          const error = LumirEditorError.invalidFileType(
+            file.name,
+            allowVideoUpload
+          );
           handleError(error);
           throw error;
         }
         try {
-          let imageUrl;
+          setUploadProgress(0);
+          let fileUrl;
+          const branch = uploadFile ? "custom" : memoizedS3Upload?.apiEndpoint ? "s3" : "none";
+          DEBUG_LOG("uploadFile:step2:branch", "upload path", {
+            branch,
+            hasCustomUploadFile: !!uploadFile,
+            hasS3ApiEndpoint: !!memoizedS3Upload?.apiEndpoint
+          });
           if (uploadFile) {
-            imageUrl = await uploadFile(file);
+            const t0 = Date.now();
+            DEBUG_LOG("uploadFile:step3a:custom", "calling custom uploadFile", { fileName: file.name });
+            fileUrl = await uploadFile(file);
+            DEBUG_LOG("uploadFile:step3a:done", "custom uploadFile returned", { urlLen: fileUrl?.length, elapsedMs: Date.now() - t0 });
           } else if (memoizedS3Upload?.apiEndpoint) {
+            const t0 = Date.now();
+            DEBUG_LOG("uploadFile:step3b:s3", "calling S3 uploader", { fileName: file.name });
             const s3Uploader = createS3Uploader(memoizedS3Upload);
-            imageUrl = await s3Uploader(file);
+            fileUrl = await s3Uploader(file);
+            DEBUG_LOG("uploadFile:step3b:done", "S3 uploader returned", { urlLen: fileUrl?.length, elapsedMs: Date.now() - t0 });
           } else {
             const error = LumirEditorError.s3ConfigError(
               "No upload method available. Please provide uploadFile or s3Upload configuration."
@@ -2837,8 +3003,16 @@ function LumirEditor({
             handleError(error);
             throw error;
           }
-          return imageUrl;
+          DEBUG_LOG("uploadFile:step4:success", "returning URL", {
+            fileName: file.name,
+            urlPrefix: fileUrl.slice(0, 80)
+          });
+          return fileUrl;
         } catch (error) {
+          DEBUG_LOG("uploadFile:step5:catch", "uploadFile threw", {
+            fileName: file.name,
+            errorMessage: error instanceof Error ? error.message : String(error)
+          });
           if (error instanceof LumirEditorError) {
             throw error;
           }
@@ -2848,6 +3022,8 @@ function LumirEditor({
           );
           handleError(lumirError);
           throw lumirError;
+        } finally {
+          setUploadProgress(null);
         }
       },
       pasteHandler: (ctx) => {
@@ -2876,7 +3052,15 @@ function LumirEditor({
         }
         const fileList = event?.clipboardData?.files ?? null;
         const files = fileList ? Array.from(fileList) : [];
-        const acceptedFiles = files.filter(isImageFile);
+        const acceptedFiles = files.filter(
+          (f) => isImageFile(f) || allowVideoUpload && isVideoFile(f)
+        );
+        DEBUG_LOG("paste:step1:files", "paste clipboard files", {
+          filesCount: files.length,
+          acceptedCount: acceptedFiles.length,
+          fileNames: files.map((f) => f.name),
+          acceptedNames: acceptedFiles.map((f) => f.name)
+        });
         if (files.length > 0 && acceptedFiles.length === 0) {
           event.preventDefault();
           return true;
@@ -2890,13 +3074,26 @@ function LumirEditor({
           try {
             for (const file of acceptedFiles) {
               try {
+                DEBUG_LOG("paste:step2:upload", "calling uploadFile for paste", {
+                  fileName: file.name,
+                  fileType: file.type
+                });
                 const url = await editor2.uploadFile(file);
-                editor2.pasteHTML(
-                  `<img src="${escapeHtml(url)}" alt="image" />`
-                );
+                if (isImageFile(file)) {
+                  editor2.pasteHTML(
+                    `<img src="${escapeHtml(url)}" alt="image" />`
+                  );
+                } else if (isVideoFile(file)) {
+                  const currentBlock = editor2.getTextCursorPosition().block;
+                  editor2.insertBlocks(
+                    [{ type: "video", props: { url } }],
+                    currentBlock,
+                    "after"
+                  );
+                }
               } catch (err) {
                 console.warn(
-                  "Image upload failed, skipped:",
+                  "Upload failed, skipped:",
                   file.name || "",
                   err
                 );
@@ -2919,6 +3116,7 @@ function LumirEditor({
       trailingBlock,
       uploadFile,
       memoizedS3Upload,
+      allowVideoUpload,
       linkPreview?.apiEndpoint,
       placeholder
     ]
@@ -2939,25 +3137,25 @@ function LumirEditor({
     };
     return editor.onEditorContentChange(handleContentChange);
   }, [editor, onContentChange]);
-  const previousImageUrlsRef = (0, import_react16.useRef)(/* @__PURE__ */ new Set());
+  const previousMediaUrlsRef = (0, import_react16.useRef)(/* @__PURE__ */ new Set());
   (0, import_react16.useEffect)(() => {
     if (!editor) return;
     const initialBlocks = editor.topLevelBlocks;
-    previousImageUrlsRef.current = extractImageUrls(initialBlocks);
+    previousMediaUrlsRef.current = extractMediaUrls(initialBlocks);
   }, [editor]);
   (0, import_react16.useEffect)(() => {
     if (!editor || !onImageDelete) return;
-    const handleImageDeleteCheck = () => {
+    const handleMediaDeleteCheck = () => {
       const currentBlocks = editor.topLevelBlocks;
-      const currentUrls = extractImageUrls(currentBlocks);
-      const previousUrls = previousImageUrlsRef.current;
-      const deletedUrls = findDeletedImageUrls(previousUrls, currentUrls);
+      const currentUrls = extractMediaUrls(currentBlocks);
+      const previousUrls = previousMediaUrlsRef.current;
+      const deletedUrls = findDeletedMediaUrls(previousUrls, currentUrls);
       deletedUrls.forEach((url) => {
         onImageDelete(url);
       });
-      previousImageUrlsRef.current = currentUrls;
+      previousMediaUrlsRef.current = currentUrls;
     };
-    return editor.onEditorContentChange(handleImageDeleteCheck);
+    return editor.onEditorContentChange(handleMediaDeleteCheck);
   }, [editor, onImageDelete]);
   (0, import_react16.useEffect)(() => {
     const el = editor?.domElement;
@@ -2979,11 +3177,31 @@ function LumirEditor({
       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 htmlFiles = files.filter(isHtmlFile);
-      if (imageFiles.length === 0 && htmlFiles.length === 0) return;
+      DEBUG_LOG("drop:step1:files", "drop received", {
+        filesCount: files.length,
+        imageCount: imageFiles.length,
+        videoCount: videoFiles.length,
+        htmlCount: htmlFiles.length,
+        allowVideoUpload,
+        firstFile: files[0] ? {
+          name: files[0].name,
+          type: files[0].type,
+          size: files[0].size,
+          isImage: isImageFile(files[0]),
+          isVideo: isVideoFile(files[0])
+        } : null
+      });
+      if (imageFiles.length === 0 && htmlFiles.length === 0 && videoFiles.length === 0)
+        return;
       (async () => {
         setIsUploading(true);
         try {
+          DEBUG_LOG("drop:step2:async", "drop async started", {
+            imageCount: imageFiles.length,
+            videoCount: videoFiles.length
+          });
           for (const file of imageFiles) {
             try {
               if (editor?.uploadFile) {
@@ -3002,6 +3220,34 @@ function LumirEditor({
               );
             }
           }
+          DEBUG_LOG("drop:step3:videoLoop", "video loop start", {
+            videoCount: videoFiles.length,
+            names: videoFiles.map((f) => f.name)
+          });
+          for (const file of videoFiles) {
+            try {
+              if (editor?.uploadFile) {
+                DEBUG_LOG("drop:step4:videoUpload", "calling uploadFile for video", {
+                  fileName: file.name
+                });
+                const url = await editor.uploadFile(file);
+                if (url && typeof url === "string") {
+                  const currentBlock = editor.getTextCursorPosition().block;
+                  editor.insertBlocks(
+                    [{ type: "video", props: { url } }],
+                    currentBlock,
+                    "after"
+                  );
+                }
+              }
+            } catch (err) {
+              console.warn(
+                "Video upload failed, skipped:",
+                file.name || "",
+                err
+              );
+            }
+          }
           for (const file of htmlFiles) {
             try {
               const htmlContent = await file.text();
@@ -3041,7 +3287,7 @@ function LumirEditor({
       });
       el.removeEventListener("drop", handleDrop, { capture: true });
     };
-  }, [editor]);
+  }, [editor, allowVideoUpload]);
   const computedSideMenu = (0, import_react16.useMemo)(() => {
     return sideMenuAddButton ? sideMenu : false;
   }, [sideMenuAddButton, sideMenu]);
@@ -3054,42 +3300,110 @@ function LumirEditor({
       className: cn("lumirEditor", className),
       style: { position: "relative", display: "flex", flexDirection: "column" },
       children: [
-        floatingMenu && editor && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          FloatingMenu,
-          {
-            editor,
-            position: floatingMenuPosition,
-            onImageUpload: async () => {
-              const input = document.createElement("input");
-              input.type = "file";
-              input.accept = "image/*";
-              input.onchange = async (e) => {
-                const file = e.target.files?.[0];
-                if (file && editor.uploadFile) {
-                  try {
-                    setIsUploading(true);
-                    const url = await editor.uploadFile(file);
-                    editor.insertBlocks(
-                      [
-                        {
-                          type: "image",
-                          props: { url }
-                        }
-                      ],
-                      editor.getTextCursorPosition().block,
-                      "after"
-                    );
-                  } catch (err) {
-                    console.error("Image upload failed:", err);
-                  } finally {
-                    setIsUploading(false);
+        floatingMenu && editor && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            "input",
+            {
+              ref: floatingMenuFileInputRef,
+              type: "file",
+              accept: allowVideoUpload ? "image/*,video/mp4,video/webm,video/ogg,video/quicktime,.mov" : "image/*",
+              style: {
+                position: "absolute",
+                left: "-9999px",
+                opacity: 0,
+                pointerEvents: "none"
+              },
+              onChange: async (e) => {
+                const inputEl = e.target;
+                const file = inputEl.files?.[0];
+                DEBUG_LOG("FloatingMenu:step3:onchange", "file input onchange fired", {
+                  hasFile: !!file,
+                  fileName: file?.name,
+                  fileType: file?.type,
+                  fileSize: file?.size,
+                  hasUploadFile: !!editor?.uploadFile
+                });
+                const blockToInsertAfter = floatingMenuBlockRef.current;
+                if (file && editor.uploadFile && blockToInsertAfter) {
+                  const allowedImage = isImageFile(file);
+                  const allowedVideo = allowVideoUpload && isVideoFile(file);
+                  DEBUG_LOG("FloatingMenu:step4:fileCheck", "allowed check", {
+                    fileName: file.name,
+                    allowedImage,
+                    allowedVideo
+                  });
+                  if (allowedImage || allowedVideo) {
+                    try {
+                      setIsUploading(true);
+                      floatingMenuUploadStartTimeRef.current = Date.now();
+                      DEBUG_LOG("FloatingMenu:step5:uploadStart", "calling editor.uploadFile", {
+                        fileName: file.name
+                      });
+                      const url = await editor.uploadFile(file);
+                      const blockType = allowedVideo ? "video" : "image";
+                      const elapsedMs = Date.now() - floatingMenuUploadStartTimeRef.current;
+                      DEBUG_LOG("FloatingMenu:step6:uploadDone", "upload returned, inserting block", {
+                        blockType,
+                        blockId: blockToInsertAfter.id,
+                        urlLen: url?.length,
+                        elapsedMs
+                      });
+                      editor.insertBlocks(
+                        [
+                          {
+                            type: blockType,
+                            props: { url }
+                          }
+                        ],
+                        blockToInsertAfter,
+                        "after"
+                      );
+                    } catch (err) {
+                      DEBUG_LOG("FloatingMenu:step7:catch", "upload or insert failed", {
+                        errMsg: err instanceof Error ? err.message : String(err)
+                      });
+                      console.error("Upload failed:", err);
+                    } finally {
+                      setIsUploading(false);
+                    }
                   }
                 }
-              };
-              input.click();
+                inputEl.value = "";
+              }
             }
-          }
-        ),
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            FloatingMenu,
+            {
+              editor,
+              position: floatingMenuPosition,
+              onImageUpload: () => {
+                DEBUG_LOG("FloatingMenu:step1:click", "upload button clicked", {
+                  allowVideoUpload
+                });
+                let blockToInsertAfter;
+                try {
+                  blockToInsertAfter = editor.getTextCursorPosition().block;
+                } catch (err) {
+                  DEBUG_LOG("FloatingMenu:step1b:error", "getTextCursorPosition failed", {
+                    err: err instanceof Error ? err.message : String(err)
+                  });
+                  return;
+                }
+                floatingMenuBlockRef.current = blockToInsertAfter;
+                const input = floatingMenuFileInputRef.current;
+                if (!input) return;
+                input.accept = allowVideoUpload ? "image/*,video/mp4,video/webm,video/ogg,video/quicktime,.mov" : "image/*";
+                input.value = "";
+                DEBUG_LOG("FloatingMenu:step2:inputReady", "persistent input ref, about to click", {
+                  accept: input.accept
+                });
+                DEBUG_LOG("FloatingMenu:step2b:click", "input.click() about to be called", {});
+                input.click();
+              }
+            }
+          )
+        ] }),
         /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
           import_mantine.BlockNoteView,
           {
@@ -3116,8 +3430,10 @@ function LumirEditor({
                       const filtered = items.filter((item) => {
                         const key = (item?.key || "").toString().toLowerCase();
                         const title = (item?.title || "").toString().toLowerCase();
-                        if (["video", "audio", "file"].includes(key)) return false;
-                        if (title.includes("video") || title.includes("audio") || title.includes("file"))
+                        if (key === "video" || title.includes("video"))
+                          return allowVideoUpload;
+                        if (["audio", "file"].includes(key)) return false;
+                        if (title.includes("audio") || title.includes("file"))
                           return false;
                         return true;
                       });
@@ -3218,7 +3534,7 @@ function LumirEditor({
                         )
                       );
                     },
-                    [editor, linkPreview?.apiEndpoint]
+                    [editor, allowVideoUpload, linkPreview?.apiEndpoint]
                   )
                 }
               ),
@@ -3226,7 +3542,13 @@ function LumirEditor({
             ]
           }
         ),
-        isUploading && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "lumirEditor-upload-overlay", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "lumirEditor-spinner" }) }),
+        isUploading && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "lumirEditor-upload-overlay", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "lumirEditor-spinner" }),
+          uploadProgress !== null && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "lumirEditor-upload-progress", children: [
+            uploadProgress,
+            "%"
+          ] })
+        ] }),
         errorMessage && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "lumirEditor-error-toast", children: [
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
           /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "lumirEditor-error-message", children: errorMessage }),