@alpaca-editor/sharedien-dam 1.0.4143

package/eslint.config.mjs

@@ -0,0 +1,4 @@
+import { config } from "@repo/eslint-config/react-internal";
+
+/** @type {import("eslint").Linter.Config} */
+export default config;

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@alpaca-editor/sharedien-dam",
+  "version": "1.0.4143",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./styles.css": "./styles.css"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@repo/eslint-config": "*",
+    "@repo/typescript-config": "*",
+    "@turbo/gen": "^2.4.4",
+    "@types/node": "^22.13.9",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "eslint": "^9.22.0",
+    "typescript": "5.8.2"
+  },
+  "dependencies": {
+    "@tailwindcss/postcss": "^4.0.14",
+    "postcss": "^8.5.3",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tailwindcss": "^4.0.14"
+  }
+}

package/src/DamSelector.tsx

@@ -0,0 +1,524 @@
+import { Button, DialogProps, Input, Select, TabView, TabPanel, Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, useEditContext } from '@alpaca-editor/core';
+import { useEffect, useState } from 'react';
+import { DamImageValue, DamSelectorProps, SharedienDamExtension } from './types';
+import React from 'react';
+import { ExternalLink, Search, Check, X } from "lucide-react";
+
+// Update interfaces for the API response
+interface Derivation {
+  AssetTypeIdentifier: string;
+  FileTypeIdentifier: string;
+  FileMimeType: string;
+  DerivationTypeIdentifier: string;
+  FileName: string;
+  FileEnding: string;
+  FileSize: number;
+  Uri: string;
+  DownloadUri: string;
+  Status: string;
+}
+
+interface DerivationItem {
+  Derivation: Derivation;
+  IsPreferred: boolean;
+  IsPreview: boolean;
+}
+
+interface AssetProperty {
+  FieldName: string;
+  Value: string;
+}
+
+interface AssetInfo {
+  MeetsRestrictions: boolean;
+  Message: string;
+}
+
+interface AssetWarning {
+  ShouldWarn: boolean;
+  Message: string;
+}
+
+interface AssetResponse {
+  Derivations: DerivationItem[];
+  PreviewDerivationSrc: string;
+  AssetInfo: AssetInfo;
+  AssetWarning: AssetWarning;
+  AssetProperties: AssetProperty[];
+}
+
+interface Response {
+  Success: boolean
+  Message: string;
+}
+
+// Add this interface to declare the global sharedienAssetBrowser object
+declare global {
+  interface Window {
+    sharedienAssetBrowser?: {
+      show: (url: string, config: any, callback: (content: any, isCancelled: boolean) => void, selector: string) => void;
+    }
+  }
+}
+
+// Utility function to format file sizes
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 Bytes';
+  
+  const k = 1024;
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+export function DamSelector({
+  onClose,
+  language = 'en',
+}: DialogProps<DamImageValue> & DamSelectorProps) {
+  const [assetId, setAssetId] = useState('');
+  const [selectedDerivative, setSelectedDerivative] = useState<Derivation | null>(null);
+  const [assetData, setAssetData] = useState<AssetResponse | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [isVisible, setIsVisible] = useState(false);
+  const [fromWidgetSelection, setFromWidgetSelection] = useState(false);
+  
+  const editContext = useEditContext();
+  const sharedienDamConfig = editContext?.configuration?.extensions?.sharedienDam as SharedienDamExtension;
+  const damUrl = sharedienDamConfig?.damUrl ?? '';
+  const damScriptUrl = sharedienDamConfig?.damScriptUrl ?? '';
+  
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setIsVisible(true);
+    }, 200);
+    
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Load the DAM widget script
+  useEffect(() => {
+    // Load the external script for the DAM widget
+    const script = document.createElement('script');
+    script.src = damScriptUrl;
+    script.async = true;
+    document.body.appendChild(script);
+    
+    return () => {
+      // Clean up script when component unmounts
+      if (document.body.contains(script)) {
+        document.body.removeChild(script);
+      }
+    };
+  }, [damScriptUrl]);
+
+  // Initialize asset browser when switching to the second tab
+  useEffect(() => {
+    if (activeIndex === 1) {
+      initiateAssetBrowser();
+    }
+  }, [activeIndex]);
+
+  // Automatically search when assetId changes from widget selection
+  useEffect(() => {
+    if (assetId && assetId.trim() && fromWidgetSelection) {
+      searchAsset();
+      setFromWidgetSelection(false); // Reset the flag
+    }
+  }, [assetId, fromWidgetSelection]);
+
+  // Function to initialize the asset browser (converted from your C# code)
+  const initiateAssetBrowser = () => {
+    if (!window.sharedienAssetBrowser) {
+      console.error('DAM Asset Browser widget not loaded');
+      return;
+    }
+    
+    const configuration = {
+      allowMultipleSelection: false,
+      canBeClosedByUser: false,
+      showMainNavigationBranding: false,
+      searchQuery: {
+        // Add your filters here if needed
+      }
+    };
+    
+    const callback = (content: any, isCancelled: boolean) => {
+      if (isCancelled) {
+        console.log('Component has been cancelled');
+      } else {
+        console.log('Message received', content['selectedAssets'][0]);
+        // Set the asset ID and switch back to the first tab
+        if (content['selectedAssets'] && content['selectedAssets'][0]) {
+          setFromWidgetSelection(true); // Mark that this selection is from widget
+          setAssetId(content['selectedAssets'][0].identifier);
+          setActiveIndex(0); // Switch back to first tab
+        }
+      }
+    };
+    
+    window.sharedienAssetBrowser.show(
+      damUrl, 
+      configuration, 
+      callback, 
+      '#damBrowserContainer'
+    );
+  };
+
+  // Function to search for an asset
+  async function searchAsset(): Promise<void> {
+    if (!assetId.trim()) {
+      setError('Please enter an Asset ID');
+      return;
+    }
+    
+    setLoading(true);
+    setError(null);
+    
+    try {
+      // Call the API with assetId and language using POST
+      const response = await fetch('/alpaca/editor/sharedien', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          assetId: assetId,
+          language: language
+        })
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Error fetching asset: ${response.statusText}`);
+      }
+      
+      const data: AssetResponse & Response = await response.json();
+
+      if (data.Success === false) {
+        // Show the error message
+        setError(data.Message || 'An error occurred during insert');
+        return; // Don't close the dialog
+      }
+
+      setAssetData(data);
+      
+      // Set the preferred derivation as selected by default
+      const preferredItem = data.Derivations.find(item => item.IsPreferred);
+      if (preferredItem) {
+        setSelectedDerivative(preferredItem.Derivation);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'An unknown error occurred');
+      console.error('Error fetching asset:', err);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  ////
+  // Create select options from derivatives data
+  const getSelectOptions = () => {
+    if (!assetData?.Derivations) return [];
+    
+    return assetData.Derivations.map(item => ({
+      value: item.Derivation.FileName,
+      label: `${item.Derivation.DerivationTypeIdentifier} (${item.Derivation.FileTypeIdentifier}) - ${formatFileSize(item.Derivation.FileSize)}${item.IsPreferred ? ' [recommended version for import]' : ''}`,
+      disabled: false
+    }));
+  };
+
+  // Handle select change
+  const handleSelectChange = (value: string) => {
+    const selectedItem = assetData?.Derivations.find(item => item.Derivation.FileName === value);
+    if (selectedItem) {
+      setSelectedDerivative(selectedItem.Derivation);
+    }
+  };
+
+  const handleInsert = async () => {
+    // Only proceed if a derivative is selected
+    if (!selectedDerivative) {
+      return;
+    }
+    
+    try {
+      // Set loading state if needed
+      setLoading(true);
+      
+      // Send POST request to insert endpoint
+      const response = await fetch('/alpaca/editor/sharedien/insert', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          assetId: assetId,
+          language: language,
+          derivation: {
+            assetTypeIdentifier: selectedDerivative.AssetTypeIdentifier,
+            fileTypeIdentifier: selectedDerivative.FileTypeIdentifier,
+            fileMimeType: selectedDerivative.FileMimeType,
+            derivationTypeIdentifier: selectedDerivative.DerivationTypeIdentifier,
+            fileName: selectedDerivative.FileName,
+            fileEnding: selectedDerivative.FileEnding,
+            fileSize: selectedDerivative.FileSize,
+            uri: selectedDerivative.Uri,
+            downloadUri: selectedDerivative.DownloadUri,
+            status: selectedDerivative.Status
+          }
+        })
+      });
+      
+      if (!response.ok) {
+        throw new Error(`Error inserting asset: ${response.statusText}`);
+      }
+      
+      // Parse the response
+      const result = await response.json();
+      
+      // Check if the response indicates failure
+      if (result.Success === false) {
+        // Show the error message
+        setError(result.Message || 'An error occurred during insert');
+        return; // Don't close the dialog
+      }
+      
+      // Check if this is a video asset by looking at Asset Type property
+      const assetTypeProperty = assetData?.AssetProperties?.find(prop => prop.FieldName === "Asset Type");
+      const isVideo = assetTypeProperty?.Value === "Movie";
+      
+      const mediaItemId = result?.length > 0 ? result[0] : undefined;
+
+      // Close the dialog and return the selected derivative info
+      onClose({
+        mediaId: isVideo ? undefined : mediaItemId,
+        videoId: isVideo ? mediaItemId : undefined,
+      });
+      
+    } catch (err) {
+      // Handle errors
+      setError(err instanceof Error ? err.message : 'An unknown error occurred during insert');
+      console.error('Error inserting asset:', err);
+    } finally {
+      // Reset loading state
+      setLoading(false);
+    }
+  };
+
+  const footer = (
+    <div className="flex gap-3 p-4">
+      <span title={!selectedDerivative
+        ? "Please select a derivative first"
+        : loading
+          ? "Processing..."
+          : assetData?.AssetInfo?.MeetsRestrictions === false
+            ? "Cannot insert: " + assetData.AssetInfo.Message
+            : !assetData
+              ? "Please search for an asset first"
+              : undefined}>
+        <Button
+          size="sm"
+          onClick={handleInsert}
+          disabled={!selectedDerivative || loading || (assetData?.AssetInfo?.MeetsRestrictions === false) || !assetData}
+        >
+          {loading ? (
+            <i className="pi pi-spin pi-spinner w-4 h-4" />
+          ) : (
+            <Check className="w-4 h-4" />
+          )}
+          Insert
+        </Button>
+      </span>
+      <Button
+        size="sm"
+        onClick={() => onClose(null)}
+      >
+        <X className="w-4 h-4" />
+        Cancel
+      </Button>
+    </div>
+  );
+
+  return (
+    <Dialog open={true} onOpenChange={() => onClose(null)}>
+      <DialogContent 
+        className="select-medidialog flex flex-col"
+        style={{ width: '90vw', height: '90vh', maxWidth: '90vw', maxHeight: '90vh' }}
+      >
+        <DialogHeader className="flex-shrink-0">
+          <DialogTitle>Get Asset from DAM</DialogTitle>
+        </DialogHeader>
+        
+        <div className="flex-1 overflow-hidden flex flex-col">
+          <div className="p-3 flex-shrink-0">
+            <p className="p3 mb-4">
+            Browse for your asset in the DAM and copy the Asset ID. Paste the Asset ID below and click the Insert button to apply the image. 
+            If available, you can also use the Asset Browser tab. In the widget, enter the Asset ID and click Confirm
+            </p>
+          </div>
+
+          {isVisible && (
+            <div className="flex-1 overflow-hidden">
+              <TabView 
+                activeIndex={activeIndex} 
+                onTabChange={(e) => setActiveIndex(e.index)}
+                className="dam-selector-tabs h-full" 
+              >
+                <TabPanel header="SELECT BY ASSET ID">
+                  <div className="h-full overflow-auto">
+                      <div className="p-3 bg-blue-50 mb-4 flex align-items-center gap-2">
+                        <i className="p-2 pi pi-info-circle" style={{ fontSize: '1.2rem' }} />
+                        <span className="p-1 flex align-items-center">For testing you can open DAM Browser in a new Tab</span>
+                        <Button
+                          size="sm"
+                          onClick={() => window.open(damUrl, '_blank')}>
+                          <ExternalLink className="w-4 h-4" />
+                          Open DAM
+                        </Button>
+                    </div>
+
+                    <div className="grid grid-cols-2">
+                      <div className="col-6 pr-4">
+                        <div className="p-field mb-3">
+                          <label htmlFor="assetId" className="block mb-2">Asset ID</label>
+                          <Input
+                            type="text" 
+                            id="assetId" 
+                            value={assetId} 
+                            onChange={(e) => setAssetId(e.target.value)}
+                            className="w-full h-12 px-4"
+                            placeholder="Enter Asset ID"
+                          />
+                        </div>
+                        
+                        <Button
+                          size="sm"
+                          onClick={searchAsset}
+                          disabled={loading}
+                        >
+                          <Search className="w-4 h-4" />
+                          Search Asset
+                        </Button>
+                        
+                        {error && (
+                          <div className="p-3 bg-red-50 text-red-700 mb-4 border-round">
+                            <i className="pi pi-exclamation-circle mr-2" />
+                            {error}
+                          </div>
+                        )}
+                        
+                        {assetData && (
+                          <div className="p-field p-card1 p-31">
+                            <label htmlFor='derivative' className="block mb-2">Select Derivatives</label>
+                            <div className="mb-4">
+                              <Select
+                                id="derivative"
+                                value={selectedDerivative?.FileName || ''}
+                                onValueChange={handleSelectChange}
+                                options={getSelectOptions()}
+                                placeholder="Choose a derivative..."
+                                className="w-full h-12 px-4"
+                                disabled={false}
+                              />
+                            </div>
+                          </div>
+                        )}
+                      </div>
+                      
+                      <div className="col-6 pl-4">
+                        <div className="p-card p-3 flex flex-column grid grid-cols-1 grid-rows-2" style={{ minHeight: '300px' }}>
+                          <div className="flex justify-content-center align-items-center row-1" style={{ flex: '1' }}>
+                            {loading ? (
+                              <i className="pi pi-spin pi-spinner text-6xl text-primary" />
+                            ) : assetData?.PreviewDerivationSrc ? (
+                              <img 
+                                src={assetData.PreviewDerivationSrc} 
+                                alt="Asset preview" 
+                                className="w-full h-auto max-h-64 object-contain border border-gray-200 rounded"
+                                style={{ maxWidth: '100%' }}
+                              />
+                            ) : (
+                              <div className="flex flex-column align-items-center justify-content-center h-full">
+                                <i className="pi pi-image text-6xl text-gray-300 mb-3 p-1" />
+                                <p className="text-gray-500 text-center">Asset preview will appear here</p>
+                              </div>
+                            )}
+                          </div>
+                          
+                          {assetData?.AssetInfo?.Message && (
+                            <div className="mt-3 p-3 bg-red-50 border-round">
+                              <i className="pi pi-info-circle mr-2 text-red-500"></i>
+                              <span>{assetData.AssetInfo.Message}</span>
+                            </div>
+                          )}
+                          
+                          {!assetData?.AssetInfo?.Message && assetData?.AssetWarning?.ShouldWarn && assetData.AssetWarning.Message && (
+                            <div className="mt-3 p-3 bg-yellow-50 border-round">
+                              <i className="pi pi-exclamation-triangle mr-2 text-yellow-500"></i>
+                              <span>{assetData.AssetWarning.Message}</span>
+                            </div>
+                          )}
+                          
+                          {assetData?.AssetProperties && assetData.AssetProperties.length > 0 && (
+                            <div className="mt-3 p-3 bg-gray-50 border-round">
+                              <div className="grid">
+                                {assetData.AssetProperties.map((prop, index) => (
+                                  <React.Fragment key={index}>
+                                    <div className="col-4 font-bold">{prop.FieldName}:</div>
+                                    <div className="col-8">
+                                      {prop.FieldName === "File Size" 
+                                        ? formatFileSize(parseInt(prop.Value)) 
+                                        : prop.FieldName === "Expiry Date" 
+                                          ? new Date(prop.Value).toLocaleDateString() 
+                                          : prop.Value}
+                                    </div>
+                                  </React.Fragment>
+                                ))}
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </TabPanel>
+                
+                <TabPanel header="BROWSE IN DAM">
+                  <div className="h-full overflow-hidden">
+                    <div className="h-full flex flex-col">
+                      {/* Container for the DAM browser widget */}
+                      <div id="damBrowserContainer" className="flex-1" style={{ minHeight: 0 }}>
+                        {/* The widget will create its own iframe here */}
+                      </div>
+                      
+                      {/* Fallback iframe if the widget doesn't load */}
+                      {!window.sharedienAssetBrowser && (
+                        <iframe 
+                          src={damUrl}
+                          className="w-full h-full border border-gray-300"
+                          title="DAM Browser"
+                          sandbox="allow-same-origin allow-scripts allow-popups allow-forms"
+                        />
+                      )}
+                      
+                      <div className="mt-3 p-3 bg-yellow-50 border-round flex-shrink-0">
+                        <i className="pi pi-exclamation-triangle mr-2 text-yellow-500"></i>
+                        <span>Note: If the DAM widget doesn't load, you'll need to manually copy the Asset ID from the DAM and paste it in the Asset ID field on the first tab.</span>
+                      </div>
+                    </div>
+                  </div>
+                </TabPanel>
+              </TabView>
+            </div>
+          )}
+        </div>
+        
+        <DialogFooter className="flex-shrink-0 border-t bg-white relative z-10">
+          {footer}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+} 

package/src/DamSelectorButton.tsx

@@ -0,0 +1,53 @@
+import { ClientFieldButton, PictureRawValue } from "@alpaca-editor/core";
+import { DamSelector } from "./DamSelector";
+import { DamImageValue, DamSelectorProps } from "./types";
+
+export const DamSelectorButton: ClientFieldButton = {
+  label: "Open sharedien DAM",
+  icon: "pi pi-external-link",
+  clientAction: async ({ editContext, field }) => {
+    const data = await editContext.openDialog<DamImageValue, DamSelectorProps>(DamSelector, { 
+      language: field.descriptor.item.language 
+    });
+
+    if (data?.mediaId || data?.videoId) {
+      const raw = (() => {
+        try {
+          return field?.rawValue && field?.rawValue[0] === "{"
+            ? (JSON.parse(field?.rawValue) as PictureRawValue)
+            : ({ Variants: [] } as PictureRawValue);
+        } catch (error) {
+          console.warn("Failed to parse picture field raw value:", error);
+          return { Variants: [] } as PictureRawValue;
+        }
+      })();
+
+      if (raw.Variants && raw.Variants.length > 0 && raw.Variants[0]?.Name) {
+        const variantName = raw.Variants[0].Name;
+        const selected = raw.Variants.find((x: any) => x.Name == variantName);
+        if (selected) {
+          selected.MediaId = data.mediaId;
+          selected.VideoId = data.videoId;
+        } else {
+          raw.Variants.push({
+            Name: variantName,
+            MediaId: data.mediaId,
+            VideoId: data.videoId,
+          });
+        }
+      } else {
+        console.warn("No existing variants with valid names found in picture field. Cannot determine variant name for DAM selection.");
+        return;
+      }
+
+      editContext!.operations.editField({
+        field: field.descriptor,
+        rawValue: JSON.stringify(raw),
+        refresh: "immediate",
+      });
+    }
+  },
+  isGenerator: false,
+  id: "open-sharedien-dam",
+  description: "Opens the sharedien DAM to select an image",
+}

package/src/index.ts

@@ -0,0 +1,36 @@
+import { EditorConfiguration } from "@alpaca-editor/core";
+import { SharedienDamExtension, DamImageValue, DamSelectorProps } from "./types";
+import { DamSelectorButton } from "./DamSelectorButton";
+import { DamSelector } from "./DamSelector";
+
+export function configureSharedienDam(
+  configuration: EditorConfiguration,
+  sharedienDam: SharedienDamExtension,
+) {
+  configuration.extensions = {
+    ...configuration.extensions,
+    sharedienDam: {
+      enableDamSelector: sharedienDam.enableDamSelector ?? false,
+      damUrl: sharedienDam.damUrl,
+      damScriptUrl: sharedienDam.damScriptUrl,
+    }
+  };
+
+  if (!configuration.fieldTypes.picture) {
+    configuration.fieldTypes.picture = {
+      editor: () => null,
+      buttons: []
+    }
+  }
+
+  if (!configuration.fieldTypes.picture.buttons) {
+    configuration.fieldTypes.picture.buttons = [];
+  }
+
+  //configuration.fieldTypes.picture.buttons.push(DamSelectorButton);
+
+  return configuration;
+}
+
+export { DamSelector, DamSelectorButton };
+export type { DamImageValue, DamSelectorProps, SharedienDamExtension };

package/src/types.ts

@@ -0,0 +1,15 @@
+export type DamSelectorProps = {
+    language?: string;
+}
+
+export type DamImageValue = {
+    mediaId: string | undefined;
+    videoId: string | undefined;
+}
+
+export type SharedienDamExtension = {
+    enableDamSelector?: boolean;
+    damUrl?: string;
+    damScriptUrl?: string;
+}
+

package/styles.css

@@ -0,0 +1 @@
+@source "./";

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@repo/typescript-config/react-library.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "outDir": "dist"
+  },
+  "include": ["src"],
+  "exclude": ["node_modules", "dist"]
+}