@ixo/editor 2.0.0 → 2.0.1

package/dist/{chunk-3BZ6OPAK.mjs → chunk-5JO27QWP.mjs}

@@ -12672,6 +12672,155 @@ function useCollaborativeYDoc(_options) {
 
 // src/mantine/hooks/useCollaborativeIxoEditor.ts
 import { useMemo as useMemo44, useEffect as useEffect37 } from "react";
+
+// src/core/lib/matrixMetadata.ts
+var COVER_IMAGE_EVENT_TYPE = "ixo.page.cover_image";
+var COVER_ICON_EVENT_TYPE = "ixo.page.cover_icon";
+var MatrixMetadataManager = class {
+  constructor(matrixClient, roomId) {
+    this.subscribers = /* @__PURE__ */ new Set();
+    this.eventHandler = null;
+    this.matrixClient = matrixClient;
+    this.roomId = roomId;
+    this.setupEventListener();
+  }
+  /**
+   * Set up Matrix event listener for real-time updates
+   */
+  setupEventListener() {
+    this.eventHandler = (event) => {
+      if (event.getRoomId() === this.roomId) {
+        const eventType = event.getType();
+        if (eventType === COVER_IMAGE_EVENT_TYPE || eventType === COVER_ICON_EVENT_TYPE) {
+          const metadata = this.getMetadata();
+          if (metadata) {
+            this.notifySubscribers(metadata);
+          }
+        }
+      }
+    };
+    this.matrixClient.on("RoomState.events", this.eventHandler);
+  }
+  /**
+   * Notify all subscribers of metadata changes
+   */
+  notifySubscribers(metadata) {
+    this.subscribers.forEach((callback) => {
+      try {
+        callback(metadata);
+      } catch (error) {
+        console.error("Error in metadata subscriber callback:", error);
+      }
+    });
+  }
+  /**
+   * Send metadata to Matrix state events (separate events for cover and icon)
+   *
+   * @param metadata - The metadata to store (only URL strings)
+   * @param permissions - Permission check object
+   * @returns Promise that resolves when state events are sent
+   */
+  async setMetadata(metadata, permissions) {
+    if (!permissions.write) {
+      console.warn("Cannot set metadata: write permission denied");
+      return;
+    }
+    try {
+      const promises = [];
+      if (metadata.cover !== void 0) {
+        promises.push(
+          this.matrixClient.sendStateEvent(
+            this.roomId,
+            COVER_IMAGE_EVENT_TYPE,
+            { url: metadata.cover || null },
+            // Wrap in object - Matrix requires JSON content
+            ""
+            // Empty state key
+          )
+        );
+      }
+      if (metadata.icon !== void 0) {
+        promises.push(
+          this.matrixClient.sendStateEvent(
+            this.roomId,
+            COVER_ICON_EVENT_TYPE,
+            { url: metadata.icon || null },
+            // Wrap in object - Matrix requires JSON content
+            ""
+            // Empty state key
+          )
+        );
+      }
+      await Promise.all(promises);
+    } catch (error) {
+      console.error("Failed to set page metadata:", error);
+      throw error;
+    }
+  }
+  /**
+   * Get current metadata from Matrix state (reads from separate events)
+   *
+   * @returns Current metadata or null if not set
+   */
+  getMetadata() {
+    try {
+      const room = this.matrixClient.getRoom(this.roomId);
+      if (!room) {
+        console.warn(`Room ${this.roomId} not found`);
+        return null;
+      }
+      const coverEvent = room.currentState.getStateEvents(
+        COVER_IMAGE_EVENT_TYPE,
+        ""
+        // Empty state key
+      );
+      const coverContent = coverEvent ? coverEvent.getContent() : null;
+      const coverUrl = coverContent?.url || null;
+      const iconEvent = room.currentState.getStateEvents(
+        COVER_ICON_EVENT_TYPE,
+        ""
+        // Empty state key
+      );
+      const iconContent = iconEvent ? iconEvent.getContent() : null;
+      const iconUrl = iconContent?.url || null;
+      if (!coverUrl && !iconUrl) {
+        return null;
+      }
+      return {
+        cover: coverUrl || void 0,
+        icon: iconUrl || void 0
+      };
+    } catch (error) {
+      console.error("Failed to get page metadata:", error);
+      return null;
+    }
+  }
+  /**
+   * Subscribe to metadata changes
+   *
+   * @param callback - Function to call when metadata changes
+   * @returns Unsubscribe function
+   */
+  subscribe(callback) {
+    this.subscribers.add(callback);
+    return () => {
+      this.subscribers.delete(callback);
+    };
+  }
+  /**
+   * Clean up event listeners and subscriptions
+   * Call this when the manager is no longer needed
+   */
+  dispose() {
+    if (this.eventHandler) {
+      this.matrixClient.off("RoomState.events", this.eventHandler);
+      this.eventHandler = null;
+    }
+    this.subscribers.clear();
+  }
+};
+
+// src/mantine/hooks/useCollaborativeIxoEditor.ts
 function useCreateCollaborativeIxoEditor(options) {
   const yDoc = useCollaborativeYDoc(options);
   const {
@@ -12705,6 +12854,12 @@ function useCreateCollaborativeIxoEditor(options) {
     matrixClient,
     roomId: options.roomId
   });
+  const metadataManager = useMemo44(() => new MatrixMetadataManager(matrixClient, options.roomId), [matrixClient, options.roomId]);
+  useEffect37(() => {
+    return () => {
+      metadataManager.dispose();
+    };
+  }, [metadataManager]);
   const defaultUploadFile = useMemo44(
     () => uploadFile || (async (file) => {
       return new Promise((resolve, reject) => {
@@ -12816,31 +12971,43 @@ function useCreateCollaborativeIxoEditor(options) {
     ixoEditor.getFlow = () => {
       return flowArray.toArray();
     };
-    ixoEditor.setCoverImage = (imageData) => {
+    ixoEditor._metadataManager = metadataManager;
+    ixoEditor.setPageMetadata = async (updates) => {
       if (!permissions.write) {
+        console.warn("Cannot set page metadata: write permission denied");
         return;
       }
-      if (imageData === void 0 || imageData === null) {
-        root.delete("coverImage");
-      } else {
-        root.set("coverImage", imageData);
+      const current = metadataManager.getMetadata() || {};
+      await metadataManager.setMetadata({ ...current, ...updates }, permissions);
+    };
+    ixoEditor.getPageMetadata = () => {
+      return metadataManager.getMetadata();
+    };
+    ixoEditor.setCoverImage = (imageData) => {
+      if (!permissions.write) {
+        return;
       }
+      const current = metadataManager.getMetadata() || {};
+      const coverUrl = imageData?.url;
+      metadataManager.setMetadata({ ...current, cover: coverUrl }, permissions).catch((error) => {
+        console.error("Failed to set cover image:", error);
+      });
     };
     ixoEditor.getCoverImage = () => {
-      return root.get("coverImage");
+      return void 0;
     };
     ixoEditor.setLogo = (imageData) => {
       if (!permissions.write) {
         return;
       }
-      if (imageData === void 0 || imageData === null) {
-        root.delete("logo");
-      } else {
-        root.set("logo", imageData);
-      }
+      const current = metadataManager.getMetadata() || {};
+      const iconUrl = imageData?.url;
+      metadataManager.setMetadata({ ...current, icon: iconUrl }, permissions).catch((error) => {
+        console.error("Failed to set logo:", error);
+      });
     };
     ixoEditor.getLogo = () => {
-      return root.get("logo");
+      return void 0;
     };
   }
   useEffect37(() => {
@@ -12889,27 +13056,20 @@ function CoverImage({ coverImageUrl, logoUrl }) {
   const [coverPosition, setCoverPosition] = useState48(50);
   const coverFileInputRef = useRef9(null);
   const logoFileInputRef = useRef9(null);
-  const [coverImageData, setCoverImageData] = useState48(() => editor?.getCoverImage?.());
-  const [logoData, setLogoData] = useState48(() => editor?.getLogo?.());
+  const [metadata, setMetadata] = useState48(() => editor?.getPageMetadata?.() || null);
   useEffect38(() => {
-    if (!editor?._yRoot) {
+    if (!editor?._metadataManager) {
       return;
     }
-    const root = editor._yRoot;
-    const observer = () => {
-      const cover = root.get("coverImage");
-      const logo = root.get("logo");
-      setCoverImageData(cover);
-      setLogoData(logo);
-    };
-    observer();
-    root.observe(observer);
-    return () => {
-      root.unobserve(observer);
-    };
+    const initialMetadata = editor._metadataManager.getMetadata();
+    setMetadata(initialMetadata);
+    const unsubscribe = editor._metadataManager.subscribe((newMetadata) => {
+      setMetadata(newMetadata);
+    });
+    return unsubscribe;
   }, [editor]);
-  const coverUrl = coverImageData?.url || coverImageUrl;
-  const logoSrc = logoData?.url || logoUrl;
+  const coverUrl = metadata?.cover || coverImageUrl;
+  const logoSrc = metadata?.icon || logoUrl;
   const hasCover = !!coverUrl;
   const hasLogo = !!logoSrc;
   const handleFileSelect = async (event, type) => {
@@ -12919,12 +13079,21 @@ function CoverImage({ coverImageUrl, logoUrl }) {
     }
     try {
       const uploadedData = await handlers.publicFileUpload(file);
+      const imageUrl = uploadedData.url;
+      setMetadata((prev) => ({
+        ...prev,
+        [type === "cover" ? "cover" : "icon"]: imageUrl
+      }));
       if (type === "cover") {
-        editor.setCoverImage?.(uploadedData);
+        await editor.setPageMetadata?.({ cover: imageUrl });
       } else {
-        editor.setLogo?.(uploadedData);
+        await editor.setPageMetadata?.({ icon: imageUrl });
       }
     } catch (error) {
+      const currentMetadata = editor?.getPageMetadata?.();
+      if (currentMetadata) {
+        setMetadata(currentMetadata);
+      }
     }
   };
   const handleAddCover = () => {
@@ -12936,9 +13105,17 @@ function CoverImage({ coverImageUrl, logoUrl }) {
   const handleReposition = () => {
     setIsRepositioning(!isRepositioning);
   };
-  const handleRemoveCover = () => {
+  const handleRemoveCover = async () => {
     if (!editor) return;
-    editor.setCoverImage?.(void 0);
+    setMetadata((prev) => ({ ...prev, cover: void 0 }));
+    try {
+      await editor.setPageMetadata?.({ cover: void 0 });
+    } catch (error) {
+      const currentMetadata = editor?.getPageMetadata?.();
+      if (currentMetadata) {
+        setMetadata(currentMetadata);
+      }
+    }
   };
   const handleAddLogo = () => {
     logoFileInputRef.current?.click();
@@ -12946,9 +13123,17 @@ function CoverImage({ coverImageUrl, logoUrl }) {
   const handleChangeLogo = () => {
     logoFileInputRef.current?.click();
   };
-  const handleRemoveLogo = () => {
+  const handleRemoveLogo = async () => {
     if (!editor) return;
-    editor.setLogo?.(void 0);
+    setMetadata((prev) => ({ ...prev, icon: void 0 }));
+    try {
+      await editor.setPageMetadata?.({ icon: void 0 });
+    } catch (error) {
+      const currentMetadata = editor?.getPageMetadata?.();
+      if (currentMetadata) {
+        setMetadata(currentMetadata);
+      }
+    }
   };
   const handleMouseMove = (e) => {
     if (!isRepositioning) return;
@@ -12974,16 +13159,14 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         onMouseEnter: () => editable && setIsHovering(true),
         onMouseLeave: () => editable && setIsHovering(false)
       },
-      /* @__PURE__ */ React151.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }),
-      /* @__PURE__ */ React151.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") }),
-      editable && isHovering && !logoSrc && /* @__PURE__ */ React151.createElement(
+      /* @__PURE__ */ React151.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", position: "relative", height: "100%" } }, /* @__PURE__ */ React151.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }), /* @__PURE__ */ React151.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") }), editable && isHovering && !logoSrc && /* @__PURE__ */ React151.createElement(
         Group45,
         {
           gap: "xs",
           style: {
             position: "absolute",
             top: "12px",
-            left: "96px",
+            left: "0",
             zIndex: 10
           }
         },
@@ -13021,13 +13204,12 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           },
           "Add cover"
         )
-      ),
-      logoSrc && /* @__PURE__ */ React151.createElement(
+      ), logoSrc && /* @__PURE__ */ React151.createElement(
         Box24,
         {
           style: {
             position: "relative",
-            insetInlineStart: "96px",
+            insetInlineStart: "0",
             width: "120px",
             height: "120px",
             marginTop: "16px",
@@ -13050,14 +13232,18 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           }
         ),
         editable && isHovering && /* @__PURE__ */ React151.createElement(
-          Group45,
+          "div",
           {
-            gap: "xs",
             style: {
               position: "absolute",
-              top: "0",
-              left: "130px",
-              zIndex: 12
+              bottom: "-32px",
+              left: "50%",
+              transform: "translateX(-50%)",
+              zIndex: 12,
+              display: "flex",
+              flexDirection: "row",
+              gap: "4px",
+              alignItems: "center"
             }
           },
           /* @__PURE__ */ React151.createElement(
@@ -13093,9 +13279,26 @@ function CoverImage({ coverImageUrl, logoUrl }) {
               }
             },
             "Remove"
+          ),
+          /* @__PURE__ */ React151.createElement(
+            Button32,
+            {
+              variant: "filled",
+              size: "xs",
+              onClick: handleAddCover,
+              style: {
+                backgroundColor: "rgba(255, 255, 255, 0.9)",
+                color: "#37352f",
+                fontSize: "12px",
+                fontWeight: 500,
+                padding: "4px 8px",
+                height: "auto"
+              }
+            },
+            "Add cover"
           )
         )
-      )
+      ))
     );
   }
   return /* @__PURE__ */ React151.createElement(
@@ -13200,13 +13403,13 @@ function CoverImage({ coverImageUrl, logoUrl }) {
         "Remove"
       )
     ),
-    /* @__PURE__ */ React151.createElement(
+    /* @__PURE__ */ React151.createElement("div", { style: { maxWidth: "900px", margin: "0 auto", position: "absolute", bottom: 0, left: 0, right: 0, height: "70px" } }, /* @__PURE__ */ React151.createElement(
       Box24,
       {
         style: {
           position: "absolute",
           bottom: "4px",
-          insetInlineStart: "96px",
+          insetInlineStart: "0",
           width: "120px",
           height: "120px",
           zIndex: 11
@@ -13300,7 +13503,7 @@ function CoverImage({ coverImageUrl, logoUrl }) {
           "Add icon"
         )
       ))
-    ),
+    )),
     /* @__PURE__ */ React151.createElement("input", { ref: coverFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "cover") }),
     /* @__PURE__ */ React151.createElement("input", { ref: logoFileInputRef, type: "file", accept: "image/*", style: { display: "none" }, onChange: (e) => handleFileSelect(e, "logo") })
   );
@@ -13548,4 +13751,4 @@ export {
   ixoGraphQLClient,
   getEntity
 };
-//# sourceMappingURL=chunk-3BZ6OPAK.mjs.map
+//# sourceMappingURL=chunk-5JO27QWP.mjs.map