@vonaffenfels/slate-editor 1.0.60 → 1.0.63

package/src/Toolbar/Toolbar.js

@@ -25,8 +25,7 @@ import {
     Autocomplete, Spinner,
 } from "@contentful/forma-36-react-components";
 import {Transforms} from "slate";
-
-const devMode = localStorage.getItem("dev-mode") === "true";
+import {ElementAutocomplete} from "../ElementAutocomplete";
 
 export const Portal = ({children}) => {
     return ReactDOM.createPortal(children, window.document.body);
@@ -95,6 +94,17 @@ export const Toolbar = ({
         }
     }, [hover, ref, editor]);
 
+    const handleAutocompleteChange = item => {
+        let element = {
+            children: [{text: ''}],
+            type: "storybook",
+            block: item.value,
+            attributes: {...(item?.stories?.[0]?.args || item?.stories?.[1]?.args || {})},
+        };
+
+        Transforms.insertNodes(editor, [element], {at: [lastSelection?.anchor?.path?.[0]]});
+    };
+
     function renderMenu() {
         return <Menu
             ref={ref}
@@ -149,6 +159,7 @@ export const Toolbar = ({
                             storyContext={sdk.parameters.instance.storyContext}
                             portal={portal}
                             lastSelection={lastSelection}
+                            onChange={handleAutocompleteChange}
                         />
                     </div>
                 </div>
@@ -170,87 +181,6 @@ export const Toolbar = ({
     }
 };
 
-const ElementAutocomplete = ({
-    storybookStories,
-    isLoading,
-    editor,
-    storyContext = "",
-    portal,
-    lastSelection,
-}) => {
-    const items = (storybookStories || []).map(story => {
-        let storyTitleSplit = String(story.title || "").split("/");
-
-        if (!story.id) {
-            return;
-        }
-
-        let splitStoryContext = String(storyContext || "").split(",");
-        let isItemInStoryContext = splitStoryContext.find(context => {
-            return Array.isArray(story.storyContext) ? story.storyContext.includes(context) : context === story.storyContext;
-        });
-        let isItemInPortalContext = !story.portalContext || story.portalContext.includes(portal);
-
-        if (!devMode && (!isItemInStoryContext || !isItemInPortalContext)) {
-            return;
-        }
-
-        return {
-            value: story.id.toLowerCase(),
-            label: storyTitleSplit[storyTitleSplit.length - 1],
-            stories: story.stories,
-        };
-    }).filter(Boolean);
-
-    const [filteredItems, setFilteredItems] = useState(items);
-
-    useEffect(() => {
-        setFilteredItems(items);
-    }, [storybookStories]);
-
-    const handleQueryChange = (query) => {
-        setFilteredItems(query ? items.filter((item) => item.label.toLowerCase().includes(query.toLowerCase())) : items);
-    };
-
-    const handleOnChange = (item) => {
-        let element = {
-            children: [{text: ''}],
-            type: "storybook",
-            block: item.value,
-            attributes: {...(item?.stories?.[0]?.args || item?.stories?.[1]?.args || {})},
-        };
-
-        Transforms.insertNodes(editor, [element], {at: [lastSelection?.anchor?.path?.[0]]});
-    };
-
-    useEffect(() => {
-        let autoCompleteElement = document.getElementsByClassName("element-autocomplete")[0];
-
-        if (autoCompleteElement) {
-            autoCompleteElement.value = "";
-        }
-    }, []);
-
-    return (
-        <Autocomplete
-            items={filteredItems}
-            onQueryChange={handleQueryChange}
-            isLoading={isLoading}
-            placeholder={'Element hinzufügen'}
-            emptyListMessage={'Keine Komponenten gefunden'}
-            noMatchesMessage={'Keine Ergebnisse gefunden'}
-            dropdownProps={{isFullWidth: true}}
-            maxHeight={300}
-            onChange={handleOnChange}
-            width="medium"
-        >
-            {(options) =>
-                options.map((option) => <span key={option.value}>{option.label}</span>)
-            }
-        </Autocomplete>
-    );
-};
-
 export const ToobarHoverExpandButton = ({children}) => {
     return <span
         className={