@vonaffenfels/slate-editor 1.2.19 → 1.2.29

package/src/Serializer/Serializer.js

@@ -1,372 +1,375 @@
-import React, {
-    isValidElement,
-    Fragment, useMemo, useEffect,
-} from "react";
-import {Default} from "../Nodes/Default";
-import {Leaf} from "../Nodes/Leaf";
-import {StorybookDisplay} from "../Nodes/StorybookDisplay";
-import classNames from "classnames";
-import {addAdsToValue} from "./ads";
-import ErrorBoundary from "../Blocks/ErrorBoundary";
-
-function isEmptyNode(node) {
-    if (!node.type) {
-        if (!String(node.text).trim()) {
-            return true;
-        }
-    }
-
-    return false;
-}
-
-function getTextContent(node, text = "") {
-    if (!node) {
-        return text;
-    }
-
-    if (!node.children || !node.children.length) {
-        if (!node.text) {
-            return text;
-        } else {
-            text += node.text;
-        }
-    } else {
-        return node.children.map(v => getTextContent(v, text)).join("").trim();
-    }
-
-    return text;
-}
-
-function isValidNodeForPlacement(node) {
-    return true;
-    // this is disabled, elements should just clear, otherwise too many ads are missing because of short intro texts and such ...
-    /*
-    if (node && node.type === "paragraph") {
-        const text = getTextContent(node);
-
-        if (text.length < 200) {
-            return false;
-        }
-    }
-
-    return true;
-     */
-}
-
-export function Serializer({
-    value = [],
-    elementPropsMap,
-    specialClassMap,
-    transformAttributes,
-    storybookComponentLoader,
-    storybookComponentDataLoader,
-    defaultComponentReplacement,
-    modifyElementFunc,
-    filterContent = null,
-    isRenderer = false,
-    fixedPositions = {},
-    fixedPositionTypes = {},
-    adDefinitionDesktop = [],
-    adDefinitionMobile = [],
-}) {
-    const processedValue = useMemo(() => {
-        let val = addAdsToValue(value, adDefinitionDesktop, adDefinitionMobile);
-        val = addFixedPositionsToValue(val, fixedPositions, fixedPositionTypes);
-        return val;
-    }, [value, adDefinitionDesktop, adDefinitionMobile, fixedPositions, fixedPositionTypes]);
-
-    const getPropsForType = (type, isInSlot = false) => {
-        if (!elementPropsMap) {
-            return {};
-        }
-
-        if (isInSlot) {
-            if (elementPropsMap[type + "-in-slot"]) {
-                return elementPropsMap[type + "-in-slot"];
-            }
-        }
-
-        return elementPropsMap[type] || {};
-    };
-
-    const renderElement = (props, isInSlot = false) => {
-        const typeProps = getPropsForType(props.type, isInSlot);
-        const Wrapper = typeProps.wrapper || function ({children}) {
-            return <ErrorBoundary>{children}</ErrorBoundary>;
-        };
-
-        switch (props.type) {
-            case 'storybook': {
-                const storyProps = {
-                    element: {
-                        ...props,
-                        attributes: {
-                            ...(props.attributes || {}),
-                            isInSlot: isInSlot,
-                        },
-                    },
-                    attributes: props.attributes,
-                    storybookComponentLoader: storybookComponentLoader,
-                    storybookComponentDataLoader: storybookComponentDataLoader,
-                };
-
-                return <ErrorBoundary><Wrapper
-                    type={props.type}
-                    block={props.block}><StorybookDisplay {...storyProps} /></Wrapper></ErrorBoundary>;
-            }
-            case 'layout': {
-                let isGrid = true;
-
-                if (Array.isArray(props.children)) {
-                    props.children.forEach(child => {
-                        if (child.type === "layout-slot" && ["grid-auto", "grid-fill"].includes(child.attributes.name)) {
-                            isGrid = false;
-                        }
-                    });
-                }
-
-                return <ErrorBoundary>
-                    <Wrapper type={props.type}>
-                        <div
-                            data-cols={props.children.length}
-                            className={classNames("block-editor-layout", {
-                                "block-editor-layout-grid": isGrid,
-                                "block-editor-layout-flex": !isGrid,
-                                "block-editor-table-border-wrapper": props?.attributes?.tableBorder,
-                                "md:grid-cols-1": props.children.length === 1,
-                                "md:grid-cols-2": props.children.length === 2,
-                                "md:grid-cols-3": props.children.length === 3,
-                                "md:grid-cols-4": props.children.length === 4,
-                                "md:grid-cols-5": props.children.length === 5,
-                                "grid-cols-1": props?.attributes?.mobileColumnSpan === 1,
-                                "grid-cols-2": props?.attributes?.mobileColumnSpan === 2,
-                                "md:space-x-4": props.attributes?.spacing,
-                                "mt-16": props?.attributes?.margin?.top,
-                                "mr-16": props?.attributes?.margin?.right,
-                                "mb-16": props?.attributes?.margin?.bottom,
-                                "ml-16": props?.attributes?.margin?.left,
-                                "justify-center": props?.attributes?.justifyCenter,
-                                [typeProps.classNameSite + " site-width"]: !isInSlot && (props.attributes?.width === "site" || props.attributes?.width === "full"),
-                                [typeProps.classNameArticle + " article-width"]: !isInSlot && (props.attributes?.width === "article" || !props.attributes?.width),
-                            })}
-                        >
-                            {props.children.map((v, i) => <Fragment
-                                key={"layout-pos-" + i}>{serializeNode(v, i, isInSlot)}</Fragment>)}
-                        </div>
-                    </Wrapper>
-                </ErrorBoundary>;
-            }
-            case 'layout-slot':
-                return <ErrorBoundary>
-                    <Wrapper type={props.type}>
-                        <div
-                            className={classNames({
-                                ["block-editor-layout-" + props.attributes.name]: true,
-                                "mt-4": props.attributes?.margin?.top,
-                                "md:mr-4": props.attributes?.margin?.right,
-                                "mb-4": props.attributes?.margin?.bottom,
-                                "md:ml-4": props.attributes?.margin?.left,
-                            })}
-                        >
-                            <div
-                                style={{top: props.attributes?.sticky && "80px"}}
-                                className={classNames({"sticky": props.attributes?.sticky})}>
-                                {props.children.map((v, i) => <div
-                                    key={"layout-slot-" + i}
-                                >{serializeNode(v, i, props.attributes.name)}</div>)}
-                            </div>
-                        </div>
-                    </Wrapper>
-                </ErrorBoundary>;
-            default: {
-                const defaultProps = {
-                    specialClassMap: specialClassMap,
-                    elementPropsMap: elementPropsMap,
-                    element: {
-                        attributes: props.attributes || {},
-                        align: props.align,
-                        type: props.type,
-                    },
-                    attributes: props.htmlAttributes || {},
-                    children: props.children.map((v, i) => <Fragment
-                        key={props.type + "-pos-item-" + i}>{serializeNode(v, i, isInSlot)}</Fragment>),
-                };
-
-                return <ErrorBoundary>
-                    <Default
-                        {...defaultProps}
-                        isInSlot={isInSlot}
-                        isRenderer={isRenderer}
-                        transformAttributes={transformAttributes}
-                        defaultComponentReplacement={defaultComponentReplacement}
-                    />
-                </ErrorBoundary>;
-            }
-        }
-    };
-
-
-    function serializeNode(node, i, isInSlot = false) {
-        if (isValidElement(node)) {
-            return node;
-        }
-
-        if (typeof modifyElementFunc === "function") {
-            node = modifyElementFunc(node);
-        }
-
-        if (node.type === "paragraph" && !node.text) {
-            if (!node.children || node.children.length === 0) {
-                return null;
-            }
-
-            let children = node.children.filter((v) => !isEmptyNode(v));
-
-            if (children.length === 0) {
-                return null;
-            }
-        }
-
-        try {
-            let filterCtx = {content: value};
-            if (filterContent && !filterContent(node, filterCtx)) {
-                return null;
-            }
-        } catch (e) {
-            console.error(e);
-        }
-
-        if (!node.children || !node.children.length) {
-            return serializeLeaf(node);
-        }
-
-        // unwrap elements that are inside of a paragraph (that has no text content) so they have been inserted "inline" by mistake
-        // this helps preventing a lot of hydration errors!
-        if (node?.type === "paragraph") {
-            const textContent = node.children.find(v => !v?.type && v?.text);
-            if (!textContent) {
-                const storybookNodes = node.children.filter(v => v?.type === "storybook");
-                if (storybookNodes.length === 1) {
-                    // only unwrap if we only have exactly 1 node
-                    return renderElement(storybookNodes.at(0), isInSlot);
-                }
-            }
-        }
-
-        return renderElement(node, isInSlot);
-    }
-
-    function serializeLeaf(props) {
-        return <Leaf leaf={props} isRenderer={true} typeProps={getPropsForType("leaf")}>{props.text || ""}</Leaf>;
-    }
-
-    if (!value) {
-        return null;
-    }
-
-    return <>
-        {!!processedValue && processedValue.map((v, i) => {
-            return <Fragment key={v.block + "-pos-" + i}>{serializeNode(v, i)}</Fragment>;
-        })}
-    </>;
-}
-
-function getFixedPosition(fixedPositions, i) {
-    return fixedPositions?.[i] || null;
-}
-
-function isShortParagraph(node) {
-    if (node?.type === "paragraph") {
-        let textLength = node.children.map(v => v?.text?.length || 0).reduce((pv, cv) => pv + cv, 0) || 0;
-        return textLength <= 60;
-    }
-
-    return false;
-}
-
-function getFixedPositionPlacement(node, prevNode, fixedPosType) {
-    // inline has to be before
-    if (fixedPosType === "inline") {
-        return "before";
-    }
-
-    let placement = "before";
-
-    if (node?.type === "paragraph" && prevNode?.type === "heading" || isShortParagraph(prevNode)) {
-        placement = "after";
-    }
-
-    return placement;
-}
-
-function isNodeValidForCounter(node, counters = {}) {
-    let isValid = true;
-
-    if (node.type === "paragraph") {
-        let lengthCounterId = `paragraph_textlength`;
-
-        if (!counters[lengthCounterId]) {
-            counters[lengthCounterId] = 0;
-        }
-
-        let textLength = node.children.map(v => v?.text?.length || 0).reduce((pv, cv) => pv + cv, 0) || 0;
-        let isHeadline = textLength <= 60;
-
-        counters[lengthCounterId] += textLength;
-
-        isValid = !isHeadline && counters[lengthCounterId] >= 200;
-
-        if (isValid) {
-            counters[lengthCounterId] = 0;
-        }
-    }
-
-    return isValid;
-}
-
-function addFixedPositionsToValue(
-        value, fixedPositions, fixedPositionTypes, counters = {},
-) {
-    if (!Array.isArray(value)) {
-        return value;
-    }
-
-    let processedValue = [];
-
-    for (let i = 0; i < value.length; i++) {
-        let node = value[i];
-        let prevNode = value?.[i - 1];
-
-        if (!node.type) {
-            processedValue.push(node);
-            continue;
-        }
-        if (!counters[node.type]) {
-            counters[node.type] = 0;
-        }
-
-        let counterId = `${node.type}_${counters[node.type]}`;
-
-        // only count this node if its valid to be counted (dont count strong headlines and so on)
-        if (isNodeValidForCounter(node, counters)) {
-            counters[node.type]++;
-            let fixedPosType = fixedPositionTypes?.[counterId];
-            let fixedPos = getFixedPosition(fixedPositions, counterId);
-            let placement = getFixedPositionPlacement(node, prevNode, fixedPosType);
-
-            if (fixedPos && placement === "before") {
-                processedValue.push(fixedPos);
-            }
-
-            processedValue.push(node);
-
-            if (fixedPos && placement === "after") {
-                processedValue.push(fixedPos);
-            }
-        } else {
-            processedValue.push(node);
-        }
-    }
-
-    return processedValue;
+import React, {
+    isValidElement,
+    Fragment, useMemo,
+} from "react";
+import {Default} from "../Nodes/Default";
+import {Leaf} from "../Nodes/Leaf";
+import {StorybookDisplay} from "../Nodes/StorybookDisplay";
+import classNames from "classnames";
+import {addAdsToValue} from "./ads";
+import ErrorBoundary from "../Blocks/ErrorBoundary";
+
+function isEmptyNode(node) {
+    if (!node.type) {
+        if (!String(node.text).trim()) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+function getTextContent(node, text = "") {
+    if (!node) {
+        return text;
+    }
+
+    if (!node.children || !node.children.length) {
+        if (!node.text) {
+            return text;
+        } else {
+            text += node.text;
+        }
+    } else {
+        return node.children.map(v => getTextContent(v, text)).join("").trim();
+    }
+
+    return text;
+}
+
+function isValidNodeForPlacement(node) {
+    return true;
+    // this is disabled, elements should just clear, otherwise too many ads are missing because of short intro texts and such ...
+    /*
+    if (node && node.type === "paragraph") {
+        const text = getTextContent(node);
+
+        if (text.length < 200) {
+            return false;
+        }
+    }
+
+    return true;
+     */
+}
+
+export function Serializer({
+    value = [],
+    elementPropsMap,
+    specialClassMap,
+    transformAttributes,
+    storybookComponentLoader,
+    storybookComponentDataLoader,
+    defaultComponentReplacement,
+    modifyElementFunc,
+    filterContent = null,
+    isRenderer = false,
+    fixedPositions = {},
+    fixedPositionTypes = {},
+    adDefinitionDesktop = [],
+    adDefinitionMobile = [],
+}) {
+    const processedValue = useMemo(() => {
+        let val = addAdsToValue(value, adDefinitionDesktop, adDefinitionMobile);
+        val = addFixedPositionsToValue(val, fixedPositions, fixedPositionTypes);
+        return val;
+    }, [value, adDefinitionDesktop, adDefinitionMobile, fixedPositions, fixedPositionTypes]);
+
+    const filteredValue = useMemo(() => {
+        const context = {content: processedValue};
+        return processedValue.filter(v => {
+            try {
+                return filterContent ? filterContent(v, context) : true;
+            } catch (e) {
+                console.error("[Serializer] Error in filterContent prop function: ", e);
+                return true;
+            }
+        });
+    }, [processedValue, filterContent]);
+
+    const getPropsForType = (type, isInSlot = false) => {
+        if (!elementPropsMap) {
+            return {};
+        }
+
+        if (isInSlot) {
+            if (elementPropsMap[type + "-in-slot"]) {
+                return elementPropsMap[type + "-in-slot"];
+            }
+        }
+
+        return elementPropsMap[type] || {};
+    };
+
+    const renderElement = (props, isInSlot = false) => {
+        const typeProps = getPropsForType(props.type, isInSlot);
+        const Wrapper = typeProps.wrapper || function ({children}) {
+            return <ErrorBoundary>{children}</ErrorBoundary>;
+        };
+
+        switch (props.type) {
+            case 'storybook': {
+                const storyProps = {
+                    element: {
+                        ...props,
+                        attributes: {
+                            ...(props.attributes || {}),
+                            isInSlot: isInSlot,
+                        },
+                    },
+                    attributes: props.attributes,
+                    storybookComponentLoader: storybookComponentLoader,
+                    storybookComponentDataLoader: storybookComponentDataLoader,
+                };
+
+                return <ErrorBoundary><Wrapper
+                    type={props.type}
+                    block={props.block}><StorybookDisplay {...storyProps} /></Wrapper></ErrorBoundary>;
+            }
+            case 'layout': {
+                let isGrid = true;
+
+                if (Array.isArray(props.children)) {
+                    props.children.forEach(child => {
+                        if (child.type === "layout-slot" && ["grid-auto", "grid-fill"].includes(child.attributes.name)) {
+                            isGrid = false;
+                        }
+                    });
+                }
+
+                return <ErrorBoundary>
+                    <Wrapper type={props.type}>
+                        <div
+                            data-cols={props.children.length}
+                            className={classNames("block-editor-layout", {
+                                "block-editor-layout-grid": isGrid,
+                                "block-editor-layout-flex": !isGrid,
+                                "block-editor-table-border-wrapper": props?.attributes?.tableBorder,
+                                "md:grid-cols-1": props.children.length === 1,
+                                "md:grid-cols-2": props.children.length === 2,
+                                "md:grid-cols-3": props.children.length === 3,
+                                "md:grid-cols-4": props.children.length === 4,
+                                "md:grid-cols-5": props.children.length === 5,
+                                "grid-cols-1": props?.attributes?.mobileColumnSpan === 1,
+                                "grid-cols-2": props?.attributes?.mobileColumnSpan === 2,
+                                "md:space-x-4": props.attributes?.spacing,
+                                "mt-16": props?.attributes?.margin?.top,
+                                "mr-16": props?.attributes?.margin?.right,
+                                "mb-16": props?.attributes?.margin?.bottom,
+                                "ml-16": props?.attributes?.margin?.left,
+                                "justify-center": props?.attributes?.justifyCenter,
+                                [typeProps.classNameSite + " site-width"]: !isInSlot && (props.attributes?.width === "site" || props.attributes?.width === "full"),
+                                [typeProps.classNameArticle + " article-width"]: !isInSlot && (props.attributes?.width === "article" || !props.attributes?.width),
+                            })}
+                        >
+                            {props.children.map((v, i) => <Fragment
+                                key={"layout-pos-" + i}>{serializeNode(v, i, isInSlot)}</Fragment>)}
+                        </div>
+                    </Wrapper>
+                </ErrorBoundary>;
+            }
+            case 'layout-slot':
+                return <ErrorBoundary>
+                    <Wrapper type={props.type}>
+                        <div
+                            className={classNames({
+                                ["block-editor-layout-" + props.attributes.name]: true,
+                                "mt-4": props.attributes?.margin?.top,
+                                "md:mr-4": props.attributes?.margin?.right,
+                                "mb-4": props.attributes?.margin?.bottom,
+                                "md:ml-4": props.attributes?.margin?.left,
+                            })}
+                        >
+                            <div
+                                style={{top: props.attributes?.sticky && "80px"}}
+                                className={classNames({"sticky": props.attributes?.sticky})}>
+                                {props.children.map((v, i) => <div
+                                    key={"layout-slot-" + i}
+                                >{serializeNode(v, i, props.attributes.name)}</div>)}
+                            </div>
+                        </div>
+                    </Wrapper>
+                </ErrorBoundary>;
+            default: {
+                const defaultProps = {
+                    specialClassMap: specialClassMap,
+                    elementPropsMap: elementPropsMap,
+                    element: {
+                        attributes: props.attributes || {},
+                        align: props.align,
+                        type: props.type,
+                    },
+                    attributes: props.htmlAttributes || {},
+                    children: props.children.map((v, i) => <Fragment
+                        key={props.type + "-pos-item-" + i}>{serializeNode(v, i, isInSlot)}</Fragment>),
+                };
+
+                return <ErrorBoundary>
+                    <Default
+                        {...defaultProps}
+                        isInSlot={isInSlot}
+                        isRenderer={isRenderer}
+                        transformAttributes={transformAttributes}
+                        defaultComponentReplacement={defaultComponentReplacement}
+                    />
+                </ErrorBoundary>;
+            }
+        }
+    };
+
+
+    function serializeNode(node, i, isInSlot = false) {
+        if (isValidElement(node)) {
+            return node;
+        }
+
+        if (typeof modifyElementFunc === "function") {
+            node = modifyElementFunc(node);
+        }
+
+        if (node.type === "paragraph" && !node.text) {
+            if (!node.children || node.children.length === 0) {
+                return null;
+            }
+
+            let children = node.children.filter((v) => !isEmptyNode(v));
+
+            if (children.length === 0) {
+                return null;
+            }
+        }
+
+        if (!node.children || !node.children.length) {
+            return serializeLeaf(node);
+        }
+
+        // unwrap elements that are inside of a paragraph (that has no text content) so they have been inserted "inline" by mistake
+        // this helps preventing a lot of hydration errors!
+        if (node?.type === "paragraph") {
+            const textContent = node.children.find(v => !v?.type && v?.text);
+            if (!textContent) {
+                const storybookNodes = node.children.filter(v => v?.type === "storybook");
+                if (storybookNodes.length === 1) {
+                    // only unwrap if we only have exactly 1 node
+                    return renderElement(storybookNodes.at(0), isInSlot);
+                }
+            }
+        }
+
+        return renderElement(node, isInSlot);
+    }
+
+    function serializeLeaf(props) {
+        return <Leaf leaf={props} isRenderer={true} typeProps={getPropsForType("leaf")}>{props.text || ""}</Leaf>;
+    }
+
+    if (!value) {
+        return null;
+    }
+
+    return <>
+        {!!filteredValue && filteredValue.map((v, i) => {
+            return <Fragment key={v.block + "-pos-" + i}>{serializeNode(v, i)}</Fragment>;
+        })}
+    </>;
+}
+
+function getFixedPosition(fixedPositions, i) {
+    return fixedPositions?.[i] || null;
+}
+
+function isShortParagraph(node) {
+    if (node?.type === "paragraph") {
+        let textLength = node.children.map(v => v?.text?.length || 0).reduce((pv, cv) => pv + cv, 0) || 0;
+        return textLength <= 60;
+    }
+
+    return false;
+}
+
+function getFixedPositionPlacement(node, prevNode, fixedPosType) {
+    // inline has to be before
+    if (fixedPosType === "inline") {
+        return "before";
+    }
+
+    let placement = "before";
+
+    if (node?.type === "paragraph" && prevNode?.type === "heading" || isShortParagraph(prevNode)) {
+        placement = "after";
+    }
+
+    return placement;
+}
+
+function isNodeValidForCounter(node, counters = {}) {
+    let isValid = true;
+
+    if (node.type === "paragraph") {
+        let lengthCounterId = `paragraph_textlength`;
+
+        if (!counters[lengthCounterId]) {
+            counters[lengthCounterId] = 0;
+        }
+
+        let textLength = node.children.map(v => v?.text?.length || 0).reduce((pv, cv) => pv + cv, 0) || 0;
+        let isHeadline = textLength <= 60;
+
+        counters[lengthCounterId] += textLength;
+
+        isValid = !isHeadline && counters[lengthCounterId] >= 200;
+
+        if (isValid) {
+            counters[lengthCounterId] = 0;
+        }
+    }
+
+    return isValid;
+}
+
+function addFixedPositionsToValue(
+        value, fixedPositions, fixedPositionTypes, counters = {},
+) {
+    if (!Array.isArray(value)) {
+        return value;
+    }
+
+    let processedValue = [];
+
+    for (let i = 0; i < value.length; i++) {
+        let node = value[i];
+        let prevNode = value?.[i - 1];
+
+        if (!node.type) {
+            processedValue.push(node);
+            continue;
+        }
+        if (!counters[node.type]) {
+            counters[node.type] = 0;
+        }
+
+        let counterId = `${node.type}_${counters[node.type]}`;
+
+        // only count this node if its valid to be counted (dont count strong headlines and so on)
+        if (isNodeValidForCounter(node, counters)) {
+            counters[node.type]++;
+            let fixedPosType = fixedPositionTypes?.[counterId];
+            let fixedPos = getFixedPosition(fixedPositions, counterId);
+            let placement = getFixedPositionPlacement(node, prevNode, fixedPosType);
+
+            if (fixedPos && placement === "before") {
+                processedValue.push(fixedPos);
+            }
+
+            processedValue.push(node);
+
+            if (fixedPos && placement === "after") {
+                processedValue.push(fixedPos);
+            }
+        } else {
+            processedValue.push(node);
+        }
+    }
+
+    return processedValue;
 }