@vonaffenfels/slate-editor 1.0.2 → 1.0.4

package/src/BlockEditor.js

@@ -1,11 +1,11 @@
 import React, {
-    useCallback, useMemo, useState, useRef, useContext, useEffect,
+    useCallback, useMemo, useState, useRef,
 } from 'react';
 import {
     Slate, Editable, withReact, ReactEditor,
 } from 'slate-react';
 import {
-    createEditor, Element as SlateElement, Node, Text, Transforms,
+    createEditor, Element as SlateElement, Node, Point, Text, Transforms,
 } from 'slate';
 import {withHistory} from 'slate-history';
 import {Leaf} from "./Nodes/Leaf";
@@ -14,7 +14,6 @@ import {SoftBreakPlugin} from "./plugins/SoftBreak";
 import classNames from "classnames";
 import {Element} from "./Nodes/Element";
 import "../scss/editor.scss";
-import {StorybookContext} from "./Context/StorybookContext";
 import {ListItemPlugin} from "./plugins/ListItem";
 import ErrorBoundary from "../src/Blocks/ErrorBoundary";
 import SidebarEditor from './SidebarEditor';
@@ -27,10 +26,9 @@ export default function BlockEditor({
     storybookComponentLoader,
     storybookComponentDataLoader,
     storybookStories,
+    onSaveClick,
 }) {
-    const storybookContext = useContext(StorybookContext);
-    const storybookTarget = useRef(null);
-    const [isStorybookActive, setStorybookActive] = useState(false);
+    const scrollContainer = useRef(null);
     const [selectedStorybookElement, setSelectedStorybookElement] = useState(null);
     const renderElement = useCallback((props) => {
         return <Element
@@ -39,11 +37,30 @@ export default function BlockEditor({
             storybookComponentLoader={storybookComponentLoader}
             storybookComponentDataLoader={storybookComponentDataLoader}
             elementPropsMap={elementPropsMap}
-            onStorybookElementClick={(element, attributes) => setSelectedStorybookElement({
-                ...element,
-                editorAttributes: attributes,
-            })}
-            onElementClick={() => setSelectedStorybookElement(null)}/>;
+            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");
+                    }
+                }
+
+                setSelectedStorybookElement({
+                    ...element,
+                    editorAttributes: attributes,
+                });
+            }}
+            onElementClick={(element) => {
+                console.log({element});
+                let hasBlockElement = element.children.find(child => child.block) !== undefined;
+
+                if (!hasBlockElement) {
+                    setSelectedStorybookElement(null);
+                }
+            }}/>;
     }, []);
     const renderLeaf = useCallback(props => <Leaf {...props} elementPropsMap={elementPropsMap}/>, []);
     const emptyValue = [
@@ -136,12 +153,20 @@ 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);
 
