@vonaffenfels/contentful-teasermanager 1.2.18 → 1.2.19

package/src/components/Teasermanager.module.css

@@ -1,138 +1,138 @@
-.wrapper *[data-teasermanager-slot] {
-    position: relative;
-}
-
-.management {
-    font-family: Arial, Helvetica, sans-serif;
-
-    background-color: rgba(255, 255, 255, 0.2);
-    outline: 2px dashed black;
-    color: black;
-    text-align: center;
-    vertical-align: middle;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    cursor: pointer;
-
-    display: flex;
-    justify-items: center;
-    align-items: center;
-    padding: 1em;
-}
-
-.remove-button {
-    display: flex;
-    padding: 0.5em;
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-}
-
-.loading {
-    animation: pulse 3s ease-in-out infinite;
-}
-
-.loading:after {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    margin-top: -50px;
-    margin-left: -50px;
-    width: 100px;
-    height: 100px;
-    border-radius: 999999px;
-    border: 10px dotted white;
-    filter: drop-shadow(2px 4px 6px black);
-    animation: loading 3s linear infinite;
-}
-
-@keyframes loading {
-    0% {
-        transform: rotate(0deg);
-    }
-
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-@keyframes pulse {
-    from {
-        opacity: 1;
-    }
-
-    50% {
-        opacity: 0.3;
-    }
-
-    to {
-        opacity: 1;
-    }
-}
-
-@media (prefers-color-scheme: dark) {
-    .management {
-        outline: 2px dashed white;
-    }
-}
-
-.management:hover {
-    background-color: rgba(255, 255, 255, 0.9);
-}
-
-.label {
-    visibility: hidden;
-    width: 100%;
-    height: 100%;
-    font-weight: bold;
-    text-align: center;
-    align-content: center;
-    padding: 6px;
-}
-
-.labelLogic {
-    visibility: hidden;
-    width: 100%;
-    height: 100%;
-    font-weight: bold;
-    text-align: center;
-    align-content: center;
-    padding: 1em;
-}
-
-.labelLogic:hover {
-    background-color: rgba(0, 0, 0, 0.3);
-}
-
-.label:hover {
-    background-color: rgba(0, 0, 0, 0.3);
-}
-
-.management:hover .label {
-    visibility: visible;
-}
-
-.management:hover .labelLogic {
-    visibility: visible;
-}
-
-.changed {
-    background-color: rgba(172, 255, 156, 0.4);
-}
-
-.changed:hover {
-    background-color: rgba(97, 255, 68, 0.6);
-}
-
-.changed-border {
-    outline-color: green;
-}
-
-.logic-border {
-    outline-color: orange;
+.wrapper *[data-teasermanager-slot] {
+    position: relative;
+}
+
+.management {
+    font-family: Arial, Helvetica, sans-serif;
+
+    background-color: rgba(255, 255, 255, 0.2);
+    outline: 2px dashed black;
+    color: black;
+    text-align: center;
+    vertical-align: middle;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+
+    display: flex;
+    justify-items: center;
+    align-items: center;
+    padding: 1em;
+}
+
+.remove-button {
+    display: flex;
+    padding: 0.5em;
+    position: absolute;
+    top: 0;
+    right: 0;
+    cursor: pointer;
+}
+
+.loading {
+    animation: pulse 3s ease-in-out infinite;
+}
+
+.loading:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    margin-top: -50px;
+    margin-left: -50px;
+    width: 100px;
+    height: 100px;
+    border-radius: 999999px;
+    border: 10px dotted white;
+    filter: drop-shadow(2px 4px 6px black);
+    animation: loading 3s linear infinite;
+}
+
+@keyframes loading {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes pulse {
+    from {
+        opacity: 1;
+    }
+
+    50% {
+        opacity: 0.3;
+    }
+
+    to {
+        opacity: 1;
+    }
+}
+
+@media (prefers-color-scheme: dark) {
+    .management {
+        outline: 2px dashed white;
+    }
+}
+
+.management:hover {
+    background-color: rgba(255, 255, 255, 0.9);
+}
+
+.label {
+    visibility: hidden;
+    width: 100%;
+    height: 100%;
+    font-weight: bold;
+    text-align: center;
+    align-content: center;
+    padding: 6px;
+}
+
+.labelLogic {
+    visibility: hidden;
+    width: 100%;
+    height: 100%;
+    font-weight: bold;
+    text-align: center;
+    align-content: center;
+    padding: 1em;
+}
+
+.labelLogic:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.label:hover {
+    background-color: rgba(0, 0, 0, 0.3);
+}
+
+.management:hover .label {
+    visibility: visible;
+}
+
+.management:hover .labelLogic {
+    visibility: visible;
+}
+
+.changed {
+    background-color: rgba(172, 255, 156, 0.4);
+}
+
+.changed:hover {
+    background-color: rgba(97, 255, 68, 0.6);
+}
+
+.changed-border {
+    outline-color: green;
+}
+
+.logic-border {
+    outline-color: orange;
 }

package/src/dev.js

@@ -1,6 +1,6 @@
-import '@vonaffenfels/slate-editor/dist/index.css';
-import './scss/index.scss';
-import './scss/dev.scss';
-import {BaseContentfulApp} from "./index"
-
+import '@vonaffenfels/slate-editor/dist/index.css';
+import './scss/index.scss';
+import './scss/dev.scss';
+import {BaseContentfulApp} from "./index"
+
 BaseContentfulApp();

package/src/hooks/useDebounce.js

@@ -1,21 +1,21 @@
-import React, {useState, useEffect} from "react";
-
-export default function useDebounce(value, delay) {
-    const [debouncedValue, setDebouncedValue] = useState(value);
-
-    useEffect(
-        () => {
-            const handler = setTimeout(() => {
-                setDebouncedValue(value);
-            }, delay);
-
-            return () => {
-                clearTimeout(handler);
-            };
-        },
-
-        [value],
-    );
-
-    return debouncedValue;
+import React, {useState, useEffect} from "react";
+
+export default function useDebounce(value, delay) {
+    const [debouncedValue, setDebouncedValue] = useState(value);
+
+    useEffect(
+        () => {
+            const handler = setTimeout(() => {
+                setDebouncedValue(value);
+            }, delay);
+
+            return () => {
+                clearTimeout(handler);
+            };
+        },
+
+        [value],
+    );
+
+    return debouncedValue;
 }

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/icons/remove.svg

@@ -1,8 +1,8 @@
-
-<svg height="0px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
-     viewBox="0 0 496.158 496.158" xml:space="preserve">
-<path style="fill:#E04F5F;" d="M0,248.085C0,111.063,111.069,0.003,248.075,0.003c137.013,0,248.083,111.061,248.083,248.082
-	c0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z"/>
-    <path style="fill:#FFFFFF;" d="M383.546,206.286H112.612c-3.976,0-7.199,3.225-7.199,7.2v69.187c0,3.976,3.224,7.199,7.199,7.199
-	h270.934c3.976,0,7.199-3.224,7.199-7.199v-69.187C390.745,209.511,387.521,206.286,383.546,206.286z"/>
+
+<svg height="0px" width="800px" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+     viewBox="0 0 496.158 496.158" xml:space="preserve">
+<path style="fill:#E04F5F;" d="M0,248.085C0,111.063,111.069,0.003,248.075,0.003c137.013,0,248.083,111.061,248.083,248.082
+	c0,137.002-111.07,248.07-248.083,248.07C111.069,496.155,0,385.087,0,248.085z"/>
+    <path style="fill:#FFFFFF;" d="M383.546,206.286H112.612c-3.976,0-7.199,3.225-7.199,7.2v69.187c0,3.976,3.224,7.199,7.199,7.199
+	h270.934c3.976,0,7.199-3.224,7.199-7.199v-69.187C390.745,209.511,387.521,206.286,383.546,206.286z"/>
 </svg>

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>

package/src/index.js

@@ -1,52 +1,52 @@
-import React from 'react';
-import {createRoot} from 'react-dom/client';
-
-import {
-    init,
-    locations,
-} from '@contentful/app-sdk';
-
-import EntryEditor from './components/Contentful/EntryEditor';
-import Config from './components/Contentful/ConfigScreen';
-import Dialog from "./components/Contentful/Dialog";
-import Page from "./components/Contentful/Page";
-import {initContentfulClient} from "./lib/contentfulClient";
-
-export const BaseContentfulApp = (props = {}) => {
-    init((sdk) => {
-        const rootContainer = document.getElementById('root');
-
-        if (props.initPortal && sdk.parameters?.invocation?.portal) {
-            props.initPortal(sdk.parameters.invocation.portal);
-        }
-
-        initContentfulClient(sdk);
-
-        const RendererWrapperComponent = props.RendererWrapperComponent || (({children}) => <div>{children}</div>);
-        const ComponentLocationSettings = [
-            {
-                location: locations.LOCATION_APP_CONFIG,
-                component: <Config sdk={sdk}/>,
-            },
-            {
-                location: locations.LOCATION_ENTRY_EDITOR,
-                component: <RendererWrapperComponent sdk={sdk}><EntryEditor sdk={sdk}/></RendererWrapperComponent>,
-            },
-            {
-                location: locations.LOCATION_DIALOG,
-                component: <Dialog sdk={sdk} portals={props.portals} getArticleThumbnailUrl={props.getArticleThumbnailUrl}/>,
-            },
-            {
-                location: locations.LOCATION_PAGE,
-                component: <RendererWrapperComponent sdk={sdk}><Page sdk={sdk}/></RendererWrapperComponent>,
-            },
-        ];
-
-        ComponentLocationSettings.forEach((componentLocationSetting) => {
-            if (sdk.location.is(componentLocationSetting.location)) {
-                const root = createRoot(rootContainer); // createRoot(container!) if you use TypeScript
-                root.render(componentLocationSetting.component);
-            }
-        });
-    });
+import React from 'react';
+import {createRoot} from 'react-dom/client';
+
+import {
+    init,
+    locations,
+} from '@contentful/app-sdk';
+
+import EntryEditor from './components/Contentful/EntryEditor';
+import Config from './components/Contentful/ConfigScreen';
+import Dialog from "./components/Contentful/Dialog";
+import Page from "./components/Contentful/Page";
+import {initContentfulClient} from "./lib/contentfulClient";
+
+export const BaseContentfulApp = (props = {}) => {
+    init((sdk) => {
+        const rootContainer = document.getElementById('root');
+
+        if (props.initPortal && sdk.parameters?.invocation?.portal) {
+            props.initPortal(sdk.parameters.invocation.portal);
+        }
+
+        initContentfulClient(sdk);
+
+        const RendererWrapperComponent = props.RendererWrapperComponent || (({children}) => <div>{children}</div>);
+        const ComponentLocationSettings = [
+            {
+                location: locations.LOCATION_APP_CONFIG,
+                component: <Config sdk={sdk}/>,
+            },
+            {
+                location: locations.LOCATION_ENTRY_EDITOR,
+                component: <RendererWrapperComponent sdk={sdk}><EntryEditor sdk={sdk}/></RendererWrapperComponent>,
+            },
+            {
+                location: locations.LOCATION_DIALOG,
+                component: <Dialog sdk={sdk} portals={props.portals} getArticleThumbnailUrl={props.getArticleThumbnailUrl}/>,
+            },
+            {
+                location: locations.LOCATION_PAGE,
+                component: <RendererWrapperComponent sdk={sdk}><Page sdk={sdk}/></RendererWrapperComponent>,
+            },
+        ];
+
+        ComponentLocationSettings.forEach((componentLocationSetting) => {
+            if (sdk.location.is(componentLocationSetting.location)) {
+                const root = createRoot(rootContainer); // createRoot(container!) if you use TypeScript
+                root.render(componentLocationSetting.component);
+            }
+        });
+    });
 };

package/src/lib/contentfulClient.js

@@ -1,13 +1,13 @@
-let __contentfulClient;
-
-export const getContentfulClient = () => {
-    if (!__contentfulClient) {
-        throw new Error(`Contentful client not initialized run initContentfulClient(sdk) first`);
-    }
-
-    return __contentfulClient;
-}
-
-export const initContentfulClient = (sdk) => {
-    __contentfulClient = sdk.space;
+let __contentfulClient;
+
+export const getContentfulClient = () => {
+    if (!__contentfulClient) {
+        throw new Error(`Contentful client not initialized run initContentfulClient(sdk) first`);
+    }
+
+    return __contentfulClient;
+}
+
+export const initContentfulClient = (sdk) => {
+    __contentfulClient = sdk.space;
 }

package/src/lib/runLoaders.js

@@ -1,47 +1,47 @@
-export const runLoaders = async (value, portal, contextId, currentDate) => {
-    if (!Array.isArray(value)) {
-        return value;
-    }
-
-    const newValue = await Promise.all(value.map(async (item) => {
-        try {
-            return await runLoader(item, portal, contextId, currentDate)
-        } catch (e) {
-            console.error(e);
-            return item;
-        }
-    }));
-
-    return newValue;
-}
-
-const runLoader = async (item, portal, contextId, currentDate = new Date()) => {
-
-    if (!item?.block) {
-        return item;
-    }
-    try {
-        const response = await fetch(`/api/loader/?portal=${portal}&block=${item.block}`, {
-            method: "POST",
-            body: JSON.stringify({
-                variables: {
-                    ...(item.attributes || {}),
-                    teasermanagerDate: currentDate,
-                },
-                context: {activeContent: {sys: {id: contextId}}},
-            }),
-        }).then(res => res.json());
-
-        return {
-            ...item,
-            attributes: {
-                ...(item.attributes || {}),
-                ...response,
-            },
-        }
-    } catch (e) {
-        console.error(e);
-    }
-
-    return item;
+export const runLoaders = async (value, portal, contextId, currentDate) => {
+    if (!Array.isArray(value)) {
+        return value;
+    }
+
+    const newValue = await Promise.all(value.map(async (item) => {
+        try {
+            return await runLoader(item, portal, contextId, currentDate)
+        } catch (e) {
+            console.error(e);
+            return item;
+        }
+    }));
+
+    return newValue;
+}
+
+const runLoader = async (item, portal, contextId, currentDate = new Date()) => {
+
+    if (!item?.block) {
+        return item;
+    }
+    try {
+        const response = await fetch(`/api/loader/?portal=${portal}&block=${item.block}`, {
+            method: "POST",
+            body: JSON.stringify({
+                variables: {
+                    ...(item.attributes || {}),
+                    teasermanagerDate: currentDate,
+                },
+                context: {activeContent: {sys: {id: contextId}}},
+            }),
+        }).then(res => res.json());
+
+        return {
+            ...item,
+            attributes: {
+                ...(item.attributes || {}),
+                ...response,
+            },
+        }
+    } catch (e) {
+        console.error(e);
+    }
+
+    return item;
 }