@vonaffenfels/contentful-slate-editor 1.2.38 → 1.2.41

package/src/components/EntryEditor.js

@@ -1,51 +1,51 @@
-import React, {
-    useEffect, useState,
-} from 'react';
-import EditorField from "./EditorField";
-
-const Entry = ({
-    sdk,
-    onStorybookElementClick,
-    elementPropsMap,
-    activeConfig,
-}) => {
-    const field = sdk.parameters.instance.contentField;
-    const fieldSdk = sdk.entry.fields[field];
-
-    const [locale, setLocale] = useState(sdk.locales.default);
-    const [portal, setPortal] = useState();
-    const portalField = sdk?.entry?.fields?.portal;
-
-    portalField?.onValueChanged(() => {
-        if (portalField.getValue() !== portal) {
-            setPortal(portalField.getValue());
-        }
-    });
-
-    useEffect(() => {
-        const detachHandler = sdk.editor.onLocaleSettingsChanged((loc) => {
-            setLocale(loc?.focused || sdk.locales.default);
-        });
-
-        return () => {
-            detachHandler();
-        };
-    }, []);
-
-    return <EditorField
-        preview={false}
-        fieldSdk={fieldSdk}
-        editorSdk={sdk.editor}
-        locale={locale}
-        setLocale={setLocale}
-        elementPropsMap={elementPropsMap}
-        entrySdk={sdk.entry}
-        appSdk={sdk.app}
-        sdk={sdk}
-        portal={portal}
-        onStorybookElementClick={onStorybookElementClick}
-        activeConfig={activeConfig}
-    />;
-};
-
+import React, {
+    useEffect, useState,
+} from 'react';
+import EditorField from "./EditorField";
+
+const Entry = ({
+    sdk,
+    onStorybookElementClick,
+    elementPropsMap,
+    activeConfig,
+}) => {
+    const field = sdk.parameters.instance.contentField;
+    const fieldSdk = sdk.entry.fields[field];
+
+    const [locale, setLocale] = useState(sdk.locales.default);
+    const [portal, setPortal] = useState();
+    const portalField = sdk?.entry?.fields?.portal;
+
+    portalField?.onValueChanged(() => {
+        if (portalField.getValue() !== portal) {
+            setPortal(portalField.getValue());
+        }
+    });
+
+    useEffect(() => {
+        const detachHandler = sdk.editor.onLocaleSettingsChanged((loc) => {
+            setLocale(loc?.focused || sdk.locales.default);
+        });
+
+        return () => {
+            detachHandler();
+        };
+    }, []);
+
+    return <EditorField
+        preview={false}
+        fieldSdk={fieldSdk}
+        editorSdk={sdk.editor}
+        locale={locale}
+        setLocale={setLocale}
+        elementPropsMap={elementPropsMap}
+        entrySdk={sdk.entry}
+        appSdk={sdk.app}
+        sdk={sdk}
+        portal={portal}
+        onStorybookElementClick={onStorybookElementClick}
+        activeConfig={activeConfig}
+    />;
+};
+
 export default Entry;

package/src/components/Field.js

