@ixo/editor 1.23.0 → 1.24.0

package/dist/{chunk-22UP3RB4.mjs → chunk-OHIKNFEH.mjs}

@@ -13251,9 +13251,11 @@ import { Box as Box23, Button as Button33, Group as Group46 } from "@mantine/cor
 function CoverImage({ coverImageUrl, logoUrl }) {
   const { editor, handlers, editable } = useBlocknoteContext();
   const [isHovering, setIsHovering] = useState48(false);
+  const [isLogoHovering, setIsLogoHovering] = useState48(false);
   const [isRepositioning, setIsRepositioning] = useState48(false);
   const [coverPosition, setCoverPosition] = useState48(50);
-  const fileInputRef = useRef5(null);
+  const coverFileInputRef = useRef5(null);
+  const logoFileInputRef = useRef5(null);
   const [coverImageData, setCoverImageData] = useState48(editor?.getCoverImage?.());
   const [logoData, setLogoData] = useState48(editor?.getLogo?.());
   useEffect38(() => {
@@ -13280,6 +13282,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
   const coverUrl = coverImageData?.url || coverImageUrl;
   const logoSrc = logoData?.url || logoUrl;
   const hasCover = !!coverUrl;
+  const hasLogo = !!logoSrc;
   console.log("CoverImage: Render state", {
     coverImageData,
     logoData,
@@ -13310,10 +13313,10 @@ function CoverImage({ coverImageUrl, logoUrl }) {
     }
   };
   const handleAddCover = () => {
-    fileInputRef.current?.click();
+    coverFileInputRef.current?.click();
   };
   const handleChangeCover = () => {
-    fileInputRef.current?.click();
+    coverFileInputRef.current?.click();
   };
   const handleReposition = () => {
     setIsRepositioning(!isRepositioning);
@@ -13323,6 +13326,17 @@ function CoverImage({ coverImageUrl, logoUrl }) {
     console.log("CoverImage: Removing cover image...");
     editor.setCoverImage?.(void 0);
   };
+  const handleAddLogo = () => {
+    logoFileInputRef.current?.click();
+  };
+  const handleChangeLogo = () => {
+    logoFileInputRef.current?.click();
+  };
+  const handleRemoveLogo = () => {
+    if (!editor) return;
+    console.log("CoverImage: Removing logo...");
+    editor.setLogo?.(void 0);
+  };
   const handleMouseMove = (e) => {
     if (!isRepositioning) return;
     const rect = e.currentTarget.getBoundingClientRect();
@@ -13330,7 +13344,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
     const percentage = y / rect.height * 100;
     setCoverPosition(Math.max(0, Math.min(100, percentage)));
   };
-  if (!editable && !hasCover) {
+  if (!editable && !hasCover && !hasLogo) {
     return null;
   }
   if (!hasCover) {
@@ -13340,13 +13354,15 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         style: {
           position: "relative",
           width: "100%",
-          height: "60px",
-          backgroundColor: "#1f1f1f"
+          minHeight: hasLogo ? "100px" : "60px",
+          backgroundColor: "#1f1f1f",
+          marginBottom: hasLogo ? "70px" : "0"
         },
         onMouseEnter: () => editable && setIsHovering(true),
         onMouseLeave: () => editable && setIsHovering(false)
       },
-      /* @__PURE__ */ React140.createElement("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }),
+      /* @__PURE__ */ React140.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }),
+      /* @__PURE__ */ React140.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") }),
       editable && isHovering && /* @__PURE__ */ React140.createElement(
         Button33,
         {
@@ -13367,6 +13383,122 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           }
         },
         "Add cover"
+      ),
+      /* @__PURE__ */ React140.createElement(
+        Box23,
+        {
+          style: {
+            position: "absolute",
+            bottom: "-60px",
+            insetInlineStart: "96px",
+            width: "120px",
+            height: "120px",
+            zIndex: 11
+          },
+          onMouseEnter: () => editable && setIsLogoHovering(true),
+          onMouseLeave: () => editable && setIsLogoHovering(false)
+        },
+        logoSrc && /* @__PURE__ */ React140.createElement(
+          "img",
+          {
+            src: logoSrc,
+            alt: "Logo",
+            style: {
+              width: "100%",
+              height: "100%",
+              borderRadius: "100%",
+              boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
+              backgroundColor: "white",
+              objectFit: "cover"
+            }
+          }
+        ),
+        editable && isHovering && /* @__PURE__ */ React140.createElement(React140.Fragment, null, logoSrc ? (
+          // Logo exists: Show Change/Remove buttons when hovering anywhere
+          /* @__PURE__ */ React140.createElement(
+            Group46,
+            {
+              gap: "xs",
+              style: {
+                position: "absolute",
+                top: "0",
+                left: "130px",
+                zIndex: 12
+              }
+            },
+            /* @__PURE__ */ React140.createElement(
+              Button33,
+              {
+                variant: "filled",
+                size: "xs",
+                onClick: handleChangeLogo,
+                style: {
+                  backgroundColor: "rgba(255, 255, 255, 0.9)",
+                  color: "#37352f",
+                  fontSize: "12px",
+                  fontWeight: 500,
+                  padding: "4px 8px",
+                  height: "auto"
+                }
+              },
+              "Change"
+            ),
+            /* @__PURE__ */ React140.createElement(
+              Button33,
+              {
+                variant: "filled",
+                size: "xs",
+                onClick: handleRemoveLogo,
+                style: {
+                  backgroundColor: "rgba(255, 255, 255, 0.9)",
+                  color: "#37352f",
+                  fontSize: "12px",
+                  fontWeight: 500,
+                  padding: "4px 8px",
+                  height: "auto"
+                }
+              },
+              "Remove"
+            )
+          )
+        ) : (
+          // No logo: Show "Add icon" button
+          /* @__PURE__ */ React140.createElement(
+            Button33,
+            {
+              variant: "filled",
+              size: "xs",
+              onClick: handleAddLogo,
+              style: {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)",
+                backgroundColor: "rgba(255, 255, 255, 0.9)",
+                color: "#37352f",
+                fontSize: "12px",
+                fontWeight: 500,
+                padding: "4px 8px",
+                height: "auto",
+                zIndex: 12
+              }
+            },
+            "Add icon"
+          )
+        )),
+        !logoSrc && /* @__PURE__ */ React140.createElement(
+          Box23,
+          {
+            style: {
+              width: "100%",
+              height: "100%",
+              borderRadius: "100%",
+              border: editable && isLogoHovering ? "2px dashed rgba(255, 255, 255, 0.3)" : "none",
+              backgroundColor: editable && isLogoHovering ? "rgba(255, 255, 255, 0.05)" : "transparent",
+              transition: "all 0.2s ease"
+            }
+          }
+        )
       )
     );
   }
@@ -13376,9 +13508,10 @@ function CoverImage({ coverImageUrl, logoUrl }) {
       style: {
         position: "relative",
         width: "100%",
-        marginBottom: logoSrc ? "48px" : "0",
-        // Space for logo overlap only if logo exists
-        cursor: isRepositioning ? "ns-resize" : "default"
+        paddingBottom: "70px",
+        // Space for logo area (increased for 120px logo)
+        cursor: isRepositioning ? "ns-resize" : "default",
+        backgroundColor: "#1f1f1f"
       },
       onMouseEnter: () => editable && setIsHovering(true),
       onMouseLeave: () => {
@@ -13471,29 +13604,111 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         "Remove"
       )
     ),
-    logoSrc && /* @__PURE__ */ React140.createElement(
-      "img",
+    /* @__PURE__ */ React140.createElement(
+      Box23,
       {
-        src: logoSrc,
-        alt: "Logo",
         style: {
           position: "absolute",
-          bottom: "-39px",
-          // Half of logo height to create overlap effect
+          bottom: "4px",
           insetInlineStart: "96px",
-          // Left padding similar to Notion
-          opacity: 1,
-          width: "78px",
-          height: "78px",
-          transition: "opacity 100ms ease-in",
-          borderRadius: "3px",
-          boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
-          backgroundColor: "white",
-          objectFit: "cover"
+          width: "120px",
+          height: "120px",
+          zIndex: 11
+        },
+        onMouseEnter: () => editable && setIsLogoHovering(true),
+        onMouseLeave: () => editable && setIsLogoHovering(false)
+      },
+      logoSrc && /* @__PURE__ */ React140.createElement(
+        "img",
+        {
+          src: logoSrc,
+          alt: "Logo",
+          style: {
+            width: "100%",
+            height: "100%",
+            borderRadius: "100%",
+            boxShadow: "0 1px 2px rgba(0, 0, 0, 0.1)",
+            backgroundColor: "white",
+            objectFit: "cover"
+          }
         }
-      }
+      ),
+      editable && isHovering && /* @__PURE__ */ React140.createElement(React140.Fragment, null, logoSrc ? (
+        // Logo exists: Show Change/Remove buttons when hovering on cover
+        /* @__PURE__ */ React140.createElement(
+          Group46,
+          {
+            gap: "xs",
+            style: {
+              position: "absolute",
+              top: "0",
+              left: "130px",
+              zIndex: 12
+            }
+          },
+          /* @__PURE__ */ React140.createElement(
+            Button33,
+            {
+              variant: "filled",
+              size: "xs",
+              onClick: handleChangeLogo,
+              style: {
+                backgroundColor: "rgba(255, 255, 255, 0.9)",
+                color: "#37352f",
+                fontSize: "12px",
+                fontWeight: 500,
+                padding: "4px 8px",
+                height: "auto"
+              }
+            },
+            "Change"
+          ),
+          /* @__PURE__ */ React140.createElement(
+            Button33,
+            {
+              variant: "filled",
+              size: "xs",
+              onClick: handleRemoveLogo,
+              style: {
+                backgroundColor: "rgba(255, 255, 255, 0.9)",
+                color: "#37352f",
+                fontSize: "12px",
+                fontWeight: 500,
+                padding: "4px 8px",
+                height: "auto"
+              }
+            },
+            "Remove"
+          )
+        )
+      ) : (
+        // No logo: Show "Add icon" button when hovering anywhere on cover
+        /* @__PURE__ */ React140.createElement(
+          Button33,
+          {
+            variant: "filled",
+            size: "xs",
+            onClick: handleAddLogo,
+            style: {
+              position: "absolute",
+              top: "50%",
+              left: "50%",
+              transform: "translate(-50%, -50%)",
+              backgroundColor: "rgba(255, 255, 255, 0.9)",
+              color: "#37352f",
+              fontSize: "12px",
+              fontWeight: 500,
+              padding: "4px 8px",
+              height: "auto",
+              zIndex: 12
+            }
+          },
+          "Add icon"
+        )
+      ))
     ),
-    /* @__PURE__ */ React140.createElement("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") })
+    /* @__PURE__ */ React140.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }),
+    /* @__PURE__ */ React140.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") })
   );
 }
 
@@ -13724,4 +13939,4 @@ export {
   ixoGraphQLClient,
   getEntity
 };
-//# sourceMappingURL=chunk-22UP3RB4.mjs.map
+//# sourceMappingURL=chunk-OHIKNFEH.mjs.map