@vonaffenfels/slate-editor 1.0.49 → 1.0.53

package/package.json

@@ -1,20 +1,21 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.49",
+    "version": "1.0.53",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
         "prepublish": "yarn run build",
         "test": "echo \"Error: no test specified\" && exit 1",
         "build": "rm -rf dist && webpack --config webpack.config.build.js",
-        "buildWatch": "rm -rf dist && webpack --config webpack.config.build.js --watch",
+        "buildWatch": "rm -rf dist && webpack --config webpack.config.watch.js --watch",
         "dev": "webpack serve --config webpack.config.dev.js --open"
     },
     "author": "",
     "license": "ISC",
     "peerDependencies": {
-        "react": "17.0.2",
-        "react-dom": "17.0.2"
+        "next": "^12.3.4",
+        "react": "^18",
+        "react-dom": "^18"
     },
     "devDependencies": {
         "@babel/core": "^7.20.12",
@@ -43,13 +44,12 @@
         "graphql": "16.5.0",
         "html-webpack-plugin": "^5.3.1",
         "mini-css-extract-plugin": "^1.5.0",
-        "next": "^12.3.4",
         "path-browserify": "^1.0.1",
         "postcss": "8.4.14",
         "postcss-import": "^15.1.0",
         "postcss-loader": "^5.2.0",
-        "react": "18.2.0",
-        "react-dom": "18.2.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "sass": "^1.32.11",
         "sass-loader": "^10.0.1",
         "shortid": "^2.2.16",
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "b9487e3c2407021c202cb464a6073bb11ccb6bb4",
+    "gitHead": "2dc913432ea48a4eaf107ff9c5f15b572eeda4d6",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -11,6 +11,12 @@
   max-width: 100%;
   width: 100%;
 
+  .slate-editor-element-selected {
+    .storybook-element-component {
+      outline: 2px dashed #61a2e9;
+    }
+  }
+
   &.storybook-active {
     .slate-editor {
       display: none;
@@ -161,7 +167,7 @@
     }
 
     .arrow-list li::before {
-        content: none !important;
+      content: none !important;
     }
 
     div[data-slate-editor="true"] {
@@ -303,21 +309,15 @@
     }
   }
 
-  .layout-block-auto-fill {
-    grid-template-columns: auto 1fr;
-  }
-
-  .layout-block-fill-auto {
-    grid-template-columns: 1fr auto;
+  .layout-block-grid {
+    display: grid;
   }
 
-  .layout-block-auto-fill-auto {
-    grid-template-columns: auto 1fr auto;
+  .layout-block-flex {
+    display: flex;
   }
 
   .layout-block {
-    display: grid;
-
     &.article-width {
       width: 44.44444444435556%;
     }
@@ -359,6 +359,15 @@
           display: inline-block;
         }
       }
+
+      &.layout-slot-grid-fill {
+        flex-grow: 1;
+      }
+
+      &.layout-slot-grid-auto {
+        flex-grow: 0;
+        width: auto;
+      }
     }
 
     @media only screen and (max-width: 360px) {
@@ -407,4 +416,26 @@
 .button.button--secondary:active {
   background-color: #0262C9 !important;
   color: #FFFFFF !important;
+}
+
+.resizable {
+  .resizable-left {
+    position: relative;
+  }
+
+  .resizable-right {
+    position: relative;
+  }
+
+  .resizable-x-handle {
+    cursor: ew-resize;
+    content: "";
+    position: absolute;
+    height: 100%;
+    width: 10px;
+    text-align: center;
+    top: 0;
+    left: -2px;
+    background-color: transparent;
+  }
 }

package/scss/sidebarEditor.scss

@@ -17,15 +17,15 @@
     * {
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
     }
-    
+
     p, label, b, span {
         color: rgb(90, 101, 124);
     }
-    
+
     label {
         margin: 0 0 2px 0 !important;
     }
-    
+
     input[type="text"],
     input[type="number"],
     input[type="color"],
@@ -48,46 +48,47 @@
         height: 42px;
         max-height: 200px;
     }
-    
+
     input[type="color"] {
         padding: 4px !important;
     }
-    
+
     input[type="range"] {
         display: block;
         width: 100%;
     }
-    
+
     input[type="radio"],
     input[type="checkbox"] {
         margin-right: 8px;
+        margin-left: 4px;
     }
 
     option[disabled] {
         color: rgba(0, 0, 0, 0.3)
     }
-    
+
     /* button[data-test-id="cf-ui-button"] span {
         color: #036fe3 !important;
     }
-    
+
     button[data-test-id="cf-ui-button"] svg {
         fill: #036fe3 !important;
     }
-    
+
     button[data-test-id="cf-ui-button"]:hover span {
         color: #FFFFFF !important;
     }
-    
+
     button[data-test-id="cf-ui-button"]:hover svg {
         fill: #FFFFFF !important;
     } */
-    
+
     .inline-check-wrapper {
         display: inline-block;
         margin-right: 8px;
     }
-    
+
     details {
         display: block;
         font-size: 0.875rem !important;

package/scss/storybook.scss

@@ -9,7 +9,7 @@
     z-index: 10;
     background-color: rgba(255, 255, 255, 0.7);
     color: black;
-    font-size: 2em;
+    font-size: 1em;
     align-items: center;
     justify-content: center;
     content-visibility: auto;
@@ -131,4 +131,10 @@
     min-height: 100px;
     min-width: 100px;
   }
+}
+
+@container (min-width: 100px) {
+  .storybook-element-component-overlay {
+    font-size: 2em;
+  }
 }

