@vonaffenfels/slate-editor 1.0.49 → 1.0.53

package/src/Toolbar/Toolbar.js

@@ -90,7 +90,7 @@ export const Toolbar = ({
             el.removeAttribute('style');
             el.classList.remove("active");
         }
-    });
+    }, [hover, ref, editor]);
 
     function renderMenu() {
         return <Menu
@@ -147,7 +147,9 @@ export const Toolbar = ({
                         />
                     </div>
                 </div>
-                {!!onSaveClick && <button className="!w-auto !border-0 !bg-green-600 !text-xs font-bold text-white hover:!bg-green-700" onClick={onSaveClick}>Änderungen speichern</button>}
+                {!!onSaveClick && <button
+                    className="!w-auto !border-0 !bg-green-600 !text-xs font-bold text-white hover:!bg-green-700"
+                    onClick={onSaveClick}>Änderungen speichern</button>}
             </div>
         </Menu>;
     }
@@ -167,18 +169,16 @@ const ElementAutocomplete = ({
     storybookStories,
     isLoading,
     editor,
-    storyContext,
+    storyContext = "",
 }) => {
-    const [filteredItems, setFilteredItems] = React.useState(items);
-
     const items = (storybookStories || []).map(story => {
-        let storyTitleSplit = story.title.split("/");
+        let storyTitleSplit = String(story.title || "").split("/");
 
         if (!story.id) {
             return;
         }
 
-        let splitStoryContext = storyContext.split(",");
+        let splitStoryContext = String(storyContext || "").split(",");
         let isItemInContext = splitStoryContext.find(context => {
             return Array.isArray(story.storyContext) ? story.storyContext.includes(context) : context === story.storyContext;
         });
@@ -194,6 +194,8 @@ const ElementAutocomplete = ({
         };
     }).filter(Boolean);
 
+    const [filteredItems, setFilteredItems] = useState(items);
+
     useEffect(() => {
         setFilteredItems(items);
     }, [storybookStories]);
@@ -226,7 +228,7 @@ const ElementAutocomplete = ({
             items={filteredItems}
             onQueryChange={handleQueryChange}
             isLoading={isLoading}
-            placeholder={'Suchen...'}
+            placeholder={'Element hinzufügen'}
             emptyListMessage={'Keine Komponenten gefunden'}
             noMatchesMessage={'Keine Ergebnisse gefunden'}
             dropdownProps={{isFullWidth: true}}

package/src/index.js

@@ -1,3 +1,5 @@
+import "../scss/editor.scss";
+
 import BlockEditor from "./BlockEditor";
 import Renderer from "./Renderer";
 import {HtmlSerializer} from "./Serializer";

package/storyLoader.js

@@ -8,6 +8,7 @@ module.exports = async function storiesLoader() {
         globs: ["**/*.stories.js", "**/*.stories.jsx", "**/*.stories.ts"],
     });
 
+    this.addContextDependency(options.storiesRoot);
     console.log(`Found ${files.length} stories in ${options.storiesRoot}`);
 
     return `

package/webpack.config.build.js

@@ -4,6 +4,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 config.externals = {
     react: "react",
+    next: "next",
     "react-dom": "react-dom",
     "prop-types": "prop-types",
 };

package/webpack.config.watch.js

@@ -0,0 +1,5 @@
+const config = require("./webpack.config.build");
+
+config.mode = "development";
+
+module.exports = config;