@vonaffenfels/slate-editor 1.0.4 → 1.0.10

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.4",
+    "version": "1.0.10",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "ba6d3fea2cca04a822de7e3d7dff5949e62a9d46",
+    "gitHead": "bd271f5265184e34c8ebef5f49936ab95fe29dcf",
     "publishConfig": {
         "access": "public"
     }

package/scss/editor.scss

@@ -61,23 +61,26 @@
       //outline: #CECECE dashed;
 
       &:after {
-        font-size: 24px;
+        font-size: 16px;
         content: "P";
         color: #CECECE;
         position: absolute;
         left: -20px;
         text-transform: uppercase;
-        top: 1px;
+        top: 0;
         user-select: none;
       }
     }
 
     h1[data-slate-node="element"] {
       position: relative;
+      font-size: 26px;
+      font-weight: bold;
+      padding-bottom: 20px;
 
       &:after {
         content: "h1";
-        font-size: 24px;
+        font-size: 26px;
         color: #CECECE;
         position: absolute;
         left: -36px;
@@ -89,85 +92,110 @@
 
     h2[data-slate-node="element"] {
       position: relative;
+      font-size: 24px;
+      padding-bottom: 20px;
+      font-weight: bold;
 
       &:after {
         content: "h2";
         font-size: 24px;
         color: #CECECE;
         position: absolute;
-        left: -36px;
+        left: -30px;
         text-transform: uppercase;
-        top: 1px;
+        top: 0;
         user-select: none;
       }
     }
 
     h3[data-slate-node="element"] {
       position: relative;
+      font-size: 20px;
+      padding-bottom: 20px;
+      font-weight: bold;
 
       &:after {
         content: "h3";
-        font-size: 24px;
+        font-size: 20px;
         color: #CECECE;
         position: absolute;
-        left: -36px;
+        left: -26px;
         text-transform: uppercase;
-        top: 1px;
+        top: 0;
         user-select: none;
       }
     }
 
     h4[data-slate-node="element"] {
       position: relative;
+      font-size: 16px;
+      padding-bottom: 20px;
+      font-weight: bold;
 
       &:after {
         content: "h4";
-        font-size: 24px;
+        font-size: 16px;
         color: #CECECE;
         position: absolute;
         left: -36px;
         text-transform: uppercase;
-        top: 1px;
+        top: 0;
         user-select: none;
       }
     }
 
     h5[data-slate-node="element"] {
       position: relative;
+      font-size: 14px;
+      padding-bottom: 20px;
+      font-weight: bold;
 
       &:after {
         content: "h5";
-        font-size: 24px;
+        font-size: 14px;
         color: #CECECE;
         position: absolute;
         left: -36px;
         text-transform: uppercase;
-        top: 1px;
+        top: 0;
         user-select: none;
       }
     }
 
     h6[data-slate-node="element"] {
       position: relative;
+      font-size: 12px;
+      padding-bottom: 20px;
+      font-weight: bold;
 
       &:after {
         content: "h6";
-        font-size: 24px;
+        font-size: 12px;
         color: #CECECE;
         position: absolute;
         left: -36px;
         text-transform: uppercase;
-        top: 1px;
+        top: 0;
         user-select: none;
       }
     }
 
     ul[data-slate-node="element"] {
       list-style: circle;
+      padding-bottom: 20px;
     }
 
     ol[data-slate-node="element"] {
       list-style: decimal;
+      padding-bottom: 20px;
+    }
+
+    .arrow-list {
+      list-style-type: "🠆" !important;
+    }
+    
+    .arrow-list li::before {
+        content: none !important;
     }
 
     a[data-slate-node="element"] {
@@ -175,6 +203,13 @@
       text-decoration: underline;
     }
 
+    blockquote[data-slate-node="element"] {
+      display: block;
+      border-left: 5px solid #CECECE;
+      padding: 1em;
+      margin-bottom: 20px;
+    }
+
     div[data-slate-editor="true"] {
       height: 100%;
     }
@@ -399,10 +434,6 @@
       }
     }
   }
