@vonaffenfels/slate-editor 1.0.78 → 1.0.81

package/package.json

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

package/src/BlockEditor.js

@@ -31,6 +31,7 @@ export default function BlockEditor({
     storybookStories,
     onSaveClick,
     isLoading,
+    activeConfig,
 }) {
     const scrollContainer = useRef(null);
     const [selectedStorybookElement, setSelectedStorybookElement] = useState(null);
@@ -319,6 +320,8 @@ export default function BlockEditor({
         setSelectedStorybookElement(null);
     };
 
+    const slug = contentfulSdk?.entry?.fields?.slug?.getValue();
+
     return (
         <div className={classNames({"block-editor-wrapper h-full": true})}>
             <Resizable
@@ -336,7 +339,12 @@ export default function BlockEditor({
                                 isLoadingStories={isLoadingStories}
                                 editor={editor}
                                 sdk={contentfulSdk}
-                                lastSelection={lastSelection}/>
+                                lastSelection={lastSelection}
+                                buttons={activeConfig?.domain && slug && (
+                                    <a href={`${activeConfig.domain}/${slug}`} target="_blank" rel="noreferrer">
+                                        <button className='button button--secondary'>Live-Seite öffnen</button>
+                                    </a>
+                                )}/>
                         </div>
                         <div className="relative h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
                             {isLoading && (

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/Toolbar/Toolbar.js

@@ -39,6 +39,7 @@ export const Toolbar = ({
     editor,
     sdk,
     lastSelection,
+    buttons,
 }) => {
     const ref = useRef();
 
@@ -166,6 +167,9 @@ export const Toolbar = ({
                 {!!onSaveClick && <button
                     className="!w-auto !border-0 !bg-green-600 !text-xs font-bold text-white hover:!bg-green-700"
                     onClick={onSaveClick}>Änderungen speichern</button>}
+                {buttons && (
+                    <div>{buttons}</div>
+                )}
             </div>
         </Menu>;
     }