@vonaffenfels/slate-editor 1.0.62 → 1.0.63

package/package.json

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

package/scss/sidebarEditor.scss

@@ -156,4 +156,24 @@
     .message.message--negative {
         background-color: rgba(238, 26, 26, 0.2);
     }
+
+    .collapsable-menu {
+        background-color: white !important;
+        border: 1px solid #cfd9e0 !important;
+        border-radius: 6px;
+        z-index: 2;
+        overflow: hidden;
+    }
+
+    .collapsable-menu-item {
+        color: rgb(90, 101, 124) !important;
+    }
+
+    .collapsable-menu-item:not(.disabled):hover {
+        background-color: rgb(248, 248, 248) !important;
+    }
+
+    .collapsable-menu-item:not(.disabled):active {
+        background-color: rgb(237, 237, 237) !important;
+    }
 }

package/src/BlockEditor.js

@@ -93,32 +93,6 @@ export default function BlockEditor({
         loadStories();
     }, []);
 
-    const handleKeyDown = (e) => {
-        let keyCode = e.keyCode || e.which;
-
-        switch (keyCode) {
-            case 46: // delete
-            case 8: // backspace
-                handleSidebarDeleteClick();
-                break;
-            case 27: // escape
-                handleSidebarClose();
-                break;
-            default:
-                return;
-        }
-    };
-
-    useEffect(() => {
-        if (selectedStorybookElement) {
-            window.addEventListener("keydown", handleKeyDown);
-        } else {
-            window.removeEventListener("keydown", handleKeyDown);
-        }
-
-        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [selectedStorybookElement]);
-
     const resetEditor = () => {
         if (confirm("This action will delete all data in the editor, are you sure?")) {
             onChange(emptyValue);

package/src/CollapsableMenu/CollapsableMenu.js

@@ -0,0 +1,46 @@
+import {useState} from "react";
+
+export const CollapsableMenu = ({
+    button,
+    children,
+    ...props
+}) => {
+    const [collapsed, setCollapsed] = useState(true);
+
+    children = children.map(child => ({
+        ...child,
+        props: {
+            ...child.props,
+            onClick: () => {
+                child.props.onClick();
+                setCollapsed(true);
+            },
+        },
+    }));
+
+    return (
+        <div className="relative">
+            <div className="relative">
+                <div onClick={() => setCollapsed(!collapsed)}>
+                    {button}
+                </div>
+            </div>
+            {!collapsed && (
+                <div className="collapsable-menu absolute right-0 mt-2 w-52">
+                    {children}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export const CollapsableMenuItem = ({
+    children,
+    onClick,
+}) => {
+    return (
+        <div className="collapsable-menu-item cursor-pointer px-4 py-2" onClick={onClick}>
+            {children}
+        </div>
+    );
+};

package/src/SidebarEditor.js

@@ -1,13 +1,14 @@
 import {
-    Fragment, useState, useEffect,
+    useState, useEffect,
 } from "react";
 import {SidebarEditorField} from "./SidebarEditor/SidebarEditorField";
 import {ToolMargin} from "./Tools/Margin";
 import "../scss/sidebarEditor.scss";
 import {Spinner} from "@contentful/forma-36-react-components";
 import {ElementAutocomplete} from "./ElementAutocomplete";
-
-const devMode = localStorage.getItem("dev-mode") === "true";
+import {
+    CollapsableMenu, CollapsableMenuItem,
+} from "./CollapsableMenu/CollapsableMenu";
 
 const SidebarEditor = ({
     sdk,
@@ -229,9 +230,14 @@ const SidebarEditor = ({
                                         ↓
                                                 </IconButton>
                                             </div>
-                                            <IconButton title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
+                                            <IconButton title="Löschen" className="mr-1" onClick={() => onDelete && onDelete(storybookElement)}>
                                 🗑
                                             </IconButton>
+                                            <CollapsableMenu button={<IconButton title="Funktionen">…</IconButton>}>
+                                                <CollapsableMenuItem onClick={onDuplicate}>Duplizieren</CollapsableMenuItem>
+                                                <CollapsableMenuItem onClick={() => onInsert("above")}>Davor hinzufügen</CollapsableMenuItem>
+                                                <CollapsableMenuItem onClick={() => onInsert("below")}>Danach hinzufügen</CollapsableMenuItem>
+                                            </CollapsableMenu>
                                         </div>
                                     )}
                                 </div>
@@ -241,13 +247,6 @@ const SidebarEditor = ({
                         </div>
                         <div className="grow overflow-y-auto pr-2 pt-2">
                             {renderTitle()}
-                            <div className="mb-2">
-                                <button className="button button--tertiary" onClick={onDuplicate}>Duplizieren</button>
-                            </div>
-                            <div className="mb-2 flex">
-                                <button className="button button--tertiary mr-1" onClick={() => onInsert("above")}>Davor hinzufügen</button>
-                                <button className="button button--tertiary ml-1" onClick={() => onInsert("below")}>Danach hinzufügen</button>
-                            </div>
                             <div className="mb-2">
                                 <ElementAutocomplete
                                     isLoading={isLoading}
@@ -330,6 +329,7 @@ export const IconButton = ({
     disabled,
     size = "medium",
     className,
+    onClick = () => {},
     ...props
 }) => {
     let classNames = "icon-button cursor-pointer select-none !p-1";
@@ -355,7 +355,7 @@ export const IconButton = ({
     }
 
     return (
-        <div className={classNames} {...props}>
+        <div className={classNames} onClick={onClick} {...props}>
             {children}
         </div>
     );