@vonaffenfels/slate-editor 1.0.26 → 1.0.30

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@vonaffenfels/slate-editor",
-    "version": "1.0.26",
+    "version": "1.0.30",
     "description": "",
     "main": "dist/index.js",
     "scripts": {
@@ -62,7 +62,7 @@
         "url-loader": "^4.1.1",
         "util": "^0.12.5",
         "walk-sync": "^3.0.0",
-        "webpack": "5.73.0",
+        "webpack": "5.88.2",
         "webpack-cli": "^4.6.0",
         "webpack-dev-server": "4.7.4"
     },
@@ -71,7 +71,7 @@
         "cssnano": "^5.0.1",
         "escape-html": "^1.0.3"
     },
-    "gitHead": "7089b60e41691c2c382e25c8447f74d0bd031aaa",
+    "gitHead": "fe88a0b3ce82331fa3d7193a4cd62b8e2c8ecfb9",
     "publishConfig": {
         "access": "public"
     }

package/src/BlockEditor.js

@@ -1,5 +1,5 @@
 import React, {
-    useCallback, useMemo, useState, useRef,
+    useCallback, useMemo, useState, useRef, useEffect,
 } from 'react';
 import {
     Slate, Editable, withReact, ReactEditor,
@@ -17,6 +17,8 @@ import "../scss/editor.scss";
 import {ListItemPlugin} from "./plugins/ListItem";
 import ErrorBoundary from "../src/Blocks/ErrorBoundary";
 import SidebarEditor from './SidebarEditor';
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faSpinner} from '@fortawesome/free-solid-svg-icons';
 
 export default function BlockEditor({
     onChange,
@@ -27,6 +29,7 @@ export default function BlockEditor({
     storybookComponentDataLoader,
     storybookStories,
     onSaveClick,
+    isLoading,
 }) {
     const scrollContainer = useRef(null);
     const [selectedStorybookElement, setSelectedStorybookElement] = useState(null);
@@ -61,6 +64,24 @@ export default function BlockEditor({
             ],
         },
     ];
+
+    const [loadedStorybookStories, setLoadedStorybookStories] = useState([]);
+    const [isSidebarLoading, setIsSidebarLoading] = useState(false);
+
+    const loadStories = async () => {
+        setIsSidebarLoading(true);
+
+        let loadedStories = await storybookStories();
+
+        setIsSidebarLoading(false);
+
+        setLoadedStorybookStories(loadedStories);
+    };
+
+    useEffect(() => {
+        loadStories();
+    }, []);
+
     const resetEditor = () => {
         if (confirm("This action will delete all data in the editor, are you sure?")) {
             onChange(emptyValue);
@@ -231,7 +252,12 @@ export default function BlockEditor({
                     <div>
                         <Toolbar hover={false} onSaveClick={onSaveClick}/>
                     </div>
-                    <div className="h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
+                    <div className="relative h-full max-h-full overflow-scroll px-8 py-4" ref={scrollContainer}>
+                        {isLoading && (
+                            <div className='pointer-events-none fixed left-0 top-0 z-50 text-black dark:text-white' style={{padding: "61px 0 0 16px"}}>
+                                <FontAwesomeIcon icon={faSpinner} pulse />
+                            </div>
+                        )}
                         <ErrorBoundary
                             name="editor"
                             fallback={(
@@ -261,7 +287,8 @@ export default function BlockEditor({
                 sdk={contentfulSdk}
                 storybookElement={selectedStorybookElement}
                 onChange={handleSidebarEditorChange}
-                storybookStories={storybookStories}
+                storybookStories={loadedStorybookStories}
+                isLoading={isSidebarLoading}
                 onClose={handleSidebarClose}
                 onDelete={handleSidebarDeleteClick}
                 onMove={handleSidebarMoveClick}

package/src/Blocks/LayoutBlock.js

@@ -1,6 +1,7 @@
 import React from "react";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {
+    faAlignCenter,
     faArrowDown, faArrowUp, faBorderAll, faBorderNone, faCompress, faTimes,
 } from "@fortawesome/free-solid-svg-icons";
 import {Transforms} from "slate";
@@ -119,6 +120,44 @@ export const LayoutBlock = ({
         }, {at: fromPath});
     };
 
+    const switchCenter = (e) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        let justifyCenter = !(element?.attributes?.justifyCenter);
+
+        Transforms.setNodes(editor, {
+            type: "layout",
+            attributes: {
+                ...(element.attributes || {}),
+                justifyCenter,
+            },
+        }, {at: fromPath});
+    };
+
+    const switchBorder = (e) => {
+        let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
+        let fromPath = ReactEditor.findPath(editor, node);
+
+        if (!fromPath) {
+            return;
+        }
+
+        let tableBorder = !(element?.attributes?.tableBorder);
+
+        Transforms.setNodes(editor, {
+            type: "layout",
+            attributes: {
+                ...(element.attributes || {}),
+                tableBorder,
+            },
+        }, {at: fromPath});
+    };
+
     const onMarginChange = (value) => {
         let node = ReactEditor.toSlateNode(editor, attributes.ref.current);
         let path = ReactEditor.findPath(editor, node);
@@ -159,12 +198,28 @@ export const LayoutBlock = ({
                     <FontAwesomeIcon icon={faBorderAll} size="lg"/>
                 )}
             </span>
+            <span className="options-container-option options-container-option-expand" onClick={switchCenter}>
+                {!element?.attributes?.justifyCenter ? (
+                    <FontAwesomeIcon icon={faAlignCenter} size="lg"/>
+                ) : (
+                    <FontAwesomeIcon icon={faAlignCenter} color="#3490f3" size="lg"/>
+                )}
+            </span>
+            <span className="options-container-option options-container-option-expand-text mx-2" onClick={switchBorder}>
+                {!element?.attributes?.tableBorder ? (
+                    <span>Kein Rahmen</span>
+                ) : (
+                    <span>Rahmen</span>
+                )}
+            </span>
             <ToolMargin margin={element?.attributes?.margin} onChange={onMarginChange}/>
         </div>
         <div
             className={`layout-block layout-grid layout-grid-cols-${children.length} ` + classNames({
                 [classNameArticle + " article-width"]: element?.attributes?.width === "article" || !element?.attributes?.width,
                 [classNameSite + " site-width"]: element?.attributes?.width === "full",
+                "block-editor-table-border-wrapper": element?.attributes?.tableBorder,
+                "justify-center": element?.attributes?.justifyCenter,
                 "space-x-4": element?.attributes?.spacing,
                 "editor-mt-large": element?.attributes?.margin?.top,
                 "editor-mr-large": element?.attributes?.margin?.right,

package/src/Serializer/Serializer.js

@@ -137,6 +137,8 @@ export function Serializer({
                             "mr-16": props?.attributes?.margin?.right,
                             "mb-16": props?.attributes?.margin?.bottom,
                             "ml-16": props?.attributes?.margin?.left,
+                            "block-editor-table-border-wrapper": props?.attributes?.tableBorder,
+                            "justify-center": props?.attributes?.justifyCenter,
                             [typeProps.classNameSite + " site-width"]: !isInSlot && (props.attributes?.width === "site" || props.attributes?.width === "full"),
                             [typeProps.classNameArticle + " article-width"]: !isInSlot && (props.attributes?.width === "article" || !props.attributes?.width),
                         })}

package/src/SidebarEditor/AssetList.js

@@ -23,6 +23,7 @@ export const AssetList = ({
                 assetsLength={assets.length}
                 onMoveClick={(direction) => handleMoveClick(direction, index)}
                 onDeleteClick={() => handleDeleteClick(index)}
+                onChange={handleChange}
             />
             <hr className="my-2" style={{borderColor: "#cfd9e0"}}/>
             {onAddClick && index === assets.length - 1 && <button onClick={onAddClick} className="button--secondary">Hinzufügen</button>}
@@ -49,6 +50,24 @@ export const AssetList = ({
         onChange(newAssets);
     };
 
+    const handleChange = (newAsset) => {
+        let newAssets = assets.map(asset => {
+            if (asset?.sys?.id === newAsset?.sys?.id) {
+                return newAsset;
+            }
+
+            return asset;
+        });
+
+        console.log({
+            newAssets,
+            newAsset,
+            assets,
+        });
+
+        onChange(newAssets);
+    };
+
     return (
         <div>{renderAssets}</div>
     );
@@ -60,21 +79,18 @@ export const Asset = ({
     assetsLength,
     onDeleteClick,
     onMoveClick,
+    onChange,
     sdk,
     cloudinary = false,
 }) => {
     const [mediaUrl, setMediaUrl] = useState(null);
 
     let id = asset?.sys?.id;
-    let title = asset?.fields?.title?.["en-US"] || asset?.fields?.title?.["de"] || asset?.fields?.title?.toString();
-    let space = asset?.sys?.space?.sys?.id;
-    let environment = asset?.sys?.environment?.sys?.id;
+    let title = asset?.fields?.title?.["en-US"] || asset?.fields?.title?.["de"] || asset?.fields?.title?.toString() || asset?.title?.toString();
     let mediaAssetId = asset?.fields?.media?.["en-US"]?.sys?.id || asset?.fields?.media?.["de"]?.sys?.id || asset?.fields?.media?.sys?.id;
-    let href = `https://app.contentful.com/spaces/${space}/environments/${environment}/entries/${id}`;
 
     if (cloudinary) {
         title = asset.public_id;
-        href = asset.url;
     }
 
     useEffect(() => {
@@ -85,6 +101,15 @@ export const Asset = ({
         }
 
         if (!mediaAssetId) {
+            if (asset?.media?.url) {
+                let params = new URLSearchParams({
+                    w: "512",
+                    q: "80",
+                });
+
+                setMediaUrl(`${asset?.media?.url}?${params}`);
+            }
+
             return;
         }
 
@@ -107,6 +132,22 @@ export const Asset = ({
         return null;
     }
 
+    let assetType = "image";
+
+    if (title?.endsWith(".mp3")) {
+        assetType = "audio";
+    }
+
+    const renderMedia = () => {
+        switch (assetType) {
+            case "audio":
+                return <audio src={mediaUrl} className="mt-2 w-full" controls />;
+            case "image":
+            default:
+                return <img src={mediaUrl} width="100%" className="mt-2 rounded-md" />;
+        }
+    };
+
     return (
         <div className="flex flex-col">
             <div className="flex">
@@ -120,13 +161,20 @@ export const Asset = ({
                             <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">Asset</IconButton>
-                    </a>
+                    <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>
-            {!!mediaUrl && <img src={mediaUrl} width="100%" className="mt-2 rounded-md" />}
+            {!!mediaUrl && renderMedia()}
         </div>
     );
 };

package/src/SidebarEditor/SidebarEditorField.js

@@ -122,8 +122,8 @@ export const SidebarEditorField = ({
             case "object":
                 return (
                     <textarea
-                        value={value || ""}
-                        onChange={e => onChange(fieldKey, e.target.value)} />
+                        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)} />
                 );
             case "radio":
                 return (
@@ -219,7 +219,7 @@ export const SidebarEditorField = ({
             case "contentful-content":
                 return (
                     <>
-                        {!!value && <div className="mb-2"><Asset sdk={sdk} asset={value} onDeleteClick={() => onChange(fieldKey, null)} /></div>}
+                        {!!value && <div className="mb-2"><Asset sdk={sdk} asset={value} onDeleteClick={() => onChange(fieldKey, null)} onChange={v => onChange(fieldKey, v)} /></div>}
                         <button
                             onClick={() => {
                                 sdk.dialogs.selectSingleEntry({contentTypes: field.control.contentTypes}).then(content => {
@@ -379,8 +379,17 @@ export const SidebarEditorField = ({
 
     return (
         <div key={`${field.name}`} className="mb-2">
-            <label className="block">{field.name}</label>
+            <label className="block">{field.name || fieldKey}</label>
             {inputField}
         </div>
     );
+};
+
+const isJson = (str) => {
+    try {
+        JSON.parse(str);
+    } catch (e) {
+        return false;
+    }
+    return true;
 };

package/src/SidebarEditor.js

@@ -5,6 +5,8 @@ import {SidebarEditorField} from "./SidebarEditor/SidebarEditorField";
 import {ToolMargin} from "./Tools/Margin";
 
 import "../scss/sidebarEditor.scss";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faSpinner} from "@fortawesome/free-solid-svg-icons";
 
 const SidebarEditor = ({
     sdk,
@@ -15,6 +17,7 @@ const SidebarEditor = ({
     onDelete,
     onMove,
     editor,
+    isLoading,
 }) => {
     const [versions, setVersions] = useState([]);
     const [lastChangedProperty, setLastChangedProperty] = useState(null);
@@ -26,7 +29,7 @@ const SidebarEditor = ({
         tables: {},
     };
 
-    const story = storybookStories.find(v => storybookElement.block === v.id);
+    const story = storybookStories?.find(v => storybookElement.block?.toLowerCase() === v.id?.toLowerCase());
 
     if (story) {
         Object.keys(story.argTypes).forEach(key => {
@@ -165,99 +168,107 @@ const SidebarEditor = ({
 
     return (
         <div id="sidebar-editor">
-            <div>
-                <div className="flex items-center justify-end">
-                    <div className="grow">
-                        {storybookElement?.block && (
-                            <div className="flex items-center">
-                                <div className="icon-button-group mr-1">
-                                    <IconButton title="Rückgängig" onClick={undo} disabled={currentVersion <= 1}>↺</IconButton>
-                                    <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")} disabled={storybookElement.path[0] === 0}>
+            {isLoading ? (
+                <div className="text-center">
+                    <FontAwesomeIcon icon={faSpinner} pulse />
+                </div>
+            ) : (
+                <>
+                    <div>
+                        <div className="flex items-center justify-end">
+                            <div className="grow">
+                                {storybookElement?.block && (
+                                    <div className="flex items-center">
+                                        <div className="icon-button-group mr-1">
+                                            <IconButton title="Rückgängig" onClick={undo} disabled={currentVersion <= 1}>↺</IconButton>
+                                            <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")} disabled={storybookElement.path[0] === 0}>
                                         ↑
-                                    </IconButton>
-                                    <IconButton title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")} disabled={storybookElement.path[0] === editor.children.length - 1}>
+                                            </IconButton>
+                                            <IconButton title="Nach unten verschieben" onClick={() => onMove && onMove(storybookElement, "down")} disabled={storybookElement.path[0] === editor.children.length - 1}>
                                         ↓
-                                    </IconButton>
-                                </div>
-                                <IconButton title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
+                                            </IconButton>
+                                        </div>
+                                        <IconButton title="Löschen" onClick={() => onDelete && onDelete(storybookElement)}>
                                 🗑
-                                </IconButton>
-                                <div className="ml-1 flex items-center">
-                                    <ToolMargin
-                                        margin={storybookElement.attributes.margin}
-                                        onChange={value => handleFieldValueChange("margin", value)} />
-                                </div>
+                                        </IconButton>
+                                        <div className="ml-1 flex items-center">
+                                            <ToolMargin
+                                                margin={storybookElement.attributes.margin}
+                                                onChange={value => handleFieldValueChange("margin", value)} />
+                                        </div>
+                                    </div>
+                                )}
                             </div>
-                        )}
+                            {!!onClose && <IconButton onClick={onClose} title="Schließen">⨯</IconButton>}
+                        </div>
+                        <hr className="mt-2" style={{borderColor: "#cfd9e0"}}/>
                     </div>
-                    {!!onClose && <IconButton onClick={onClose} title="Schließen">⨯</IconButton>}
-                </div>
-                <hr className="mt-2" style={{borderColor: "#cfd9e0"}}/>
-            </div>
-            <div className="grow overflow-y-auto pr-2 pt-2">
-                <div className="mb-2">
-                    <BlockSelect stories={storybookStories} active={storybookElement} onChange={handleBlockSelectChange} />
-                </div>
-                {storybookElement?.block && (
-                    <div>
-                        <div className="mb-2 grid grid-flow-col grid-cols-2 gap-2">
-                            <VariantSelect className="w-full" story={story} onChange={handleVariantSelectChange} />
-                            <BlockWidthSelect className="w-full" value={storybookElement.attributes.blockWidth} onChange={e => handleFieldValueChange("blockWidth", e.target.value)} />
+                    <div className="grow overflow-y-auto pr-2 pt-2">
+                        <div className="mb-2">
+                            <BlockSelect stories={storybookStories} active={storybookElement} onChange={handleBlockSelectChange} />
                         </div>
-                        <hr className="my-4" style={{borderColor: "#cfd9e0"}}/>
+                        {storybookElement?.block && (
+                            <div>
+                                <div className="mb-2 grid grid-flow-col grid-cols-2 gap-2">
+                                    <VariantSelect className="w-full" story={story} onChange={handleVariantSelectChange} />
+                                    <BlockWidthSelect className="w-full" value={storybookElement.attributes.blockWidth} onChange={e => handleFieldValueChange("blockWidth", e.target.value)} />
+                                </div>
+                                <hr className="my-4" style={{borderColor: "#cfd9e0"}}/>
+                            </div>
+                        )}
+                        {!!story && (
+                            <>
+                                {Object.keys(fields.fields).map(key => {
+                                    const field = fields.fields[key];
+
+                                    return <SidebarEditorField
+                                        sdk={sdk}
+                                        value={storybookElement?.attributes?.[key]}
+                                        key={key}
+                                        storybookElement={storybookElement}
+                                        fieldKey={key}
+                                        field={field}
+                                        onChange={(
+                                            key, value, mvpField, mvpIndex,
+                                        ) => handleFieldValueChange(
+                                            key, value, mvpField, mvpIndex,
+                                        )}
+                                    />;
+                                })}
+                                {Object.keys(fields.tables).map(tableKey => {
+                                    return (
+                                        <details key={`accordion-item-${tableKey}`} className="mb-2">
+                                            <summary>{tableKey}</summary>
+                                            <div className="mt-4">
+                                                {Object.keys(fields.tables[tableKey]).map(key => {
+                                                    const field = fields.tables[tableKey][key];
+
+                                                    return <SidebarEditorField
+                                                        sdk={sdk}
+                                                        value={storybookElement?.attributes?.[key]}
+                                                        key={key}
+                                                        fieldKey={key}
+                                                        story={storybookElement}
+                                                        field={field}
+                                                        onChange={(
+                                                            key, value, mvpField, mvpIndex,
+                                                        ) => handleFieldValueChange(
+                                                            key, value, mvpField, mvpIndex,
+                                                        )}
+                                                    />;
+                                                })}
+                                            </div>
+                                        </details>
+                                    );
+                                })}
+                            </>
+                        )}
                     </div>
-                )}
-                {!!story && (
-                    <>
-                        {Object.keys(fields.fields).map(key => {
-                            const field = fields.fields[key];
-
-                            return <SidebarEditorField
-                                sdk={sdk}
-                                value={storybookElement?.attributes?.[key]}
-                                key={key}
-                                storybookElement={storybookElement}
-                                fieldKey={key}
-                                field={field}
-                                onChange={(
-                                    key, value, mvpField, mvpIndex,
-                                ) => handleFieldValueChange(
-                                    key, value, mvpField, mvpIndex,
-                                )}
-                            />;
-                        })}
-                        {Object.keys(fields.tables).map(tableKey => {
-                            return (
-                                <details key={`accordion-item-${tableKey}`} className="mb-2">
-                                    <summary>{tableKey}</summary>
-                                    <div className="mt-4">
-                                        {Object.keys(fields.tables[tableKey]).map(key => {
-                                            const field = fields.tables[tableKey][key];
-
-                                            return <SidebarEditorField
-                                                sdk={sdk}
-                                                value={storybookElement?.attributes?.[key]}
-                                                key={key}
-                                                fieldKey={key}
-                                                story={storybookElement}
-                                                field={field}
-                                                onChange={(
-                                                    key, value, mvpField, mvpIndex,
-                                                ) => handleFieldValueChange(
-                                                    key, value, mvpField, mvpIndex,
-                                                )}
-                                            />;
-                                        })}
-                                    </div>
-                                </details>
-                            );
-                        })}
-                    </>
-                )}
-            </div>
+                </>
+            )}
         </div>
     );
 };
@@ -410,7 +421,7 @@ const BlockSelect = ({
 
         if (option.title && option.id) {
             return (
-                <option key={option.id} value={option.id}>
+                <option key={option.id} value={option.id.toLowerCase()}>
                     {option.shortTitle}
                 </option>
             );
@@ -433,8 +444,8 @@ const BlockSelect = ({
         <div className={className}>
             <label className="block">Element</label>
             <select
-                onChange={e => onSelectChange(stories.find(s => s.id === e.target.value))}
-                value={active?.block}
+                onChange={e => onSelectChange(stories.find(s => s.id?.toLowerCase() === e.target.value))}
+                value={active?.block?.toLowerCase()}
                 className="font-bold"
             >
                 <option>Element wählen</option>

package/src/Toolbar/Block.js

@@ -73,8 +73,23 @@ export const toggleBlock = (editor, format, attributes) => {
 
 export const isBlockActive = (editor, format, attributes) => {
     const {selection} = editor;
+
     if (selection) {
-        const selectedNodes = [editor.children[selection.anchor.path[0]]];
+        let selected = editor;
+
+        let reducedPath = selection.anchor.path.slice(0, -1);
+
+        for (let i = 0; i < reducedPath.length; i++) {
+            let path = reducedPath[i];
+
+            selected = selected.children[path];
+
+            if (LIST_TYPES.includes(selected.type)) {
+                break;
+            }
+        }
+
+        const selectedNodes = [selected];
 
         return !!selectedNodes.find(v => {
             if (Editor.isEditor(v)) {