@vonaffenfels/slate-editor 1.0.44 → 1.0.46

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.44",
+    "version": "1.0.46",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "9bcbf3b9b1002d4d41a6d23fb3ab6b567fc1de4f",
+    "gitHead": "39c70a07e3c6f82a79775993560a4e902467bf21",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -303,9 +303,20 @@
     }
   }
 
+  .layout-block-auto-fill {
+    grid-template-columns: auto 1fr;
+  }
+
+  .layout-block-fill-auto {
+    grid-template-columns: 1fr auto;
+  }
+
+  .layout-block-auto-fill-auto {
+    grid-template-columns: auto 1fr auto;
+  }
+
   .layout-block {
-    display: flex;
-    flex-direction: row;
+    display: grid;
 
     &.article-width {
       width: 44.44444444435556%;
@@ -321,6 +332,14 @@
       position: relative;
       outline: 1px dashed grey;
 
+      .storybook-element-component {
+        display: block;
+      }
+
+      .layout-slot-content {
+        flex-grow: 1;
+      }
+
       .layout-slot-options {
         background-color: grey;
         color: white;
@@ -339,53 +358,11 @@
           text-transform: uppercase;
           display: inline-block;
         }
-
-      }
-
-      .layout-slot-content {
-      }
-
-      &.layout-slot-widecol {
-        flex-grow: 1;
-      }
-
-      &.layout-slot-maincol {
-        flex-grow: 1;
-      }
-
-      &.layout-slot-sidecol {
-        flex-grow: 0;
-        width: 30%;
-      }
-
-      &.layout-slot-grid-half {
-        flex-grow: 0;
-        width: 50%;
-      }
-
-      &.layout-slot-grid-3 {
-        flex-grow: 0;
-        width: 100%;
-      }
-
-      &.layout-slot-grid-2 {
-        flex-grow: 0;
-        width: 66.6666666666%;
-      }
-
-      &.layout-slot-grid-1 {
-        flex-grow: 0;
-        width: 33.3333333333%;
-      }
-
-      &.layout-slot-grid-fill {
-        flex-grow: 1;
       }
+    }
 
-      &.layout-slot-grid-auto {
-        flex-grow: 0;
-        width: auto;
-      }
+    @media only screen and (max-width: 360px) {
+      grid-template-columns: 1fr;
     }
   }
 }

package/src/BlockEditor.js

@@ -17,9 +17,8 @@ import "../scss/editor.scss";
 import {ListItemPlugin} from "./plugins/ListItem";
 import ErrorBoundary from "../src/Blocks/ErrorBoundary";
 import SidebarEditor from './SidebarEditor';
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import {faSpinner} from '@fortawesome/free-solid-svg-icons';
 import {Spinner} from '@contentful/forma-36-react-components';
+import {ObjectId} from "./ObjectId";
 
 export default function BlockEditor({
     onChange,
@@ -170,17 +169,24 @@ export default function BlockEditor({
             block: newStorybookElement.block,
             isEmpty: false,
             isInline: selectedStorybookElement.isInline,
-            attributes: newStorybookElement.attributes,
+            attributes: newStorybookElement.attributes || {},
             type: "storybook",
         };
 
         Transforms.setNodes(editor, newNodeProps, {at: selectedStorybookElement.path});
 
         onSlateChange(editor.children);
-        setSelectedStorybookElement({
+
+        const mergedValue = {
             ...selectedStorybookElement,
             ...newNodeProps,
-        });
+        };
+
+        if (!mergedValue.attributes.teasermanagerSlotId) {
+            mergedValue.attributes.teasermanagerSlotId = ObjectId();
+        }
+
+        setSelectedStorybookElement(mergedValue);
     };
 
     const handleSidebarDeleteClick = (element) => {

package/src/Blocks/LayoutBlock.js

@@ -171,6 +171,27 @@ export const LayoutBlock = ({
         }, {at: path});
     };
 
+    const switchMobileColumnSpan = () => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        let mobileColumnSpan = element?.attributes?.mobileColumnSpan === 1 ? 2 : 1;
+
+        Transforms.setNodes(editor, {
+            type: "layout",
+            attributes: {
+                ...(element.attributes || {}),
+                mobileColumnSpan,
+            },
+        }, {at: fromPath});
+    };
+
+    console.log({element});
+
     return <div className="options-wrapper" onClick={() => onElementClick(element)}>
         <div className="options-container">
             <span className="options-container-option options-container-option-remove" onClick={onRemoveClick}>
@@ -212,19 +233,29 @@ export const LayoutBlock = ({
                     <span>Rahmen</span>
                 )}
             </span>
+            <span className="mx-2 cursor-pointer" onClick={switchMobileColumnSpan}>
+                <span>Mobile Spalten: {element?.attributes?.mobileColumnSpan || 1}</span>
+            </span>
             <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
         </div>
         <div
-            className={`layout-block layout-grid layout-grid-cols-${children.length} ` + classNames({
+            className={`layout-block layout-grid layout-grid-cols-${children.length} ${element?.attributes?.className || ""} ` + classNames({
                 [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,
-                "justify-center": element?.attributes?.justifyCenter,
-                "space-x-4": element?.attributes?.spacing,
+                "mx-auto": element?.attributes?.justifyCenter,
+                "gap-4": element?.attributes?.spacing,
                 "editor-mt-large": element?.attributes?.margin?.top,
                 "editor-mr-large": element?.attributes?.margin?.right,
                 "editor-mb-large": element?.attributes?.margin?.bottom,
                 "editor-ml-large": element?.attributes?.margin?.left,
+                "md:grid-cols-1": element?.children?.length === 1,
+                "md:grid-cols-2": element?.children?.length === 2,
+                "md:grid-cols-3": element?.children?.length === 3,
+                "md:grid-cols-4": element?.children?.length === 4,
+                "md:grid-cols-5": element?.children?.length === 5,
+                "grid-cols-1": element?.attributes?.mobileColumnSpan === 1,
+                "grid-cols-2": element?.attributes?.mobileColumnSpan === 2,
             })}
             {...attributes}
         >

package/src/Blocks/LayoutSlot.js

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

package/src/ObjectId.js

@@ -0,0 +1,4 @@
+export const ObjectId = (
+    m = Math, d = Date, h = 16, s = s => m.floor(s).toString(h),
+) =>
+    s(d.now() / 1000) + ' '.repeat(h).replace(/./g, () => s(m.random() * h));

package/src/Serializer/Serializer.js

@@ -130,7 +130,7 @@ export function Serializer({
                 return <Wrapper>
                     <div
                         data-cols={props.children.length}
-                        className={classNames({
+                        className={classNames(props?.attributes?.className || "", {
                             "block-editor-layout": true,
                             "md:space-x-4": props.attributes?.spacing,
                             "mt-16": props?.attributes?.margin?.top,
@@ -138,7 +138,7 @@ export function Serializer({
                             "mb-16": props?.attributes?.margin?.bottom,
                             "ml-16": props?.attributes?.margin?.left,
                             "block-editor-table-border-wrapper": props?.attributes?.tableBorder,
-                            "justify-center": props?.attributes?.justifyCenter,
+                            "mx-auto": 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),
                         })}

package/src/Toolbar/Layout.js

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