@vonaffenfels/slate-editor 1.2.30 → 1.2.41

package/src/SidebarEditor/AssetList.js

@@ -1,182 +1,186 @@
-import {
-    useEffect, useState,
-} from "react";
-import {IconButton} from "../SidebarEditor";
-import {swapArrayElements} from "../helper/array";
-
-// Hallo :)
-export const AssetList = ({
-    assets,
-    onChange,
-    sdk,
-    cloudinary = false,
-    onAddClick,
-}) => {
-    const renderAssets = assets.filter(Boolean).map((asset, index) => (
-        <>
-            <Asset
-                key={asset.sys?.id}
-                asset={asset}
-                index={index}
-                sdk={sdk}
-                cloudinary={cloudinary}
-                assetsLength={assets.length}
-                onMoveClick={(direction) => handleMoveClick(direction, index)}
-                onDeleteClick={() => handleDeleteClick(index)}
-                onChange={handleChange}
-            />
-            <hr className="my-2" style={{borderColor: "#cfd9e0"}}/>
-            {onAddClick && index === assets.length - 1 && <button onClick={onAddClick} className="button button--secondary">Hinzufügen</button>}
-        </>
-    ));
-
-    const handleMoveClick = (direction, index) => {
-        let newIndex = direction === "up" ? index - 1 : index + 1;
-
-        if (direction === "up" && index === 0) {
-            return;
-        } else if (direction === "down" && index === assets.length - 1) {
-            return;
-        }
-
-        onChange(swapArrayElements(assets, index, newIndex));
-    };
-
-    const handleDeleteClick = (index) => {
-        let newAssets = assets;
-
-        newAssets.splice(index, 1);
-
-        onChange(newAssets);
-    };
-
-    const handleChange = (newAsset) => {
-        let newAssets = assets.map(asset => {
-            if (asset?.sys?.id === newAsset?.sys?.id) {
-                return newAsset;
-            }
-
-            return asset;
-        });
-
-        onChange(newAssets);
-    };
-
-    return (
-        <div>{renderAssets}</div>
-    );
-};
-
-export const Asset = ({
-    asset,
-    index,
-    assetsLength,
-    onDeleteClick,
-    onMoveClick,
-    onChange,
-    sdk,
-    cloudinary = false,
-}) => {
-    const [mediaUrl, setMediaUrl] = useState(null);
-
-    let id = asset?.sys?.id;
-    let title = asset?.fields?.title?.["en-US"] || asset?.fields?.title?.["de"] || asset?.fields?.title?.toString() || asset?.title?.toString();
-    let mediaAssetId = asset?.fields?.media?.["en-US"]?.sys?.id || asset?.fields?.media?.["de"]?.sys?.id || asset?.fields?.media?.sys?.id;
-
-    if (cloudinary) {
-        title = asset.public_id || asset.title;
-    }
-
-    useEffect(() => {
-        if (cloudinary) {
-            setMediaUrl(asset.url || asset?.media?.url);
-
-            return;
-        }
-
-        if (!mediaAssetId) {
-            if (asset?.media?.url) {
-                let params = new URLSearchParams({
-                    w: "512",
-                    q: "80",
-                });
-
-                setMediaUrl(`${asset?.media?.url}?${params}`);
-            }
-
-            return;
-        }
-
-        sdk.space.getAsset(mediaAssetId)
-            .then(a => {
-                let url = a?.fields?.file?.["en-US"]?.url || a?.fields?.file?.["de"]?.url;
-
-                if (url) {
-                    let params = new URLSearchParams({
-                        w: "512",
-                        q: "80",
-                    });
-
-                    setMediaUrl(`${url}?${params}`);
-                }
-            });
-    }, [mediaAssetId, sdk, asset, cloudinary]);
-
-    if (!asset) {
-        return null;
-    }
-
-    let assetType = "image";
-
-    if (mediaUrl?.endsWith(".mp3")) {
-        assetType = "audio";
-    }
-
-    if (mediaUrl?.endsWith(".mp4") || mediaUrl?.endsWith(".mov")) {
-        assetType = "video";
-    }
-
-    const renderMedia = () => {
-        switch (assetType) {
-            case "audio":
-                return <audio src={mediaUrl} className="mt-2 w-full" controls />;
-            case "video":
-                return <video src={mediaUrl} className="mt-2 w-full rounded-md" controls />;
-            case "image":
-            default:
-                return <img src={mediaUrl} width="100%" className="mt-2 rounded-md" />;
-        }
-    };
-
-    return (
-        <div className="flex flex-col">
-            <div className="flex">
-                <div className="grow">
-                    <b className="mt-[3px] block" style={{wordBreak: "break-word"}}>{title}</b>
-                </div>
-                <div className="ml-2 shrink-0">
-                    {!!onMoveClick && (
-                        <div className="icon-button-group mr-1">
-                            <IconButton size="small" onClick={() => onMoveClick("up")} disabled={index === 0}>↑</IconButton>
-                            <IconButton size="small" onClick={() => onMoveClick("down")} disabled={index === assetsLength - 1}>↓</IconButton>
-                        </div>
-                    )}
-                    {!cloudinary && (
-                        <IconButton
-                            size="small"
-                            className="mr-1"
-                            onClick={() => {
-                                sdk.navigator.openEntry(id, {slideIn: {waitForClose: true}}).then(({entity}) => {
-                                    if (onChange) {
-                                        onChange(entity);
-                                    }
-                                });
-                            }}>✎</IconButton>
-                    )}
-                    <IconButton size="small" onClick={onDeleteClick}>⨯</IconButton>
-                </div>
-            </div>
-            {!!mediaUrl && renderMedia()}
-        </div>
-    );
+import {
+    useEffect, useState,
+} from "react";
+import {IconButton} from "../SidebarEditor";
+import {swapArrayElements} from "../helper/array";
+
+// Hallo :)
+export const AssetList = ({
+    assets,
+    onChange,
+    sdk,
+    cloudinary = false,
+    onAddClick,
+    displayField,
+}) => {
+    const renderAssets = assets.filter(Boolean).map((asset, index) => (
+        <>
+            <Asset
+                key={asset.sys?.id}
+                asset={asset}
+                index={index}
+                sdk={sdk}
+                cloudinary={cloudinary}
+                assetsLength={assets.length}
+                onMoveClick={(direction) => handleMoveClick(direction, index)}
+                onDeleteClick={() => handleDeleteClick(index)}
+                onChange={handleChange}
+                displayField={displayField}
+            />
+            <hr className="my-2" style={{borderColor: "#cfd9e0"}}/>
+            {onAddClick && index === assets.length - 1 && <button onClick={onAddClick} className="button button--secondary">Hinzufügen</button>}
+        </>
+    ));
+
+    const handleMoveClick = (direction, index) => {
+        let newIndex = direction === "up" ? index - 1 : index + 1;
+
+        if (direction === "up" && index === 0) {
+            return;
+        } else if (direction === "down" && index === assets.length - 1) {
+            return;
+        }
+
+        onChange(swapArrayElements(assets, index, newIndex));
+    };
+
+    const handleDeleteClick = (index) => {
+        let newAssets = assets;
+
+        newAssets.splice(index, 1);
+
+        onChange(newAssets);
+    };
+
+    const handleChange = (newAsset) => {
+        let newAssets = assets.map(asset => {
+            if (asset?.sys?.id === newAsset?.sys?.id) {
+                return newAsset;
+            }
+
+            return asset;
+        });
+
+        onChange(newAssets);
+    };
+
+    return (
+        <div>{renderAssets}</div>
+    );
+};
+
+export const Asset = ({
+    asset,
+    index,
+    assetsLength,
+    onDeleteClick,
+    onMoveClick,
+    onChange,
+    sdk,
+    cloudinary = false,
+    displayField = "title",
+}) => {
+    const [mediaUrl, setMediaUrl] = useState(null);
+
+    let id = asset?.sys?.id;
+    let fieldValue = asset?.fields?.[displayField];
+    let title = fieldValue?.["en-US"] || fieldValue?.["de"] || (typeof fieldValue === "string" ? fieldValue : null) || asset?.[displayField]?.toString() || asset?.fields?.title?.["en-US"] || asset?.fields?.title?.["de"];
+    let mediaAssetId = asset?.fields?.media?.["en-US"]?.sys?.id || asset?.fields?.media?.["de"]?.sys?.id || asset?.fields?.media?.sys?.id;
+
+    if (cloudinary) {
+        title = asset.public_id || asset.title;
+    }
+
+    useEffect(() => {
+        if (cloudinary) {
+            setMediaUrl(asset.url || asset?.media?.url);
+
+            return;
+        }
+
+        if (!mediaAssetId) {
+            if (asset?.media?.url) {
+                let params = new URLSearchParams({
+                    w: "512",
+                    q: "80",
+                });
+
+                setMediaUrl(`${asset?.media?.url}?${params}`);
+            }
+
+            return;
+        }
+
+        sdk.space.getAsset(mediaAssetId)
+            .then(a => {
+                let url = a?.fields?.file?.["en-US"]?.url || a?.fields?.file?.["de"]?.url;
+
+                if (url) {
+                    let params = new URLSearchParams({
+                        w: "512",
+                        q: "80",
+                    });
+
+                    setMediaUrl(`${url}?${params}`);
+                }
+            });
+    }, [mediaAssetId, sdk, asset, cloudinary]);
+
+    if (!asset) {
+        return null;
+    }
+
+    let assetType = "image";
+
+    if (mediaUrl?.endsWith(".mp3")) {
+        assetType = "audio";
+    }
+
+    if (mediaUrl?.endsWith(".mp4") || mediaUrl?.endsWith(".mov")) {
+        assetType = "video";
+    }
+
+    const renderMedia = () => {
+        switch (assetType) {
+            case "audio":
+                return <audio src={mediaUrl} className="mt-2 w-full" controls />;
+            case "video":
+                return <video src={mediaUrl} className="mt-2 w-full rounded-md" controls />;
+            case "image":
+            default:
+                return <img src={mediaUrl} width="100%" className="mt-2 rounded-md" />;
+        }
+    };
+
+    return (
+        <div className="flex flex-col">
+            <div className="flex">
+                <div className="grow">
+                    <b className="mt-[3px] block" style={{wordBreak: "break-word"}}>{title}</b>
+                </div>
+                <div className="ml-2 shrink-0">
+                    {!!onMoveClick && (
+                        <div className="icon-button-group mr-1">
+                            <IconButton size="small" onClick={() => onMoveClick("up")} disabled={index === 0}>↑</IconButton>
+                            <IconButton size="small" onClick={() => onMoveClick("down")} disabled={index === assetsLength - 1}>↓</IconButton>
+                        </div>
+                    )}
+                    {!cloudinary && (
+                        <IconButton
+                            size="small"
+                            className="mr-1"
+                            onClick={() => {
+                                sdk.navigator.openEntry(id, {slideIn: {waitForClose: true}}).then(({entity}) => {
+                                    if (onChange) {
+                                        onChange(entity);
+                                    }
+                                });
+                            }}>✎</IconButton>
+                    )}
+                    <IconButton size="small" onClick={onDeleteClick}>⨯</IconButton>
+                </div>
+            </div>
+            {!!mediaUrl && renderMedia()}
+        </div>
+    );
 };

package/src/SidebarEditor/Fields/CloudinaryContentSelect.js

@@ -1,90 +1,90 @@
-import {Asset} from "@contentful/forma-36-react-components";
-import {AssetList} from "../AssetList";
-
-export const CloudinaryContentSelect = ({
-    value,
-    onChange,
-    multiple,
-    sdk,
-}) => {
-    if (multiple) {
-        return (
-            <>
-                {value && value.length > 0 && (
-                    <details className="mb-2">
-                        <summary>{value.length || 0} {value.length === 1 ? "Element" : "Elemente"}</summary>
-                        <div className="mt-4">
-                            <AssetList
-                                cloudinary
-                                assets={value}
-                                sdk={sdk}
-                                onChange={onChange}
-                                onAddClick={() => {
-                                    sdk.dialogs.openCurrentApp({
-                                        width: "fullWidth",
-                                        title: "Select Images",
-                                        shouldCloseOnOverlayClick: true,
-                                        shouldCloseOnEscapePress: true,
-                                        parameters: {
-                                            type: "cloudinary",
-                                            multiple: true,
-                                            portal: sdk?.entry?.fields?.portal?.getValue(),
-                                        },
-                                    }).then((data) => {
-                                        onChange([...value, ...(data?.assets || [])]);
-                                    });
-                                }}/>
-                        </div>
-                    </details>
-                )}
-                <button
-                    className="button"
-                    onClick={() => {
-                        sdk.dialogs.openCurrentApp({
-                            width: "fullWidth",
-                            title: "Select Images",
-                            shouldCloseOnOverlayClick: true,
-                            shouldCloseOnEscapePress: true,
-                            parameters: {
-                                type: "cloudinary",
-                                multiple: true,
-                                portal: sdk?.entry?.fields?.portal?.getValue(),
-                            },
-                        }).then((data) => {
-                            onChange(data?.assets);
-                        });
-                    }}
-                >Auswählen
-                </button>
-            </>
-        );
-    }
-
-    return (
-        <>
-            {!!value && <div className="mb-2"><Asset
-                cloudinary
-                sdk={sdk}
-                asset={value}
-                onDeleteClick={() => onChange(null)}/></div>}
-            <button
-                className="button"
-                onClick={() => {
-                    sdk.dialogs.openCurrentApp({
-                        width: "fullWidth",
-                        title: "Select Image",
-                        shouldCloseOnOverlayClick: true,
-                        shouldCloseOnEscapePress: true,
-                        parameters: {
-                            type: "cloudinary",
-                            portal: sdk?.entry?.fields?.portal?.getValue(),
-                        },
-                    }).then((data) => {
-                        onChange(data?.assets?.[0]);
-                    });
-                }}
-            >Auswählen
-            </button>
-        </>
-    );
+import {Asset} from "@contentful/forma-36-react-components";
+import {AssetList} from "../AssetList";
+
+export const CloudinaryContentSelect = ({
+    value,
+    onChange,
+    multiple,
+    sdk,
+}) => {
+    if (multiple) {
+        return (
+            <>
+                {value && value.length > 0 && (
+                    <details className="mb-2">
+                        <summary>{value.length || 0} {value.length === 1 ? "Element" : "Elemente"}</summary>
+                        <div className="mt-4">
+                            <AssetList
+                                cloudinary
+                                assets={value}
+                                sdk={sdk}
+                                onChange={onChange}
+                                onAddClick={() => {
+                                    sdk.dialogs.openCurrentApp({
+                                        width: "fullWidth",
+                                        title: "Select Images",
+                                        shouldCloseOnOverlayClick: true,
+                                        shouldCloseOnEscapePress: true,
+                                        parameters: {
+                                            type: "cloudinary",
+                                            multiple: true,
+                                            portal: sdk?.entry?.fields?.portal?.getValue(),
+                                        },
+                                    }).then((data) => {
+                                        onChange([...value, ...(data?.assets || [])]);
+                                    });
+                                }}/>
+                        </div>
+                    </details>
+                )}
+                <button
+                    className="button"
+                    onClick={() => {
+                        sdk.dialogs.openCurrentApp({
+                            width: "fullWidth",
+                            title: "Select Images",
+                            shouldCloseOnOverlayClick: true,
+                            shouldCloseOnEscapePress: true,
+                            parameters: {
+                                type: "cloudinary",
+                                multiple: true,
+                                portal: sdk?.entry?.fields?.portal?.getValue(),
+                            },
+                        }).then((data) => {
+                            onChange(data?.assets);
+                        });
+                    }}
+                >Auswählen
+                </button>
+            </>
+        );
+    }
+
+    return (
+        <>
+            {!!value && <div className="mb-2"><Asset
+                cloudinary
+                sdk={sdk}
+                asset={value}
+                onDeleteClick={() => onChange(null)}/></div>}
+            <button
+                className="button"
+                onClick={() => {
+                    sdk.dialogs.openCurrentApp({
+                        width: "fullWidth",
+                        title: "Select Image",
+                        shouldCloseOnOverlayClick: true,
+                        shouldCloseOnEscapePress: true,
+                        parameters: {
+                            type: "cloudinary",
+                            portal: sdk?.entry?.fields?.portal?.getValue(),
+                        },
+                    }).then((data) => {
+                        onChange(data?.assets?.[0]);
+                    });
+                }}
+            >Auswählen
+            </button>
+        </>
+    );
 };