@@ -1,72 +1,72 @@
-import React, {
-    useEffect, useRef, useState,
-} from 'react';
-import Renderer from "@vonaffenfels/slate-editor/dist/Renderer";
-import componentLoader from "@vonaffenfels/slate-editor/componentLoader.js";
-
-const FIELD_HEIGHT = 300;
-let _interval;
-
-const Field = ({
-    sdk,
-    elementPropsMap,
-}) => {
-    const [value, setValue] = useState(sdk.field.getValue());
-    const wrapperRef = useRef();
-
-    const openDialog = () => {
-        sdk.dialogs.openCurrentApp({
-            title: 'Inhalt bearbeiten',
-            width: 'fullWidth',
-            position: "center",
-            allowHeightOverflow: true,
-            shouldCloseOnOverlayClick: false,
-            shouldCloseOnEscapePress: false,
-            minHeight: 500,
-            parameters: {
-                value: sdk.field.getValue(),
-                portal: sdk.entry.fields.portal.getValue(),
-                contentType: sdk.entry.getSys().contentType.sys.id,
-            },
-        }).then((data) => {
-            if (data) {
-                sdk.field.setValue(data);
-            }
-        });
-    };
-
-    useEffect(() => {
-        sdk.window.updateHeight(FIELD_HEIGHT);
-        sdk.field.onValueChanged(handleValueChanged);
-    }, []);
-
-    const handleValueChanged = value => {
-        setValue(value);
-
-        clearInterval(_interval);
-        _interval = setInterval(() => {
-            if (wrapperRef.current) {
-                sdk.window.updateHeight(wrapperRef.current.clientHeight);
-            }
-        }, 500);
-    };
-
-    return <div
-        ref={wrapperRef}
-    >
-        <button onClick={openDialog} className="button mb-2 w-full">Inhalt bearbeiten</button>
-        <div style={{
-            overflowY: "auto",
-            maxHeight: "500px",
-        }}>
-            <Renderer
-                value={value}
-                elementPropsMap={elementPropsMap}
-                storybookComponentLoader={(block) => {
-                    return componentLoader(block);
-                }}/>
-        </div>
-    </div>;
-};
-
+import React, {
+    useEffect, useRef, useState,
+} from 'react';
+import Renderer from "@vonaffenfels/slate-editor/dist/Renderer";
+import componentLoader from "@vonaffenfels/slate-editor/componentLoader.js";
+
+const FIELD_HEIGHT = 300;
+let _interval;
+
+const Field = ({
+    sdk,
+    elementPropsMap,
+}) => {
+    const [value, setValue] = useState(sdk.field.getValue());
+    const wrapperRef = useRef();
+
+    const openDialog = () => {
+        sdk.dialogs.openCurrentApp({
+            title: 'Inhalt bearbeiten',
+            width: 'fullWidth',
+            position: "center",
+            allowHeightOverflow: true,
+            shouldCloseOnOverlayClick: false,
+            shouldCloseOnEscapePress: false,
+            minHeight: 500,
+            parameters: {
+                value: sdk.field.getValue(),
+                portal: sdk.entry.fields.portal.getValue(),
+                contentType: sdk.entry.getSys().contentType.sys.id,
+            },
+        }).then((data) => {
+            if (data) {
+                sdk.field.setValue(data);
+            }
+        });
+    };
+
+    useEffect(() => {
+        sdk.window.updateHeight(FIELD_HEIGHT);
+        sdk.field.onValueChanged(handleValueChanged);
+    }, []);
+
+    const handleValueChanged = value => {
+        setValue(value);
+
+        clearInterval(_interval);
+        _interval = setInterval(() => {
+            if (wrapperRef.current) {
+                sdk.window.updateHeight(wrapperRef.current.clientHeight);
+            }
+        }, 500);
+    };
+
+    return <div
+        ref={wrapperRef}
+    >
+        <button onClick={openDialog} className="button mb-2 w-full">Inhalt bearbeiten</button>
+        <div style={{
+            overflowY: "auto",
+            maxHeight: "500px",
+        }}>
+            <Renderer
+                value={value}
+                elementPropsMap={elementPropsMap}
+                storybookComponentLoader={(block) => {
+                    return componentLoader(block);
+                }}/>
+        </div>
+    </div>;
+};
+
 export default Field;

package/src/components/Sidebar.js

