@vonaffenfels/slate-editor 1.1.48 → 1.1.50

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.1.48",
+    "version": "1.1.50",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -72,7 +72,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "68c4f7e68c395df48a22103e83988f674df3474d",
+    "gitHead": "0cede70748584b53424ae59e9d81271db780745c",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -11,7 +11,7 @@
   max-width: 100%;
   width: 100%;
 
-  .slate-editor-element-selected {
+  .slate-editor-element-selected:not(.storybook-element-missing-attributes) {
     .storybook-element-component {
       outline: 2px dashed #61a2e9;
     }

package/scss/storybook.scss

@@ -25,6 +25,13 @@
     outline: 3px dashed #036fe3;
   }
 
+  &.storybook-element-missing-attributes {
+    .storybook-element-component-overlay {
+        display: flex;
+        outline: 3px dashed #ff0000;
+    }
+  }
+
   &.storybook-inline {
     display: inline-block;
 

package/src/BlockEditor.js

@@ -46,6 +46,7 @@ export default function BlockEditor({
             storybookComponentLoader={storybookComponentLoader}
             storybookComponentDataLoader={storybookComponentDataLoader}
             elementPropsMap={elementPropsMap}
+            elementStory={loadedStorybookStories?.find(v => props.element?.block?.toLowerCase() === v.id?.toLowerCase())}
             onStorybookElementClick={(element, attributes) => {
                 let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
                 let path = ReactEditor.findPath(editor, node);
@@ -58,7 +59,6 @@ export default function BlockEditor({
                     attributes.ref.current.classList.add("slate-editor-element-selected");
                 }
 
-
                 setSelectedStorybookElement({
                     ...element,
                     editorAttributes: attributes,
@@ -237,9 +237,6 @@ export default function BlockEditor({
     }, []);
 
     const handleSidebarEditorChange = newElement => {
-        console.log("Vincent-Debug, BlockEditor.js:237", "sidebar editor change");
-
-
         let newNodeProps = {
             block: newElement.block,
             isEmpty: false,
@@ -397,7 +394,6 @@ export default function BlockEditor({
                         value={value}
                         onChange={v => {
                             onSlateChange(v);
-                            console.log("YEEEEEE");
                         }}
                     >
                         <div>

package/src/Nodes/Leaf.js

@@ -1,8 +1,16 @@
 import React from "react";
-import {Bold, Italic, Text, Underlined, Strikethrough, Small} from "./Text";
-
-export const Leaf = ({attributes, children, leaf, isRenderer, typeProps, ...props}) => {
+import {
+    Bold, Italic, Text, Underlined, Strikethrough, Small, SuperscriptUp,
+} from "./Text";
 
+export const Leaf = ({
+    attributes,
+    children,
+    leaf,
+    isRenderer,
+    typeProps,
+    ...props
+}) => {
     if (leaf.bold) {
         children = <Bold typeProps={typeProps} attributes={attributes}><Text
             attributes={attributes}
@@ -36,5 +44,12 @@ export const Leaf = ({attributes, children, leaf, isRenderer, typeProps, ...prop
             isRenderer={isRenderer}>{children}</Text></Small>;
     }
 
+    if (leaf.superscriptUp) {
+        children = <SuperscriptUp typeProps={typeProps} attributes={attributes}><Text
+            attributes={attributes}
+            typeProps={typeProps}
+            isRenderer={isRenderer}>{children}</Text></SuperscriptUp>;
+    }
+
     return <Text attributes={attributes} typeProps={typeProps} isRenderer={isRenderer}>{children}</Text>;
 };

package/src/Nodes/Storybook.js

@@ -1,5 +1,5 @@
 import React, {
-    memo, useContext, useState,
+    memo, useContext, useEffect, useState,
 } from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {
@@ -22,11 +22,23 @@ const StorybookNodeComponent = ({
     storybookComponentLoader,
     storybookComponentDataLoader,
     onStorybookElementClick,
+    ...props
 }) => {
     const onEditClick = () => {
         onStorybookElementClick(element, attributes);
     };
 
+    const hasMissingAttributes = () => {
+        let elementStory = props.elementStory;
+        let requiredFields = Object.keys(elementStory?.argTypes || {}).filter(key => elementStory.argTypes[key].required);
+
+        let missingField = requiredFields.find(fieldName => {
+            return !element?.attributes?.[fieldName];
+        });
+
+        return !!missingField;
+    };
+
     const onDeleteClick = () => {
         let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
         let path = ReactEditor.findPath(editor, node);
@@ -115,12 +127,13 @@ const StorybookNodeComponent = ({
     return (
         <span
             {...attributes}
-            onClick={() => onStorybookElementClick(element, attributes)}
+            onClick={onEditClick}
             className={classNames({
                 "storybook-element options-wrapper cursor-pointer": true,
                 "storybook-inline": element.isInline,
                 "storybook-element-float-left": element?.attributes?.float === "left",
                 "storybook-element-float-right": element?.attributes?.float === "right",
+                "storybook-element-missing-attributes": hasMissingAttributes(),
             })}>
             <span className="options-container">
                 {!element.isInline && (<>

package/src/Nodes/StorybookDisplay.js

@@ -1,4 +1,5 @@
 import React, {
+    isValidElement,
     useEffect, useRef, useState,
 } from "react";
 import {EmptyBlock} from "../Blocks/EmptyBlock";
@@ -80,7 +81,7 @@ const BlockComponent = ({
     isEditor,
 }) => {
     const [loadedAttributes, setLoadedAttributes] = useState(attributes);
-    let [LoadedComponent, setLoadedComponent] = useState(storybookComponentLoader(block));
+    let LoadedComponent = storybookComponentLoader(block);
 
     useEffect(() => {
         if (!storybookComponentDataLoader) {
@@ -105,12 +106,8 @@ const BlockComponent = ({
             }
         });
 
-        let loadedComponent = storybookComponentLoader(block);
-
         setLoadedAttributes({...attributes});
 
-        setLoadedComponent(loadedComponent);
-
         return () => {
             mounted = false;
         };
@@ -118,17 +115,6 @@ const BlockComponent = ({
 
     if (!LoadedComponent) {
         LoadedComponent = EmptyBlock;
-    } else {
-        try {
-            if (LoadedComponent.render) {
-                LoadedComponent.render.displayName = block; // set displayname to block for better debug
-            }
-        } catch (e) {
-            // this happens if we SSR a non ssr component, its a weird edge case of next/dynamic... so we just ignore it
-            // LoadedComponent for some reason is not a component here....
-            // console.error(`Error in setting displayName for ${block} :: ${e.message}`);
-            return null;
-        }
     }
 
     const WrapperTag = loadedAttributes.isInline ? "span" : "div";

package/src/Nodes/Text.js

@@ -2,7 +2,12 @@ import React, {Fragment} from "react";
 
 const EmptyWrapper = ({children}) => <>{children}</>;
 
-export const Text = ({isRenderer, attributes, children, typeProps}) => {
+export const Text = ({
+    isRenderer,
+    attributes,
+    children,
+    typeProps,
+}) => {
     if (isRenderer) {
         if (!children) {
             return null;
@@ -23,7 +28,6 @@ export const Text = ({isRenderer, attributes, children, typeProps}) => {
                 {children}
             </Fragment>;
         }
-
     }
 
     return <span {...attributes}>{children}</span>;
@@ -46,22 +50,49 @@ function renderTextLine(text, typeProps) {
     return text;
 }
 
-export const Bold = ({attributes, children}) => {
+export const Bold = ({
+    attributes,
+    children,
+}) => {
     return <strong {...attributes}>{children}</strong>;
 };
 
-export const Italic = ({attributes, children}) => {
+export const Italic = ({
+    attributes,
+    children,
+}) => {
     return <i {...attributes}>{children}</i>;
 };
 
-export const Underlined = ({attributes, children}) => {
+export const Underlined = ({
+    attributes,
+    children,
+}) => {
     return <u {...attributes}>{children}</u>;
 };
 
-export const Strikethrough = ({attributes, children}) => {
+export const Strikethrough = ({
+    attributes,
+    children,
+}) => {
     return <del {...attributes}>{children}</del>;
 };
 
-export const Small = ({attributes, children}) => {
+export const Small = ({
+    attributes,
+    children,
+}) => {
     return <small {...attributes}>{children}</small>;
+};
+
+export const SuperscriptUp = ({
+    attributes,
+    children,
+}) => {
+    return <span
+        style={{
+            fontSize: "60%",
+            verticalAlign: "top",
+        }}
+        {...attributes}>{children}</span>;
 };

package/src/SidebarEditor/SidebarEditorField.js

@@ -10,6 +10,7 @@ import {CloudinaryContentSelect} from "./Fields/CloudinaryContentSelect";
 import {MVP} from "./Fields/MVP";
 import {ColorPicker} from "./Fields/ColorPicker";
 import {RemoteMultiSelect} from "./Fields/RemoteMultiSelect";
+import classNames from "classnames"; 
 
 export const SidebarEditorField = ({
     field,
@@ -62,7 +63,7 @@ export const SidebarEditorField = ({
 
         switch (field?.control?.type) {
             case "text":
-                return <Textarea onChange={e => onChange(fieldKey, e.target.value)} value={value} />;
+                return <Textarea onChange={e => onChange(fieldKey, e.target.value)} value={value === undefined ? "" : value} />;
             case "boolean":
                 return (
                     <div className="flex items-center">
@@ -238,7 +239,10 @@ export const SidebarEditorField = ({
 
     return (
         <div key={`${field.name}`} className="mb-2">
-            <label className="block">{field.name || fieldKey}</label>
+            <label className={classNames({
+                "block": true,
+                "!text-red-500": field?.required && !value,
+            })}>{field.name || fieldKey} {field.required ? "*" : ""}</label>
             {inputField}
         </div>
     );

package/src/SidebarEditor.js

@@ -109,7 +109,7 @@ const SidebarEditor = ({
                         [fieldKey]: value,
                     },
                 };
-
+                
                 onChange(newStorybookElement);
             }
         }

package/src/Toolbar/Formats.js

@@ -2,10 +2,18 @@ import {useSlate} from "slate-react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import React, {useState} from "react";
 import classNames from "classnames";
-import {Editor, Text, Transforms} from "slate";
-import {faBold, faItalic, faUnderline, faStrikethrough} from "@fortawesome/free-solid-svg-icons";
+import {
+    Editor, Text, Transforms,
+} from "slate";
+import {
+    faBold, faItalic, faUnderline, faStrikethrough, faSuperscript,
+} from "@fortawesome/free-solid-svg-icons";
 
-export const FormatButton = ({format, icon, children}) => {
+export const FormatButton = ({
+    format,
+    icon,
+    children,
+}) => {
     const editor = useSlate();
     const onClick = (event) => {
         event.preventDefault();
@@ -57,4 +65,8 @@ export const FormatButtonUnderline = () => {
 
 export const FormatButtonStrikethrough = () => {
     return <FormatButton format="strikethrough" icon={faStrikethrough}/>;
+};
+
+export const FormatButtonSuperscriptUp = () => {
+    return <FormatButton format="superscriptUp" icon={faSuperscript}/>;
 };

package/src/Toolbar/Toolbar.js

@@ -8,7 +8,7 @@ import classNames from "classnames";
 // eslint-disable-next-line import/no-unresolved
 import "scss/toolbar.scss";
 import {
-    FormatButtonBold, FormatButtonItalic, FormatButtonStrikethrough, FormatButtonUnderline,
+    FormatButtonBold, FormatButtonItalic, FormatButtonStrikethrough, FormatButtonSuperscriptUp, FormatButtonUnderline,
 } from "./Formats";
 import {
     AlignButtonLeft, AlignButtonCenter, AlignButtonRight,
@@ -144,6 +144,7 @@ export const Toolbar = ({
                         <FormatButtonItalic/>
                         <FormatButtonUnderline/>
                         <FormatButtonStrikethrough/>
+                        <FormatButtonSuperscriptUp />
 
                         <LinkButton/>