-
-  .selected-storybook-element {
-    outline: dashed #036fe3;
-  }
 }
 
 button {

package/scss/storybook.scss

@@ -61,7 +61,7 @@
     display: block;
     position: relative;
 
-    &:not(.selected-storybook-element):hover {
+    &:hover {
       .storybook-element-component-overlay {
         user-select: none;
         display: flex;

package/src/BlockEditor.js

@@ -37,29 +37,19 @@ export default function BlockEditor({
             storybookComponentLoader={storybookComponentLoader}
             storybookComponentDataLoader={storybookComponentDataLoader}
             elementPropsMap={elementPropsMap}
-            onStorybookElementClick={(element, attributes, e) => {
-                clearSelectionOutlines();
-
-                if (attributes?.ref?.current) {
-                    let targetDOMElement = attributes.ref.current.querySelectorAll(".storybook-element-component")[0];
-
-                    if (targetDOMElement) {
-                        targetDOMElement.classList.add("selected-storybook-element");
-                    }
-                }
+            onStorybookElementClick={(element, attributes) => {
+                let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+                let path = ReactEditor.findPath(editor, node);
 
                 setSelectedStorybookElement({
                     ...element,
                     editorAttributes: attributes,
+                    path,
+                    node,
                 });
             }}
-            onElementClick={(element) => {
-                console.log({element});
-                let hasBlockElement = element.children.find(child => child.block) !== undefined;
-
-                if (!hasBlockElement) {
-                    setSelectedStorybookElement(null);
-                }
+            onElementClick={() => {
+                setSelectedStorybookElement(null);
             }}/>;
     }, []);
     const renderLeaf = useCallback(props => <Leaf {...props} elementPropsMap={elementPropsMap}/>, []);
@@ -153,20 +143,7 @@ export default function BlockEditor({
         return editor;
     }, []);
 
-    const clearSelectionOutlines = () => {
-        let selectedDOMElements = document.querySelectorAll(".selected-storybook-element");
-
-        if (selectedDOMElements && selectedDOMElements.length) {
-            Array.from(selectedDOMElements).forEach(e => {
-                e.classList.remove("selected-storybook-element");
-            });
-        }
-    };
-
     const handleSidebarEditorChange = newStorybookElement => {
-        let node = ReactEditor.toSlateNode(editor, selectedStorybookElement.editorAttributes.ref.current);
-        let path = ReactEditor.findPath(editor, node);
-
         let newNodeProps = {
             block: newStorybookElement.block,
             isEmpty: false,
@@ -174,12 +151,12 @@ export default function BlockEditor({
             attributes: newStorybookElement.attributes,
         };
 
-        Transforms.setNodes(editor, newNodeProps, {at: path});
+        Transforms.setNodes(editor, newNodeProps, {at: selectedStorybookElement.path});
 
         onSlateChange(editor.children);
         setSelectedStorybookElement({
+            ...selectedStorybookElement,
             ...newNodeProps,
-            editorAttributes: selectedStorybookElement.editorAttributes,
         });
     };
 
@@ -194,13 +171,10 @@ export default function BlockEditor({
             })
             .then((result) => {
                 if (result) {
-                    let node = ReactEditor.toSlateNode(editor, element.editorAttributes.ref.current);
-                    let path = ReactEditor.findPath(editor, node);
+                    Transforms.setNodes(editor, {isDeleted: true}, {at: selectedStorybookElement.path});
+                    Transforms.removeNodes(editor, {at: selectedStorybookElement.path});
 
-                    Transforms.setNodes(editor, {isDeleted: true}, {at: path});
-                    Transforms.removeNodes(editor, {at: path});
-
-                    clearSelectionOutlines();
+                    onSlateChange(editor.children);
 
                     setSelectedStorybookElement(null);
                 }
@@ -208,8 +182,7 @@ export default function BlockEditor({
     };
 
     const handleSidebarMoveClick = (element, direction) => {
-        let node = ReactEditor.toSlateNode(editor, element.editorAttributes.ref.current);
-        let path = ReactEditor.findPath(editor, node);
+        let path = element.path;
 
         let to;
 
@@ -231,14 +204,19 @@ export default function BlockEditor({
                 mode: "highest",
                 voids: false,
             });
+
+            onSlateChange(editor.children);
+
+            setSelectedStorybookElement({
+                ...selectedStorybookElement,
+                path: to,
+            });
         } catch (e) {
             console.error(e);
         }
     };
 
     const handleSidebarClose = () => {
-        clearSelectionOutlines();
-
         setSelectedStorybookElement(null);
     };
 
@@ -286,7 +264,9 @@ export default function BlockEditor({
                 storybookStories={storybookStories}
                 onClose={handleSidebarClose}
                 onDelete={handleSidebarDeleteClick}
-                onMove={handleSidebarMoveClick}/>}
+                onMove={handleSidebarMoveClick}
+                editor={editor}/>
+            }
         </div>
     );
 }

package/src/Nodes/Element.js

@@ -18,6 +18,8 @@ export const Element = ({
 }) => {
     const {isInSlot} = useContext(LayoutSlotContext);
 
+    console.log({props});
+
     const getPropsForType = (type) => {
         if (!props.elementPropsMap) {
             return {};
@@ -36,7 +38,9 @@ export const Element = ({
 
     switch (props.element.type) {
         case 'storybook':
-            return <div className="inline" onClick={e => e.stopPropagation()}>
+            return <div
+                className="inline"
+                onClick={e => e.stopPropagation()}>
                 <StorybookNode
                     {...props}
                     {...typeProps}

package/src/SidebarEditor/AssetList.js

@@ -8,7 +8,7 @@ export const AssetList = ({
     assets,
     onChange,
     sdk,
-    cloudinary,
+    cloudinary = false,
 }) => {
     const renderAssets = assets.filter(Boolean).map((asset, index) => (
         <>
@@ -58,15 +58,15 @@ export const Asset = ({
     onDeleteClick,
     onMoveClick,
     sdk,
-    cloudinary,
+    cloudinary = false,
 }) => {
     const [mediaUrl, setMediaUrl] = useState(null);
 
     let id = asset?.sys?.id;
-    let title = asset?.fields?.title?.["en-US"] || asset?.fields?.title?.["de-DE"];
+    let title = asset?.fields?.title?.["en-US"] || asset?.fields?.title?.["de"];
     let space = asset?.sys?.space?.sys?.id;
     let environment = asset?.sys?.environment?.sys?.id;
-    let mediaAssetId = asset?.fields?.media?.["de-DE"]?.sys?.id || asset?.fields?.media?.["en-US"]?.sys?.id;
+    let mediaAssetId = asset?.fields?.media?.["en-US"]?.sys?.id || asset?.fields?.media?.["de"]?.sys?.id;
     let href = `https://app.contentful.com/spaces/${space}/environments/${environment}/entries/${id}`;
 
     if (cloudinary) {
@@ -87,7 +87,7 @@ export const Asset = ({
 
         sdk.space.getAsset(mediaAssetId)
             .then(a => {
-                let url = a?.fields?.file?.["de-DE"]?.url || a?.fields?.file?.["en-US"]?.url;
+                let url = a?.fields?.file?.["en-US"]?.url || a?.fields?.file?.["de"]?.url;
 
                 if (url) {
                     let params = new URLSearchParams({
@@ -108,7 +108,7 @@ export const Asset = ({
         <div className="flex flex-col">
             <div className="flex">
                 <div className="grow">
-                    <b className="mt-[4px] block break-all">{title}</b>
+                    <b className="mt-[3px] block break-words">{title}</b>
                 </div>
                 <div className="ml-2 shrink-0">
                     {!!onMoveClick && (

package/src/SidebarEditor.js

@@ -14,6 +14,7 @@ const SidebarEditor = ({
     onChange,
     onDelete,
     onMove,
+    editor,
 }) => {
     const [versions, setVersions] = useState([]);
     const [lastChangedProperty, setLastChangedProperty] = useState(null);
@@ -160,6 +161,8 @@ const SidebarEditor = ({
 
     useEffect(() => resetVersions, [storybookElement?.editorAttributes?.ref]);
 
+    console.log({storybookElement});
+
     return (
         <div id="sidebar-editor">
             <div>
@@ -172,10 +175,10 @@ const SidebarEditor = ({
                                     <IconButton title="Wiederherstellen" onClick={redo} disabled={currentVersion >= versionCount || versionCount === 0}>↻</IconButton>
                                 </div>
                                 <div className="icon-button-group mr-1">
-                                    <IconButton title="Nach oben verschieben" onClick={() => onMove && onMove(storybookElement, "up")}>
+                                    <IconButton title="Nach oben verschieben" onClick={() => onMove && onMove(storybookElement, "up")} disabled={storybookElement.path[0] === 0}>
                                         ↑
                                     </IconButton>
-                                    <IconButton title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")}>
+                                    <IconButton title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")} disabled={storybookElement.path[0] === editor.children.length - 1}>
                                         ↓
                                     </IconButton>
                                 </div>

package/src/dev/testComponents/TestStory.stories.js

@@ -112,14 +112,14 @@ export default {
             name: "Contentful Asset",
             control: {
                 type: 'contentful-content',
-                contentTypes: ["image"],
+                contentTypes: ["asset"],
             },
         },
         contentfulAssets: {
             name: "Contentful Assets",
             control: {
                 type: 'contentful-contents',
-                contentTypes: ["image"],
+                contentTypes: ["asset"],
             },
         },
         cloudinaryImage: {