@lumir-company/editor 0.4.4 → 0.4.6

package/dist/index.mjs

@@ -1,7 +1,7 @@
 "use client";
 
 // src/components/LumirEditor.tsx
-import { useEffect as useEffect7, useMemo, useCallback as useCallback13, useState as useState7, useRef as useRef8 } from "react";
+import { useEffect as useEffect8, useMemo, useCallback as useCallback14, useState as useState8, useRef as useRef9 } from "react";
 import {
   useCreateBlockNote,
   SideMenu as BlockSideMenu,
@@ -65,7 +65,10 @@ var createS3Uploader = (config) => {
     path,
     fileNameTransform,
     appendUUID,
-    preserveExtension = true
+    preserveExtension = true,
+    onProgress,
+    uploadTimeoutMs = 12e4,
+    maxRetries = 2
   } = config;
   if (!apiEndpoint || apiEndpoint.trim() === "") {
     throw new Error(
@@ -104,6 +107,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() === "") {
@@ -112,11 +124,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}`
         );
@@ -125,17 +152,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;
@@ -144,7 +218,7 @@ var createS3Uploader = (config) => {
 };
 
 // src/blocks/HtmlPreview.tsx
-import { createReactBlockSpec as createReactBlockSpec2 } from "@blocknote/react";
+import { createReactBlockSpec as createReactBlockSpec3 } from "@blocknote/react";
 import {
   defaultBlockSpecs,
   BlockNoteSchema,
@@ -855,9 +929,254 @@ var LinkPreviewBlock = createReactBlockSpec(
   }
 );
 
+// src/blocks/VideoBlock.tsx
+import { createReactBlockSpec as createReactBlockSpec2 } from "@blocknote/react";
+import { useState as useState2, useCallback as useCallback2, useRef as useRef2, useEffect as useEffect2 } from "react";
+import { Fragment as Fragment2, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MIN_VIDEO_WIDTH = 200;
+var MAX_VIDEO_WIDTH = 1200;
+var MIN_VIDEO_HEIGHT = 120;
+var MAX_VIDEO_HEIGHT = 600;
+var DEFAULT_VIDEO_WIDTH = 640;
+var DEFAULT_VIDEO_HEIGHT = 360;
+var VideoBlockCard = ({
+  url,
+  editable,
+  width,
+  onWidthChange,
+  height,
+  onHeightChange,
+  onContextMenuBlock
+}) => {
+  const [resizeParams, setResizeParams] = useState2(
+    void 0
+  );
+  const [localWidth, setLocalWidth] = useState2(width);
+  const [localHeight, setLocalHeight] = useState2(height);
+  const wrapperRef = useRef2(null);
+  useEffect2(() => {
+    setLocalWidth(width);
+  }, [width]);
+  useEffect2(() => {
+    setLocalHeight(height);
+  }, [height]);
+  useEffect2(() => {
+    if (!resizeParams) return;
+    const onMouseMove = (e) => {
+      if (resizeParams.handleUsed === "bottom") {
+        const delta = e.clientY - resizeParams.initialClientY;
+        setLocalHeight(
+          Math.min(
+            Math.max(resizeParams.initialHeight + delta, MIN_VIDEO_HEIGHT),
+            MAX_VIDEO_HEIGHT
+          )
+        );
+      } else {
+        const delta = resizeParams.handleUsed === "left" ? resizeParams.initialClientX - e.clientX : e.clientX - resizeParams.initialClientX;
+        setLocalWidth(
+          Math.min(
+            Math.max(resizeParams.initialWidth + delta, MIN_VIDEO_WIDTH),
+            wrapperRef.current?.parentElement?.clientWidth || MAX_VIDEO_WIDTH
+          )
+        );
+      }
+    };
+    const onMouseUp = () => {
+      const handle = resizeParams.handleUsed;
+      setResizeParams(void 0);
+      if (handle === "bottom") {
+        if (localHeight != null && onHeightChange) onHeightChange(localHeight);
+      } else {
+        if (localWidth != null && onWidthChange) onWidthChange(localWidth);
+      }
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [resizeParams, localWidth, localHeight, onWidthChange, onHeightChange]);
+  const handleLeftDown = useCallback2((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setResizeParams({
+      handleUsed: "left",
+      initialWidth: wrapperRef.current?.clientWidth ?? DEFAULT_VIDEO_WIDTH,
+      initialHeight: localHeight ?? DEFAULT_VIDEO_HEIGHT,
+      initialClientX: e.clientX,
+      initialClientY: e.clientY
+    });
+  }, [localHeight]);
+  const handleRightDown = useCallback2((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setResizeParams({
+      handleUsed: "right",
+      initialWidth: wrapperRef.current?.clientWidth ?? DEFAULT_VIDEO_WIDTH,
+      initialHeight: localHeight ?? DEFAULT_VIDEO_HEIGHT,
+      initialClientX: e.clientX,
+      initialClientY: e.clientY
+    });
+  }, [localHeight]);
+  const handleBottomDown = useCallback2((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setResizeParams({
+      handleUsed: "bottom",
+      initialWidth: wrapperRef.current?.clientWidth ?? DEFAULT_VIDEO_WIDTH,
+      initialHeight: localHeight ?? DEFAULT_VIDEO_HEIGHT,
+      initialClientX: e.clientX,
+      initialClientY: e.clientY
+    });
+  }, [localHeight]);
+  const resizeCursor = resizeParams ? resizeParams.handleUsed === "bottom" ? "ns-resize" : "ew-resize" : "default";
+  const [hovered, setHovered] = useState2(false);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      ref: wrapperRef,
+      className: "lumir-video-block-wrapper",
+      onContextMenu: onContextMenuBlock,
+      style: {
+        position: "relative",
+        width: localWidth != null ? `${localWidth}px` : void 0,
+        maxWidth: "100%",
+        cursor: resizeCursor,
+        transition: resizeParams ? "none" : "box-shadow 0.2s"
+      },
+      onMouseEnter: () => {
+        if (!resizeParams) setHovered(true);
+      },
+      onMouseLeave: () => {
+        if (!resizeParams) setHovered(false);
+      },
+      children: [
+        editable && (hovered || resizeParams) && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: "lumir-resize-handle",
+              style: { left: "4px" },
+              onMouseDown: handleLeftDown
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "div",
+            {
+              className: "lumir-resize-handle",
+              style: { right: "4px" },
+              onMouseDown: handleRightDown
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            style: {
+              width: "100%",
+              height: `${localHeight ?? DEFAULT_VIDEO_HEIGHT}px`,
+              overflow: "hidden",
+              backgroundColor: "#000",
+              borderRadius: "6px"
+            },
+            children: [
+              /* @__PURE__ */ jsx2(
+                "video",
+                {
+                  src: url,
+                  controls: true,
+                  playsInline: true,
+                  style: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "contain",
+                    display: "block"
+                  },
+                  onContextMenu: (e) => e.preventDefault()
+                }
+              ),
+              editable && (hovered || resizeParams) && /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  className: "lumir-resize-handle-bottom",
+                  onMouseDown: handleBottomDown
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+var VideoBlock = createReactBlockSpec2(
+  {
+    type: "video",
+    propSchema: {
+      url: { default: "" },
+      previewWidth: { default: 640 },
+      previewHeight: { default: 360 }
+    },
+    content: "none"
+  },
+  {
+    render: (props) => {
+      const url = props.block.props.url ?? "";
+      const editable = props.editor.isEditable;
+      const handleContextMenu = useCallback2((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }, []);
+      if (!url) {
+        return /* @__PURE__ */ jsx2(
+          "div",
+          {
+            className: "lumir-video-block-placeholder",
+            onContextMenu: handleContextMenu,
+            style: {
+              width: "100%",
+              maxWidth: `${DEFAULT_VIDEO_WIDTH}px`,
+              height: `${DEFAULT_VIDEO_HEIGHT}px`,
+              backgroundColor: "#1a1a1a",
+              borderRadius: "6px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              color: "rgba(255,255,255,0.5)",
+              fontSize: "14px"
+            },
+            children: "\uBE44\uB514\uC624 URL \uC5C6\uC74C"
+          }
+        );
+      }
+      return /* @__PURE__ */ jsx2(
+        VideoBlockCard,
+        {
+          url,
+          editable,
+          width: props.block.props.previewWidth,
+          onWidthChange: (newWidth) => {
+            props.editor.updateBlock(props.block, {
+              props: { previewWidth: newWidth }
+            });
+          },
+          height: props.block.props.previewHeight,
+          onHeightChange: (newHeight) => {
+            props.editor.updateBlock(props.block, {
+              props: { previewHeight: newHeight }
+            });
+          },
+          onContextMenuBlock: handleContextMenu
+        }
+      );
+    }
+  }
+);
+
 // src/blocks/HtmlPreview.tsx
-import { useState as useState2, useRef as useRef2, useCallback as useCallback2, useEffect as useEffect2 } from "react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useState as useState3, useRef as useRef3, useCallback as useCallback3, useEffect as useEffect3 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var MIN_HEIGHT = 100;
 var MAX_HEIGHT = 1200;
 var ensureCharset = (html) => {
@@ -895,7 +1214,7 @@ var createSecureBlobUrl = (htmlContent) => {
   });
   return URL.createObjectURL(blob);
 };
-var HtmlPreviewBlock = createReactBlockSpec2(
+var HtmlPreviewBlock = createReactBlockSpec3(
   {
     type: "htmlPreview",
     propSchema: {
@@ -913,15 +1232,15 @@ var HtmlPreviewBlock = createReactBlockSpec2(
   },
   {
     render: (props) => {
-      const [isExpanded, setIsExpanded] = useState2(true);
-      const [isResizing, setIsResizing] = useState2(false);
-      const [blobUrl, setBlobUrl] = useState2("");
-      const containerRef = useRef2(null);
+      const [isExpanded, setIsExpanded] = useState3(true);
+      const [isResizing, setIsResizing] = useState3(false);
+      const [blobUrl, setBlobUrl] = useState3("");
+      const containerRef = useRef3(null);
       const htmlContent = props.block.props.htmlContent || "";
       const fileName = props.block.props.fileName || "HTML Document";
       const savedHeight = props.block.props.height || "400px";
       const currentHeight = parseInt(savedHeight, 10) || 400;
-      useEffect2(() => {
+      useEffect3(() => {
         if (htmlContent) {
           const url = createSecureBlobUrl(htmlContent);
           setBlobUrl(url);
@@ -930,7 +1249,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
           };
         }
       }, [htmlContent]);
-      const handleResizeStart = useCallback2(
+      const handleResizeStart = useCallback3(
         (e) => {
           e.preventDefault();
           e.stopPropagation();
@@ -957,7 +1276,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
         },
         [currentHeight, props.editor, props.block]
       );
-      const handleExport = useCallback2(
+      const handleExport = useCallback3(
         (e) => {
           e.stopPropagation();
           const safeFileName = sanitizeFileName(fileName);
@@ -978,7 +1297,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
         },
         [htmlContent, fileName]
       );
-      const handleOpenNewWindow = useCallback2(
+      const handleOpenNewWindow = useCallback3(
         (e) => {
           e.stopPropagation();
           if (typeof window === "undefined") return;
@@ -992,7 +1311,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
         },
         [htmlContent]
       );
-      return /* @__PURE__ */ jsxs2(
+      return /* @__PURE__ */ jsxs3(
         "div",
         {
           ref: containerRef,
@@ -1008,7 +1327,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
             boxShadow: "none"
           },
           children: [
-            /* @__PURE__ */ jsxs2(
+            /* @__PURE__ */ jsxs3(
               "div",
               {
                 style: {
@@ -1020,7 +1339,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
                   borderBottom: isExpanded ? "1px solid #e0e0e0" : "none"
                 },
                 children: [
-                  /* @__PURE__ */ jsxs2(
+                  /* @__PURE__ */ jsxs3(
                     "div",
                     {
                       style: {
@@ -1032,7 +1351,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
                       },
                       onClick: () => setIsExpanded(!isExpanded),
                       children: [
-                        /* @__PURE__ */ jsx2(
+                        /* @__PURE__ */ jsx3(
                           "svg",
                           {
                             width: "16",
@@ -1047,15 +1366,15 @@ var HtmlPreviewBlock = createReactBlockSpec2(
                               transform: isExpanded ? "rotate(180deg)" : "rotate(0deg)",
                               transition: "transform 0.2s"
                             },
-                            children: /* @__PURE__ */ jsx2("polyline", { points: "6 9 12 15 18 9" })
+                            children: /* @__PURE__ */ jsx3("polyline", { points: "6 9 12 15 18 9" })
                           }
                         ),
-                        /* @__PURE__ */ jsx2("span", { style: { fontWeight: 500, fontSize: "14px" }, children: fileName })
+                        /* @__PURE__ */ jsx3("span", { style: { fontWeight: 500, fontSize: "14px" }, children: fileName })
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs2("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
-                    /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: "4px" }, children: [
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         onClick: handleOpenNewWindow,
@@ -1078,7 +1397,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
                         onMouseLeave: (e) => {
                           e.currentTarget.style.backgroundColor = "transparent";
                         },
-                        children: /* @__PURE__ */ jsxs2(
+                        children: /* @__PURE__ */ jsxs3(
                           "svg",
                           {
                             width: "16",
@@ -1090,15 +1409,15 @@ var HtmlPreviewBlock = createReactBlockSpec2(
                             strokeLinecap: "round",
                             strokeLinejoin: "round",
                             children: [
-                              /* @__PURE__ */ jsx2("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
-                              /* @__PURE__ */ jsx2("polyline", { points: "15 3 21 3 21 9" }),
-                              /* @__PURE__ */ jsx2("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
+                              /* @__PURE__ */ jsx3("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" }),
+                              /* @__PURE__ */ jsx3("polyline", { points: "15 3 21 3 21 9" }),
+                              /* @__PURE__ */ jsx3("line", { x1: "10", y1: "14", x2: "21", y2: "3" })
                             ]
                           }
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx2(
+                    /* @__PURE__ */ jsx3(
                       "button",
                       {
                         onClick: handleExport,
@@ -1121,7 +1440,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
                         onMouseLeave: (e) => {
                           e.currentTarget.style.backgroundColor = "transparent";
                         },
-                        children: /* @__PURE__ */ jsxs2(
+                        children: /* @__PURE__ */ jsxs3(
                           "svg",
                           {
                             width: "16",
@@ -1133,9 +1452,9 @@ var HtmlPreviewBlock = createReactBlockSpec2(
                             strokeLinecap: "round",
                             strokeLinejoin: "round",
                             children: [
-                              /* @__PURE__ */ jsx2("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
-                              /* @__PURE__ */ jsx2("polyline", { points: "7 10 12 15 17 10" }),
-                              /* @__PURE__ */ jsx2("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
+                              /* @__PURE__ */ jsx3("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                              /* @__PURE__ */ jsx3("polyline", { points: "7 10 12 15 17 10" }),
+                              /* @__PURE__ */ jsx3("line", { x1: "12", y1: "15", x2: "12", y2: "3" })
                             ]
                           }
                         )
@@ -1145,7 +1464,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
                 ]
               }
             ),
-            isExpanded && /* @__PURE__ */ jsxs2(
+            isExpanded && /* @__PURE__ */ jsxs3(
               "div",
               {
                 style: {
@@ -1154,7 +1473,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
                   position: "relative"
                 },
                 children: [
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(
                     "iframe",
                     {
                       src: blobUrl || "about:blank",
@@ -1171,7 +1490,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
                       loading: "lazy"
                     }
                   ),
-                  /* @__PURE__ */ jsx2(
+                  /* @__PURE__ */ jsx3(
                     "div",
                     {
                       onMouseDown: handleResizeStart,
@@ -1196,7 +1515,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
                           e.currentTarget.style.backgroundColor = "transparent";
                         }
                       },
-                      children: /* @__PURE__ */ jsx2(
+                      children: /* @__PURE__ */ jsx3(
                         "div",
                         {
                           style: {
@@ -1221,6 +1540,7 @@ var HtmlPreviewBlock = createReactBlockSpec2(
 var schema = BlockNoteSchema.create({
   blockSpecs: {
     ...defaultBlockSpecs,
+    video: VideoBlock,
     htmlPreview: HtmlPreviewBlock,
     linkPreview: LinkPreviewBlock
   },
@@ -1229,60 +1549,60 @@ var schema = BlockNoteSchema.create({
 });
 
 // src/components/FloatingMenu/index.tsx
-import { useState as useState6, useEffect as useEffect6, useRef as useRef7 } from "react";
+import { useState as useState7, useEffect as useEffect7, useRef as useRef8 } from "react";
 
 // src/components/FloatingMenu/Icons.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 var Icons = {
-  undo: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" }) }),
-  redo: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" }) }),
-  bold: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }) }),
-  italic: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }) }),
-  underline: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" }) }),
-  strikethrough: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" }) }),
-  alignLeft: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
-  alignCenter: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
-  alignRight: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
-  bulletList: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }) }),
-  numberedList: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }) }),
-  image: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }),
-  expandMore: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx3("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }) }),
-  textColor: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z" }) }),
-  bgColor: /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
-    /* @__PURE__ */ jsx3("path", { d: "M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z" }),
-    /* @__PURE__ */ jsx3("path", { fillOpacity: ".36", d: "M0 20h24v4H0z" })
+  undo: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M12.5 8c-2.65 0-5.05.99-6.9 2.6L2 7v9h9l-3.62-3.62c1.39-1.16 3.16-1.88 5.12-1.88 3.54 0 6.55 2.31 7.6 5.5l2.37-.78C21.08 11.03 17.15 8 12.5 8z" }) }),
+  redo: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M18.4 10.6C16.55 8.99 14.15 8 11.5 8c-4.65 0-8.58 3.03-9.96 7.22L3.9 16c1.05-3.19 4.05-5.5 7.6-5.5 1.95 0 3.73.72 5.12 1.88L13 16h9V7l-3.6 3.6z" }) }),
+  bold: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M15.6 10.79c.97-.67 1.65-1.77 1.65-2.79 0-2.26-1.75-4-4-4H7v14h7.04c2.09 0 3.71-1.7 3.71-3.79 0-1.52-.86-2.82-2.15-3.42zM10 6.5h3c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5h-3v-3zm3.5 9H10v-3h3.5c.83 0 1.5.67 1.5 1.5s-.67 1.5-1.5 1.5z" }) }),
+  italic: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M10 4v3h2.21l-3.42 8H6v3h8v-3h-2.21l3.42-8H18V4z" }) }),
+  underline: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M12 17c3.31 0 6-2.69 6-6V3h-2.5v8c0 1.93-1.57 3.5-3.5 3.5S8.5 12.93 8.5 11V3H6v8c0 3.31 2.69 6 6 6zm-7 2v2h14v-2H5z" }) }),
+  strikethrough: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M10 19h4v-3h-4v3zM5 4v3h5v3h4V7h5V4H5zM3 14h18v-2H3v2z" }) }),
+  alignLeft: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M15 15H3v2h12v-2zm0-8H3v2h12V7zM3 13h18v-2H3v2zm0 8h18v-2H3v2zM3 3v2h18V3H3z" }) }),
+  alignCenter: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z" }) }),
+  alignRight: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M3 21h18v-2H3v2zm6-4h12v-2H9v2zm-6-4h18v-2H3v2zm6-4h12V7H9v2zM3 3v2h18V3H3z" }) }),
+  bulletList: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M4 10.5c-.83 0-1.5.67-1.5 1.5s.67 1.5 1.5 1.5 1.5-.67 1.5-1.5-.67-1.5-1.5-1.5zm0-6c-.83 0-1.5.67-1.5 1.5S3.17 7.5 4 7.5 5.5 6.83 5.5 6 4.83 4.5 4 4.5zm0 12c-.83 0-1.5.68-1.5 1.5s.68 1.5 1.5 1.5 1.5-.68 1.5-1.5-.67-1.5-1.5-1.5zM7 19h14v-2H7v2zm0-6h14v-2H7v2zm0-8v2h14V5H7z" }) }),
+  numberedList: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }) }),
+  image: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z" }) }),
+  expandMore: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "18", height: "18", children: /* @__PURE__ */ jsx4("path", { d: "M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z" }) }),
+  textColor: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M11 3L5.5 17h2.25l1.12-3h6.25l1.12 3h2.25L13 3h-2zm-1.38 9L12 5.67 14.38 12H9.62z" }) }),
+  bgColor: /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
+    /* @__PURE__ */ jsx4("path", { d: "M16.56 8.94L7.62 0 6.21 1.41l2.38 2.38-5.15 5.15c-.59.59-.59 1.54 0 2.12l5.5 5.5c.29.29.68.44 1.06.44s.77-.15 1.06-.44l5.5-5.5c.59-.58.59-1.53 0-2.12zM5.21 10L10 5.21 14.79 10H5.21zM19 11.5s-2 2.17-2 3.5c0 1.1.9 2 2 2s2-.9 2-2c0-1.33-2-3.5-2-3.5z" }),
+    /* @__PURE__ */ jsx4("path", { fillOpacity: ".36", d: "M0 20h24v4H0z" })
   ] }),
-  link: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }) }),
-  chevronRight: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }),
-  chevronLeft: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }),
-  table: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM10 17H5v-2h5v2zm0-4H5v-2h5v2zm0-4H5V7h5v2zm9 8h-7v-2h7v2zm0-4h-7v-2h7v2zm0-4h-7V7h7v2z" }) }),
-  htmlFile: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 2v5h5l-5-5zm-4 14H7v-1h2v1zm0-2H7v-1h2v1zm-2-2h2v1H7v-1zm4 4h-2v-1h2v1zm0-2h-2v-1h2v1zm0-2h-2v-1h2v1zm6 4h-4v-1h4v1zm0-2h-4v-1h4v1zm0-2h-4v-1h4v1z" }) })
+  link: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z" }) }),
+  chevronRight: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }),
+  chevronLeft: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) }),
+  table: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M20 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h15c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM10 17H5v-2h5v2zm0-4H5v-2h5v2zm0-4H5V7h5v2zm9 8h-7v-2h7v2zm0-4h-7v-2h7v2zm0-4h-7V7h7v2z" }) }),
+  htmlFile: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm-1 2v5h5l-5-5zm-4 14H7v-1h2v1zm0-2H7v-1h2v1zm-2-2h2v1H7v-1zm4 4h-2v-1h2v1zm0-2h-2v-1h2v1zm0-2h-2v-1h2v1zm6 4h-4v-1h4v1zm0-2h-4v-1h4v1zm0-2h-4v-1h4v1z" }) })
 };
 var BlockTypeIcons = {
-  paragraph: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M5 5h14v2H5zM5 11h14v2H5zM5 17h10v2H5z" }) }),
-  h1: /* @__PURE__ */ jsx3("span", { className: "lumir-block-icon-text", children: "H1" }),
-  h2: /* @__PURE__ */ jsx3("span", { className: "lumir-block-icon-text", children: "H2" }),
-  h3: /* @__PURE__ */ jsx3("span", { className: "lumir-block-icon-text", children: "H3" }),
-  h4: /* @__PURE__ */ jsx3("span", { className: "lumir-block-icon-text", children: "H4" }),
-  h5: /* @__PURE__ */ jsx3("span", { className: "lumir-block-icon-text", children: "H5" }),
-  h6: /* @__PURE__ */ jsx3("span", { className: "lumir-block-icon-text", children: "H6" }),
-  toggleH1: /* @__PURE__ */ jsxs3("span", { className: "lumir-block-icon-toggle", children: [
-    /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ jsx3("path", { d: "M8 5v14l11-7z" }) }),
-    /* @__PURE__ */ jsx3("span", { children: "H1" })
+  paragraph: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M5 5h14v2H5zM5 11h14v2H5zM5 17h10v2H5z" }) }),
+  h1: /* @__PURE__ */ jsx4("span", { className: "lumir-block-icon-text", children: "H1" }),
+  h2: /* @__PURE__ */ jsx4("span", { className: "lumir-block-icon-text", children: "H2" }),
+  h3: /* @__PURE__ */ jsx4("span", { className: "lumir-block-icon-text", children: "H3" }),
+  h4: /* @__PURE__ */ jsx4("span", { className: "lumir-block-icon-text", children: "H4" }),
+  h5: /* @__PURE__ */ jsx4("span", { className: "lumir-block-icon-text", children: "H5" }),
+  h6: /* @__PURE__ */ jsx4("span", { className: "lumir-block-icon-text", children: "H6" }),
+  toggleH1: /* @__PURE__ */ jsxs4("span", { className: "lumir-block-icon-toggle", children: [
+    /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ jsx4("path", { d: "M8 5v14l11-7z" }) }),
+    /* @__PURE__ */ jsx4("span", { children: "H1" })
   ] }),
-  toggleH2: /* @__PURE__ */ jsxs3("span", { className: "lumir-block-icon-toggle", children: [
-    /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ jsx3("path", { d: "M8 5v14l11-7z" }) }),
-    /* @__PURE__ */ jsx3("span", { children: "H2" })
+  toggleH2: /* @__PURE__ */ jsxs4("span", { className: "lumir-block-icon-toggle", children: [
+    /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ jsx4("path", { d: "M8 5v14l11-7z" }) }),
+    /* @__PURE__ */ jsx4("span", { children: "H2" })
   ] }),
-  toggleH3: /* @__PURE__ */ jsxs3("span", { className: "lumir-block-icon-toggle", children: [
-    /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ jsx3("path", { d: "M8 5v14l11-7z" }) }),
-    /* @__PURE__ */ jsx3("span", { children: "H3" })
+  toggleH3: /* @__PURE__ */ jsxs4("span", { className: "lumir-block-icon-toggle", children: [
+    /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "8", height: "8", children: /* @__PURE__ */ jsx4("path", { d: "M8 5v14l11-7z" }) }),
+    /* @__PURE__ */ jsx4("span", { children: "H3" })
   ] }),
-  quote: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" }) }),
-  codeBlock: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }) }),
-  toggleList: /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
-    /* @__PURE__ */ jsx3("path", { d: "M10 6h10v2H10zM10 11h10v2H10zM10 16h10v2H10z" }),
-    /* @__PURE__ */ jsx3(
+  quote: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M6 17h3l2-4V7H5v6h3zm8 0h3l2-4V7h-6v6h3z" }) }),
+  codeBlock: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M9.4 16.6L4.8 12l4.6-4.6L8 6l-6 6 6 6 1.4-1.4zm5.2 0l4.6-4.6-4.6-4.6L16 6l6 6-6 6-1.4-1.4z" }) }),
+  toggleList: /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
+    /* @__PURE__ */ jsx4("path", { d: "M10 6h10v2H10zM10 11h10v2H10zM10 16h10v2H10z" }),
+    /* @__PURE__ */ jsx4(
       "path",
       {
         d: "M4 8l4 4-4 4",
@@ -1294,15 +1614,15 @@ var BlockTypeIcons = {
       }
     )
   ] }),
-  bulletList: /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
-    /* @__PURE__ */ jsx3("circle", { cx: "4", cy: "6", r: "1.5" }),
-    /* @__PURE__ */ jsx3("circle", { cx: "4", cy: "12", r: "1.5" }),
-    /* @__PURE__ */ jsx3("circle", { cx: "4", cy: "18", r: "1.5" }),
-    /* @__PURE__ */ jsx3("path", { d: "M8 5h12v2H8zM8 11h12v2H8zM8 17h12v2H8z" })
+  bulletList: /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
+    /* @__PURE__ */ jsx4("circle", { cx: "4", cy: "6", r: "1.5" }),
+    /* @__PURE__ */ jsx4("circle", { cx: "4", cy: "12", r: "1.5" }),
+    /* @__PURE__ */ jsx4("circle", { cx: "4", cy: "18", r: "1.5" }),
+    /* @__PURE__ */ jsx4("path", { d: "M8 5h12v2H8zM8 11h12v2H8zM8 17h12v2H8z" })
   ] }),
-  numberedList: /* @__PURE__ */ jsx3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx3("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }) }),
-  checkList: /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
-    /* @__PURE__ */ jsx3(
+  numberedList: /* @__PURE__ */ jsx4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: /* @__PURE__ */ jsx4("path", { d: "M2 17h2v.5H3v1h1v.5H2v1h3v-4H2v1zm1-9h1V4H2v1h1v3zm-1 3h1.8L2 13.1v.9h3v-1H3.2L5 10.9V10H2v1zm5-6v2h14V5H7zm0 14h14v-2H7v2zm0-6h14v-2H7v2z" }) }),
+  checkList: /* @__PURE__ */ jsxs4("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "20", height: "20", children: [
+    /* @__PURE__ */ jsx4(
       "rect",
       {
         x: "3",
@@ -1315,7 +1635,7 @@ var BlockTypeIcons = {
         strokeWidth: "1.5"
       }
     ),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       "path",
       {
         d: "M4.5 7l1.5 1.5 3-3",
@@ -1326,8 +1646,8 @@ var BlockTypeIcons = {
         strokeLinejoin: "round"
       }
     ),
-    /* @__PURE__ */ jsx3("path", { d: "M12 6h8v2h-8z" }),
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4("path", { d: "M12 6h8v2h-8z" }),
+    /* @__PURE__ */ jsx4(
       "rect",
       {
         x: "3",
@@ -1340,37 +1660,37 @@ var BlockTypeIcons = {
         strokeWidth: "1.5"
       }
     ),
-    /* @__PURE__ */ jsx3("path", { d: "M12 16h8v2h-8z" })
+    /* @__PURE__ */ jsx4("path", { d: "M12 16h8v2h-8z" })
   ] })
 };
 
 // src/components/FloatingMenu/components/ToolbarDivider.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ToolbarDivider = () => /* @__PURE__ */ jsx4("div", { className: "lumir-toolbar-divider" });
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ToolbarDivider = () => /* @__PURE__ */ jsx5("div", { className: "lumir-toolbar-divider" });
 
 // src/components/FloatingMenu/components/UndoRedoButtons.tsx
-import { useCallback as useCallback3 } from "react";
-import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useCallback as useCallback4 } from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var UndoRedoButtons = ({ editor }) => {
-  const handleUndo = useCallback3(() => {
+  const handleUndo = useCallback4(() => {
     try {
       editor?.undo?.();
     } catch (err) {
       console.error("Undo failed:", err);
     }
   }, [editor]);
-  const handleRedo = useCallback3(() => {
+  const handleRedo = useCallback4(() => {
     try {
       editor?.redo?.();
     } catch (err) {
       console.error("Redo failed:", err);
     }
   }, [editor]);
-  const handleMouseDown = useCallback3((e) => {
+  const handleMouseDown = useCallback4((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsxs4("div", { className: "lumir-toolbar-group", children: [
-    /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsxs5("div", { className: "lumir-toolbar-group", children: [
+    /* @__PURE__ */ jsx6(
       "button",
       {
         className: "lumir-toolbar-btn",
@@ -1381,7 +1701,7 @@ var UndoRedoButtons = ({ editor }) => {
         children: Icons.undo
       }
     ),
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "button",
       {
         className: "lumir-toolbar-btn",
@@ -1396,8 +1716,8 @@ var UndoRedoButtons = ({ editor }) => {
 };
 
 // src/components/FloatingMenu/components/TextStyleButton.tsx
-import { useCallback as useCallback4 } from "react";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { useCallback as useCallback5 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var iconMap = {
   bold: Icons.bold,
   italic: Icons.italic,
@@ -1423,17 +1743,17 @@ var TextStyleButton = ({
     }
   };
   const isActive = getIsActive();
-  const handleClick = useCallback4(() => {
+  const handleClick = useCallback5(() => {
     try {
       editor?.toggleStyles?.({ [style]: true });
     } catch (err) {
       console.error(`Toggle ${style} failed:`, err);
     }
   }, [editor, style]);
-  const handleMouseDown = useCallback4((e) => {
+  const handleMouseDown = useCallback5((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "button",
     {
       className: cn("lumir-toolbar-btn", isActive && "is-active"),
@@ -1447,8 +1767,8 @@ var TextStyleButton = ({
 };
 
 // src/components/FloatingMenu/components/AlignButton.tsx
-import { useCallback as useCallback5 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { useCallback as useCallback6 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var iconMap2 = {
   left: Icons.alignLeft,
   center: Icons.alignCenter,
@@ -1472,7 +1792,7 @@ var AlignButton = ({
     }
   };
   const isActive = getCurrentAlignment() === alignment;
-  const handleClick = useCallback5(() => {
+  const handleClick = useCallback6(() => {
     try {
       const block = editor?.getTextCursorPosition()?.block;
       if (block && editor?.updateBlock) {
@@ -1482,10 +1802,10 @@ var AlignButton = ({
       console.error(`Set alignment ${alignment} failed:`, err);
     }
   }, [editor, alignment]);
-  const handleMouseDown = useCallback5((e) => {
+  const handleMouseDown = useCallback6((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "button",
     {
       className: cn("lumir-toolbar-btn", isActive && "is-active"),
@@ -1499,8 +1819,8 @@ var AlignButton = ({
 };
 
 // src/components/FloatingMenu/components/ListButton.tsx
-import { useCallback as useCallback6 } from "react";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { useCallback as useCallback7 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var iconMap3 = {
   bullet: Icons.bulletList,
   numbered: Icons.numberedList
@@ -1520,7 +1840,7 @@ var ListButton = ({ editor, type }) => {
     }
   };
   const isActive = getIsActive();
-  const handleClick = useCallback6(() => {
+  const handleClick = useCallback7(() => {
     try {
       const block = editor?.getTextCursorPosition()?.block;
       if (block && editor?.updateBlock) {
@@ -1532,10 +1852,10 @@ var ListButton = ({ editor, type }) => {
       console.error(`List toggle failed:`, err);
     }
   }, [editor, type]);
-  const handleMouseDown = useCallback6((e) => {
+  const handleMouseDown = useCallback7((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "button",
     {
       className: cn("lumir-toolbar-btn", isActive && "is-active"),
@@ -1549,13 +1869,13 @@ var ListButton = ({ editor, type }) => {
 };
 
 // src/components/FloatingMenu/components/ImageButton.tsx
-import { useCallback as useCallback7 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { useCallback as useCallback8 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var ImageButton = ({
   editor,
   onImageUpload
 }) => {
-  const handleClick = useCallback7(() => {
+  const handleClick = useCallback8(() => {
     if (onImageUpload) {
       onImageUpload();
     } else {
@@ -1580,10 +1900,10 @@ var ImageButton = ({
       input.click();
     }
   }, [editor, onImageUpload]);
-  const handleMouseDown = useCallback7((e) => {
+  const handleMouseDown = useCallback8((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "button",
     {
       className: "lumir-toolbar-btn",
@@ -1597,7 +1917,7 @@ var ImageButton = ({
 };
 
 // src/components/FloatingMenu/components/ColorButton.tsx
-import { useState as useState3, useEffect as useEffect3, useRef as useRef3, useCallback as useCallback8 } from "react";
+import { useState as useState4, useEffect as useEffect4, useRef as useRef4, useCallback as useCallback9 } from "react";
 
 // src/constants/colors.ts
 var TEXT_COLORS = [
@@ -1631,13 +1951,13 @@ var getHexFromColorValue = (value, type) => {
 };
 
 // src/components/FloatingMenu/components/ColorButton.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var ColorButton = ({ editor, type }) => {
-  const [isOpen, setIsOpen] = useState3(false);
-  const [currentColor, setCurrentColor] = useState3("default");
-  const dropdownRef = useRef3(null);
+  const [isOpen, setIsOpen] = useState4(false);
+  const [currentColor, setCurrentColor] = useState4("default");
+  const dropdownRef = useRef4(null);
   const colors = type === "text" ? TEXT_COLORS : BACKGROUND_COLORS;
-  const getCurrentColor = useCallback8(() => {
+  const getCurrentColor = useCallback9(() => {
     try {
       const activeStyles = editor?.getActiveStyles?.() || {};
       if (type === "text" && activeStyles.textColor) {
@@ -1649,13 +1969,13 @@ var ColorButton = ({ editor, type }) => {
     }
     return "default";
   }, [editor, type]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isOpen) {
       const color = getCurrentColor();
       setCurrentColor(color);
     }
   }, [isOpen, getCurrentColor]);
-  useEffect3(() => {
+  useEffect4(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -1664,7 +1984,7 @@ var ColorButton = ({ editor, type }) => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const handleColorSelect = useCallback8(
+  const handleColorSelect = useCallback9(
     (color) => {
       try {
         if (!editor) return;
@@ -1681,11 +2001,11 @@ var ColorButton = ({ editor, type }) => {
     },
     [editor, type]
   );
-  const handleMouseDown = useCallback8((e) => {
+  const handleMouseDown = useCallback9((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsxs5("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs6(
       "button",
       {
         className: "lumir-toolbar-btn lumir-color-btn",
@@ -1695,7 +2015,7 @@ var ColorButton = ({ editor, type }) => {
         type: "button",
         children: [
           type === "text" ? Icons.textColor : Icons.bgColor,
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "span",
             {
               className: "lumir-color-indicator",
@@ -1707,7 +2027,7 @@ var ColorButton = ({ editor, type }) => {
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx10("div", { className: "lumir-dropdown-menu lumir-color-menu", children: /* @__PURE__ */ jsx10("div", { className: "lumir-color-grid", children: colors.map((color) => /* @__PURE__ */ jsx10(
+    isOpen && /* @__PURE__ */ jsx11("div", { className: "lumir-dropdown-menu lumir-color-menu", children: /* @__PURE__ */ jsx11("div", { className: "lumir-color-grid", children: colors.map((color) => /* @__PURE__ */ jsx11(
       "button",
       {
         className: cn(
@@ -1726,8 +2046,8 @@ var ColorButton = ({ editor, type }) => {
 };
 
 // src/components/FloatingMenu/components/LinkButton.tsx
-import { useState as useState4, useEffect as useEffect4, useRef as useRef4, useCallback as useCallback9 } from "react";
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useState as useState5, useEffect as useEffect5, useRef as useRef5, useCallback as useCallback10 } from "react";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 var isDangerousProtocol = (url) => {
   const trimmedUrl = url.trim().toLowerCase();
   const dangerousPatterns = [
@@ -1753,13 +2073,13 @@ var normalizeUrl = (url) => {
   return `https://${trimmedUrl}`;
 };
 var LinkButton = ({ editor }) => {
-  const [isOpen, setIsOpen] = useState4(false);
-  const [linkUrl, setLinkUrl] = useState4("");
-  const [errorMsg, setErrorMsg] = useState4(null);
-  const dropdownRef = useRef4(null);
-  const inputRef = useRef4(null);
-  const hasSelectionRef = useRef4(false);
-  useEffect4(() => {
+  const [isOpen, setIsOpen] = useState5(false);
+  const [linkUrl, setLinkUrl] = useState5("");
+  const [errorMsg, setErrorMsg] = useState5(null);
+  const dropdownRef = useRef5(null);
+  const inputRef = useRef5(null);
+  const hasSelectionRef = useRef5(false);
+  useEffect5(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -1770,7 +2090,7 @@ var LinkButton = ({ editor }) => {
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isOpen && inputRef.current) {
       try {
         const selectedText = editor?.getSelectedText?.() || "";
@@ -1781,7 +2101,7 @@ var LinkButton = ({ editor }) => {
       setTimeout(() => inputRef.current?.focus(), 0);
     }
   }, [isOpen, editor]);
-  const handleSubmit = useCallback9(
+  const handleSubmit = useCallback10(
     (e) => {
       e?.preventDefault();
       setErrorMsg(null);
@@ -1808,15 +2128,15 @@ var LinkButton = ({ editor }) => {
     },
     [editor, linkUrl]
   );
-  const handleCancel = useCallback9(() => {
+  const handleCancel = useCallback10(() => {
     setIsOpen(false);
     setLinkUrl("");
     setErrorMsg(null);
   }, []);
-  const handleMouseDown = useCallback9((e) => {
+  const handleMouseDown = useCallback10((e) => {
     e.preventDefault();
   }, []);
-  const handleKeyDown = useCallback9(
+  const handleKeyDown = useCallback10(
     (e) => {
       if (e.key === "Enter") {
         handleSubmit();
@@ -1826,8 +2146,8 @@ var LinkButton = ({ editor }) => {
     },
     [handleSubmit, handleCancel]
   );
-  return /* @__PURE__ */ jsxs6("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs7("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsx12(
       "button",
       {
         className: "lumir-toolbar-btn",
@@ -1838,8 +2158,8 @@ var LinkButton = ({ editor }) => {
         children: Icons.link
       }
     ),
-    isOpen && /* @__PURE__ */ jsx11("div", { className: "lumir-dropdown-menu lumir-link-menu", children: /* @__PURE__ */ jsxs6("form", { onSubmit: handleSubmit, className: "lumir-link-form", children: [
-      /* @__PURE__ */ jsx11(
+    isOpen && /* @__PURE__ */ jsx12("div", { className: "lumir-dropdown-menu lumir-link-menu", children: /* @__PURE__ */ jsxs7("form", { onSubmit: handleSubmit, className: "lumir-link-form", children: [
+      /* @__PURE__ */ jsx12(
         "input",
         {
           ref: inputRef,
@@ -1855,7 +2175,7 @@ var LinkButton = ({ editor }) => {
           onMouseDown: handleMouseDown
         }
       ),
-      errorMsg && /* @__PURE__ */ jsx11(
+      errorMsg && /* @__PURE__ */ jsx12(
         "div",
         {
           style: {
@@ -1867,8 +2187,8 @@ var LinkButton = ({ editor }) => {
           children: errorMsg
         }
       ),
-      /* @__PURE__ */ jsxs6("div", { className: "lumir-link-actions", children: [
-        /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsxs7("div", { className: "lumir-link-actions", children: [
+        /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -1878,7 +2198,7 @@ var LinkButton = ({ editor }) => {
             children: "\uCDE8\uC18C"
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "button",
           {
             type: "submit",
@@ -1894,10 +2214,10 @@ var LinkButton = ({ editor }) => {
 };
 
 // src/components/FloatingMenu/components/TableButton.tsx
-import { useCallback as useCallback10 } from "react";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { useCallback as useCallback11 } from "react";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var TableButton = ({ editor }) => {
-  const handleClick = useCallback10(() => {
+  const handleClick = useCallback11(() => {
     try {
       const block = editor?.getTextCursorPosition()?.block;
       if (!block || !editor?.insertBlocks) return;
@@ -1919,10 +2239,10 @@ var TableButton = ({ editor }) => {
       console.error("Table insert failed:", err);
     }
   }, [editor]);
-  const handleMouseDown = useCallback10((e) => {
+  const handleMouseDown = useCallback11((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "button",
     {
       className: "lumir-toolbar-btn",
@@ -1936,13 +2256,13 @@ var TableButton = ({ editor }) => {
 };
 
 // src/components/FloatingMenu/components/HTMLImportButton.tsx
-import { useCallback as useCallback11, useRef as useRef5 } from "react";
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { useCallback as useCallback12, useRef as useRef6 } from "react";
+import { Fragment as Fragment3, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 var HTMLImportButton = ({
   editor
 }) => {
-  const fileInputRef = useRef5(null);
-  const handleFileUpload = useCallback11(
+  const fileInputRef = useRef6(null);
+  const handleFileUpload = useCallback12(
     (e) => {
       const file = e.target.files?.[0];
       if (!file) return;
@@ -1978,14 +2298,14 @@ var HTMLImportButton = ({
     },
     [editor]
   );
-  const handleClick = useCallback11(() => {
+  const handleClick = useCallback12(() => {
     fileInputRef.current?.click();
   }, []);
-  const handleMouseDown = useCallback11((e) => {
+  const handleMouseDown = useCallback12((e) => {
     e.preventDefault();
   }, []);
-  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs8(Fragment3, { children: [
+    /* @__PURE__ */ jsx14(
       "input",
       {
         ref: fileInputRef,
@@ -1995,7 +2315,7 @@ var HTMLImportButton = ({
         style: { display: "none" }
       }
     ),
-    /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsx14(
       "button",
       {
         className: "lumir-toolbar-btn",
@@ -2010,8 +2330,8 @@ var HTMLImportButton = ({
 };
 
 // src/components/FloatingMenu/components/BlockTypeSelect.tsx
-import { useState as useState5, useEffect as useEffect5, useRef as useRef6, useCallback as useCallback12 } from "react";
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { useState as useState6, useEffect as useEffect6, useRef as useRef7, useCallback as useCallback13 } from "react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 var blockTypeCategories = [
   {
     category: "Headings",
@@ -2041,8 +2361,8 @@ var blockTypes = blockTypeCategories.flatMap(
   (cat) => cat.items
 );
 var BlockTypeSelect = ({ editor }) => {
-  const [isOpen, setIsOpen] = useState5(false);
-  const dropdownRef = useRef6(null);
+  const [isOpen, setIsOpen] = useState6(false);
+  const dropdownRef = useRef7(null);
   const getCurrentBlock = () => {
     try {
       return editor?.getTextCursorPosition()?.block;
@@ -2054,7 +2374,7 @@ var BlockTypeSelect = ({ editor }) => {
   const currentType = currentBlock?.type || "paragraph";
   const currentLevel = currentBlock?.props?.level;
   const isCurrentToggle = currentType === "heading" && currentBlock?.props?.isToggleable === true;
-  useEffect5(() => {
+  useEffect6(() => {
     const handleClickOutside = (e) => {
       if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
         setIsOpen(false);
@@ -2083,7 +2403,7 @@ var BlockTypeSelect = ({ editor }) => {
       console.error("Block type change failed:", err);
     }
   };
-  const handleMouseDown = useCallback12((e) => {
+  const handleMouseDown = useCallback13((e) => {
     e.preventDefault();
   }, []);
   const getCurrentLabel = () => {
@@ -2114,8 +2434,8 @@ var BlockTypeSelect = ({ editor }) => {
     }
     return currentType === bt.type;
   };
-  return /* @__PURE__ */ jsxs8("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
-    /* @__PURE__ */ jsxs8(
+  return /* @__PURE__ */ jsxs9("div", { className: "lumir-dropdown-wrapper", ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs9(
       "button",
       {
         className: "lumir-dropdown-btn lumir-block-type-btn",
@@ -2123,15 +2443,15 @@ var BlockTypeSelect = ({ editor }) => {
         onMouseDown: handleMouseDown,
         type: "button",
         children: [
-          /* @__PURE__ */ jsx14("span", { className: "lumir-block-icon", children: BlockTypeIcons[getCurrentIcon()] }),
-          /* @__PURE__ */ jsx14("span", { className: "lumir-block-label", children: getCurrentLabel() }),
+          /* @__PURE__ */ jsx15("span", { className: "lumir-block-icon", children: BlockTypeIcons[getCurrentIcon()] }),
+          /* @__PURE__ */ jsx15("span", { className: "lumir-block-label", children: getCurrentLabel() }),
           Icons.expandMore
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsx14("div", { className: "lumir-dropdown-menu lumir-block-menu", children: blockTypeCategories.map((category) => /* @__PURE__ */ jsxs8("div", { className: "lumir-block-category", children: [
-      /* @__PURE__ */ jsx14("div", { className: "lumir-block-category-title", children: category.category }),
-      category.items.map((bt) => /* @__PURE__ */ jsxs8(
+    isOpen && /* @__PURE__ */ jsx15("div", { className: "lumir-dropdown-menu lumir-block-menu", children: blockTypeCategories.map((category) => /* @__PURE__ */ jsxs9("div", { className: "lumir-block-category", children: [
+      /* @__PURE__ */ jsx15("div", { className: "lumir-block-category-title", children: category.category }),
+      category.items.map((bt) => /* @__PURE__ */ jsxs9(
         "button",
         {
           className: cn(
@@ -2141,8 +2461,8 @@ var BlockTypeSelect = ({ editor }) => {
           onClick: () => handleTypeChange(bt.type, bt.level, bt.isToggle),
           onMouseDown: handleMouseDown,
           children: [
-            /* @__PURE__ */ jsx14("span", { className: "lumir-block-icon", children: BlockTypeIcons[bt.icon] }),
-            /* @__PURE__ */ jsx14("span", { className: "lumir-block-item-title", children: bt.label })
+            /* @__PURE__ */ jsx15("span", { className: "lumir-block-icon", children: BlockTypeIcons[bt.icon] }),
+            /* @__PURE__ */ jsx15("span", { className: "lumir-block-item-title", children: bt.label })
           ]
         },
         bt.icon
@@ -2152,7 +2472,7 @@ var BlockTypeSelect = ({ editor }) => {
 };
 
 // src/components/FloatingMenu/index.tsx
-import { Fragment as Fragment3, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 var COMPACT_BREAKPOINT = 700;
 var MINIMIZED_BREAKPOINT = 400;
 var FloatingMenu = ({
@@ -2161,12 +2481,12 @@ var FloatingMenu = ({
   className,
   onImageUpload
 }) => {
-  const wrapperRef = useRef7(null);
-  const [isCompact, setIsCompact] = useState6(false);
-  const [isMinimizable, setIsMinimizable] = useState6(false);
-  const [isMinimized, setIsMinimized] = useState6(false);
-  const [, setSelectionTick] = useState6(0);
-  useEffect6(() => {
+  const wrapperRef = useRef8(null);
+  const [isCompact, setIsCompact] = useState7(false);
+  const [isMinimizable, setIsMinimizable] = useState7(false);
+  const [isMinimized, setIsMinimized] = useState7(false);
+  const [, setSelectionTick] = useState7(0);
+  useEffect7(() => {
     if (!editor) return;
     let debounceTimer = null;
     const DEBOUNCE_DELAY = 150;
@@ -2190,7 +2510,7 @@ var FloatingMenu = ({
       unsubscribeContent?.();
     };
   }, [editor]);
-  useEffect6(() => {
+  useEffect7(() => {
     const checkWidth = () => {
       if (wrapperRef.current) {
         const width = wrapperRef.current.offsetWidth;
@@ -2205,8 +2525,8 @@ var FloatingMenu = ({
     }
     return () => resizeObserver.disconnect();
   }, []);
-  const MinimizedLayout = () => /* @__PURE__ */ jsxs9(Fragment3, { children: [
-    /* @__PURE__ */ jsx15(
+  const MinimizedLayout = () => /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx16(
       "button",
       {
         className: "lumir-toolbar-button lumir-toggle-button",
@@ -2217,117 +2537,117 @@ var FloatingMenu = ({
         children: isMinimized ? Icons.chevronRight : Icons.chevronLeft
       }
     ),
-    !isMinimized && /* @__PURE__ */ jsxs9(Fragment3, { children: [
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsx15(UndoRedoButtons, { editor }),
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsx15("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ jsx15(BlockTypeSelect, { editor }) }),
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-        /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "bold" }),
-        /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "italic" }),
-        /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "underline" }),
-        /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "strike" })
+    !isMinimized && /* @__PURE__ */ jsxs10(Fragment4, { children: [
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsx16(UndoRedoButtons, { editor }),
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsx16("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ jsx16(BlockTypeSelect, { editor }) }),
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+        /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "bold" }),
+        /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "italic" }),
+        /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "underline" }),
+        /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "strike" })
       ] }),
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-        /* @__PURE__ */ jsx15(AlignButton, { editor, alignment: "left" }),
-        /* @__PURE__ */ jsx15(AlignButton, { editor, alignment: "center" }),
-        /* @__PURE__ */ jsx15(AlignButton, { editor, alignment: "right" })
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+        /* @__PURE__ */ jsx16(AlignButton, { editor, alignment: "left" }),
+        /* @__PURE__ */ jsx16(AlignButton, { editor, alignment: "center" }),
+        /* @__PURE__ */ jsx16(AlignButton, { editor, alignment: "right" })
       ] }),
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-        /* @__PURE__ */ jsx15(ListButton, { editor, type: "bullet" }),
-        /* @__PURE__ */ jsx15(ListButton, { editor, type: "numbered" })
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+        /* @__PURE__ */ jsx16(ListButton, { editor, type: "bullet" }),
+        /* @__PURE__ */ jsx16(ListButton, { editor, type: "numbered" })
       ] }),
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-        /* @__PURE__ */ jsx15(ColorButton, { editor, type: "text" }),
-        /* @__PURE__ */ jsx15(ColorButton, { editor, type: "background" })
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+        /* @__PURE__ */ jsx16(ColorButton, { editor, type: "text" }),
+        /* @__PURE__ */ jsx16(ColorButton, { editor, type: "background" })
       ] }),
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-        /* @__PURE__ */ jsx15(ImageButton, { editor, onImageUpload }),
-        /* @__PURE__ */ jsx15(LinkButton, { editor }),
-        /* @__PURE__ */ jsx15(TableButton, { editor }),
-        /* @__PURE__ */ jsx15(HTMLImportButton, { editor })
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+        /* @__PURE__ */ jsx16(ImageButton, { editor, onImageUpload }),
+        /* @__PURE__ */ jsx16(LinkButton, { editor }),
+        /* @__PURE__ */ jsx16(TableButton, { editor }),
+        /* @__PURE__ */ jsx16(HTMLImportButton, { editor })
       ] })
     ] })
   ] });
-  const SingleRowLayout = () => /* @__PURE__ */ jsxs9(Fragment3, { children: [
-    /* @__PURE__ */ jsx15(UndoRedoButtons, { editor }),
-    /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-    /* @__PURE__ */ jsx15("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ jsx15(BlockTypeSelect, { editor }) }),
-    /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-    /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-      /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "bold" }),
-      /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "italic" }),
-      /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "underline" }),
-      /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "strike" })
+  const SingleRowLayout = () => /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx16(UndoRedoButtons, { editor }),
+    /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+    /* @__PURE__ */ jsx16("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ jsx16(BlockTypeSelect, { editor }) }),
+    /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+    /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+      /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "bold" }),
+      /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "italic" }),
+      /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "underline" }),
+      /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "strike" })
     ] }),
-    /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-    /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-      /* @__PURE__ */ jsx15(AlignButton, { editor, alignment: "left" }),
-      /* @__PURE__ */ jsx15(AlignButton, { editor, alignment: "center" }),
-      /* @__PURE__ */ jsx15(AlignButton, { editor, alignment: "right" })
+    /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+    /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+      /* @__PURE__ */ jsx16(AlignButton, { editor, alignment: "left" }),
+      /* @__PURE__ */ jsx16(AlignButton, { editor, alignment: "center" }),
+      /* @__PURE__ */ jsx16(AlignButton, { editor, alignment: "right" })
     ] }),
-    /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-    /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-      /* @__PURE__ */ jsx15(ListButton, { editor, type: "bullet" }),
-      /* @__PURE__ */ jsx15(ListButton, { editor, type: "numbered" })
+    /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+    /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+      /* @__PURE__ */ jsx16(ListButton, { editor, type: "bullet" }),
+      /* @__PURE__ */ jsx16(ListButton, { editor, type: "numbered" })
     ] }),
-    /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-    /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-      /* @__PURE__ */ jsx15(ColorButton, { editor, type: "text" }),
-      /* @__PURE__ */ jsx15(ColorButton, { editor, type: "background" })
+    /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+    /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+      /* @__PURE__ */ jsx16(ColorButton, { editor, type: "text" }),
+      /* @__PURE__ */ jsx16(ColorButton, { editor, type: "background" })
     ] }),
-    /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-    /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-      /* @__PURE__ */ jsx15(ImageButton, { editor, onImageUpload }),
-      /* @__PURE__ */ jsx15(LinkButton, { editor }),
-      /* @__PURE__ */ jsx15(TableButton, { editor }),
-      /* @__PURE__ */ jsx15(HTMLImportButton, { editor })
+    /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+    /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+      /* @__PURE__ */ jsx16(ImageButton, { editor, onImageUpload }),
+      /* @__PURE__ */ jsx16(LinkButton, { editor }),
+      /* @__PURE__ */ jsx16(TableButton, { editor }),
+      /* @__PURE__ */ jsx16(HTMLImportButton, { editor })
     ] })
   ] });
-  const TwoRowLayout = () => /* @__PURE__ */ jsxs9(Fragment3, { children: [
-    /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-row", children: [
-      /* @__PURE__ */ jsx15(UndoRedoButtons, { editor }),
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-        /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "bold" }),
-        /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "italic" }),
-        /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "underline" }),
-        /* @__PURE__ */ jsx15(TextStyleButton, { editor, style: "strike" })
+  const TwoRowLayout = () => /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-row", children: [
+      /* @__PURE__ */ jsx16(UndoRedoButtons, { editor }),
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+        /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "bold" }),
+        /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "italic" }),
+        /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "underline" }),
+        /* @__PURE__ */ jsx16(TextStyleButton, { editor, style: "strike" })
       ] }),
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-        /* @__PURE__ */ jsx15(AlignButton, { editor, alignment: "left" }),
-        /* @__PURE__ */ jsx15(AlignButton, { editor, alignment: "center" }),
-        /* @__PURE__ */ jsx15(AlignButton, { editor, alignment: "right" })
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+        /* @__PURE__ */ jsx16(AlignButton, { editor, alignment: "left" }),
+        /* @__PURE__ */ jsx16(AlignButton, { editor, alignment: "center" }),
+        /* @__PURE__ */ jsx16(AlignButton, { editor, alignment: "right" })
       ] }),
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-        /* @__PURE__ */ jsx15(ListButton, { editor, type: "bullet" }),
-        /* @__PURE__ */ jsx15(ListButton, { editor, type: "numbered" })
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+        /* @__PURE__ */ jsx16(ListButton, { editor, type: "bullet" }),
+        /* @__PURE__ */ jsx16(ListButton, { editor, type: "numbered" })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-row", children: [
-      /* @__PURE__ */ jsx15("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ jsx15(BlockTypeSelect, { editor }) }),
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-        /* @__PURE__ */ jsx15(ColorButton, { editor, type: "text" }),
-        /* @__PURE__ */ jsx15(ColorButton, { editor, type: "background" })
+    /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-row", children: [
+      /* @__PURE__ */ jsx16("div", { className: "lumir-toolbar-group", children: /* @__PURE__ */ jsx16(BlockTypeSelect, { editor }) }),
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+        /* @__PURE__ */ jsx16(ColorButton, { editor, type: "text" }),
+        /* @__PURE__ */ jsx16(ColorButton, { editor, type: "background" })
       ] }),
-      /* @__PURE__ */ jsx15(ToolbarDivider, {}),
-      /* @__PURE__ */ jsxs9("div", { className: "lumir-toolbar-group", children: [
-        /* @__PURE__ */ jsx15(ImageButton, { editor, onImageUpload }),
-        /* @__PURE__ */ jsx15(LinkButton, { editor }),
-        /* @__PURE__ */ jsx15(TableButton, { editor }),
-        /* @__PURE__ */ jsx15(HTMLImportButton, { editor })
+      /* @__PURE__ */ jsx16(ToolbarDivider, {}),
+      /* @__PURE__ */ jsxs10("div", { className: "lumir-toolbar-group", children: [
+        /* @__PURE__ */ jsx16(ImageButton, { editor, onImageUpload }),
+        /* @__PURE__ */ jsx16(LinkButton, { editor }),
+        /* @__PURE__ */ jsx16(TableButton, { editor }),
+        /* @__PURE__ */ jsx16(HTMLImportButton, { editor })
       ] })
     ] })
   ] });
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ref: wrapperRef,
@@ -2337,7 +2657,7 @@ var FloatingMenu = ({
         className
       ),
       "data-position": position,
-      children: /* @__PURE__ */ jsx15(
+      children: /* @__PURE__ */ jsx16(
         "div",
         {
           className: cn(
@@ -2346,7 +2666,7 @@ var FloatingMenu = ({
             isMinimizable && "is-minimizable",
             isMinimized && "is-minimized"
           ),
-          children: isMinimizable ? /* @__PURE__ */ jsx15(MinimizedLayout, {}) : isCompact ? /* @__PURE__ */ jsx15(TwoRowLayout, {}) : /* @__PURE__ */ jsx15(SingleRowLayout, {})
+          children: isMinimizable ? /* @__PURE__ */ jsx16(MinimizedLayout, {}) : isCompact ? /* @__PURE__ */ jsx16(TwoRowLayout, {}) : /* @__PURE__ */ jsx16(SingleRowLayout, {})
         }
       )
     }
@@ -2417,15 +2737,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 설정 에러 생성
@@ -2448,10 +2767,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
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs11 } from "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 문자열의 유효성을 검증합니다
@@ -2580,6 +2927,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"));
 };
@@ -2593,15 +2959,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);
@@ -2611,12 +2979,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;
 };
@@ -2642,7 +3008,7 @@ var findBlockWithLink = (blocks, targetUrl) => {
 var ConvertToPreviewButton = ({ url }) => {
   const editor = useBlockNoteEditor();
   const Components = useComponentsContext();
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Components.LinkToolbar.Button,
     {
       className: "bn-button",
@@ -2661,10 +3027,10 @@ var ConvertToPreviewButton = ({ url }) => {
           console.error("Convert to link preview failed:", err);
         }
       },
-      icon: /* @__PURE__ */ jsxs10("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-        /* @__PURE__ */ jsx16("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
-        /* @__PURE__ */ jsx16("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
-        /* @__PURE__ */ jsx16("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
+      icon: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+        /* @__PURE__ */ jsx17("rect", { x: "1", y: "3", width: "14", height: "10", rx: "2", stroke: "currentColor", strokeWidth: "1.5", fill: "none" }),
+        /* @__PURE__ */ jsx17("line", { x1: "1", y1: "9", x2: "15", y2: "9", stroke: "currentColor", strokeWidth: "1.5" }),
+        /* @__PURE__ */ jsx17("circle", { cx: "5", cy: "6.5", r: "1.5", stroke: "currentColor", strokeWidth: "1", fill: "none" })
       ] })
     }
   );
@@ -2673,17 +3039,17 @@ var CustomLinkToolbar = (props) => {
   const editor = useBlockNoteEditor();
   const Components = useComponentsContext();
   const hasLinkPreview = !!editor?._linkPreviewApiEndpoint;
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     Components.LinkToolbar.Root,
     {
       className: "bn-toolbar bn-link-toolbar",
       onMouseEnter: props.stopHideTimer,
       onMouseLeave: props.startHideTimer,
       children: [
-        /* @__PURE__ */ jsx16(EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
-        /* @__PURE__ */ jsx16(OpenLinkButton, { url: props.url }),
-        /* @__PURE__ */ jsx16(DeleteLinkButton, { deleteLink: props.deleteLink }),
-        hasLinkPreview && /* @__PURE__ */ jsx16(ConvertToPreviewButton, { url: props.url })
+        /* @__PURE__ */ jsx17(EditLinkButton, { url: props.url, text: props.text, editLink: props.editLink }),
+        /* @__PURE__ */ jsx17(OpenLinkButton, { url: props.url }),
+        /* @__PURE__ */ jsx17(DeleteLinkButton, { deleteLink: props.deleteLink }),
+        hasLinkPreview && /* @__PURE__ */ jsx17(ConvertToPreviewButton, { url: props.url })
       ]
     }
   );
@@ -2725,9 +3091,13 @@ function LumirEditor({
   onError,
   onImageDelete
 }) {
-  const [isUploading, setIsUploading] = useState7(false);
-  const [errorMessage, setErrorMessage] = useState7(null);
-  const handleError = useCallback13(
+  const [isUploading, setIsUploading] = useState8(false);
+  const [uploadProgress, setUploadProgress] = useState8(null);
+  const [errorMessage, setErrorMessage] = useState8(null);
+  const floatingMenuFileInputRef = useRef9(null);
+  const floatingMenuBlockRef = useRef9(null);
+  const floatingMenuUploadStartTimeRef = useRef9(0);
+  const handleError = useCallback14(
     (error) => {
       onError?.(error);
       setErrorMessage(error.getUserMessage());
@@ -2757,8 +3127,15 @@ function LumirEditor({
       allowFileUpload
     );
   }, [disableExtensions, allowVideoUpload, allowAudioUpload, allowFileUpload]);
-  const fileNameTransformRef = useRef8(s3Upload?.fileNameTransform);
-  useEffect7(() => {
+  useEffect8(() => {
+    DEBUG_LOG("LumirEditor:init:disabledExtensions", "snapshot", {
+      allowVideoUpload,
+      hasVideoInDisabled: disabledExtensions.includes("video"),
+      disabledList: disabledExtensions.slice(0, 15)
+    });
+  }, [allowVideoUpload, disabledExtensions]);
+  const fileNameTransformRef = useRef9(s3Upload?.fileNameTransform);
+  useEffect8(() => {
     fileNameTransformRef.current = s3Upload?.fileNameTransform;
   }, [s3Upload?.fileNameTransform]);
   const memoizedS3Upload = useMemo(() => {
@@ -2769,6 +3146,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;
@@ -2779,7 +3162,10 @@ function LumirEditor({
     s3Upload?.env,
     s3Upload?.path,
     s3Upload?.appendUUID,
-    s3Upload?.preserveExtension
+    s3Upload?.preserveExtension,
+    s3Upload?.uploadTimeoutMs,
+    s3Upload?.maxRetries,
+    s3Upload?.onProgress
   ]);
   const editor = useCreateBlockNote(
     {
@@ -2797,18 +3183,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."
@@ -2816,8 +3228,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;
           }
@@ -2827,6 +3247,8 @@ function LumirEditor({
           );
           handleError(lumirError);
           throw lumirError;
+        } finally {
+          setUploadProgress(null);
         }
       },
       pasteHandler: (ctx) => {
@@ -2855,7 +3277,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;
@@ -2869,13 +3299,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
                 );
@@ -2898,6 +3341,7 @@ function LumirEditor({
       trailingBlock,
       uploadFile,
       memoizedS3Upload,
+      allowVideoUpload,
       linkPreview?.apiEndpoint,
       placeholder
     ]
@@ -2905,12 +3349,12 @@ function LumirEditor({
   if (editor && linkPreview?.apiEndpoint) {
     editor._linkPreviewApiEndpoint = linkPreview.apiEndpoint;
   }
-  useEffect7(() => {
+  useEffect8(() => {
     if (editor) {
       editor.isEditable = editable;
     }
   }, [editor, editable]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!editor || !onContentChange) return;
     const handleContentChange = () => {
       const blocks = editor.topLevelBlocks;
@@ -2918,27 +3362,27 @@ function LumirEditor({
     };
     return editor.onEditorContentChange(handleContentChange);
   }, [editor, onContentChange]);
-  const previousImageUrlsRef = useRef8(/* @__PURE__ */ new Set());
-  useEffect7(() => {
+  const previousMediaUrlsRef = useRef9(/* @__PURE__ */ new Set());
+  useEffect8(() => {
     if (!editor) return;
     const initialBlocks = editor.topLevelBlocks;
-    previousImageUrlsRef.current = extractImageUrls(initialBlocks);
+    previousMediaUrlsRef.current = extractMediaUrls(initialBlocks);
   }, [editor]);
-  useEffect7(() => {
+  useEffect8(() => {
     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]);
-  useEffect7(() => {
+  useEffect8(() => {
     const el = editor?.domElement;
     if (!el) return;
     const handleDragOver = (e) => {
@@ -2958,11 +3402,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) {
@@ -2981,6 +3445,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();
@@ -3020,56 +3512,124 @@ function LumirEditor({
       });
       el.removeEventListener("drop", handleDrop, { capture: true });
     };
-  }, [editor]);
+  }, [editor, allowVideoUpload]);
   const computedSideMenu = useMemo(() => {
     return sideMenuAddButton ? sideMenu : false;
   }, [sideMenuAddButton, sideMenu]);
   const DragHandleOnlySideMenu = useMemo(() => {
-    return (props) => /* @__PURE__ */ jsx16(BlockSideMenu, { ...props, children: /* @__PURE__ */ jsx16(DragHandleButton, { ...props }) });
+    return (props) => /* @__PURE__ */ jsx17(BlockSideMenu, { ...props, children: /* @__PURE__ */ jsx17(DragHandleButton, { ...props }) });
   }, []);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       className: cn("lumirEditor", className),
       style: { position: "relative", display: "flex", flexDirection: "column" },
       children: [
-        floatingMenu && editor && /* @__PURE__ */ jsx16(
-          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__ */ jsxs11(Fragment5, { children: [
+          /* @__PURE__ */ jsx17(
+            "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__ */ jsxs10(
+          ),
+          /* @__PURE__ */ jsx17(
+            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__ */ jsxs11(
           BlockNoteView,
           {
             editor,
@@ -3084,19 +3644,21 @@ function LumirEditor({
             tableHandles,
             onSelectionChange,
             children: [
-              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ jsx16(LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ jsx16(LinkToolbarController, {})),
-              /* @__PURE__ */ jsx16(
+              linkToolbar && (linkPreview?.apiEndpoint ? /* @__PURE__ */ jsx17(LinkToolbarController, { linkToolbar: CustomLinkToolbar }) : /* @__PURE__ */ jsx17(LinkToolbarController, {})),
+              /* @__PURE__ */ jsx17(
                 SuggestionMenuController,
                 {
                   triggerCharacter: "/",
-                  getItems: useCallback13(
+                  getItems: useCallback14(
                     async (query) => {
                       const items = getDefaultReactSlashMenuItems(editor);
                       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;
                       });
@@ -3131,7 +3693,7 @@ function LumirEditor({
                         },
                         aliases: ["html", "preview", "\uC6F9", "\uC6F9\uD398\uC774\uC9C0"],
                         group: "Embeds",
-                        icon: /* @__PURE__ */ jsxs10(
+                        icon: /* @__PURE__ */ jsxs11(
                           "svg",
                           {
                             width: "18",
@@ -3143,8 +3705,8 @@ function LumirEditor({
                             strokeLinecap: "round",
                             strokeLinejoin: "round",
                             children: [
-                              /* @__PURE__ */ jsx16("polyline", { points: "16 18 22 12 16 6" }),
-                              /* @__PURE__ */ jsx16("polyline", { points: "8 6 2 12 8 18" })
+                              /* @__PURE__ */ jsx17("polyline", { points: "16 18 22 12 16 6" }),
+                              /* @__PURE__ */ jsx17("polyline", { points: "8 6 2 12 8 18" })
                             ]
                           }
                         ),
@@ -3169,7 +3731,7 @@ function LumirEditor({
                             "\uD504\uB9AC\uBDF0"
                           ],
                           group: "Embeds",
-                          icon: /* @__PURE__ */ jsxs10(
+                          icon: /* @__PURE__ */ jsxs11(
                             "svg",
                             {
                               width: "18",
@@ -3181,8 +3743,8 @@ function LumirEditor({
                               strokeLinecap: "round",
                               strokeLinejoin: "round",
                               children: [
-                                /* @__PURE__ */ jsx16("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
-                                /* @__PURE__ */ jsx16("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+                                /* @__PURE__ */ jsx17("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+                                /* @__PURE__ */ jsx17("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
                               ]
                             }
                           ),
@@ -3197,19 +3759,25 @@ function LumirEditor({
                         )
                       );
                     },
-                    [editor, linkPreview?.apiEndpoint]
+                    [editor, allowVideoUpload, linkPreview?.apiEndpoint]
                   )
                 }
               ),
-              !sideMenuAddButton && /* @__PURE__ */ jsx16(SideMenuController, { sideMenu: DragHandleOnlySideMenu })
+              !sideMenuAddButton && /* @__PURE__ */ jsx17(SideMenuController, { sideMenu: DragHandleOnlySideMenu })
             ]
           }
         ),
-        isUploading && /* @__PURE__ */ jsx16("div", { className: "lumirEditor-upload-overlay", children: /* @__PURE__ */ jsx16("div", { className: "lumirEditor-spinner" }) }),
-        errorMessage && /* @__PURE__ */ jsxs10("div", { className: "lumirEditor-error-toast", children: [
-          /* @__PURE__ */ jsx16("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ jsx16("span", { className: "lumirEditor-error-message", children: errorMessage }),
-          /* @__PURE__ */ jsx16(
+        isUploading && /* @__PURE__ */ jsxs11("div", { className: "lumirEditor-upload-overlay", children: [
+          /* @__PURE__ */ jsx17("div", { className: "lumirEditor-spinner" }),
+          uploadProgress !== null && /* @__PURE__ */ jsxs11("span", { className: "lumirEditor-upload-progress", children: [
+            uploadProgress,
+            "%"
+          ] })
+        ] }),
+        errorMessage && /* @__PURE__ */ jsxs11("div", { className: "lumirEditor-error-toast", children: [
+          /* @__PURE__ */ jsx17("span", { className: "lumirEditor-error-icon", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ jsx17("span", { className: "lumirEditor-error-message", children: errorMessage }),
+          /* @__PURE__ */ jsx17(
             "button",
             {
               className: "lumirEditor-error-close",