@vonaffenfels/slate-editor 1.0.1 → 1.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.1",
+    "version": "1.0.2",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "06971175660ea52650bfb65a3d68b34a7926475e",
+    "gitHead": "ae1bfe8cfaf2732b1bc53b28cec08ea1c5d5a842",
     "publishConfig": {
         "access": "public"
     }

package/src/SidebarEditor.css

@@ -9,6 +9,7 @@
     flex-basis: 400px;
     flex-shrink: 0;
     padding: 61px 16px 16px 16px;
+    resize: horizontal;
 }
 
 select {
@@ -34,6 +35,7 @@ input[type="text"],
 input[type="number"],
 input[type="color"],
 input[type="date"],
+select,
 textarea {
     display: block;
     font-size: 0.875rem !important;
@@ -44,7 +46,7 @@ textarea {
     box-shadow: none !important;
     filter: none !important;
     width: 100% !important;
-    padding: 8px 0.75rem;
+    padding: 8px 0.75rem !important;
 }
 
 input[type="color"] {

package/src/SidebarEditor.js

@@ -83,18 +83,17 @@ const SidebarEditor = ({
 
     return (
         <div id="sidebar-editor">
-            <BlockSelect stories={storybookStories} active={storybookElement} onChange={onChange}/>
+            <div className="mb-2">
+                <div className="flex items-center">
+                    <div className="grow pr-2">
+                        <BlockSelect stories={storybookStories} active={storybookElement} onChange={onChange} className="font-bold"/>
+                    </div>
+                    {!!onClose && <div className="cursor-pointer p-1" onClick={onClose} title="Schließen"><Icon icon="Close" /></div>}
+                </div>
+            </div>
             {storybookElement?.block && (
                 <div>
-                    <div>
-                        <div className="flex">
-                            <div className="grow">
-                                <Heading>{storybookElement.block}</Heading>
-                            </div>
-                            {!!onClose && <div className="cursor-pointer p-1" onClick={onClose}><Icon icon="Close" /></div>}
-                        </div>
-                        <VariantSelect story={story} onChange={onChange}/>
-                    </div>
+                    <VariantSelect story={story} onChange={onChange} className="mb-2" />
                     <div className="flex items-center">
                         <select
                             value={storybookElement.attributes.blockWidth}
@@ -173,6 +172,7 @@ const SidebarEditor = ({
 const VariantSelect = ({
     story,
     onChange,
+    className,
 }) => {
     const stories = story?.stories?.filter(s => s.title !== story.title) || [];
 
@@ -181,7 +181,7 @@ const VariantSelect = ({
     }
 
     return <select
-        className="mt-2"
+        className={className}
         onChange={e => onChange && onChange({
             block: story.id,
             attributes: {...stories.find(s => s.title === e.target.value)?.args || {}},
@@ -197,6 +197,7 @@ const BlockSelect = ({
     stories,
     active,
     onChange,
+    className,
 }) => {
     if (!onChange) {
         return null;
@@ -216,8 +217,8 @@ const BlockSelect = ({
 
     return (
         <select
-            className="mt-2"
             onChange={e => onSelectChange(stories.find(s => s.id === e.target.value))}
+            className={className}
         >
             <option>Element wählen</option>
             {stories.map(s => (