@vonaffenfels/slate-editor 1.0.31 → 1.0.34

package/dist/index.js.LICENSE.txt

@@ -4,6 +4,30 @@
 	http://jedwatson.github.io/classnames
 */
 
+/*!
+  Copyright (c) 2015 Jed Watson.
+  Based on code that is Copyright 2013-2015, Facebook, Inc.
+  All rights reserved.
+*/
+
+/*!
+  Copyright (c) 2018 Jed Watson.
+  Licensed under the MIT License (MIT), see
+  http://jedwatson.github.io/classnames
+*/
+
+/*!
+ * Adapted from jQuery UI core
+ *
+ * http://jqueryui.com
+ *
+ * Copyright 2014 jQuery Foundation and other contributors
+ * Released under the MIT license.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/category/ui-core/
+ */
+
 /*!
  * Font Awesome Free 5.15.4 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
@@ -34,3 +58,12 @@
 /*! https://mths.be/esrever v0.2.0 by @mathias */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.31",
+    "version": "1.0.34",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "007715e3b949cf0368e7b4d70626d2931c7b7829",
+    "gitHead": "09afee2ada365a370687380dbcb426fdb6e4d51f",
     "publishConfig": {
         "access": "public"
     }

package/scss/sidebarEditor.scss

@@ -12,7 +12,7 @@
         font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
     }
     
-    p, label, b {
+    p, label, b, span {
         color: rgb(90, 101, 124);
     }
     
@@ -37,6 +37,11 @@
         width: 100% !important;
         padding: 8px 0.75rem !important;
     }
