@vonaffenfels/slate-editor 1.2.29 → 1.2.39

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.2.29",
+    "version": "1.2.39",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "564cc567d33fd5e681c7503a86a41f54a9d5c502",
+    "gitHead": "46607d2d7b190f03ad2b2fa84d466d7133dea27b",
     "publishConfig": {
         "access": "public"
     }

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/ContentfulContentSelect.js

@@ -1,63 +1,64 @@
-import {
-    Asset, AssetList,
-} from "../AssetList";
-import {reduceContentfulResponse} from "../../util/reduceContentfulResponse";
-
-export const ContentfulContentSelect = ({
-    value,
-    onChange,
-    sdk,
-    multiple,
-    field,
-}) => {
-    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
-                                assets={value}
-                                sdk={sdk}
-                                onChange={onChange}
-                                onAddClick={() => {
-                                    sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
-                                        onChange(reduceContentfulResponse([...value, ...contents], field.control.paths));
-                                    });
-                                }}/>
-                        </div>
-                    </details>
-                )}
-                <button
-                    className="button"
-                    onClick={() => {
-                        sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
-                            onChange(reduceContentfulResponse(contents, field.control.paths));
-                        });
-                    }}
-                >Auswählen
-                </button>
-            </>
-        );
-    }
-
-    return (
-        <>
-            {!!value && <div className="mb-2"><Asset
-                sdk={sdk}
-                asset={value}
-                onDeleteClick={() => onChange(null)}
-                onChange={onChange}/></div>}
-            <button
-                className="button"
-                onClick={() => {
-                    sdk.dialogs.selectSingleEntry({contentTypes: field.control.contentTypes}).then(content => {
-                        onChange(reduceContentfulResponse(content, field.control.paths));
-                    });
-                }}
-            >Auswählen
-            </button>
-        </>
-    );
+import {
+    Asset, AssetList,
+} from "../AssetList";
+import {reduceContentfulResponse} from "../../util/reduceContentfulResponse";
+
+export const ContentfulContentSelect = ({
+    value,
+    onChange,
+    sdk,
+    multiple,
+    field,
+}) => {
+    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
+                                assets={value}
+                                sdk={sdk}
+                                onChange={onChange}
+                                displayField={field.control.displayField}
+                                onAddClick={() => {
+                                    sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
+                                        onChange(reduceContentfulResponse([...value, ...contents], field.control.paths));
+                                    });
+                                }}/>
+                        </div>
+                    </details>
+                )}
+                <button
+                    className="button"
+                    onClick={() => {
+                        sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
+                            onChange(reduceContentfulResponse(contents, field.control.paths));
+                        });
+                    }}
+                >Auswählen
+                </button>
+            </>
+        );
+    }
+
+    return (
+        <>
+            {!!value && <div className="mb-2"><Asset
+                sdk={sdk}
+                asset={value}
+                onDeleteClick={() => onChange(null)}
+                onChange={onChange}/></div>}
+            <button
+                className="button"
+                onClick={() => {
+                    sdk.dialogs.selectSingleEntry({contentTypes: field.control.contentTypes}).then(content => {
+                        onChange(reduceContentfulResponse(content, field.control.paths));
+                    });
+                }}
+            >Auswählen
+            </button>
+        </>
+    );
 };