@vonaffenfels/slate-editor 1.0.31 → 1.0.33

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.31",
+    "version": "1.0.33",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "007715e3b949cf0368e7b4d70626d2931c7b7829",
+    "gitHead": "a5d858b33c49e6a1a53f90951749159b06452db5",
     "publishConfig": {
         "access": "public"
     }

package/scss/sidebarEditor.scss

@@ -37,6 +37,11 @@
         width: 100% !important;
         padding: 8px 0.75rem !important;
     }
+
+    textarea {
+        height: 42px;
+        max-height: 200px;
+    }
     
     input[type="color"] {
         padding: 4px !important;

package/src/SidebarEditor/AssetList.js

@@ -59,12 +59,6 @@ export const AssetList = ({
             return asset;
         });
 
-        console.log({
-            newAssets,
-            newAsset,
-            assets,
-        });
-
         onChange(newAssets);
     };
 
@@ -90,12 +84,12 @@ export const Asset = ({
     let mediaAssetId = asset?.fields?.media?.["en-US"]?.sys?.id || asset?.fields?.media?.["de"]?.sys?.id || asset?.fields?.media?.sys?.id;
 
     if (cloudinary) {
-        title = asset.public_id;
+        title = asset.public_id || asset.title;
     }
 
     useEffect(() => {
         if (cloudinary) {
-            setMediaUrl(asset.url);
+            setMediaUrl(asset.url || asset?.media?.url);
 
             return;
         }
@@ -161,16 +155,18 @@ export const Asset = ({
                             <IconButton size="small" onClick={() => onMoveClick("down")} disabled={index === assetsLength - 1}>↓</IconButton>
                         </div>
                     )}
-                    <IconButton
-                        size="small"
-                        className="mr-1"
-                        onClick={() => {
-                            sdk.navigator.openEntry(id, {slideIn: {waitForClose: true}}).then(({entity}) => {
-                                if (onChange) {
-                                    onChange(entity);
-                                }
-                            });
-                        }}>✎</IconButton>
+                    {!cloudinary && (
+                        <IconButton
+                            size="small"
+                            className="mr-1"
+                            onClick={() => {
+                                sdk.navigator.openEntry(id, {slideIn: {waitForClose: true}}).then(({entity}) => {
+                                    if (onChange) {
+                                        onChange(entity);
+                                    }
+                                });
+                            }}>✎</IconButton>
+                    )}
                     <IconButton size="small" onClick={onDeleteClick}>⨯</IconButton>
                 </div>
             </div>

package/src/SidebarEditor/SidebarEditorField.js

@@ -69,10 +69,21 @@ export const SidebarEditorField = ({
 
         switch (field?.control?.type) {
             case "text":
-                return <input
+                return <textarea
                     type="text"
                     value={value || ""}
-                    onChange={e => onChange(fieldKey, e.target.value)} />;
+                    onChange={e => {
+                        onChange(fieldKey, e.target.value);
+                        e.target.style.height = "5px";
+                        e.target.style.height = e.target.scrollHeight + 2 + "px";
+                    }}
+                    onBlur={(e) => {
+                        e.target.style.height = "42px";
+                    }}
+                    onFocus={e => {
+                        e.target.style.height = "5px";
+                        e.target.style.height = e.target.scrollHeight + 2 + "px";
+                    }} />;
             case "boolean":
                 return (
                     <div>
@@ -362,7 +373,7 @@ export const SidebarEditorField = ({
                                     </div>
                                 );
                             })}
-                            <button onClick={() => onChange(fieldKey, [...(storybookElement.attributes[fieldKey] || []), {}])}>Neue Zeile</button>
+                            <button className="button--secondary" onClick={() => onChange(fieldKey, [...(storybookElement.attributes[fieldKey] || []), {}])}>Neue Zeile</button>
                         </div>
                     </details>
                 );