@vonaffenfels/slate-editor 1.0.1

package/src/Renderer.js

@@ -0,0 +1,41 @@
+import React, {memo} from 'react';
+import {StorybookContext} from "./Context/StorybookContext";
+import {Serializer} from "./Serializer";
+
+function Renderer({
+    value,
+    modifyElementFunc,
+    specialClassMap,
+    elementPropsMap,
+    transformAttributes,
+    storybookComponentLoader,
+    storybookComponentDataLoader,
+    fixedPositions,
+    fixedPositionTypes,
+    adDefinitionDesktop,
+    adDefinitionMobile,
+    defaultComponentReplacement,
+    onStorybookElementClick,
+}) {
+    return <Serializer
+        elementPropsMap={elementPropsMap}
+        specialClassMap={specialClassMap}
+        defaultComponentReplacement={defaultComponentReplacement}
+        transformAttributes={transformAttributes}
+        value={value}
+        modifyElementFunc={modifyElementFunc}
+        storybookComponentLoader={storybookComponentLoader}
+        storybookComponentDataLoader={storybookComponentDataLoader}
+        fixedPositions={fixedPositions}
+        fixedPositionTypes={fixedPositionTypes}
+        adDefinitionDesktop={adDefinitionDesktop}
+        adDefinitionMobile={adDefinitionMobile}
+        isRenderer={true}
+        onStorybookElementClick={onStorybookElementClick}/>;
+}
+
+const RendererMemo = memo(Renderer);
+
+export default RendererMemo;
+
+export {StorybookContext};

package/src/Serializer/Html.js

@@ -0,0 +1,43 @@
+import escapeHtml from 'escape-html';
+import {Text} from 'slate';
+
+export const HtmlSerializer = (slateValue) => {
+    if (!Array.isArray(slateValue)) {
+        return "";
+    }
+
+    const html = slateValue.map(serializeNode).join('');
+
+    return html;
+};
+
+export const serializeNode = (node) => {
+    if (Text.isText(node)) {
+        return escapeHtml(node.text);
+    }
+
+    const children = (node.children || []).map(n => serializeNode(n)).join('');
+
+    switch (node.type) {
+        case 'blockquote':
+            return `<blockquote>${children}</blockquote>`;
+        case 'heading':
+            return `<h3>${children}</h3>`;
+        case 'paragraph':
+            return `<p>${children}</p>`;
+        case 'unordered-list':
+            return `<ul>${children}</ul>`;
+        case 'ordered-list':
+            return `<ol>${children}</ol>`;
+        case 'arrow-list':
+            return `<ul>${children}</ul>`;
+        case 'list-item':
+            return `<li>${children}</li>`;
+        case 'link':
+            return `<a href="${escapeHtml(node?.attributes?.href)}" target="${node?.attributes?.target || ''}">${children}</a>`;
+        case 'storybook':
+            return ``;
+        default:
+            return children;
+    }
+};

package/src/Serializer/Serializer.js

@@ -0,0 +1,318 @@
+import React, {
+    isValidElement,
+    Fragment,
+} 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";
+
+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,
+    isRenderer = false,
+    fixedPositions = {},
+    fixedPositionTypes = {},
+    adDefinitionDesktop = [],
+    adDefinitionMobile = [],
+}) {
+    if (value) {
+        value = value.filter((node) => {
+            if (!node) {
+                return false;
+            }
+
+            if (node.type === "paragraph") {
+                if (!node.children || node.children.length === 0) {
+                    return false;
+                }
+
+                let children = node.children.filter((v) => !isEmptyNode(v));
+
+                if (children.length === 0) {
+                    return false;
+                }
+            }
+
+            return true;
+        });
+    }
+
+    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 <>{children}</>;
+        };
+
+        switch (props.type) {
+            case 'storybook': {
+                const storyProps = {
+                    element: {
+                        ...props,
+                        attributes: {
+                            ...(props.attributes || {}),
+                            isInSlot: isInSlot,
+                        },
+                    },
+                    attributes: props.attributes,
+                    storybookComponentLoader: storybookComponentLoader,
+                    storybookComponentDataLoader: storybookComponentDataLoader,
+                };
+
+                return <Wrapper><StorybookDisplay {...storyProps} /></Wrapper>;
+            }
+            case 'layout':
+                return <Wrapper>
+                    <div
+                        data-cols={props.children.length}
+                        className={classNames({
+                            "block-editor-layout": true,
+                            "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,
+                            [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>;
+            case 'layout-slot':
+                return <Wrapper>
+                    <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,
+                        })}
+                    >
+                        {props.children.map((v, i) => <Fragment key={"layout-slot-" + i}>{serializeNode(v, i, props.attributes.name)}</Fragment>)}
+                    </div>
+                </Wrapper>;
+            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 <Default
+                    {...defaultProps}
+                    isInSlot={isInSlot}
+                    isRenderer={isRenderer}
+                    transformAttributes={transformAttributes}
+                    defaultComponentReplacement={defaultComponentReplacement}
+                />;
+            }
+        }
+    };
+
+
+    function serializeNode(node, i, isInSlot = false) {
+        if (isValidElement(node)) {
+            return node;
+        }
+
+        if (typeof modifyElementFunc === "function") {
+            node = modifyElementFunc(node);
+        }
+
+        if (!node.children || !node.children.length) {
+            return serializeLeaf(node);
+        }
+
+        return renderElement(node, isInSlot);
+    }
+
+    function serializeLeaf(props) {
+        return <Leaf leaf={props} isRenderer={true} typeProps={getPropsForType("leaf")}>{props.text || ""}</Leaf>;
+    }
+
+    function renderValue(value) {
+        let processedValue = addAdsToValue(value, adDefinitionDesktop, adDefinitionMobile);
+        processedValue = addFixedPositionsToValue(processedValue, fixedPositions, fixedPositionTypes);
+
+        return <>
+            {!!processedValue && processedValue.map((v, i) => {
+                return <Fragment key={v.block + "-pos-" + i}>{serializeNode(v, i)}</Fragment>;
+            })}
+        </>;
+    }
+
+    return renderValue(value);
+}
+
+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;
+}

package/src/Serializer/Text.js

@@ -0,0 +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(' ');
+};

package/src/Serializer/ads.js

@@ -0,0 +1,175 @@
+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 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,
+            )) {
+                placedAdDesktop = currAd;
+                if (currAd.reset !== false) {
+                    counters.currTextCounterDesktop = 0;
+                }
+            }
+
+            if (checkAdPlacement(
+                currAdMobile, counters, counters.currTextCounterMobile, element,
+            )) {
+                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,
+) => {
+    let canBePlaced = false;
+
+    if (!ad) {
+        return canBePlaced;
+    }
+
+    // can instantly be placed
+    if (!ad.space) {
+        canBePlaced = true;
+    } else if (currTextCounter > ad.space) {
+        canBePlaced = true;
+    }
+
+    // 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

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