-        console.log({newStorybookElement});
-
         let newNodeProps = {
             block: newStorybookElement.block,
             isEmpty: false,
@@ -159,24 +184,41 @@ export default function BlockEditor({
     };
 
     const handleSidebarDeleteClick = (element) => {
-        let node = ReactEditor.toSlateNode(editor, element.editorAttributes.ref.current);
-        let path = ReactEditor.findPath(editor, node);
+        contentfulSdk.dialogs
+            .openConfirm({
+                title: 'Element löschen',
+                message: 'Sind Sie sicher, dass Sie dieses Element löschen wollen?',
+                intent: 'negative',
+                confirmLabel: 'Löschen',
+                cancelLabel: 'Abbrechen',
+            })
+            .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: path});
-        Transforms.removeNodes(editor, {at: path});
+                    Transforms.setNodes(editor, {isDeleted: true}, {at: path});
+                    Transforms.removeNodes(editor, {at: path});
 
-        setSelectedStorybookElement(null);
+                    clearSelectionOutlines();
+
+                    setSelectedStorybookElement(null);
+                }
+            });
     };
 
     const handleSidebarMoveClick = (element, direction) => {
         let node = ReactEditor.toSlateNode(editor, element.editorAttributes.ref.current);
         let path = ReactEditor.findPath(editor, node);
 
-        // Initially up
-        let to = [path[0] + 1];
+        let to;
 
-        if (direction === "down") {
+        if (direction === "down" && path[0] < editor.children.length - 1) {
+            to = [path[0] + 1];
+        } else if (direction === "up" && path[0] > 0) {
             to = [path[0] - 1];
+        } else {
+            return;
         }
 
         try {
@@ -194,26 +236,24 @@ export default function BlockEditor({
         }
     };
 
+    const handleSidebarClose = () => {
+        clearSelectionOutlines();
+
+        setSelectedStorybookElement(null);
+    };
+
     return (
-        <div className={classNames({
-            "block-editor-wrapper": true,
-            "storybook-active": isStorybookActive,
-        })}>
-            <div className="storybook-target" ref={storybookTarget}/>
-            <div className="slate-editor">
-                <StorybookContext.Provider value={{
-                    ...storybookContext,
-                    target: storybookTarget,
-                    contentfulSdk: contentfulSdk,
-                    setActive: setStorybookActive,
-                    isActive: isStorybookActive,
-                }}>
-                    <Slate
-                        editor={editor}
-                        value={value}
-                        onChange={onSlateChange}
-                    >
-                        <Toolbar hover={false}/>
+        <div className={classNames({"block-editor-wrapper h-full": true})}>
+            <div className="slate-editor h-full">
+                <Slate
+                    editor={editor}
+                    value={value}
+                    onChange={onSlateChange}
+                >
+                    <div>
+                        <Toolbar hover={false} onSaveClick={onSaveClick}/>
+                    </div>
+                    <div className="h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
                         <ErrorBoundary
                             name="editor"
                             fallback={(
@@ -236,17 +276,17 @@ export default function BlockEditor({
                                 }}
                             />
                         </ErrorBoundary>
-                    </Slate>
-                </StorybookContext.Provider>
+                    </div>
+                </Slate>
             </div>
             {!!selectedStorybookElement && <SidebarEditor
                 sdk={contentfulSdk}
                 storybookElement={selectedStorybookElement}
                 onChange={handleSidebarEditorChange}
                 storybookStories={storybookStories}
-                onClose={() => setSelectedStorybookElement(null)}
-                onDelete={element => handleSidebarDeleteClick(element)}
-                onMove={(element, direction) => handleSidebarMoveClick(element, direction)} />}
+                onClose={handleSidebarClose}
+                onDelete={handleSidebarDeleteClick}
+                onMove={handleSidebarMoveClick}/>}
         </div>
     );
 }

package/src/Nodes/Element.js

@@ -36,15 +36,17 @@ export const Element = ({
 
     switch (props.element.type) {
         case 'storybook':
-            return <StorybookNode
-                {...props}
-                {...typeProps}
-                isInSlot={isInSlot}
-                storybookComponentLoader={storybookComponentLoader}
-                storybookComponentDataLoader={storybookComponentDataLoader}
-                editor={editor}
-                onStorybookElementClick={onStorybookElementClick}
-            >{children}</StorybookNode>;
+            return <div className="inline" onClick={e => e.stopPropagation()}>
+                <StorybookNode
+                    {...props}
+                    {...typeProps}
+                    isInSlot={isInSlot}
+                    storybookComponentLoader={storybookComponentLoader}
+                    storybookComponentDataLoader={storybookComponentDataLoader}
+                    editor={editor}
+                    onStorybookElementClick={onStorybookElementClick}
+                >{children}</StorybookNode>
+            </div>;
         case 'layout':
             return <LayoutBlock
                 editor={editor}

package/src/Nodes/Storybook.js

@@ -21,7 +21,6 @@ const StorybookNodeComponent = ({
     storybookComponentDataLoader,
     onStorybookElementClick,
 }) => {
-
     const onEditClick = () => {
         onStorybookElementClick(element, attributes);
     };
@@ -114,41 +113,23 @@ const StorybookNodeComponent = ({
     return (
         <span
             {...attributes}
+            onClick={() => onStorybookElementClick(element, attributes)}
             className={classNames({
-                "storybook-element options-wrapper": true,
+                "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",
             })}>
-            <span className="options-container">
-                <span className="options-container-option options-container-option-edit" title="Edit" onClick={onEditClick}><FontAwesomeIcon
-                    icon={faCog}
-                    size="lg"/></span>
-                {!element.isInline && (<>
-                    <span className="options-container-option options-container-option-move-up" title="Move up" onClick={moveUp}>
-                        <FontAwesomeIcon icon={faArrowUp} size="lg"/>
-                    </span>
-                    <span className="options-container-option options-container-option-move-down" title="Move down" onClick={moveDown}>
-                        <FontAwesomeIcon icon={faArrowDown} size="lg"/>
-                    </span>
-                    <span className="options-container-option options-container-option-expand-text" onClick={switchSize}>
-                        {!element?.attributes?.blockWidth && "Volle Breite"}
-                        {element?.attributes?.blockWidth === "article" && "Artikel Breite"}
-                        {element?.attributes?.blockWidth === "site" && "Seiten Breite"}
-                        {element?.attributes?.blockWidth === "small" && "Klein"}
-                    </span>
-                    <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange} />
-                </>)}
-            </span>
-            <span className="options-container options-container-right">
-                <span className="options-container-option options-container-option-delete" title="Delete" onClick={onDeleteClick}><FontAwesomeIcon
-                    icon={faTimes}
-                    size="lg"/></span>
-            </span>
-            <span className={classNames({
-                "storybook-element-component": true,
-                "storybook-inline": element.isInline,
-            })}>
-                <StorybookDisplay {...element.attributes} element={element} storybookComponentLoader={storybookComponentLoader} isEditor={true} storybookComponentDataLoader={storybookComponentDataLoader}/>
+            <span className={classNames({"storybook-element-component": true})}>
+                <span className="storybook-element-component-overlay" title="Klicken, um das Element zu konfigurieren" onClick={onEditClick}>Klicken, um das Element zu konfigurieren</span>
+                <div onClick={onEditClick}>
+                    <StorybookDisplay
+                        {...element.attributes}
+                        element={element}
+                        storybookComponentLoader={storybookComponentLoader}
+                        isEditor={true}
+                        storybookComponentDataLoader={storybookComponentDataLoader}/>
+                </div>
             </span>
             {children}
         </span>

package/src/SidebarEditor/AssetList.js

@@ -0,0 +1,129 @@
+import {
+    useEffect, useState,
+} from "react";
+import {IconButton} from "../SidebarEditor";
+import {swapArrayElements} from "../helper/array";
+
+export const AssetList = ({
+    assets,
+    onChange,
+    sdk,
+    cloudinary,
+}) => {
+    const renderAssets = assets.filter(Boolean).map((asset, index) => (
+        <>
+            <Asset
+                key={asset.sys?.id}
+                asset={asset}
+                index={index}
+                sdk={sdk}
+                cloudinary={cloudinary}
+                assetsLength={assets.length}
+                onMoveClick={(direction) => handleMoveClick(direction, index)}
+                onDeleteClick={() => handleDeleteClick(index)}
+            />
+            {index !== assets.length - 1 && <hr className="my-2" style={{borderColor: "#cfd9e0"}}/>}
+        </>
+    ));
+
+    const handleMoveClick = (direction, index) => {
+        let newIndex = direction === "up" ? index - 1 : index + 1;
+
+        if (direction === "up" && index === 0) {
+            return;
+        } else if (direction === "down" && index === assets.length - 1) {
+            return;
+        }
+
+        onChange(swapArrayElements(assets, index, newIndex));
+    };
+
+    const handleDeleteClick = (index) => {
+        let newAssets = assets;
+
+        newAssets.splice(index, 1);
+
+        onChange(newAssets);
+    };
+
+    return (
+        <div>{renderAssets}</div>
+    );
+};
+
+export const Asset = ({
+    asset,
+    index,
+    assetsLength,
+    onDeleteClick,
+    onMoveClick,
+    sdk,
+    cloudinary,
+}) => {
+    const [mediaUrl, setMediaUrl] = useState(null);
+
+    let id = asset?.sys?.id;
+    let title = asset?.fields?.title?.["en-US"] || asset?.fields?.title?.["de-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 href = `https://app.contentful.com/spaces/${space}/environments/${environment}/entries/${id}`;
+
+    if (cloudinary) {
+        title = asset.public_id;
+        href = asset.url;
+    }
+
+    useEffect(() => {
+        if (cloudinary) {
+            setMediaUrl(asset.url);
+
+            return;
+        }
+
+        if (!mediaAssetId) {
+            return;
+        }
+
+        sdk.space.getAsset(mediaAssetId)
+            .then(a => {
+                let url = a?.fields?.file?.["de-DE"]?.url || a?.fields?.file?.["en-US"]?.url;
+
+                if (url) {
+                    let params = new URLSearchParams({
+                        w: "512",
+                        q: "80",
+                    });
+
+                    setMediaUrl(`${url}?${params}`);
+                }
+            });
+    }, [mediaAssetId, sdk, asset, cloudinary]);
+
+    if (!asset) {
+        return null;
+    }
+
+    return (
+        <div className="flex flex-col">
+            <div className="flex">
+                <div className="grow">
+                    <b className="mt-[4px] block break-all">{title}</b>
+                </div>
+                <div className="ml-2 shrink-0">
+                    {!!onMoveClick && (
+                        <div className="icon-button-group mr-1">
+                            <IconButton size="small" onClick={() => onMoveClick("up")} disabled={index === 0}>↑</IconButton>
+                            <IconButton size="small" onClick={() => onMoveClick("down")} disabled={index === assetsLength - 1}>↓</IconButton>
+                        </div>
+                    )}
+                    <a className="mr-1" target="_blank" href={href} rel="noreferrer">
+                        <IconButton size="small">View</IconButton>
+                    </a>
+                    <IconButton size="small" onClick={onDeleteClick}>⨯</IconButton>
+                </div>
+            </div>
+            {!!mediaUrl && <img src={mediaUrl} width="100%" className="mt-2 rounded-md" />}
+        </div>
+    );
+};