@vonaffenfels/slate-editor 1.1.60 → 1.1.65

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.60",
+    "version": "1.1.65",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "bf2b6e33737a0ebe24e02368b7b218a218b39a51",
+    "gitHead": "f14cc08783e4c357ee4c0887fa2965b3d020eda4",
     "publishConfig": {
         "access": "public"
     }

package/src/Renderer.js

@@ -2,7 +2,7 @@ import React, {memo} from 'react';
 import {StorybookContext} from "./Context/StorybookContext";
 import {Serializer} from "./Serializer";
 
-function Renderer({
+const Renderer = memo(function RendererInner({
     value,
     modifyElementFunc,
     specialClassMap,
@@ -10,6 +10,7 @@ function Renderer({
     transformAttributes,
     storybookComponentLoader,
     storybookComponentDataLoader,
+    filterContent,
     fixedPositions,
     fixedPositionTypes,
     adDefinitionDesktop,
@@ -23,6 +24,7 @@ function Renderer({
         defaultComponentReplacement={defaultComponentReplacement}
         transformAttributes={transformAttributes}
         value={value}
+        filterContent={filterContent}
         modifyElementFunc={modifyElementFunc}
         storybookComponentLoader={storybookComponentLoader}
         storybookComponentDataLoader={storybookComponentDataLoader}
@@ -31,8 +33,39 @@ function Renderer({
         adDefinitionDesktop={adDefinitionDesktop}
         adDefinitionMobile={adDefinitionMobile}
         isRenderer={true}
-        onStorybookElementClick={onStorybookElementClick}/>;
-}
+        onStorybookElementClick={onStorybookElementClick}/>
+}, (prevProps, nextProps) => {
+    let allKeys = Array.from(new Set([...Object.keys(nextProps), ...Object.keys(prevProps)]));
+
+    for (let i = 0; i < allKeys.length; i++) {
+        const key = allKeys[i];
+        const oldValue = prevProps[key];
+        const newValue = nextProps[key];
+
+        if (oldValue === newValue) {
+            continue;
+        }
+
+        if (!oldValue && !newValue) {
+            console.warn(`Renderer :: ${key} :: Both empty but type changed?`, {oldValue, newValue});
+            continue;
+        }
+
+        if (typeof oldValue === "object" && typeof newValue === "object" && oldValue && newValue) {
+            try {
+                if (JSON.stringify(oldValue) === JSON.stringify(newValue)) {
+                    continue;
+                }
+            } catch (e) {
+                return false;
+            }
+        }
+
+        return false;
+    }
+
+    return true;
+})
 
 const RendererMemo = memo(Renderer);
 

package/src/Serializer/Serializer.js

@@ -1,6 +1,6 @@
 import React, {
     isValidElement,
-    Fragment,
+    Fragment, useMemo, useEffect,
 } from "react";
 import {Default} from "../Nodes/Default";
 import {Leaf} from "../Nodes/Leaf";
@@ -62,33 +62,19 @@ export function Serializer({
     storybookComponentDataLoader,
     defaultComponentReplacement,
     modifyElementFunc,
+    filterContent = null,
     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 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) {
@@ -230,6 +216,27 @@ export function Serializer({
             node = modifyElementFunc(node);
         }
 
+        if (node.type === "paragraph") {
+            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);
         }
@@ -254,18 +261,15 @@ export function Serializer({
         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>;
-            })}
-        </>;
+    if (!value) {
+        return null;
     }
 
-    return renderValue(value);
+    return <>
+        {!!processedValue && processedValue.map((v, i) => {
+            return <Fragment key={v.block + "-pos-" + i}>{serializeNode(v, i)}</Fragment>;
+        })}
+    </>;
 }
 
 function getFixedPosition(fixedPositions, i) {