@vonaffenfels/slate-editor 1.0.30 → 1.0.31

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.30",
+    "version": "1.0.31",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "fe88a0b3ce82331fa3d7193a4cd62b8e2c8ecfb9",
+    "gitHead": "007715e3b949cf0368e7b4d70626d2931c7b7829",
     "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"],

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;
             }