@vonaffenfels/slate-editor 1.2.39 → 1.2.41

package/src/Serializer/Text.js

@@ -1,18 +1,18 @@
-import escapeHtml from 'escape-html';
-import {Text} from 'slate';
-
-export const TextSerializer = (slateValue) => {
-    if (!Array.isArray(slateValue)) {
-        return "";
-    }
-
-    return slateValue.map(serializeNode).join('');
-};
-
-export const serializeNode = (node) => {
-    if (Text.isText(node)) {
-        return escapeHtml(node.text);
-    }
-
-    return node.children.map(n => serializeNode(n)).join(' ');
+import escapeHtml from 'escape-html';
+import {Text} from 'slate';
+
+export const TextSerializer = (slateValue) => {
+    if (!Array.isArray(slateValue)) {
+        return "";
+    }
+
+    return slateValue.map(serializeNode).join('');
+};
+
+export const serializeNode = (node) => {
+    if (Text.isText(node)) {
+        return escapeHtml(node.text);
+    }
+
+    return node.children.map(n => serializeNode(n)).join(' ');
 };

package/src/Serializer/ads.js

@@ -1,188 +1,188 @@
-export const addAdsToValue = (value, adDefinitionDesktop = [], adDefinitionMobile = []) => {
-    let extendedValue = [];
-    let counters = {
-        fullTextCounter: 0,
-        currTextCounterDesktop: 0,
-        currTextCounterMobile: 0,
-        currTextLength: 0,
-        currElementsChain: [],
-    };
-
-    let remainingDesktop = [...adDefinitionDesktop];
-    let remainingMobile = [...adDefinitionMobile];
-
-    for (let i = 0; i < value.length; i++) {
-        const element = value[i];
-        const nextElement = value[i + 1] || null;
-        const textLength = getElementTextLength(element);
-        const isPlaceable = isAdPlaceable(element, counters);
-
-        let placementDesktop = "after";
-        let placementMobile = "after";
-        let placedAdDesktop = null;
-        let placedAdMobile = null;
-
-        counters.fullTextCounter += textLength;
-        counters.currTextCounterDesktop += textLength;
-        counters.currTextCounterMobile += textLength;
-        counters.currTextLength = textLength;
-
-        if (isPlaceable) {
-            const currAd = remainingDesktop.shift();
-            const currAdMobile = remainingMobile.shift();
-
-            counters.currElementsChain.push(element);
-
-            if (checkAdPlacement(
-                currAd, counters, counters.currTextCounterDesktop, element, nextElement,
-            )) {
-                placedAdDesktop = currAd;
-                if (currAd.reset !== false) {
-                    counters.currTextCounterDesktop = 0;
-                }
-            }
-
-            if (checkAdPlacement(
-                currAdMobile, counters, counters.currTextCounterMobile, element, nextElement,
-            )) {
-                placedAdMobile = currAdMobile;
-                if (currAdMobile.reset !== false) {
-                    counters.currTextCounterMobile = 0;
-                }
-            }
-
-            if (placedAdDesktop?.placement) {
-                placementDesktop = placedAdDesktop?.placement;
-            } else if (placedAdDesktop?.inline) {
-                placementDesktop = "before";
-            }
-
-            if (placedAdMobile?.placement) {
-                placementMobile = placedAdMobile?.placement;
-            } else if (placedAdMobile?.inline) {
-                placementMobile = "before";
-            }
-
-            if (placedAdDesktop && placementDesktop === "before") {
-                extendedValue.push(placedAdDesktop.component);
-            }
-            if (placedAdMobile && placementMobile === "before") {
-                extendedValue.push(placedAdMobile.component);
-            }
-            extendedValue = extendedValue.concat(counters.currElementsChain);
-            if (placedAdDesktop && placementDesktop === "after") {
-                extendedValue.push(placedAdDesktop.component);
-            }
-            if (placedAdMobile && placementMobile === "after") {
-                extendedValue.push(placedAdMobile.component);
-            }
-
-            counters.currElementsChain = [];
-
-            // add the elements back, did not get placed!
-            if (!placedAdDesktop && currAd) {
-                remainingDesktop.unshift(currAd);
-            }
-            if (!placedAdMobile && currAdMobile) {
-                remainingMobile.unshift(currAdMobile);
-            }
-        } else {
-            counters.currElementsChain.push(element);
-        }
-    }
-
-    if (counters.currElementsChain.length) {
-        extendedValue = extendedValue.concat(counters.currElementsChain);
-    }
-
-    return extendedValue;
-};
-
-/**
- * checks if ad is placeable, ads can NOT be placed
- * 1. after headlines
- * 2. after galleries (should be before)
- *
- * @param element
- * @param counters
- */
-const isAdPlaceable = (element, counters) => {
-    const type = element?.type;
-    const chain = counters?.currElementsChain || [];
-
-    if (type === "paragraph") {
-        return true;
-    } else if (type === "storybook") {
-        return true;
-    }
-
-    // start of a new chain!
-    return false;
-};
-
-const checkAdPlacement = (
-    ad, counters, currTextCounter = 0, element = null, nextElement = null,
-) => {
-    let canBePlaced = false;
-
-    if (!ad) {
-        return canBePlaced;
-    }
-
-    // can instantly be placed
-    if (!ad.space) {
-        canBePlaced = true;
-    } else if (currTextCounter > ad.space) {
-        canBePlaced = true;
-    }
-
-    const disallowedAdjacents = ad?.disallowedAdjacents || [
-        "Inline/ProductTeaser",
-        "Inline/AboTeaser",
-    ];
-
-    // dont allow ads before+after disallowedAdjacents elements
-    if (element?.type === "storybook" && disallowedAdjacents.includes(element?.block)) {
-        canBePlaced = false;
-    } else if (nextElement?.type === "storybook" && disallowedAdjacents.includes(nextElement?.block)) {
-        canBePlaced = false;
-    }
-
-    // dont allow inline anywhere BUT paragraphs
-    if (ad?.inline && element?.type !== "paragraph") {
-        canBePlaced = false;
-    }
-
-    return canBePlaced;
-};
-
-const getElementTextLength = (el) => {
-    let textLength = 0;
-
-    // children
-    if (el.children) {
-        for (let i = 0; i < el.children.length; i++) {
-            const child = el.children[i];
-            textLength += getElementTextLength(child);
-        }
-    }
-
-    // generic text
-    if (el.text) {
-        textLength += parseInt(el?.text?.length || 0);
-    }
-
-    // elements
-    if (el.type === "storybook") {
-        switch (el?.block) {
-            case "Media/Image":
-            case "Media/Gallery":
-                textLength += 100;
-                break;
-            default:
-                break;
-        }
-    }
-
-    return textLength;
+export const addAdsToValue = (value, adDefinitionDesktop = [], adDefinitionMobile = []) => {
+    let extendedValue = [];
+    let counters = {
+        fullTextCounter: 0,
+        currTextCounterDesktop: 0,
+        currTextCounterMobile: 0,
+        currTextLength: 0,
+        currElementsChain: [],
+    };
+
+    let remainingDesktop = [...adDefinitionDesktop];
+    let remainingMobile = [...adDefinitionMobile];
+
+    for (let i = 0; i < value.length; i++) {
+        const element = value[i];
+        const nextElement = value[i + 1] || null;
+        const textLength = getElementTextLength(element);
+        const isPlaceable = isAdPlaceable(element, counters);
+
+        let placementDesktop = "after";
+        let placementMobile = "after";
+        let placedAdDesktop = null;
+        let placedAdMobile = null;
+
+        counters.fullTextCounter += textLength;
+        counters.currTextCounterDesktop += textLength;
+        counters.currTextCounterMobile += textLength;
+        counters.currTextLength = textLength;
+
+        if (isPlaceable) {
+            const currAd = remainingDesktop.shift();
+            const currAdMobile = remainingMobile.shift();
+
+            counters.currElementsChain.push(element);
+
+            if (checkAdPlacement(
+                currAd, counters, counters.currTextCounterDesktop, element, nextElement,
+            )) {
+                placedAdDesktop = currAd;
+                if (currAd.reset !== false) {
+                    counters.currTextCounterDesktop = 0;
+                }
+            }
+
+            if (checkAdPlacement(
+                currAdMobile, counters, counters.currTextCounterMobile, element, nextElement,
+            )) {
+                placedAdMobile = currAdMobile;
+                if (currAdMobile.reset !== false) {
+                    counters.currTextCounterMobile = 0;
+                }
+            }
+
+            if (placedAdDesktop?.placement) {
+                placementDesktop = placedAdDesktop?.placement;
+            } else if (placedAdDesktop?.inline) {
+                placementDesktop = "before";
+            }
+
+            if (placedAdMobile?.placement) {
+                placementMobile = placedAdMobile?.placement;
+            } else if (placedAdMobile?.inline) {
+                placementMobile = "before";
+            }
+
+            if (placedAdDesktop && placementDesktop === "before") {
+                extendedValue.push(placedAdDesktop.component);
+            }
+            if (placedAdMobile && placementMobile === "before") {
+                extendedValue.push(placedAdMobile.component);
+            }
+            extendedValue = extendedValue.concat(counters.currElementsChain);
+            if (placedAdDesktop && placementDesktop === "after") {
+                extendedValue.push(placedAdDesktop.component);
+            }
+            if (placedAdMobile && placementMobile === "after") {
+                extendedValue.push(placedAdMobile.component);
+            }
+
+            counters.currElementsChain = [];
+
+            // add the elements back, did not get placed!
+            if (!placedAdDesktop && currAd) {
+                remainingDesktop.unshift(currAd);
+            }
+            if (!placedAdMobile && currAdMobile) {
+                remainingMobile.unshift(currAdMobile);
+            }
+        } else {
+            counters.currElementsChain.push(element);
+        }
+    }
+
+    if (counters.currElementsChain.length) {
+        extendedValue = extendedValue.concat(counters.currElementsChain);
+    }
+
+    return extendedValue;
+};
+
+/**
+ * checks if ad is placeable, ads can NOT be placed
+ * 1. after headlines
+ * 2. after galleries (should be before)
+ *
+ * @param element
+ * @param counters
+ */
+const isAdPlaceable = (element, counters) => {
+    const type = element?.type;
+    const chain = counters?.currElementsChain || [];
+
+    if (type === "paragraph") {
+        return true;
+    } else if (type === "storybook") {
+        return true;
+    }
+
+    // start of a new chain!
+    return false;
+};
+
+const checkAdPlacement = (
+    ad, counters, currTextCounter = 0, element = null, nextElement = null,
+) => {
+    let canBePlaced = false;
+
+    if (!ad) {
+        return canBePlaced;
+    }
+
+    // can instantly be placed
+    if (!ad.space) {
+        canBePlaced = true;
+    } else if (currTextCounter > ad.space) {
+        canBePlaced = true;
+    }
+
+    const disallowedAdjacents = ad?.disallowedAdjacents || [
+        "Inline/ProductTeaser",
+        "Inline/AboTeaser",
+    ];
+
+    // dont allow ads before+after disallowedAdjacents elements
+    if (element?.type === "storybook" && disallowedAdjacents.includes(element?.block)) {
+        canBePlaced = false;
+    } else if (nextElement?.type === "storybook" && disallowedAdjacents.includes(nextElement?.block)) {
+        canBePlaced = false;
+    }
+
+    // dont allow inline anywhere BUT paragraphs
+    if (ad?.inline && element?.type !== "paragraph") {
+        canBePlaced = false;
+    }
+
+    return canBePlaced;
+};
+
+const getElementTextLength = (el) => {
+    let textLength = 0;
+
+    // children
+    if (el.children) {
+        for (let i = 0; i < el.children.length; i++) {
+            const child = el.children[i];
+            textLength += getElementTextLength(child);
+        }
+    }
+
+    // generic text
+    if (el.text) {
+        textLength += parseInt(el?.text?.length || 0);
+    }
+
+    // elements
+    if (el.type === "storybook") {
+        switch (el?.block) {
+            case "Media/Image":
+            case "Media/Gallery":
+                textLength += 100;
+                break;
+            default:
+                break;
+        }
+    }
+
+    return textLength;
 };

package/src/Serializer/index.js

@@ -1,4 +1,4 @@
-import {Serializer} from "./Serializer";
-import {HtmlSerializer} from "./Html";
-
+import {Serializer} from "./Serializer";
+import {HtmlSerializer} from "./Html";
+
 export {Serializer, HtmlSerializer};

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>
+        </>
+    );
 };