@vonaffenfels/slate-editor 1.0.80 → 1.1.0

package/package.json

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

package/scss/storybook.scss

@@ -1,5 +1,12 @@
+.storybook-element-wrapper {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .storybook-element {
-  display: inline;
+  display: inline-block;
+  width: 100%;
 
   .storybook-element-component-overlay {
     display: none;
@@ -8,6 +15,7 @@
     position: absolute;
     z-index: 20;
     background-color: rgba(255, 255, 255, 0.7);
+    backdrop-filter: blur(4px);
     color: black;
     font-size: 1em;
     align-items: center;

package/src/BlockEditor.js

@@ -20,6 +20,7 @@ import SidebarEditor from './SidebarEditor';
 import {Spinner} from '@contentful/forma-36-react-components';
 import {ObjectId} from "./ObjectId";
 import {Resizable} from "./SidebarEditor/Resizable";
+import {Loader} from "./Loader";
 
 export default function BlockEditor({
     onChange,
@@ -31,6 +32,7 @@ export default function BlockEditor({
     storybookStories,
     onSaveClick,
     isLoading,
+    activeConfig,
 }) {
     const scrollContainer = useRef(null);
     const [selectedStorybookElement, setSelectedStorybookElement] = useState(null);
@@ -85,7 +87,6 @@ export default function BlockEditor({
         let loadedStories = await storybookStories();
 
         setIsLoadingStories(false);
-
         setLoadedStorybookStories(loadedStories);
     };
 
@@ -99,13 +100,46 @@ export default function BlockEditor({
         }
     };
 
+    const fixValue = (newValue) => {
+        const fixedValue = [...(newValue || [])];
+
+        return fixedValue.map(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");
+                    // only unwrap if we only have exactly 1 node
+                    if (storybookNodes.length === 1) {
+                        const storyNode = storybookNodes.at(0);
+                        storyNode.isInline = false;
+                        return storyNode;
+                    }
+                }
+            } else if (node?.type === "storybook") {
+                if (node.isInline) {
+                    // we need to copy the node since its readOnly
+                    return {
+                        ...node,
+                        isInline: undefined,
+                    };
+                }
+            }
+
+            return node;
+        });
+    };
+
     const onSlateChange = (newValue) => {
         if (editor.selection) {
             setLastSelection(editor.selection);
         }
 
-        if (newValue.length > 0) {
-            onChange(newValue);
+        const newValueFixed = fixValue(newValue);
+
+        if (newValueFixed.length > 0) {
+            onChange(newValueFixed);
         } else {
             onChange(emptyValue);
         }
@@ -319,6 +353,20 @@ export default function BlockEditor({
         setSelectedStorybookElement(null);
     };
 
+    const slug = contentfulSdk?.entry?.fields?.slug?.getValue();
+
+    if (isLoadingStories) {
+        return <div style={{
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+            width: "100%",
+            height: "100%",
+        }}>
+            <Loader/>
+        </div>;
+    }
+
     return (
         <div className={classNames({"block-editor-wrapper h-full": true})}>
             <Resizable
@@ -336,7 +384,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 && (
@@ -384,7 +437,7 @@ export default function BlockEditor({
                     onDuplicate={handleSidebarDuplicateClick}
                     onInsert={handleSidebarInsertClick}
                     editor={editor}
-                    lastSelection={lastSelection} />
+                    lastSelection={lastSelection}/>
                 }
             />
         </div>

package/src/Loader.js

@@ -0,0 +1,138 @@
+export const Loader = ({
+    width = "240px",
+    height = "240px",
+}) => {
+    return <svg
+        style={{
+            margin: "auto",
+            background: "none",
+            display: "block",
+            shapeRendering: "auto",
+        }}
+        width={width}
+        height={height}
+        viewBox="0 0 100 100"
+        preserveAspectRatio="xMidYMid">
+        <g transform="rotate(0 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.8340283569641368s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(32.72727272727273 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.7506255212677231s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(65.45454545454545 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.6672226855713094s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(98.18181818181819 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.5838198498748958s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(130.9090909090909 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.5004170141784821s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(163.63636363636363 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.4170141784820684s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(196.36363636363637 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.3336113427856547s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(229.0909090909091 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.25020850708924103s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(261.8181818181818 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.16680567139282734s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(294.54545454545456 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="-0.08340283569641367s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+        <g transform="rotate(327.27272727272725 50 50)">
+            <rect x="46.5" y="17.5" rx="3.5" ry="1.5" width="7" height="3" fill="#000000">
+                <animate
+                    attributeName="opacity"
+                    values="1;0"
+                    keyTimes="0;1"
+                    dur="0.9174311926605504s"
+                    begin="0s"
+                    repeatCount="indefinite" />
+            </rect>
+        </g>
+    </svg>;
+};

package/src/Nodes/Default.js

@@ -11,7 +11,8 @@ export const Default = ({
     isRenderer,
     isInSlot = false,
     defaultComponentReplacement,
-    onElementClick = () => {},
+    onElementClick = () => {
+    },
     ...props
 }) => {
     const getPropsForType = (type) => {
@@ -54,56 +55,52 @@ export const Default = ({
     }
 
     attributes.onClick = () => onElementClick(element);
+    attributes.className = alignedClassname.trim() || undefined;
 
     switch (type) {
         case "blockquote":
-            return <Wrapper>
-                <blockquote {...attributes} className={alignedClassname.trim()}>{children}</blockquote>
+            return <Wrapper type={type}>
+                <blockquote {...attributes}>{children}</blockquote>
             </Wrapper>;
         case "list-item":
-            return <Wrapper>
-                <li {...attributes} className={alignedClassname.trim()}>{children}</li>
+            return <Wrapper type={type}>
+                <li {...attributes}>{children}</li>
             </Wrapper>;
         case "unordered-list":
-            return <Wrapper>
-                <ul {...attributes} className={alignedClassname.trim()}>{children}</ul>
+            return <Wrapper type={type}>
+                <ul {...attributes}>{children}</ul>
             </Wrapper>;
         case "ordered-list":
-            return <Wrapper>
-                <ol {...attributes} className={alignedClassname.trim()}>{children}</ol>
+            return <Wrapper type={type}>
+                <ol {...attributes}>{children}</ol>
             </Wrapper>;
         case "arrow-list":
-            return <Wrapper>
+            return <Wrapper type={type}>
                 <ul
                     {...attributes}
-                    className={classNames({
-                        ...alignedClassname.trim(),
-                        "arrow-list": true,
-                    })}>{children}</ul>
+                    className={classNames("arrow-list", attributes.className)}>{children}</ul>
             </Wrapper>;
         case "code":
             if (isRenderer) {
-                return <Wrapper code={element?.attributes?.code} />;
+                return <Wrapper code={element?.attributes?.code} type={type}/>;
             } else {
-                return <Wrapper><div {...attributes} className={alignedClassname.trim()}><div dangerouslySetInnerHTML={{__html: element?.attributes?.code}} /></div></Wrapper>;
-            }
-        case "heading":
-            switch (element.attributes.level) {
-                case 1:
-                    return <Wrapper level={element.attributes.level}><h1 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h1></Wrapper>;
-                case 2:
-                    return <Wrapper level={element.attributes.level}><h2 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h2></Wrapper>;
-                case 3:
-                    return <Wrapper level={element.attributes.level}><h3 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h3></Wrapper>;
-                case 4:
-                    return <Wrapper level={element.attributes.level}><h4 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h4></Wrapper>;
-                case 5:
-                    return <Wrapper level={element.attributes.level}><h5 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h5></Wrapper>;
-                case 6:
-                    return <Wrapper level={element.attributes.level}><h6 {...attributes} id={element?.attributes?.id || undefined} className={alignedClassname.trim() || undefined}>{children}</h6></Wrapper>;
-                default:
-                    return null;
+                return <Wrapper type={type}>
+                    <div {...attributes} >
+                        <div dangerouslySetInnerHTML={{__html: element?.attributes?.code}}/>
+                    </div>
+                </Wrapper>;
             }
+        case "heading": {
+            const HeadingTag = `h${element.attributes.level || 1}`;
+            return <Wrapper level={element.attributes.level} type={type}>
+                <HeadingTag
+                    {...attributes}
+                    id={element?.attributes?.id || undefined}
+                >
+                    {children}
+                </HeadingTag>
+            </Wrapper>;
+        }
         case "link": {
             let relProp = `noopener noreferrer`;
             let {
@@ -121,29 +118,40 @@ export const Default = ({
             let CustomLink = typeof defaultComponentReplacement === "function" ? defaultComponentReplacement(type) : null;
 
             if (CustomLink) {
-                return <Wrapper><CustomLink {...linkAttributes} {...attributes} rel={relProp} className={alignedClassname.trim()}>{children}</CustomLink></Wrapper>;
+                return <Wrapper type={type}><CustomLink
+                    {...linkAttributes}
+                    {...attributes}
+                    rel={relProp}
+                    className={alignedClassname.trim()}>{children}</CustomLink></Wrapper>;
             } else {
-                return <Wrapper><a {...linkAttributes} {...attributes} rel={relProp} className={alignedClassname.trim()}>{children}</a></Wrapper>;
+                return <Wrapper type={type}><a
+                    {...linkAttributes}
+                    {...attributes}
+                    rel={relProp}
+                    className={alignedClassname.trim()}>{children}</a></Wrapper>;
             }
         }
         case "paragraph":
-            return <Wrapper><p {...element.attributes} {...attributes} className={alignedClassname.trim()}>{children}</p></Wrapper>;
+            return <Wrapper type={type}><p
+                {...element.attributes}
+                {...attributes}
+                className={alignedClassname.trim()}>{children}</p></Wrapper>;
         case "divider":
-            return <Wrapper>
+            return <Wrapper type={type}>
                 <hr {...attributes} />
                 {children}
             </Wrapper>;
         case "div":
-            return <Wrapper>
+            return <Wrapper type={type}>
                 <div {...element.attributes} {...attributes}>{children}</div>
             </Wrapper>;
         case "span":
-            return <Wrapper>
+            return <Wrapper type={type}>
                 <span {...element.attributes} {...attributes}>{children}</span>
             </Wrapper>;
         default:
             if (isRenderer) {
-                return <Wrapper>{children}</Wrapper>;
+                return <Wrapper type={type}>{children}</Wrapper>;
             } else {
                 return <span {...attributes} className={alignedClassname.trim()}>{children}</span>;
             }

package/src/Nodes/Element.js

@@ -37,7 +37,8 @@ export const Element = ({
     switch (props.element.type) {
         case 'storybook':
             return <div
-                onClick={e => e.stopPropagation()}>
+                onClick={e => e.stopPropagation()}
+                className={"storybook-element-wrapper"}>
                 <StorybookNode
                     {...props}
                     {...typeProps}

package/src/Nodes/Storybook.js

@@ -124,25 +124,66 @@ const StorybookNodeComponent = ({
             })}>
             <span className="options-container">
                 {!element.isInline && (<>
-                    <span className="options-container-option options-container-option-move-up" title="Move up" onClick={moveUp}>
+                    <span
+                        className="options-container-option options-container-option-move-up"
+                        title="Move up"
+                        onClick={moveUp}>
                         <FontAwesomeIcon icon={faArrowUp} size="lg"/>
                     </span>
-                    <span className="options-container-option options-container-option-move-down" title="Move down" onClick={moveDown}>
+                    <span
+                        className="options-container-option options-container-option-move-down"
+                        title="Move down"
+                        onClick={moveDown}>
                         <FontAwesomeIcon icon={faArrowDown} size="lg"/>
                     </span>
                 </>)}
             </span>
             <span className={classNames({"storybook-element-component": true})}>
-                <span className="storybook-element-component-overlay" title="Klicken, um das Element zu konfigurieren" onClick={onEditClick}>
+                <span
+                    className="storybook-element-component-overlay"
+                    title="Klicken, um das Element zu konfigurieren"
+                    onClick={onEditClick}>
                     <div className="absolute right-0 top-0 m-2">
                         <FontAwesomeIcon
                             icon={faDesktop}
                             color={element?.attributes?.hideOnDesktop ? "lightgray" : "black"}
-                            className="mr-2" />
-                        <FontAwesomeIcon icon={faTablet} color={element?.attributes?.hideOnTablet ? "lightgray" : "black"} className="mr-2" />
-                        <FontAwesomeIcon icon={faMobile} color={element?.attributes?.hideOnSmartphone ? "lightgray" : "black"} />
+                            className="mr-2"/>
+                        <FontAwesomeIcon
+                            icon={faTablet}
+                            color={element?.attributes?.hideOnTablet ? "lightgray" : "black"}
+                            className="mr-2"/>
+                        <FontAwesomeIcon
+                            icon={faMobile}
+                            color={element?.attributes?.hideOnSmartphone ? "lightgray" : "black"}/>
                     </div>
-                Klicken, um das Element zu konfigurieren</span>
+                    <svg
+                        width="30%"
+                        height="30%"
+                        style={{
+                            minWidth: "20px",
+                            minHeight: "20px",
+                        }}
+                        viewBox="0 0 48 48"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path d="M0 0h48v48H0z" fill="none"/>
+                        <style dangerouslySetInnerHTML={{
+                            __html: `
+                                g { mix-blend-mode: multiply; }
+                            `,
+                        }}/>
+                        <g>
+                            <path d="M8.706,37.027c2.363-0.585,4.798-1.243,6.545-1.243c0.683,0,1.261,0.101,1.688,0.345c1.474,0.845,2.318,4.268,3.245,7.502
+                            C21.421,43.866,22.694,44,24,44c1.306,0,2.579-0.134,3.816-0.368c0.926-3.234,1.771-6.657,3.244-7.501
+                            c0.427-0.245,1.005-0.345,1.688-0.345c1.747,0,4.183,0.658,6.545,1.243c1.605-1.848,2.865-3.99,3.706-6.333
+                            c-2.344-2.406-4.872-4.891-4.872-6.694c0-1.804,2.528-4.288,4.872-6.694c-0.841-2.343-2.101-4.485-3.706-6.333
+                            c-2.363,0.585-4.798,1.243-6.545,1.243c-0.683,0-1.261-0.101-1.688-0.345c-1.474-0.845-2.318-4.268-3.245-7.502
+                            C26.579,4.134,25.306,4,24,4c-1.306,0-2.579,0.134-3.816,0.368c-0.926,3.234-1.771,6.657-3.245,7.501
+                            c-0.427,0.245-1.005,0.345-1.688,0.345c-1.747,0-4.183-0.658-6.545-1.243C7.101,12.821,5.841,14.962,5,17.306
+                            C7.344,19.712,9.872,22.196,9.872,24c0,1.804-2.527,4.288-4.872,6.694C5.841,33.037,7.101,35.179,8.706,37.027z M18,24
+                            c0-3.314,2.686-6,6-6s6,2.686,6,6s-2.686,6-6,6S18,27.314,18,24z"/>
+                        </g>
+                    </svg>
+                </span>
                 <div onClick={onEditClick}>
                     <StorybookDisplay
                         {...element.attributes}

package/src/Nodes/StorybookDisplay.js

@@ -121,20 +121,23 @@ const BlockComponent = ({
         }
     }
 
-    if (loadedAttributes.blockWidth || loadedAttributes.margin) {
-        return <span className={classNames({
-            "block-article-width": loadedAttributes.blockWidth === "article",
-            "block-site-width": loadedAttributes.blockWidth === "site",
-            "block-small-width": loadedAttributes.blockWidth === "small",
-            "editor-mt-large": loadedAttributes?.margin?.top,
-            "editor-mr-large": loadedAttributes?.margin?.right,
-            "editor-mb-large": loadedAttributes?.margin?.bottom,
-            "editor-ml-large": loadedAttributes?.margin?.left,
-            "lg:hidden": loadedAttributes?.hideOnDesktop && !isEditor,
-            "sm:max-lg:hidden": loadedAttributes?.hideOnTablet && !isEditor,
-            "max-sm:hidden": loadedAttributes?.hideOnSmartphone && !isEditor,
-        })}><LoadedComponent {...loadedAttributes} /></span>;
-    } else {
+    const WrapperTag = loadedAttributes.isInline ? "span" : "div";
+    const wrapperClassName = classNames({
+        "block-article-width": loadedAttributes.blockWidth === "article",
+        "block-site-width": loadedAttributes.blockWidth === "site",
+        "block-small-width": loadedAttributes.blockWidth === "small",
+        "editor-mt-large": loadedAttributes?.margin?.top,
+        "editor-mr-large": loadedAttributes?.margin?.right,
+        "editor-mb-large": loadedAttributes?.margin?.bottom,
+        "editor-ml-large": loadedAttributes?.margin?.left,
+        "lg:hidden": loadedAttributes?.hideOnDesktop && !isEditor,
+        "sm:max-lg:hidden": loadedAttributes?.hideOnTablet && !isEditor,
+        "max-sm:hidden": loadedAttributes?.hideOnSmartphone && !isEditor,
+    });
+
+    if (!wrapperClassName) {
         return <LoadedComponent {...loadedAttributes} />;
     }
+
+    return <WrapperTag className={wrapperClassName}><LoadedComponent {...loadedAttributes} /></WrapperTag>;
 };

package/src/Serializer/Serializer.js

@@ -124,7 +124,7 @@ export function Serializer({
                     storybookComponentDataLoader: storybookComponentDataLoader,
                 };
 
-                return <Wrapper><StorybookDisplay {...storyProps} /></Wrapper>;
+                return <Wrapper type={props.type} block={props.block}><StorybookDisplay {...storyProps} /></Wrapper>;
             }
             case 'layout': {
                 let isGrid = true;
@@ -137,7 +137,7 @@ export function Serializer({
                     });
                 }
 
-                return <Wrapper>
+                return <Wrapper type={props.type}>
                     <div
                         data-cols={props.children.length}
                         className={classNames("block-editor-layout", {
@@ -167,7 +167,7 @@ export function Serializer({
                 </Wrapper>;
             }
             case 'layout-slot':
-                return <Wrapper>
+                return <Wrapper type={props.type}>
                     <div
                         className={classNames({
                             ["block-editor-layout-" + props.attributes.name]: true,

package/src/SidebarEditor.js

@@ -40,6 +40,14 @@ const SidebarEditor = ({
 
     const story = storybookStories?.find(v => storybookElement.block?.toLowerCase() === v.id?.toLowerCase());
 
+    useEffect(() => {
+        const selectedHtmlNode = document.querySelector(".slate-editor-element-selected");
+
+        if (selectedHtmlNode) {
+            selectedHtmlNode.scrollIntoView();
+        }
+    }, [storybookElement]);
+
     if (story?.argTypes) {
         Object.keys(story.argTypes).forEach(key => {
             const argType = story.argTypes[key];

package/src/Toolbar/Element.js

@@ -41,9 +41,5 @@ export const StorybookButton = () => {
             <FontAwesomeIcon icon={faPlus} />
             <span> Element hinzufügen</span>
         </span>
-        <span className={"toolbar-btn"} onMouseDown={onClickInline}>
-            <FontAwesomeIcon icon={faPlus} />
-            <span> Inline Element hinzufügen</span>
-        </span>
     </>;
 };

package/src/Toolbar/Toolbar.js

@@ -39,6 +39,7 @@ export const Toolbar = ({
     editor,
     sdk,
     lastSelection,
+    buttons,
 }) => {
     const ref = useRef();
 
@@ -145,7 +146,6 @@ export const Toolbar = ({
                         </ToobarHoverExpandButton>
 
                         <ToobarHoverExpandButton>
-                            <StorybookButton/>
                             <InsertDividerButton/>
                             <InsertGridButton/>
                         </ToobarHoverExpandButton>
@@ -166,6 +166,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>;
     }