@vonaffenfels/slate-editor 1.0.43 → 1.0.45

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.43",
+    "version": "1.0.45",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "2dc1a5a219755f4b1036840f4c1bc9356749eb28",
+    "gitHead": "5ed8507a56e4cb65baa44dd3d5cbb9853a45f05d",
     "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/scss/sidebarEditor.scss

@@ -60,7 +60,7 @@
     
     input[type="radio"],
     input[type="checkbox"] {
-        margin-right: 4px;
+        margin-right: 8px;
     }
 
     option[disabled] {

package/src/BlockEditor.js

@@ -218,6 +218,17 @@ export default function BlockEditor({
         }
 
         try {
+            editor.selection = {
+                anchor: {
+                    offset: 0,
+                    path,
+                },
+                focus: {
+                    offset: 0,
+                    path,
+                },
+            };
+
             Transforms.moveNodes(editor, {
                 from: [path[0]],
                 match: node => {

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/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/SidebarEditor/SidebarEditorField.js

@@ -88,9 +88,11 @@ export const SidebarEditorField = ({
                 return (
                     <div>
                         <input
+                            id={fieldKey}
                             type="checkbox"
                             checked={value}
                             onChange={e => onChange(fieldKey, e.target.checked)} />
+                        <label htmlFor={fieldKey}>{value ? "Ja" : "Nein"}</label>
                     </div>
                 );
             case "select":

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",