@vonaffenfels/slate-editor 1.0.59 → 1.0.60

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.59",
+    "version": "1.0.60",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "45e9d0390c7c19fbfa54c8bf9c3cef5a076e4198",
+    "gitHead": "82ea53774b0e6a0f904cfaaca038bf0eda00af8e",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -259,8 +259,8 @@
 
   .layout-slot-option-padding {
     position: relative;
-    width: 1.5em;
-    height: 1.5em;
+    width: 26px;
+    height: 26px;
     display: inline-block;
 
     .layout-slot-option-padding-item {

package/src/BlockEditor.js

@@ -77,6 +77,7 @@ export default function BlockEditor({
 
     const [loadedStorybookStories, setLoadedStorybookStories] = useState([]);
     const [isLoadingStories, setIsLoadingStories] = useState(false);
+    const [lastSelection, setLastSelection] = useState(null);
 
     const loadStories = async () => {
         setIsLoadingStories(true);
@@ -99,6 +100,10 @@ export default function BlockEditor({
     };
 
     const onSlateChange = (newValue) => {
+        if (editor.selection) {
+            setLastSelection(editor.selection);
+        }
+
         if (newValue.length > 0) {
             onChange(newValue);
         } else {
@@ -286,7 +291,8 @@ export default function BlockEditor({
                                 storybookStories={loadedStorybookStories}
                                 isLoadingStories={isLoadingStories}
                                 editor={editor}
-                                sdk={contentfulSdk}/>
+                                sdk={contentfulSdk}
+                                lastSelection={lastSelection}/>
                         </div>
                         <div className="relative h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
                             {isLoading && (

package/src/SidebarEditor/SidebarEditorField.js

@@ -55,7 +55,7 @@ export const SidebarEditorField = ({
             ));
         } else {
             return Object.keys(field.control.options).map(key => (
-                <option key={`select-option-${key}`} value={field.control.options[key]}>{field.control.options[key]}</option>
+                <option key={`select-option-${key}`} value={field.control.options[key]}>{key}</option>
             ));
         }
     };

package/src/SidebarEditor.js

@@ -181,6 +181,11 @@ const SidebarEditor = ({
                                 <div className="grow">
                                     {storybookElement?.block && (
                                         <div className="flex items-center">
+                                            <div className="mr-1 flex items-center">
+                                                <ToolMargin
+                                                    margin={storybookElement.attributes.margin}
+                                                    onChange={value => handleFieldValueChange("margin", value)} />
+                                            </div>
                                             <div className="icon-button-group mr-1">
                                                 <IconButton title="Rückgängig" onClick={undo} disabled={currentVersion <= 1}>↺</IconButton>
                                                 <IconButton title="Wiederherstellen" onClick={redo} disabled={currentVersion >= versionCount || versionCount === 0}>↻</IconButton>
@@ -196,15 +201,10 @@ const SidebarEditor = ({
                                             <IconButton title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
                                 🗑
                                             </IconButton>
-                                            <div className="ml-1 flex items-center">
-                                                <ToolMargin
-                                                    margin={storybookElement.attributes.margin}
-                                                    onChange={value => handleFieldValueChange("margin", value)} />
-                                            </div>
                                         </div>
                                     )}
                                 </div>
-                                {!!onClose && <IconButton onClick={onClose} title="Schließen">⨯</IconButton>}
+                                {!!onClose && <IconButton size="big" onClick={onClose} title="Schließen">⨯</IconButton>}
                             </div>
                             <hr className="mt-2" style={{borderColor: "#cfd9e0"}}/>
                         </div>
@@ -299,11 +299,14 @@ export const IconButton = ({
 
     switch (size) {
         case "small":
-            classNames += " !text-xs min-w-[28px]";
+            classNames += " !text-xs min-w-[28px] max-h-[28px]";
+            break;
+        case "big":
+            classNames += " !text-xl min-w-[32px] max-h-[28px] !leading-[18px]";
             break;
         case "medium":
         default:
-            classNames += " !text-sm min-w-[32px]";
+            classNames += " !text-sm min-w-[32px] max-h-[28px]";
     }
 
     return (

package/src/Toolbar/Toolbar.js

@@ -39,9 +39,12 @@ export const Toolbar = ({
     isLoadingStories,
     editor,
     sdk,
+    lastSelection,
 }) => {
     const ref = useRef();
 
+    const portal = sdk?.entry?.fields?.portal.getValue();
+
     useEffect(() => {
         if (!hover) {
             return;
@@ -144,6 +147,8 @@ export const Toolbar = ({
                             storybookStories={storybookStories}
                             editor={editor}
                             storyContext={sdk.parameters.instance.storyContext}
+                            portal={portal}
+                            lastSelection={lastSelection}
                         />
                     </div>
                 </div>
@@ -170,6 +175,8 @@ const ElementAutocomplete = ({
     isLoading,
     editor,
     storyContext = "",
+    portal,
+    lastSelection,
 }) => {
     const items = (storybookStories || []).map(story => {
         let storyTitleSplit = String(story.title || "").split("/");
@@ -179,11 +186,12 @@ const ElementAutocomplete = ({
         }
 
         let splitStoryContext = String(storyContext || "").split(",");
-        let isItemInContext = splitStoryContext.find(context => {
+        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 && !isItemInContext) {
+        if (!devMode && (!isItemInStoryContext || !isItemInPortalContext)) {
             return;
         }
 
@@ -212,7 +220,7 @@ const ElementAutocomplete = ({
             attributes: {...(item?.stories?.[0]?.args || item?.stories?.[1]?.args || {})},
         };
 
-        Transforms.insertNodes(editor, [element]);
+        Transforms.insertNodes(editor, [element], {at: [lastSelection?.anchor?.path?.[0]]});
     };
 
     useEffect(() => {

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 = [
                 {