@vonaffenfels/slate-editor 1.0.71 → 1.0.73

package/package.json

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

package/src/CollapsableMenu/CollapsableMenu.js

@@ -12,8 +12,11 @@ export const CollapsableMenu = ({
         props: {
             ...child.props,
             onClick: () => {
-                child.props.onClick();
-                setCollapsed(true);
+                if (child.props.onClick) {
+                    child.props.onClick();
+
+                    setCollapsed(true);
+                }
             },
         },
     }));

package/src/Nodes/Storybook.js

@@ -3,7 +3,7 @@ import React, {
 } from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {
-    faCog, faArrowUp, faArrowDown, faTimes, faCompress,
+    faDesktop, faMobile, faTablet,
 } from "@fortawesome/free-solid-svg-icons";
 import {Storybook} from "../Storybook";
 import {Transforms} from "slate";
@@ -121,7 +121,16 @@ const StorybookNodeComponent = ({
                 "storybook-element-float-right": element?.attributes?.float === "right",
             })}>
             <span className={classNames({"storybook-element-component": true})}>
-                <span className="storybook-element-component-overlay" title="Klicken, um das Element zu konfigurieren" onClick={onEditClick}>Klicken, um das Element zu konfigurieren</span>
+                <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"} />
+                    </div>
+                Klicken, um das Element zu konfigurieren</span>
                 <div onClick={onEditClick}>
                     <StorybookDisplay
                         {...element.attributes}

package/src/Nodes/StorybookDisplay.js

@@ -47,7 +47,8 @@ export const StorybookDisplay = (props) => {
                     block={element.block}
                     storybookComponentLoader={storybookComponentLoader}
                     storybookComponentDataLoader={storybookComponentDataLoader}
-                    attributes={{...element.attributes}}/>
+                    attributes={{...element.attributes}}
+                    isEditor/>
             </span>
         </ErrorBoundary>;
     } else {
@@ -66,6 +67,7 @@ const BlockComponent = ({
     storybookComponentLoader,
     storybookComponentDataLoader,
     attributes,
+    isEditor,
 }) => {
     const [loadedAttributes, setLoadedAttributes] = useState(attributes);
     let [LoadedComponent, setLoadedComponent] = useState(storybookComponentLoader(block));
@@ -128,6 +130,9 @@ const BlockComponent = ({
             "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 {
         return <LoadedComponent {...loadedAttributes} />;

package/src/SidebarEditor/SidebarEditorField.js

@@ -102,8 +102,8 @@ export const SidebarEditorField = ({
                         <Switch
                             type="checkbox"
                             value={value}
+                            label={value ? "Ja" : "Nein"}
                             onClick={() => onChange(fieldKey, !value)}/>
-                        <span className="ml-2">{value ? "Ja" : "Nein"}</span>
                     </div>
                 );
             case "select":

package/src/SidebarEditor/Switch.js

@@ -4,27 +4,32 @@ import classNames from "classnames";
 export const Switch = ({
     value,
     onClick,
+    label,
+    className,
 }) => {
-    return (<>
-        <button
-            onClick={onClick}
-            type="button"
-            role="switch"
-            aria-checked="false"
-            className={classNames({
-                "bg-green-500": value,
-                "bg-gray-200": !value,
-            },
-            "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition duration-100 ease-in-out focus:outline-none")}
-        >
-            <span
-                aria-hidden="true"
+    return (
+        <div className={classNames(className, {"flex items-center": true})}>
+            <button
+                onClick={onClick}
+                type="button"
+                role="switch"
+                aria-checked="false"
                 className={classNames({
-                    "translate-x-5": value,
-                    "translate-x-0": !value,
+                    "bg-green-500": value,
+                    "bg-gray-200": !value,
                 },
-                "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition duration-100 ease-in-out")}
-            />
-        </button>
-    </>);
+                "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition duration-100 ease-in-out focus:outline-none")}
+            >
+                <span
+                    aria-hidden="true"
+                    className={classNames({
+                        "translate-x-5": value,
+                        "translate-x-0": !value,
+                    },
+                    "pointer-events-none inline-block h-5 w-5 rounded-full bg-white shadow ring-0 transition duration-100 ease-in-out")}
+                />
+            </button>
+            <span className="ml-2">{label}</span>
+        </div>
+    );
 };

package/src/SidebarEditor.js

@@ -9,6 +9,7 @@ import {ElementAutocomplete} from "./ElementAutocomplete";
 import {
     CollapsableMenu, CollapsableMenuItem,
 } from "./CollapsableMenu/CollapsableMenu";
+import {Switch} from "./SidebarEditor/Switch";
 
 const SidebarEditor = ({
     sdk,
@@ -317,6 +318,12 @@ const SidebarEditor = ({
                                                 <CollapsableMenuItem onClick={onDuplicate}>Duplizieren</CollapsableMenuItem>
                                                 <CollapsableMenuItem onClick={() => onInsert("above")}>Davor hinzufügen</CollapsableMenuItem>
                                                 <CollapsableMenuItem onClick={() => onInsert("below")}>Danach hinzufügen</CollapsableMenuItem>
+                                                <div className="px-4 pb-2 pt-1">
+                                                    <b className="mb-1 block text-sm">Responsive:</b>
+                                                    <Switch value={!storybookElement.attributes.hideOnDesktop} label="Desktop" className="mb-2" onClick={() => handleFieldValueChange("hideOnDesktop", !storybookElement.attributes.hideOnDesktop)} />
+                                                    <Switch value={!storybookElement.attributes.hideOnTablet} label="Tablet" className="mb-2" onClick={() => handleFieldValueChange("hideOnTablet", !storybookElement.attributes.hideOnTablet)} />
+                                                    <Switch value={!storybookElement.attributes.hideOnSmartphone} label="Smartphone" className="mb-2" onClick={() => handleFieldValueChange("hideOnSmartphone", !storybookElement.attributes.hideOnSmartphone)} />
+                                                </div>
                                             </CollapsableMenu>
                                         </div>
                                     )}