@vonaffenfels/slate-editor 1.0.30 → 1.0.33

package/package.json

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

package/scss/sidebarEditor.scss

@@ -17,7 +17,7 @@
     }
     
     label {
-        margin: 0 0 6px 0 !important;
+        margin: 0 0 2px 0 !important;
     }
     
     input[type="text"],
@@ -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>
                 );

package/src/SidebarEditor.js

@@ -8,6 +8,8 @@ import "../scss/sidebarEditor.scss";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faSpinner} from "@fortawesome/free-solid-svg-icons";
 
+const devMode = localStorage.getItem("dev-mode") === "true";
+
 const SidebarEditor = ({
     sdk,
     storybookElement,
@@ -169,7 +171,7 @@ const SidebarEditor = ({
     return (
         <div id="sidebar-editor">
             {isLoading ? (
-                <div className="text-center">
+                <div className="flex h-full items-center justify-center">
                     <FontAwesomeIcon icon={faSpinner} pulse />
                 </div>
             ) : (
@@ -208,7 +210,11 @@ const SidebarEditor = ({
                     </div>
                     <div className="grow overflow-y-auto pr-2 pt-2">
                         <div className="mb-2">
-                            <BlockSelect stories={storybookStories} active={storybookElement} onChange={handleBlockSelectChange} />
+                            <BlockSelect
+                                stories={storybookStories}
+                                active={storybookElement}
+                                onChange={handleBlockSelectChange}
+                                storyContext={sdk.parameters.instance.storyContext} />
                         </div>
                         {storybookElement?.block && (
                             <div>
@@ -362,6 +368,7 @@ const BlockSelect = ({
     active,
     onChange,
     className,
+    storyContext,
 }) => {
     if (!onChange) {
         return null;
@@ -388,7 +395,12 @@ const BlockSelect = ({
                 return;
             }
 
-            if (item.storyContext === "development" || (Array.isArray(item.storyContext) && item.storyContext.includes("development"))) {
+            let splitStoryContext = storyContext.split(",");
+            let isItemInContext = splitStoryContext.find(context => {
+                return Array.isArray(item.storyContext) ? item.storyContext.includes(context) : context === item.storyContext;
+            });
+
+            if (!devMode && !isItemInContext) {
                 return;
             }