@vonaffenfels/slate-editor 1.0.33 → 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.33",
+    "version": "1.0.34",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "a5d858b33c49e6a1a53f90951749159b06452db5",
+    "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);
     }
     

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/SidebarEditorField.js

@@ -134,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 (

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>
             ) : (
                 <>