@alpaca-editor/contenthub 1.0.4112 → 1.0.4118

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alpaca-editor/contenthub",
-  "version": "1.0.4112",
+  "version": "1.0.4118",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/src/DamSelector.tsx

@@ -1,34 +1,38 @@
-import { Dialog } from 'primereact/dialog';
-import { DialogProps } from '@alpaca-editor/core';
-import { useEffect } from 'react';
-import { DamImageValue, DamSelectorProps } from './types';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "@alpaca-editor/core";
+import { DialogProps } from "@alpaca-editor/core";
+import { useEffect } from "react";
+import { DamImageValue, DamSelectorProps } from "./types";
 
 export function DamSelector({
   onClose,
   contentHubHost,
   contentHubBrowsePage,
-  externalRedirectKey
+  externalRedirectKey,
 }: DamSelectorProps & DialogProps<DamImageValue>) {
-  
   useEffect(() => {
     const handleMessage = (message: MessageEvent) => {
-      console.log('Received message:', message);
-      
-      const normalizedHost = contentHubHost.replace(/\/$/, '');
-      const messageOrigin = message.origin.replace(/\/$/, '');
-      
+      console.log("Received message:", message);
+
+      const normalizedHost = contentHubHost.replace(/\/$/, "");
+      const messageOrigin = message.origin.replace(/\/$/, "");
+
       if (messageOrigin !== normalizedHost) {
-        console.log('Origin mismatch:', messageOrigin, normalizedHost);
+        console.log("Origin mismatch:", messageOrigin, normalizedHost);
         return;
       }
 
       const data = message.data as DamImageValue;
       if (!data || !data.public_link) {
-        console.log('Invalid data received:', data);
+        console.log("Invalid data received:", data);
         return;
       }
 
-      console.log('Processing valid data:', data);
+      console.log("Processing valid data:", data);
       onClose(data);
     };
 
@@ -38,20 +42,30 @@ export function DamSelector({
 
   return (
     <Dialog
-      visible={true}
-      onHide={() => onClose(null)}
-      header="Insert from Sitecore DAM"
-      modal
-      style={{ width: '90vw', height: '90vh' }}
-      contentStyle={{ padding: 0, height: 'calc(100% - 71px)' }} // 71px accounts for header height
-      className="select-medidialog"
-      draggable={false}
-      resizable={false}
+      open={true}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose(null);
+        }
+      }}
     >
-      <iframe
-        className="w-full h-full border-none"
-        src={`${contentHubHost}${contentHubBrowsePage}?externalRedirectKey=${externalRedirectKey}&externalRedirectUrl=${window.location.href}&hasExternalRedirect=true`}
-      />
+      <DialogContent
+        className="max-w-none select-medidialog"
+        style={{ width: "90vw", height: "90vh" }}
+      >
+        <DialogHeader>
+          <DialogTitle>Insert from Sitecore DAM</DialogTitle>
+        </DialogHeader>
+        <div
+          className="flex-1 overflow-hidden"
+          style={{ height: "calc(100% - 71px)" }}
+        >
+          <iframe
+            className="w-full h-full border-none"
+            src={`${contentHubHost}${contentHubBrowsePage}?externalRedirectKey=${externalRedirectKey}&externalRedirectUrl=${window.location.href}&hasExternalRedirect=true`}
+          />
+        </div>
+      </DialogContent>
     </Dialog>
   );
-} 
+}