@vonaffenfels/slate-editor 1.0.59 → 1.0.62

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);
@@ -39,9 +38,12 @@ export const Toolbar = ({
     isLoadingStories,
     editor,
     sdk,
+    lastSelection,
 }) => {
     const ref = useRef();
 
+    const portal = sdk?.entry?.fields?.portal.getValue();
+
     useEffect(() => {
         if (!hover) {
             return;
@@ -92,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}
@@ -144,6 +157,9 @@ export const Toolbar = ({
                             storybookStories={storybookStories}
                             editor={editor}
                             storyContext={sdk.parameters.instance.storyContext}
+                            portal={portal}
+                            lastSelection={lastSelection}
+                            onChange={handleAutocompleteChange}
                         />
                     </div>
                 </div>
@@ -165,84 +181,6 @@ export const Toolbar = ({
     }
 };
 
-const ElementAutocomplete = ({
-    storybookStories,
-    isLoading,
-    editor,
-    storyContext = "",
-}) => {
-    const items = (storybookStories || []).map(story => {
-        let storyTitleSplit = String(story.title || "").split("/");
-
-        if (!story.id) {
-            return;
-        }
-
-        let splitStoryContext = String(storyContext || "").split(",");
-        let isItemInContext = splitStoryContext.find(context => {
-            return Array.isArray(story.storyContext) ? story.storyContext.includes(context) : context === story.storyContext;
-        });
-
-        if (!devMode && !isItemInContext) {
-            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]);
-    };
-
-    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={

package/storyLoader.js

@@ -19,6 +19,7 @@ module.exports = async function storiesLoader() {
             story.id = baseStory.id;
             story.argTypes = baseStory.argTypes;
             story.storyContext = baseStory.storyContext;
+            story.portalContext = baseStory.portalContext;
             story.title = baseStory.title;
             story.stories = [
                 {