@vonaffenfels/slate-editor 1.1.60 → 1.1.64

package/package.json

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

package/src/Renderer.js

@@ -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}

package/src/Serializer/Serializer.js

@@ -1,6 +1,6 @@
 import React, {
     isValidElement,
-    Fragment,
+    Fragment, useMemo,
 } from "react";
 import {Default} from "../Nodes/Default";
 import {Leaf} from "../Nodes/Leaf";
@@ -62,33 +62,46 @@ 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) {
+    // 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;
                 }
 
-                let children = node.children.filter((v) => !isEmptyNode(v));
+                if (node.type === "paragraph") {
+                    if (!node.children || node.children.length === 0) {
+                        return false;
+                    }
 
-                if (children.length === 0) {
-                    return false;
+                    let children = node.children.filter((v) => !isEmptyNode(v));
+
+                    if (children.length === 0) {
+                        return false;
+                    }
                 }
-            }
 
-            return true;
-        });
-    }
+                if (!filterContent) {
+                    return true;
+                }
+
+                return filterContent(node, filterCtx);
+            });
+        }
+
+        return [];
+    }, [value, filterContent])
+
 
     const getPropsForType = (type, isInSlot = false) => {
         if (!elementPropsMap) {
@@ -255,6 +268,10 @@ export function Serializer({
     }
 
     function renderValue(value) {
+        if (!value) {
+            return null;
+        }
+
         let processedValue = addAdsToValue(value, adDefinitionDesktop, adDefinitionMobile);
         processedValue = addFixedPositionsToValue(processedValue, fixedPositions, fixedPositionTypes);
 
@@ -265,7 +282,7 @@ export function Serializer({
         </>;
     }
 
-    return renderValue(value);
+    return renderValue(filteredValue);
 }
 
 function getFixedPosition(fixedPositions, i) {