@@ -1,93 +1,93 @@
-import {Button} from "@contentful/f36-components";
-import React, {
-    useEffect, useState,
-} from "react";
-
-export const Sidebar = ({
-    sdk,
-    activeConfig,
-}) => {
-    return <div className="flex w-full flex-col gap-2">
-        <div className="w-full">
-            <OpenProdPageLink sdk={sdk} activeConfig={activeConfig}/>
-        </div>
-        <div className="w-full">
-            <SidebarTranslations sdk={sdk}/>
-        </div>
-    </div>;
-};
-
-const OpenProdPageLink = ({
-    activeConfig,
-    sdk,
-}) => {
-    const [slug, setSlug] = useState(sdk?.entry?.fields?.slug?.getValue());
-    const [locale, setLocale] = useState(sdk.locales.default);
-
-    useEffect(() => {
-        const detachHandler = sdk.editor.onLocaleSettingsChanged((loc) => {
-            setLocale(loc?.focused || sdk.locales.default);
-        });
-
-        return () => {
-            detachHandler();
-        };
-    }, [sdk]);
-
-    useEffect(() => {
-        if (locale) {
-            setSlug(sdk?.entry?.fields?.slug?.getForLocale(locale).getValue());
-        }
-    }, [locale]);
-
-    useEffect(() => {
-        if (sdk?.entry?.fields?.slug) {
-            return sdk.entry.fields.slug.onValueChanged(setSlug);
-        }
-    }, [sdk]);
-
-    const disabled = !activeConfig?.domain || !slug;
-    let link = `${activeConfig.domain}/${slug}`;
-
-    if (sdk?.locales?.default !== locale) {
-        link = `${activeConfig.domain}/${locale}/${slug}`;
-    }
-
-    const onClick = () => {
-        if (disabled) {
-            return;
-        }
-
-        window.open(link, "_blank");
-    };
-
-    return <Button isDisabled={disabled} isFullWidth={true} variant="secondary" onClick={onClick}>Live-Seite öffnen</Button>;
-};
-
-const SidebarTranslations = ({sdk}) => {
-    const enabled = sdk?.parameters?.installation?.usersWithTranslation?.includes(sdk?.user?.email) && sdk?.parameters?.installation?.translationService;
-
-    if (!enabled) {
-        return null;
-    }
-
-    const onClick = () => {
-        sdk.dialogs.openCurrentApp({
-            title: 'Übersetzen',
-            width: 'fullWidth',
-            position: "center",
-            allowHeightOverflow: true,
-            shouldCloseOnOverlayClick: false,
-            shouldCloseOnEscapePress: false,
-            minHeight: 500,
-            parameters: {
-                type: "translation",
-                entryId: sdk.entry.getSys().id,
-            },
-        });
-    };
-
-    return <>
-        <Button isFullWidth={true} onClick={onClick}>Übersetzen</Button>
-    </>;
+import {Button} from "@contentful/f36-components";
+import React, {
+    useEffect, useState,
+} from "react";
+
+export const Sidebar = ({
+    sdk,
+    activeConfig,
+}) => {
+    return <div className="flex w-full flex-col gap-2">
+        <div className="w-full">
+            <OpenProdPageLink sdk={sdk} activeConfig={activeConfig}/>
+        </div>
+        <div className="w-full">
+            <SidebarTranslations sdk={sdk}/>
+        </div>
+    </div>;
+};
+
+const OpenProdPageLink = ({
+    activeConfig,
+    sdk,
+}) => {
+    const [slug, setSlug] = useState(sdk?.entry?.fields?.slug?.getValue());
+    const [locale, setLocale] = useState(sdk.locales.default);
+
+    useEffect(() => {
+        const detachHandler = sdk.editor.onLocaleSettingsChanged((loc) => {
+            setLocale(loc?.focused || sdk.locales.default);
+        });
+
+        return () => {
+            detachHandler();
+        };
+    }, [sdk]);
+
+    useEffect(() => {
+        if (locale) {
+            setSlug(sdk?.entry?.fields?.slug?.getForLocale(locale).getValue());
+        }
+    }, [locale]);
+
+    useEffect(() => {
+        if (sdk?.entry?.fields?.slug) {
+            return sdk.entry.fields.slug.onValueChanged(setSlug);
+        }
+    }, [sdk]);
+
+    const disabled = !activeConfig?.domain || !slug;
+    let link = `${activeConfig.domain}/${slug}`;
+
+    if (sdk?.locales?.default !== locale) {
+        link = `${activeConfig.domain}/${locale}/${slug}`;
+    }
+
+    const onClick = () => {
+        if (disabled) {
+            return;
+        }
+
+        window.open(link, "_blank");
+    };
+
+    return <Button isDisabled={disabled} isFullWidth={true} variant="secondary" onClick={onClick}>Live-Seite öffnen</Button>;
+};
+
+const SidebarTranslations = ({sdk}) => {
+    const enabled = sdk?.parameters?.installation?.usersWithTranslation?.includes(sdk?.user?.email) && sdk?.parameters?.installation?.translationService;
+
+    if (!enabled) {
+        return null;
+    }
+
+    const onClick = () => {
+        sdk.dialogs.openCurrentApp({
+            title: 'Übersetzen',
+            width: 'fullWidth',
+            position: "center",
+            allowHeightOverflow: true,
+            shouldCloseOnOverlayClick: false,
+            shouldCloseOnEscapePress: false,
+            minHeight: 500,
+            parameters: {
+                type: "translation",
+                entryId: sdk.entry.getSys().id,
+            },
+        });
+    };
+
+    return <>
+        <Button isFullWidth={true} onClick={onClick}>Übersetzen</Button>
+    </>;
 };

package/src/dev.js

@@ -1,5 +1,5 @@
-import './scss/index.scss';
-import './scss/dev.scss';
-import {BaseContentfulApp} from "./index"
-
+import './scss/index.scss';
+import './scss/dev.scss';
+import {BaseContentfulApp} from "./index"
+
 BaseContentfulApp();

package/src/hooks/useOnScreen.js

@@ -1,24 +1,24 @@
-import React, {
-    useState, useEffect, useRef,
-} from "react";
-
-export default function useOnScreen(ref) {
-    const [isIntersecting, setIntersecting] = useState(false);
-    const observerRef = useRef();
-
-    useEffect(() => {
-        if (!observerRef.current && ref.current) {
-            observerRef.current = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
-
-            observerRef.current.observe(ref.current);
-
-            return () => {
-                if (observerRef.current) {
-                    observerRef.current.disconnect();
-                }
-            };
-        }
-    }, []);
-
-    return isIntersecting;
+import React, {
+    useState, useEffect, useRef,
+} from "react";
+
+export default function useOnScreen(ref) {
+    const [isIntersecting, setIntersecting] = useState(false);
+    const observerRef = useRef();
+
+    useEffect(() => {
+        if (!observerRef.current && ref.current) {
+            observerRef.current = new IntersectionObserver(([entry]) => setIntersecting(entry.isIntersecting));
+
+            observerRef.current.observe(ref.current);
+
+            return () => {
+                if (observerRef.current) {
+                    observerRef.current.disconnect();
+                }
+            };
+        }
+    }, []);
+
+    return isIntersecting;
 }

package/src/index.html

@@ -1,12 +1,12 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <meta charset="utf-8"/>
-    <title>Slate Block Editor Contentful App</title>
-    <script src="https://media-library.cloudinary.com/global/all.js"></script>
-</head>
-<body>
-<div id="root">
-</div>
-</body>
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title>Slate Block Editor Contentful App</title>
+    <script src="https://media-library.cloudinary.com/global/all.js"></script>
+</head>
+<body>
+<div id="root">
+</div>
+</body>
 </html>