@vonaffenfels/slate-editor 1.0.78 → 1.0.80

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.78",
+    "version": "1.0.80",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "d9a15e949b3c97d57e927366ab4063e3f83618ef",
+    "gitHead": "4fb98b27f14958fc2d5c99f8d95c5010da0c266e",
     "publishConfig": {
         "access": "public"
     }

package/src/Serializer/Serializer.js

@@ -161,7 +161,8 @@ export function Serializer({
                             [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>)}
+                        {props.children.map((v, i) => <Fragment
+                            key={"layout-pos-" + i}>{serializeNode(v, i, isInSlot)}</Fragment>)}
                     </div>
                 </Wrapper>;
             }
@@ -176,7 +177,8 @@ export function Serializer({
                             "md:ml-4": props.attributes?.margin?.left,
                         })}
                     >
-                        {props.children.map((v, i) => <Fragment key={"layout-slot-" + i}>{serializeNode(v, i, props.attributes.name)}</Fragment>)}
+                        {props.children.map((v, i) => <Fragment
+                            key={"layout-slot-" + i}>{serializeNode(v, i, props.attributes.name)}</Fragment>)}
                     </div>
                 </Wrapper>;
             default: {
@@ -189,7 +191,8 @@ export function Serializer({
                         type: props.type,
                     },
                     attributes: props.htmlAttributes || {},
-                    children: props.children.map((v, i) => <Fragment key={props.type + "-pos-item-" + i}>{serializeNode(v, i, isInSlot)}</Fragment>),
+                    children: props.children.map((v, i) => <Fragment
+                        key={props.type + "-pos-item-" + i}>{serializeNode(v, i, isInSlot)}</Fragment>),
                 };
 
                 return <Default
@@ -217,6 +220,19 @@ export function Serializer({
             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);
     }