+
+    textarea {
+        height: 42px;
+        max-height: 200px;
+    }
     
     input[type="color"] {
         padding: 4px !important;

package/src/BlockEditor.js

@@ -170,6 +170,7 @@ export default function BlockEditor({
             isEmpty: false,
             isInline: selectedStorybookElement.isInline,
             attributes: newStorybookElement.attributes,
+            type: "storybook",
         };
 
         Transforms.setNodes(editor, newNodeProps, {at: selectedStorybookElement.path});

package/src/Nodes/StorybookDisplay.js

@@ -68,15 +68,7 @@ const BlockComponent = ({
     attributes,
 }) => {
     const [loadedAttributes, setLoadedAttributes] = useState(attributes);
-    let LoadedComponent = storybookComponentLoader(block);
-
-    if (!LoadedComponent) {
-        LoadedComponent = EmptyBlock;
-    } else {
-        if (!LoadedComponent.displayName) {
-            LoadedComponent.displayName = block;
-        }
-    }
+    let [LoadedComponent, setLoadedComponent] = useState(storybookComponentLoader(block));
 
     useEffect(() => {
         const loadData = async () => {
@@ -97,10 +89,26 @@ const BlockComponent = ({
             }
         });
 
+        let loadedComponent = storybookComponentLoader(block);
+
+        setLoadedAttributes({...attributes});
+
+        setLoadedComponent(loadedComponent);
+
+        console.log({loadedAttributes});
+
         return () => {
             mounted = false;
         };
-    }, [attributes, block, storybookComponentDataLoader]);
+    }, [attributes, block, storybookComponentDataLoader, storybookComponentLoader]);
+
+    if (!LoadedComponent) {
+        LoadedComponent = EmptyBlock;
+    } else {
+        if (!LoadedComponent.displayName) {
+            LoadedComponent.displayName = block;
+        }
+    }
 
     if (loadedAttributes.blockWidth || loadedAttributes.margin) {
         return <span className={classNames({

package/src/SidebarEditor/AssetList.js

@@ -59,12 +59,6 @@ export const AssetList = ({
             return asset;
         });
 
-        console.log({
-            newAssets,
-            newAsset,
-            assets,
-        });
-
         onChange(newAssets);
     };
 
@@ -90,12 +84,12 @@ export const Asset = ({
     let mediaAssetId = asset?.fields?.media?.["en-US"]?.sys?.id || asset?.fields?.media?.["de"]?.sys?.id || asset?.fields?.media?.sys?.id;
 
     if (cloudinary) {
-        title = asset.public_id;
+        title = asset.public_id || asset.title;
     }
 
     useEffect(() => {
         if (cloudinary) {
-            setMediaUrl(asset.url);
+            setMediaUrl(asset.url || asset?.media?.url);
 
             return;
         }
@@ -161,16 +155,18 @@ export const Asset = ({
                             <IconButton size="small" onClick={() => onMoveClick("down")} disabled={index === assetsLength - 1}>↓</IconButton>
                         </div>
                     )}
-                    <IconButton
-                        size="small"
-                        className="mr-1"
-                        onClick={() => {
-                            sdk.navigator.openEntry(id, {slideIn: {waitForClose: true}}).then(({entity}) => {
-                                if (onChange) {
-                                    onChange(entity);
-                                }
-                            });
-                        }}>✎</IconButton>
+                    {!cloudinary && (
+                        <IconButton
+                            size="small"
+                            className="mr-1"
+                            onClick={() => {
+                                sdk.navigator.openEntry(id, {slideIn: {waitForClose: true}}).then(({entity}) => {
+                                    if (onChange) {
+                                        onChange(entity);
+                                    }
+                                });
+                            }}>✎</IconButton>
+                    )}
                     <IconButton size="small" onClick={onDeleteClick}>⨯</IconButton>
                 </div>
             </div>

package/src/SidebarEditor/SidebarEditorField.js

@@ -69,10 +69,21 @@ export const SidebarEditorField = ({
 
         switch (field?.control?.type) {
             case "text":
-                return <input
+                return <textarea
                     type="text"
                     value={value || ""}
-                    onChange={e => onChange(fieldKey, e.target.value)} />;
+                    onChange={e => {
+                        onChange(fieldKey, e.target.value);
+                        e.target.style.height = "5px";
+                        e.target.style.height = e.target.scrollHeight + 2 + "px";
+                    }}
+                    onBlur={(e) => {
+                        e.target.style.height = "42px";
+                    }}
+                    onFocus={e => {
+                        e.target.style.height = "5px";
+                        e.target.style.height = e.target.scrollHeight + 2 + "px";
+                    }} />;
             case "boolean":
                 return (
                     <div>
@@ -123,7 +134,21 @@ export const SidebarEditorField = ({
                 return (
                     <textarea
                         value={typeof value === "object" ? JSON.stringify(value, null, 2) || "" : value}
-                        onChange={e => onChange(fieldKey, isJson(e.target.value) ? JSON.parse(e.target.value) : e.target.value)} />
+                        onChange={e => {
+                            if (isJson(e.target.value)) {
+                                onChange(fieldKey, JSON.parse(e.target.value));
+                            }
+
+                            e.target.style.height = "5px";
+                            e.target.style.height = e.target.scrollHeight + 2 + "px";
+                        }}
+                        onBlur={(e) => {
+                            e.target.style.height = "42px";
+                        }}
+                        onFocus={e => {
+                            e.target.style.height = "5px";
+                            e.target.style.height = e.target.scrollHeight + 2 + "px";
+                        }} />
                 );
             case "radio":
                 return (
@@ -362,7 +387,7 @@ export const SidebarEditorField = ({
                                     </div>
                                 );
                             })}
-                            <button onClick={() => onChange(fieldKey, [...(storybookElement.attributes[fieldKey] || []), {}])}>Neue Zeile</button>
+                            <button className="button--secondary" onClick={() => onChange(fieldKey, [...(storybookElement.attributes[fieldKey] || []), {}])}>Neue Zeile</button>
                         </div>
                     </details>
                 );

package/src/SidebarEditor.js

@@ -7,6 +7,7 @@ import {ToolMargin} from "./Tools/Margin";
 import "../scss/sidebarEditor.scss";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {faSpinner} from "@fortawesome/free-solid-svg-icons";
+import {Spinner} from "@contentful/forma-36-react-components";
 
 const devMode = localStorage.getItem("dev-mode") === "true";
 
@@ -171,8 +172,9 @@ const SidebarEditor = ({
     return (
         <div id="sidebar-editor">
             {isLoading ? (
-                <div className="flex h-full items-center justify-center">
-                    <FontAwesomeIcon icon={faSpinner} pulse />
+                <div className="flex h-full flex-col items-center justify-center">
+                    <Spinner />
+                    <span className="mt-2">Elemente werden geladen</span>
                 </div>
             ) : (
                 <>