@vonaffenfels/slate-editor 1.0.41 → 1.0.44

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.41",
+    "version": "1.0.44",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "1ad8ddd858ff27ea19e568d79f189f20a2ef0488",
+    "gitHead": "9bcbf3b9b1002d4d41a6d23fb3ab6b567fc1de4f",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -390,7 +390,7 @@
   }
 }
 
-button {
+.button {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
   width: 100%;
   padding: 8px 0.75rem !important;
@@ -402,15 +402,15 @@ button {
   border-radius: 4px !important;
 }
 
-button:hover {
+.button:hover {
   background-color: #0275F0 !important;
 }
 
-button:active {
+.button:active {
   background-color: #0262C9 !important;
 }
 
-button.button--secondary {
+.button.button--secondary {
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
   width: 100%;
   padding: 8px 0.75rem !important;
@@ -422,12 +422,12 @@ button.button--secondary {
   border-radius: 4px !important;
 }
 
-button.button--secondary:hover {
+.button.button--secondary:hover {
   background-color: #036fe3 !important;
   color: #FFFFFF !important;
 }
 
-button.button--secondary:active {
+.button.button--secondary:active {
   background-color: #0262C9 !important;
   color: #FFFFFF !important;
 }

package/scss/sidebarEditor.scss

@@ -60,7 +60,7 @@
     
     input[type="radio"],
     input[type="checkbox"] {
-        margin-right: 4px;
+        margin-right: 8px;
     }
 
     option[disabled] {

package/src/BlockEditor.js

@@ -67,14 +67,14 @@ export default function BlockEditor({
     ];
 
     const [loadedStorybookStories, setLoadedStorybookStories] = useState([]);
-    const [isSidebarLoading, setIsSidebarLoading] = useState(false);
+    const [isLoadingStories, setIsLoadingStories] = useState(false);
 
     const loadStories = async () => {
-        setIsSidebarLoading(true);
+        setIsLoadingStories(true);
 
         let loadedStories = await storybookStories();
 
-        setIsSidebarLoading(false);
+        setIsLoadingStories(false);
 
         setLoadedStorybookStories(loadedStories);
     };
@@ -218,6 +218,17 @@ export default function BlockEditor({
         }
 
         try {
+            editor.selection = {
+                anchor: {
+                    offset: 0,
+                    path,
+                },
+                focus: {
+                    offset: 0,
+                    path,
+                },
+            };
+
             Transforms.moveNodes(editor, {
                 from: [path[0]],
                 match: node => {
@@ -252,7 +263,13 @@ export default function BlockEditor({
                     onChange={onSlateChange}
                 >
                     <div>
-                        <Toolbar hover={false} onSaveClick={onSaveClick}/>
+                        <Toolbar
+                            hover={false}
+                            onSaveClick={onSaveClick}
+                            storybookStories={loadedStorybookStories}
+                            isLoadingStories={isLoadingStories}
+                            editor={editor}
+                            sdk={contentfulSdk}/>
                     </div>
                     <div className="relative h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
                         {isLoading && (
@@ -290,7 +307,7 @@ export default function BlockEditor({
                 storybookElement={selectedStorybookElement}
                 onChange={handleSidebarEditorChange}
                 storybookStories={loadedStorybookStories}
-                isLoading={isSidebarLoading}
+                isLoading={isLoadingStories}
                 onClose={handleSidebarClose}
                 onDelete={handleSidebarDeleteClick}
                 onMove={handleSidebarMoveClick}

package/src/SidebarEditor/AssetList.js

@@ -26,7 +26,7 @@ export const AssetList = ({
                 onChange={handleChange}
             />
             <hr className="my-2" style={{borderColor: "#cfd9e0"}}/>
-            {onAddClick && index === assets.length - 1 && <button onClick={onAddClick} className="button--secondary">Hinzufügen</button>}
+            {onAddClick && index === assets.length - 1 && <button onClick={onAddClick} className="button button--secondary">Hinzufügen</button>}
         </>
     ));
 

package/src/SidebarEditor/SidebarEditorField.js

@@ -88,9 +88,11 @@ export const SidebarEditorField = ({
                 return (
                     <div>
                         <input
+                            id={fieldKey}
                             type="checkbox"
                             checked={value}
                             onChange={e => onChange(fieldKey, e.target.checked)} />
+                        <label htmlFor={fieldKey}>{value ? "Ja" : "Nein"}</label>
                     </div>
                 );
             case "select":
@@ -243,6 +245,7 @@ export const SidebarEditorField = ({
                     <>
                         {!!value && <div className="mb-2"><Asset sdk={sdk} asset={value} onDeleteClick={() => onChange(fieldKey, null)} onChange={v => onChange(fieldKey, v)} /></div>}
                         <button
+                            className="button"
                             onClick={() => {
                                 sdk.dialogs.selectSingleEntry({contentTypes: field.control.contentTypes}).then(content => {
                                     onChange(fieldKey, content);
@@ -271,6 +274,7 @@ export const SidebarEditorField = ({
                             </details>
                         )}
                         <button
+                            className="button"
                             onClick={() => {
                                 sdk.dialogs.selectMultipleEntries({contentTypes: field.control.contentTypes}).then(contents => {
                                     onChange(fieldKey, contents);
@@ -284,6 +288,7 @@ export const SidebarEditorField = ({
                     <>
                         {!!value && <div className="mb-2"><Asset cloudinary sdk={sdk} asset={value} onDeleteClick={() => onChange(fieldKey, null)} /></div>}
                         <button
+                            className="button"
                             onClick={() => {
                                 sdk.dialogs.openCurrentApp({
                                     width: "fullWidth",
@@ -328,6 +333,7 @@ export const SidebarEditorField = ({
                             </details>
                         )}
                         <button
+                            className="button"
                             onClick={() => {
                                 sdk.dialogs.openCurrentApp({
                                     width: "fullWidth",
@@ -384,7 +390,7 @@ export const SidebarEditorField = ({
                                     </div>
                                 );
                             })}
-                            <button className="button--secondary" onClick={() => onChange(fieldKey, [...(storybookElement.attributes[fieldKey] || []), {}])}>Neue Zeile</button>
+                            <button className="button button--secondary" onClick={() => onChange(fieldKey, [...(storybookElement.attributes[fieldKey] || []), {}])}>Neue Zeile</button>
                         </div>
                     </details>
                 );

package/src/Toolbar/Toolbar.js

@@ -21,6 +21,12 @@ import {StorybookButton} from "./Element";
 import {LinkButton} from "./Link";
 import {InsertDividerButton} from "./Insert";
 import {InsertGridButton} from "./Layout";
+import {
+    Autocomplete, Spinner,
+} from "@contentful/forma-36-react-components";
+import {Transforms} from "slate";
+
+const devMode = localStorage.getItem("dev-mode") === "true";
 
 export const Portal = ({children}) => {
     return ReactDOM.createPortal(children, window.document.body);
@@ -29,9 +35,12 @@ export const Portal = ({children}) => {
 export const Toolbar = ({
     hover,
     onSaveClick,
+    storybookStories,
+    isLoadingStories,
+    editor,
+    sdk,
 }) => {
     const ref = useRef();
-    const editor = useSlate();
 
     useEffect(() => {
         if (!hover) {
@@ -93,39 +102,50 @@ export const Toolbar = ({
             })}
         >
             <div className="toolbar-btns">
-                <div className="flex grow">
-                    <FormatButtonBold/>
-                    <FormatButtonItalic/>
-                    <FormatButtonUnderline/>
-                    <FormatButtonStrikethrough/>
-
-                    <LinkButton/>
-
-                    <ToobarHoverExpandButton>
-                        <BlockButtonHeading level={2}/>
-                        <BlockButtonHeading level={3}/>
-                        <BlockButtonHeading level={4}/>
-                    </ToobarHoverExpandButton>
-
-                    <ToobarHoverExpandButton>
-                        <BlockButtonUnorderedList/>
-                        <BlockButtonOrderedList/>
-                        <BlockButtonArrowList/>
-                    </ToobarHoverExpandButton>
-
-                    <BlockButtonBlockquote/>
-
-                    <ToobarHoverExpandButton>
-                        <AlignButtonLeft/>
-                        <AlignButtonCenter/>
-                        <AlignButtonRight/>
-                    </ToobarHoverExpandButton>
-
-                    <ToobarHoverExpandButton>
-                        <StorybookButton/>
-                        <InsertDividerButton/>
-                        <InsertGridButton/>
-                    </ToobarHoverExpandButton>
+                <div className="flex grow items-center">
+                    <div className="flex">
+                        <FormatButtonBold/>
+                        <FormatButtonItalic/>
+                        <FormatButtonUnderline/>
+                        <FormatButtonStrikethrough/>
+
+                        <LinkButton/>
+
+                        <ToobarHoverExpandButton>
+                            <BlockButtonHeading level={2}/>
+                            <BlockButtonHeading level={3}/>
+                            <BlockButtonHeading level={4}/>
+                        </ToobarHoverExpandButton>
+
+                        <ToobarHoverExpandButton>
+                            <BlockButtonUnorderedList/>
+                            <BlockButtonOrderedList/>
+                            <BlockButtonArrowList/>
+                        </ToobarHoverExpandButton>
+
+                        <BlockButtonBlockquote/>
+
+                        <ToobarHoverExpandButton>
+                            <AlignButtonLeft/>
+                            <AlignButtonCenter/>
+                            <AlignButtonRight/>
+                        </ToobarHoverExpandButton>
+
+                        <ToobarHoverExpandButton>
+                            <StorybookButton/>
+                            <InsertDividerButton/>
+                            <InsertGridButton/>
+                        </ToobarHoverExpandButton>
+                    </div>
+
+                    <div>
+                        <ElementAutocomplete
+                            isLoading={isLoadingStories}
+                            storybookStories={storybookStories}
+                            editor={editor}
+                            storyContext={sdk.parameters.instance.storyContext}
+                        />
+                    </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>}
             </div>
@@ -143,6 +163,84 @@ export const Toolbar = ({
     }
 };
 
+const ElementAutocomplete = ({
+    storybookStories,
+    isLoading,
+    editor,
+    storyContext,
+}) => {
+    const [filteredItems, setFilteredItems] = React.useState(items);
+
+    const items = (storybookStories || []).map(story => {
+        let storyTitleSplit = story.title.split("/");
+
+        if (!story.id) {
+            return;
+        }
+
+        let splitStoryContext = 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);
+
+    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={'Suchen...'}
+            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={