package/src/BlockEditor.js

@@ -19,6 +19,7 @@ import ErrorBoundary from "../src/Blocks/ErrorBoundary";
 import SidebarEditor from './SidebarEditor';
 import {Spinner} from '@contentful/forma-36-react-components';
 import {ObjectId} from "./ObjectId";
+import {Resizable} from "./SidebarEditor/Resizable";
 
 export default function BlockEditor({
     onChange,
@@ -44,6 +45,15 @@ export default function BlockEditor({
                 let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
                 let path = ReactEditor.findPath(editor, node);
 
+                document.querySelectorAll(".slate-editor-element-selected").forEach(el => {
+                    el.classList.remove("slate-editor-element-selected");
+                });
+
+                if (attributes.ref.current) {
+                    attributes.ref.current.classList.add("slate-editor-element-selected");
+                }
+
+
                 setSelectedStorybookElement({
                     ...element,
                     editorAttributes: attributes,
@@ -169,10 +179,14 @@ export default function BlockEditor({
             block: newStorybookElement.block,
             isEmpty: false,
             isInline: selectedStorybookElement.isInline,
-            attributes: newStorybookElement.attributes || {},
+            attributes: {...(newStorybookElement.attributes || {})},
             type: "storybook",
         };
 
+        if (!newNodeProps.attributes.teasermanagerSlotId) {
+            newNodeProps.attributes.teasermanagerSlotId = ObjectId();
+        }
+
         Transforms.setNodes(editor, newNodeProps, {at: selectedStorybookElement.path});
 
         onSlateChange(editor.children);
@@ -182,10 +196,6 @@ export default function BlockEditor({
             ...newNodeProps,
         };
 
-        if (!mergedValue.attributes.teasermanagerSlotId) {
-            mergedValue.attributes.teasermanagerSlotId = ObjectId();
-        }
-
         setSelectedStorybookElement(mergedValue);
     };
 
@@ -262,63 +272,68 @@ export default function BlockEditor({
 
     return (
         <div className={classNames({"block-editor-wrapper h-full": true})}>
-            <div className="slate-editor h-full">
-                <Slate
-                    editor={editor}
-                    value={value}
-                    onChange={onSlateChange}
-                >
-                    <div>
-                        <Toolbar
-                            hover={false}
-                            onSaveClick={onSaveClick}
-                            storybookStories={loadedStorybookStories}
-                            isLoadingStories={isLoadingStories}
-                            editor={editor}
-                            sdk={contentfulSdk}/>
-                    </div>
-                    <div className="relative h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
-                        {isLoading && (
-                            <div className="pointer-events-none fixed left-0 top-0 z-50" style={{padding: "61px 0 0 16px"}}>
-                                <Spinner color={window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "white" : "default"} />
-                            </div>
-                        )}
-                        <ErrorBoundary
-                            name="editor"
-                            fallback={(
-                                <>
-                                    Invalid Content! Call Support!
-                                </>
-                            )}>
-                            <Editable
-                                renderLeaf={renderLeaf}
-                                renderElement={renderElement}
-                                onKeyDown={(event) => {
-                                    if (event.code === "Backspace") {
-                                        // event.preventDefault();
-                                        // return false;
-                                    }
-
-                                    if (!ListItemPlugin.onKeyDown(event, editor)) {
-                                        SoftBreakPlugin.onKeyDown(event, editor);
-                                    }
-                                }}
-                            />
-                        </ErrorBoundary>
-                    </div>
-                </Slate>
-            </div>
-            {!!selectedStorybookElement && <SidebarEditor
-                sdk={contentfulSdk}
-                storybookElement={selectedStorybookElement}
-                onChange={handleSidebarEditorChange}
-                storybookStories={loadedStorybookStories}
-                isLoading={isLoadingStories}
-                onClose={handleSidebarClose}
-                onDelete={handleSidebarDeleteClick}
-                onMove={handleSidebarMoveClick}
-                editor={editor}/>
-            }
+            <Resizable
+                left={<div className="slate-editor h-full">
+                    <Slate
+                        editor={editor}
+                        value={value}
+                        onChange={onSlateChange}
+                    >
+                        <div>
+                            <Toolbar
+                                hover={false}
+                                onSaveClick={onSaveClick}
+                                storybookStories={loadedStorybookStories}
+                                isLoadingStories={isLoadingStories}
+                                editor={editor}
+                                sdk={contentfulSdk}/>
+                        </div>
+                        <div className="relative h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
+                            {isLoading && (
+                                <div
+                                    className="pointer-events-none fixed left-0 top-0 z-50"
+                                    style={{padding: "61px 0 0 16px"}}>
+                                    <Spinner
+                                        color={window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? "white" : "default"}/>
+                                </div>
+                            )}
+                            <ErrorBoundary
+                                name="editor"
+                                fallback={(
+                                    <>
+                                        Invalid Content! Call Support!
+                                    </>
+                                )}>
+                                <Editable
+                                    renderLeaf={renderLeaf}
+                                    renderElement={renderElement}
+                                    onKeyDown={(event) => {
+                                        if (event.code === "Backspace") {
+                                            // event.preventDefault();
+                                            // return false;
+                                        }
+
+                                        if (!ListItemPlugin.onKeyDown(event, editor)) {
+                                            SoftBreakPlugin.onKeyDown(event, editor);
+                                        }
+                                    }}
+                                />
+                            </ErrorBoundary>
+                        </div>
+                    </Slate>
+                </div>}
+                right={!!selectedStorybookElement && <SidebarEditor
+                    sdk={contentfulSdk}
+                    storybookElement={selectedStorybookElement}
+                    onChange={handleSidebarEditorChange}
+                    storybookStories={loadedStorybookStories}
+                    isLoading={isLoadingStories}
+                    onClose={handleSidebarClose}
+                    onDelete={handleSidebarDeleteClick}
+                    onMove={handleSidebarMoveClick}
+                    editor={editor}/>
+                }
+            />
         </div>
     );
 }

package/src/Blocks/LayoutBlock.js

@@ -190,7 +190,15 @@ export const LayoutBlock = ({
         }, {at: fromPath});
     };
 
-    console.log({element});
+    let isGrid = true;
+
+    if (Array.isArray(element?.children)) {
+        element.children.forEach(child => {
+            if (child.type === "layout-slot" && ["grid-auto", "grid-fill"].includes(child.attributes.name)) {
+                isGrid = false;
+            }
+        });
+    }
 
     return <div className="options-wrapper" onClick={() => onElementClick(element)}>
         <div className="options-container">
@@ -239,7 +247,9 @@ export const LayoutBlock = ({
             <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
         </div>
         <div
-            className={`layout-block layout-grid layout-grid-cols-${children.length} ${element?.attributes?.className || ""} ` + classNames({
+            className={`layout-block layout-grid layout-grid-cols-${children.length} ` + classNames({
+                "layout-block-flex": !isGrid,
+                "layout-block-grid": isGrid,
                 [classNameArticle + " article-width"]: element?.attributes?.width === "article" || !element?.attributes?.width,
                 [classNameSite + " site-width"]: element?.attributes?.width === "full",
                 "block-editor-table-border-wrapper": element?.attributes?.tableBorder,

package/src/Blocks/LayoutSlot.js

@@ -30,7 +30,7 @@ export const LayoutSlot = ({
 
     return <div
         className={classNames({
-            ["layout-slot"]: true,
+            ["layout-slot layout-slot-" + element.attributes.name]: true,
             "editor-mt-4": element?.attributes?.margin?.top,
             "editor-mr-4": element?.attributes?.margin?.right,
             "editor-mb-4": element?.attributes?.margin?.bottom,

package/src/Nodes/StorybookDisplay.js

@@ -22,7 +22,7 @@ export const StorybookDisplay = (props) => {
 
         const interval = setInterval(() => {
             // innerText for regular elements, img for inline images and such :)
-            if (elRef.current && !elRef.current.innerText && !elRef.current.querySelector("img, svg, iframe, video, audio, picture, frame")) {
+            if (elRef.current && !elRef.current.innerText && !elRef.current.querySelector("img, svg, iframe, video, audio, picture, frame, input")) {
                 elRef.current.classList.add("storybook-element-display-empty");
                 elRef.current.dataset.content = `Leeres Element :: ${element.block}`;
             } else if (elRef.current) {

package/src/Serializer/Serializer.js

@@ -126,19 +126,37 @@ export function Serializer({
 
                 return <Wrapper><StorybookDisplay {...storyProps} /></Wrapper>;
             }
-            case 'layout':
+            case 'layout': {
+                let isGrid = true;
+
+                if (Array.isArray(props.children)) {
+                    props.children.forEach(child => {
+                        if (child.type === "layout-slot" && ["grid-auto", "grid-fill"].includes(child.attributes.name)) {
+                            isGrid = false;
+                        }
+                    });
+                }
+
                 return <Wrapper>
                     <div
                         data-cols={props.children.length}
-                        className={classNames(props?.attributes?.className || "", {
-                            "block-editor-layout": true,
+                        className={classNames("block-editor-layout", {
+                            "block-editor-layout-grid": isGrid,
+                            "block-editor-layout-flex": !isGrid,
+                            "block-editor-table-border-wrapper": props?.attributes?.tableBorder,
+                            "md:grid-cols-1": props.children.length === 1,
+                            "md:grid-cols-2": props.children.length === 2,
+                            "md:grid-cols-3": props.children.length === 3,
+                            "md:grid-cols-4": props.children.length === 4,
+                            "md:grid-cols-5": props.children.length === 5,
+                            "grid-cols-1": props?.attributes?.mobileColumnSpan === 1,
+                            "grid-cols-2": props?.attributes?.mobileColumnSpan === 2,
                             "md:space-x-4": props.attributes?.spacing,
                             "mt-16": props?.attributes?.margin?.top,
                             "mr-16": props?.attributes?.margin?.right,
                             "mb-16": props?.attributes?.margin?.bottom,
                             "ml-16": props?.attributes?.margin?.left,
-                            "block-editor-table-border-wrapper": props?.attributes?.tableBorder,
-                            "mx-auto": props?.attributes?.justifyCenter,
+                            "justify-center": props?.attributes?.justifyCenter,
                             [typeProps.classNameSite + " site-width"]: !isInSlot && (props.attributes?.width === "site" || props.attributes?.width === "full"),
                             [typeProps.classNameArticle + " article-width"]: !isInSlot && (props.attributes?.width === "article" || !props.attributes?.width),
                         })}
@@ -146,6 +164,7 @@ export function Serializer({
                         {props.children.map((v, i) => <Fragment key={"layout-pos-" + i}>{serializeNode(v, i, isInSlot)}</Fragment>)}
                     </div>
                 </Wrapper>;
+            }
             case 'layout-slot':
                 return <Wrapper>
                     <div

package/src/SidebarEditor/Resizable.js

@@ -0,0 +1,78 @@
+import {useEffect, useRef} from "react";
+
+export const Resizable = ({left, right}) => {
+    const containerRef = useRef();
+    const leftRef = useRef();
+    const handleRef = useRef();
+    const rightRef = useRef();
+
+    const checkWidth = (width) => {
+        if (!containerRef.current || !width) {
+            return width;
+        }
+
+        if (width < 300) {
+            return 300;
+        } else if (containerRef.current.getBoundingClientRect().width - width < 300) {
+            return containerRef.current.getBoundingClientRect().width - 300
+        }
+
+        return width;
+    }
+
+    useEffect(() => {
+        if (rightRef.current) {
+            const savedWidth = localStorage.getItem("slate-editor-resizable-width");
+
+            if (checkWidth(savedWidth)) {
+                rightRef.current.style.width = savedWidth + 'px';
+            }
+
+            const onMouseDown = (e) => {
+                if (!rightRef.current) {
+                    return;
+                }
+                rightRef.current.resizingStartWidth = rightRef.current.getBoundingClientRect().width;
+                rightRef.current.resizingStartMouseX = e.pageX;
+                rightRef.current.resizing = true;
+            };
+            const onMouseMove = (e) => {
+                if (!rightRef?.current?.resizing) {
+                    return;
+                }
+
+                let newWidth = rightRef.current.resizingStartWidth - (e.pageX - rightRef.current.resizingStartMouseX)
+                newWidth = checkWidth(newWidth);
+
+                localStorage.setItem("slate-editor-resizable-width", newWidth);
+
+                rightRef.current.style.width = newWidth + 'px';
+            }
+            const onMouseUp = (e) => {
+                if (rightRef.current) {
+                    rightRef.current.resizing = false;
+                }
+            }
+
+            rightRef.current.addEventListener("mousedown", onMouseDown);
+            document.addEventListener("mousemove", onMouseMove);
+            document.addEventListener("mouseup", onMouseUp);
+
+            return () => {
+                if (rightRef.current) {
+                    rightRef.current.removeEventListener("mousedown", onMouseDown);
+                }
+                document.removeEventListener("mousemove", onMouseMove);
+                document.removeEventListener("mouseup", onMouseUp);
+            }
+        }
+    }, [right, left]);
+
+    return <div className="w-full flex resizable" ref={containerRef}>
+        <div ref={leftRef} className="resizable-left flex-grow">{left}</div>
+        {right && <div ref={rightRef} className="resizable-right">
+            <div ref={handleRef} className="resizable-x-handle"/>
+            {right}
+        </div>}
+    </div>
+}

package/src/SidebarEditor.js

@@ -31,7 +31,7 @@ const SidebarEditor = ({
 
     const story = storybookStories?.find(v => storybookElement.block?.toLowerCase() === v.id?.toLowerCase());
 
-    if (story) {
+    if (story?.argTypes) {
         Object.keys(story.argTypes).forEach(key => {
             const argType = story.argTypes[key];
 
@@ -225,7 +225,7 @@ const SidebarEditor = ({
                                     <hr className="my-4" style={{borderColor: "#cfd9e0"}}/>
                                 </div>
                             )}
-                            {!!story && (
+                            {!!story && !!fields.fields && (
                                 <>
                                     {Object.keys(fields.fields).map(key => {
                                         const field = fields.fields[key];
@@ -392,11 +392,11 @@ const BlockSelect = ({
         const result = {};
 
         array.forEach(item => {
-            if (!item.id) {
+            if (!item?.id) {
                 return;
             }
 
-            let splitStoryContext = storyContext.split(",");
+            let splitStoryContext = String(storyContext || "").split(",");
             let isItemInContext = splitStoryContext.find(context => {
                 return Array.isArray(item.storyContext) ? item.storyContext.includes(context) : context === item.storyContext;
             });

package/src/Toolbar/Layout.js

@@ -273,7 +273,6 @@ export const InsertGridButton = () => {
             </InsertLayoutButton>
             <InsertLayoutButton insert={{
                 "type": "layout",
-                "attributes": {"className": "layout-block-auto-fill"},
                 "children": [
                     {
                         "type": "layout-slot",
@@ -305,7 +304,6 @@ export const InsertGridButton = () => {
             </InsertLayoutButton>
             <InsertLayoutButton insert={{
                 "type": "layout",
-                "attributes": {"className": "layout-block-fill-auto"},
                 "children": [
                     {
                         "type": "layout-slot",
@@ -337,7 +335,6 @@ export const InsertGridButton = () => {
             </InsertLayoutButton>
             <InsertLayoutButton insert={{
                 "type": "layout",
-                "attributes": {"className": "layout-block-auto-fill-auto"},
                 "children": [
                     {
                         "type": "layout-slot",