@vonaffenfels/slate-editor 1.0.70 → 1.0.72

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.70",
+    "version": "1.0.72",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "52dd9f4cd9125cc053694577cd2ac9d1bf0e9de3",
+    "gitHead": "4ea4a78911a1476352df5de28932c291bcc4770f",
     "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/Serializer/Serializer.js

@@ -157,6 +157,9 @@ export function Serializer({
                             "mb-16": props?.attributes?.margin?.bottom,
                             "ml-16": props?.attributes?.margin?.left,
                             "justify-center": props?.attributes?.justifyCenter,
+                            "lg:!hidden": props?.attributes?.hideOnDesktop,
+                            "sm:max-lg:!hidden": props?.attributes?.hideOnTablet,
+                            "max-sm:!hidden": props?.attributes?.hideOnSmartphone,
                             [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

@@ -4,6 +4,7 @@ import {reduceContentfulResponse} from "../util/reduceContentfulResponse";
 import {
     Asset, AssetList,
 } from "./AssetList";
+import {Switch} from "./Switch";
 
 export const SidebarEditorField = ({
     field,
@@ -97,13 +98,12 @@ export const SidebarEditorField = ({
                     }}/>;
             case "boolean":
                 return (
-                    <div>
-                        <input
-                            id={fieldKey}
+                    <div className="flex items-center">
+                        <Switch
                             type="checkbox"
-                            checked={value}
-                            onChange={e => onChange(fieldKey, e.target.checked)}/>
-                        <label htmlFor={fieldKey}>{value ? "Ja" : "Nein"}</label>
+                            value={value}
+                            label={value ? "Ja" : "Nein"}
+                            onClick={() => onChange(fieldKey, !value)}/>
                     </div>
                 );
             case "select":

package/src/SidebarEditor/Switch.js

@@ -0,0 +1,35 @@
+import React from "react";
+import classNames from "classnames";
+
+export const Switch = ({
+    value,
+    onClick,
+    label,
+    className,
+}) => {
+    return (
+        <div className={classNames(className, {"flex items-center": true})}>
+            <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"
+                    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>
                                     )}