@vonaffenfels/slate-editor 1.0.77 → 1.0.80

package/package.json

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

package/scss/sidebarEditor.scss

@@ -30,6 +30,7 @@
     input[type="number"],
     input[type="color"],
     input[type="datetime-local"],
+    input[type="search"],
     select,
     textarea {
         display: block;

package/scss/toolbar.scss

@@ -9,6 +9,25 @@
     position: absolute;
     z-index: 500;
 
+    input[type="text"],
+    input[type="number"],
+    input[type="color"],
+    input[type="datetime-local"],
+    input[type="search"],
+    select,
+    textarea {
+        display: block;
+        font-size: 0.875rem !important;
+        color: rgb(90, 101, 124) !important;
+        background-color: white !important;
+        border: 1px solid #cfd9e0 !important;
+        border-radius: 6px !important;
+        box-shadow: none !important;
+        filter: none !important;
+        width: 100% !important;
+        padding: 8px 0.75rem !important;
+    }
+
     &.toolbar-static {
         display: block;
         position: fixed;

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);
     }
 

package/src/SidebarEditor.js

@@ -157,14 +157,6 @@ const SidebarEditor = ({
         setVersions([]);
     };
 
-    const handleBlockSelectChange = (block) => {
-        if (onChange) {
-            setLastChangedProperty(null);
-            addVersion(storybookElement);
-            onChange(block);
-        }
-    };
-
     const handleVariantSelectChange = (variant) => {
         if (onChange) {
             setLastChangedProperty(null);
@@ -228,6 +220,13 @@ const SidebarEditor = ({
 
         return (
             <>
+                <input
+                    type="text"
+                    placeholder="🔍 Feld suchen..."
+                    onChange={e => setPropertySearch(e.target.value)}
+                    value={propertySearch}
+                    className="mb-2"
+                />
                 {Object.keys(fields.fields).map(key => {
                     const field = fields.fields[key];
 
@@ -356,13 +355,6 @@ const SidebarEditor = ({
                                     <hr className="my-4" style={{borderColor: "#cfd9e0"}}/>
                                 </div>
                             )}
-                            <input
-                                type="text"
-                                placeholder="🔍 Eigenschaft suchen..."
-                                onChange={e => setPropertySearch(e.target.value)}
-                                value={propertySearch}
-                                className="mb-2"
-                            />
                             {renderFields()}
                         </div>
                     </>
@@ -450,6 +442,7 @@ const VariantSelect = ({
                 onChange={e => onChange && onChange({
                     block: story.id,
                     attributes: {...stories.find(s => s.title === e.target.value)?.args || {}},
+                    type: "storybook",
                 })}>
                 <option>Preset wählen</option>
                 {stories.map(s => (