@vonaffenfels/slate-editor 1.1.64 → 1.1.66

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.64",
+    "version": "1.1.66",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "b36d33c384a5e3a5a40770030f147df9b599c5a1",
+    "gitHead": "5941c51cc7d9f86dda5c8e76e3608098294a8740",
     "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,
@@ -33,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, useMemo,
+    Fragment, useMemo, useEffect,
 } from "react";
 import {Default} from "../Nodes/Default";
 import {Leaf} from "../Nodes/Leaf";
@@ -69,39 +69,11 @@ export function Serializer({
     adDefinitionDesktop = [],
     adDefinitionMobile = [],
 }) {
-
-    // memo the value only update if deps change
-    const filteredValue = useMemo(() => {
-        if (value) {
-            let filterCtx = {content: value};
-            return 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;
-                    }
-                }
-
-                if (!filterContent) {
-                    return true;
-                }
-
-                return filterContent(node, filterCtx);
-            });
-        }
-
-        return [];
-    }, [value, filterContent])
-
+    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) {
@@ -243,6 +215,27 @@ export function Serializer({
             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);
         }
@@ -267,22 +260,15 @@ export function Serializer({
         return <Leaf leaf={props} isRenderer={true} typeProps={getPropsForType("leaf")}>{props.text || ""}</Leaf>;
     }
 
-    function renderValue(value) {
-        if (!value) {
-            return null;
-        }
-
-        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(filteredValue);
+    return <>
+        {!!processedValue && processedValue.map((v, i) => {
+            return <Fragment key={v.block + "-pos-" + i}>{serializeNode(v, i)}</Fragment>;
+        })}
+    </>;
 }
 
 function getFixedPosition(fixedPositions, i) {